@extends('layout')

@push('styles')
    <style>
        .delete-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease;
            z-index: 2000;
        }

        .delete-modal-content {
            background: #fff;
            padding: 25px;
            border-radius: 8px;
            text-align: center;
            width: 350px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            animation: scaleIn 0.3s ease;
        }

        .delete-modal-actions {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
        }

        .btn-cancel,
        .btn-delete {
            padding: 8px 18px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .btn-cancel {
            background: #ccc;
        }

        .btn-delete {
            background: #e63946;
            color: #fff;
        }



        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes scaleIn {
            from {
                transform: scale(0.9);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }
    </style>
@endpush

@section('content')
    @if (session('success'))
        <div id="customSuccessModal" onclick="overlayClick(event)" style="display:flex; position:fixed; top:0; left:0; width:100%; height:100%;
                                        background:rgba(0,0,0,0.4); justify-content:center; align-items:center;
                                        z-index:9999; opacity:0; transition:opacity 0.4s ease;">
            <div id="popupContent" style="background:#fff; padding:25px; border-radius:12px; width:380px;
                                            text-align:center; box-shadow:0 5px 25px rgba(0,0,0,0.4);
                                            position:relative; transform:scale(0.7); transition:transform 0.4s ease;">
                <span onclick="closePopup()" style="position:absolute; top:10px; right:15px; font-size:20px;
                                                 cursor:pointer; font-weight:bold;">&times;</span>
                <h3 style="margin-bottom:10px; color:#2ecc71; font-size:22px;">{{ __('Success!') }}</h3>
                <p style="margin:0; font-size:16px; color:#333;">{{ session('success') }}</p>
            </div>
        </div>

        <script>
            function openPopup() {
                let modal = document.getElementById('customSuccessModal');
                let content = document.getElementById('popupContent');
                modal.style.opacity = '1';
                content.style.transform = 'scale(1)';
            }

            function closePopup() {
                let modal = document.getElementById('customSuccessModal');
                let content = document.getElementById('popupContent');
                modal.style.opacity = '0';
                content.style.transform = 'scale(0.7)';
                setTimeout(() => {
                    modal.style.display = 'none';
                }, 400);
            }
            function overlayClick(e) {
                let content = document.getElementById('popupContent');
                if (!content.contains(e.target)) {
                    closePopup();
                }
            }
            window.onload = function () {
                setTimeout(openPopup, 100);
            };
        </script>
    @endif





    @if (session('error'))
        <div id="customSuccessModal" onclick="overlayClick(event)" style="display:flex; position:fixed; top:0; left:0; width:100%; height:100%;
                                        background:rgba(0,0,0,0.4); justify-content:center; align-items:center;
                                        z-index:9999; opacity:0; transition:opacity 0.4s ease;">
            <div id="popupContent" style="background:#fff; padding:25px; border-radius:12px; width:380px;
                                            text-align:center; box-shadow:0 5px 25px rgba(0,0,0,0.4);
                                            position:relative; transform:scale(0.7); transition:transform 0.4s ease;">
                <span onclick="closePopup()" style="position:absolute; top:10px; right:15px; font-size:20px;
                                                 cursor:pointer; font-weight:bold;">&times;</span>
                <h3 style="margin-bottom:10px; color:#cc332e; font-size:22px;">{{ __('Error!') }}</h3>
                <p style="margin:0; font-size:16px; color:#333;">{{ session('error') }}</p>
            </div>
        </div>

        <script>
            function openPopup() {
                let modal = document.getElementById('customSuccessModal');
                let content = document.getElementById('popupContent');
                modal.style.opacity = '1';
                content.style.transform = 'scale(1)';
            }

            function closePopup() {
                let modal = document.getElementById('customSuccessModal');
                let content = document.getElementById('popupContent');
                modal.style.opacity = '0';
                content.style.transform = 'scale(0.7)';
                setTimeout(() => {
                    modal.style.display = 'none';
                }, 400);
            }
            function overlayClick(e) {
                let content = document.getElementById('popupContent');
                if (!content.contains(e.target)) {
                    closePopup();
                }
            }
            window.onload = function () {
                setTimeout(openPopup, 100);
            };
        </script>
    @endif







    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">{{ __('Bookings') }}</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a></li>
                    <li><a href="#">{{ __('Bookings') }}</a></li>
                </ul>
            </div>
        </div>

        <div class="dashboard_main-body">
            <div class="dashboard_main-card">
                <div class="table-header">
                    <h2 class="table-title">{{ __('Overview') }}</h2>
                    <div class="table-bulk_actions">
                        <button class="table-bulk_btn">
                            <img loading="lazy" src="{{ asset('assets/images/icons/action.svg') }}" alt="icon"
                                class="svg" />
                        </button>
                    </div>
                </div>

                <div class="table-body">
                    <div class="table_tabs-content">





                        <div class="table-tabs">
                            @php
                                $currentStatus = request('order_status', 'all');
                            @endphp

                            <button type="button" class="{{ $currentStatus === 'all' ? 'active' : '' }}" data-status="all">
                                {{ __('All Booking') }}
                            </button>
                            <button type="button" class="{{ $currentStatus === 'Confirmed' ? 'active' : '' }}"
                                data-status="Confirmed">
                                {{ __('Confirmed') }}
                            </button>
                            <button type="button" class="{{ $currentStatus === 'Pending' ? 'active' : '' }}"
                                data-status="Pending">
                                {{ __('Pending') }}
                            </button>
                            <button type="button" class="{{ $currentStatus === 'Checked-in' ? 'active' : '' }}"
                                data-status="Checked-in">
                                {{ __('Check In') }}
                            </button>
                            <button type="button" class="{{ $currentStatus === 'Cancelled' ? 'active' : '' }}"
                                data-status="Cancelled">
                                {{ __('Cancelled') }}
                            </button>


                            <button type="button" class="{{ $currentStatus === 'Refunded' ? 'active' : '' }}"
                                data-status="Refunded">
                                {{ __('Refunded') }}
                            </button>

                        </div>
                    </div>
                    <script>
                        document.querySelectorAll('.table-tabs button').forEach(btn => {
                            btn.addEventListener('click', function () {
                                // Update hidden input for order_status inside your form
                                let form = document.getElementById('filtersForm');
                                let hiddenInput = form.querySelector('input[name="order_status"]');

                                // If the input doesn't exist yet, create it
                                if (!hiddenInput) {
                                    hiddenInput = document.createElement('input');
                                    hiddenInput.type = 'hidden';
                                    hiddenInput.name = 'order_status';
                                    form.appendChild(hiddenInput);
                                }

                                // Set the selected status value
                                hiddenInput.value = this.getAttribute('data-status');

                                // Submit the form
                                form.submit();
                            });
                        });
                    </script>







                    {{-- Filters Row (search, sort, date) --}}
                    <div class="table-top_filters"
                        style="margin:10px; display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; padding: 0 1rem 1rem;">

                        <form id="filtersForm" action="{{ route('bookings.index') }}" method="GET"
                            style="display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; width:100%;">


                            <input type="hidden" name="order_status" value="{{ request('order_status', 'all') }}">



                            {{-- Search --}}
                            <input type="search" name="q" id="searchInput" class="table-search_input"
                                placeholder="{{ __('Search by ID, name, phone, or email') }}" value="{{ request('q') }}"
                                style="padding:0.5rem 0.75rem; padding-left:2.5rem; flex:1 1 220px; min-width:200px;" />

                            {{-- Order Status --}}
                            {{-- <select name="order_status" id="orderStatusSelect" class="table-sort_select"
                                onchange="document.getElementById('filtersForm').submit()"
                                style="padding:0.5rem; flex:1 1 160px; min-width:160px;">
                                <option value="all" {{ request('order_status', 'all' )==='all' ? 'selected' : '' }}>All
                                    Orders</option>
                                <option value="Pending" {{ request('order_status')==='Pending' ? 'selected' : '' }}>
                                    Pending</option>
                                <option value="Confirmed" {{ request('order_status')==='Confirmed' ? 'selected' : '' }}>
                                    Confirmed</option>
                                <option value="Checked-in" {{ request('order_status')==='Checked-in' ? 'selected' : '' }}>
                                    Checked-in</option>
                                <option value="Cancelled" {{ request('order_status')==='Cancelled' ? 'selected' : '' }}>
                                    Cancelled</option>
                                <option value="Refunded" {{ request('order_status')==='Refunded' ? 'selected' : '' }}>
                                    Refunded</option>
                            </select> --}}

                            {{-- Payment Status --}}
                            <select name="payment_status" id="paymentStatusSelect" class="table-sort_select"
                                onchange="document.getElementById('filtersForm').submit()"
                                style="padding:0.5rem; flex:1 1 160px; min-width:160px;">
                                <option value="all" {{ request('payment_status', 'all') === 'all' ? 'selected' : '' }}>
                                    {{ __('All Payments') }}
                                </option>
                                <option value="Pending" {{ request('payment_status') === 'Pending' ? 'selected' : '' }}>
                                    {{ __('Pending') }}
                                </option>
                                <option value="Paid" {{ request('payment_status') === 'Paid' ? 'selected' : '' }}>
                                    {{ __('Paid') }}
                                </option>
                                <option value="Failed" {{ request('payment_status') === 'Failed' ? 'selected' : '' }}>
                                    {{ __('Failed') }}
                                </option>

                                <option value="Cancelled" {{ request('payment_status') === 'Cancelled' ? 'selected' : '' }}>
                                    {{ __('Cancelled') }}
                                </option>

                                <option value="Refunded" {{ request('payment_status') === 'Refunded' ? 'selected' : '' }}>
                                    {{ __('Refunded') }}
                                </option>


                                <option value="Partially Refunded" {{ request('payment_status') === 'Partially Refunded' ? 'selected' : '' }}>
                                    {{ __('Partially Refunded') }}
                                </option>


                            </select>

                            {{-- Event (select by title, send event_id) --}}
                            <select name="event_id" id="eventSelect" class="table-sort_select"
                                onchange="document.getElementById('filtersForm').submit()"
                                style="padding:0.5rem; flex:1 1 200px; min-width:160px;">
                                <option value="">{{ __('All Events') }}</option>
                                @foreach ($events as $ev)
                                    <option value="{{ $ev->id }}" {{ request('event_id') == $ev->id ? 'selected' : '' }}>
                                        {{ $ev->title }}
                                    </option>
                                @endforeach
                            </select>

                            {{-- Date (Created At) --}}
                            {{-- <input type="date" name="date" id="dateFilter" class="table-date_input"
                                value="{{ request('date') }}" onchange="document.getElementById('filtersForm').submit()"
                                style="padding:0.35rem; flex:1 1 140px; min-width:140px;" /> --}}

                            {{-- Sort --}}
                            <select name="sort" id="sortSelect" class="table-sort_select"
                                onchange="document.getElementById('filtersForm').submit()"
                                style="padding:0.5rem; flex:1 1 140px; min-width:140px;">

                                <option value="" disabled {{ !request()->filled('sort') ? 'selected' : '' }}>
                                    {{ __('Sort By') }}
                                </option>

                                <option value="id" {{ request('sort') === 'id' ? 'selected' : '' }}>{{ __('Order ID') }}
                                </option>
                                <option value="first_name" {{ request('sort') === 'first_name' ? 'selected' : '' }}>
                                    {{ __('Customer Name') }}
                                </option>
                                <option value="order_status" {{ request('sort') === 'order_status' ? 'selected' : '' }}>
                                    {{ __('Order Status') }}
                                </option>
                                <option value="payment_status" {{ request('sort') === 'payment_status' ? 'selected' : '' }}>
                                    {{ __('Payment Status') }}
                                </option>
                            </select>

                            {{-- Direction --}}
                            <select name="direction" id="directionSelect" class="table-sort_select"
                                onchange="document.getElementById('filtersForm').submit()"
                                style="padding:0.5rem; flex:1 1 100px; min-width:100px;">
                                <option value="desc" {{ request('direction', 'desc') === 'desc' ? 'selected' : '' }}>
                                    {{ __('Desc') }}
                                </option>
                                <option value="asc" {{ request('direction') === 'asc' ? 'selected' : '' }}>{{ __('Asc') }}
                                </option>
                            </select>

                            {{-- Buttons --}}
                            <div style="display:flex; gap:0.5rem; flex:0 0 auto;">
                                <button type="submit" class="dashboard_main-btn">{{ __('Apply') }}</button>
                                <a href="{{ route('bookings.index') }}" class="dashboard_main-btn"
                                    style="background:#eee; color:#333; text-decoration:none; padding:0.45rem 0.75rem;">{{ __('Reset') }}</a>
                            </div>

                        </form>
                    </div>

                    {{-- Press Enter in search to submit --}}
                    <script>
                        document.getElementById('searchInput')?.addEventListener('keydown', function (e) {
                            if (e.key === 'Enter') {
                                e.preventDefault();
                                document.getElementById('filtersForm').submit();
                            }
                        });
                    </script>

                    <div class="table-content">
                        <div class="table-responsive">
                            <table class="table" id="dashboardTable">
                                <thead>
                                    <tr>
                                        <th style="width:40px;"><label class="table-checkbox"><input
                                                    type="checkbox" /></label></th>
                                        <th>{{ __('Booking ID') }}</th>
                                        <th>{{ __('Attendee Info') }}</th>
                                        <th>{{ __('Event/attend date') }}</th>
                                        <th>{{ __('Tickets Type/count') }}</th>
                                        <th>{{ __('total price') }}</th>
                                        <th>{{ __('Status') }}</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($orders as $order)
                                        <tr style="cursor: pointer;" class="clickable-row"
                                            data-url="{{ route('bookings.show', $order->id) }}">
                                            <td>
                                                <label class="table-checkbox">
                                                    <input type="checkbox" />
                                                </label>
                                            </td>
                                            <td>
                                                <div class="table-vendor">
                                                    <p class="text"><span class="id">BK-{{ $order->id }}</span>
                                                    </p>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="table-vendor">
                                                    <span class="img">
                                                        <img loading="lazy" src="{{ asset('assets/images/user.jpg') }}"
                                                            alt="user" class="img-cover" />
                                                    </span>
                                                    <p class="text">
                                                        {{ $order->first_name }} {{ $order->last_name }}
                                                        <span class="id">
                                                            <a href="tel:{{ $order->phone }}">{{ $order->phone }}</a>
                                                        </span>
                                                    </p>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="table-vendor">
                                                    <p class="text">
                                                        {{ optional($order->event)->title ?? 'N/A' }}
                                                        <span class="id">
                                                            {{ optional($order->event)->start_date->format('d M, Y') }}
                                                            at {{ optional($order->event)->start_time->format('h:i A') }}
                                                        </span>
                                                    </p>
                                                </div>
                                            </td>
                                            <td>
                                                @php
                                                    $ticketCount = $order->eventTickets->sum('pivot.quantity');
                                                    $ticketType = $order->eventTickets
                                                        ->pluck('pivot.ticket_type_title')
                                                        ->unique()
                                                        ->implode(', ');
                                                @endphp
                                                <div class="table-vendor">
                                                    <p class="text">
                                                        {{ $ticketType ?: '-' }}
                                                        <span class="id">{{ $ticketCount }} {{ __('Tickets') }}</span>
                                                    </p>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="table-payment">
                                                    <span
                                                        class="value">{{ $ticketCurrency }}{{ number_format($order->total) }}</span>
                                                    <span class="card">
                                                        {{ $order->payment_method }}
                                                        {{ $order->card_number ? '****' . substr($order->card_number, -4) : '-' }}
                                                    </span>
                                                    @php
                                                        // Normalize payment status
                                                        $validStatuses = [
                                                            \App\Enums\PaymentStatus::Pending->value,
                                                            \App\Enums\PaymentStatus::Paid->value,
                                                            \App\Enums\PaymentStatus::Failed->value,
                                                        ];

                                                        // Determine CSS class: fallback to 'failed' if invalid
                                                        $statusValue = $order->payment_status;
                                                        $statusClass = in_array($statusValue, $validStatuses)
                                                            ? strtolower(str_replace(' ', '', $statusValue))
                                                            : 'failed';
                                                    @endphp

                                                    <span class="table-status {{ $statusClass }}">
                                                        {{ __($statusValue) }}
                                                    </span>
                                                </div>
                                            </td>
                                            <td>
                                                @php
                                                    $statusValue = $order->order_status;

                                                    // Default CSS class: lowercase and remove spaces
                                                    $statusClass = strtolower(str_replace(' ', '', $statusValue));

                                                    // Handle special cases
                                                    if ($statusValue === 'Checked-In') {
                                                        $statusClass = 'checkin';
                                                    } elseif ($statusValue === 'Refunded') {
                                                        $statusClass = 'cancelled';
                                                    }
                                                @endphp

                                                <span class="table-status {{ $statusClass }}">
                                                    {{ __($statusValue) }}
                                                </span>
                                            </td>
                                            <td>
                                                <div class="table-item_actions" style="position: relative;">

                                                    {{-- Action Trigger --}}
                                                    <button type="button" class="table-item_btn action-toggle"
                                                        style="background:none; border:none; cursor:pointer;">
                                                        <img loading="lazy" src="{{ asset('assets/images/icons/action.svg') }}"
                                                            alt="actions" class="svg" />
                                                    </button>

                                                    {{-- Dropdown Menu --}}
                                                    <div class="action-menu">
                                                        {{-- <a href="{{ route('events.edit', $event->id) }}">
                                                            <i class="icon">
                                                                <img src="{{ asset('assets/images/icons/edit.svg') }}"
                                                                    alt="icon" class="svg" />
                                                            </i>
                                                            Edit
                                                        </a> --}}
                                                        @can('bookings.destroy')
                                                            <form action="{{ route('bookings.destroy', $order->id) }}" method="POST"
                                                                onsubmit="event.preventDefault(); openDeleteModal(this);">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit">
                                                                    <i class="icon">
                                                                        <img src="{{ asset('assets/images/icons/trash-alt.svg') }}"
                                                                            alt="icon" class="svg" />
                                                                    </i>
                                                                    {{ __('Delete') }}
                                                                </button>
                                                            </form>
                                                        @endcan
                                                    </div>




                                                    <!-- Delete Confirmation Modal -->
                                                    <div id="deleteModal" class="delete-modal">
                                                        <div class="delete-modal-content">
                                                            <h3>{{ __('Are you sure?') }}</h3>
                                                            <p>{{ __('This action cannot be undone.') }}</p>
                                                            <div class="delete-modal-actions">
                                                                <button class="btn-cancel"
                                                                    onclick="closeDeleteModal()">{{ __('Cancel') }}</button>
                                                                <button class="btn-delete"
                                                                    onclick="confirmDelete()">{{ __('Delete') }}</button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-center">{{ __('No bookings found.') }}</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="table-navigations">

                        {{-- Items per page dropdown --}}
                        <form method="GET" action="{{ route('bookings.index') }}">
                            @foreach (request()->except('per_page') as $key => $value)
                                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                            @endforeach
                            <select name="per_page" id="itemsCountSelect" class="table-count_select"
                                onchange="this.form.submit()">
                                <option value="10" {{ $perPage == 10 ? 'selected' : '' }}>10 {{ __('per page') }}</option>
                                <option value="20" {{ $perPage == 20 ? 'selected' : '' }}>20 {{ __('per page') }}</option>
                                <option value="30" {{ $perPage == 30 ? 'selected' : '' }}>30 {{ __('per page') }}</option>
                                <option value="50" {{ $perPage == 50 ? 'selected' : '' }}>50 {{ __('per page') }}</option>
                            </select>
                        </form>

                        {{-- Pagination Display --}}
                        <div class="table-paginations">
                            <p class="table-pagination">
                                {{ __('Page') }} <span>{{ $orders->currentPage() }}</span> {{ __('of') }}
                                <span>{{ $orders->lastPage() }}</span>
                            </p>

                            <div class="table-arrows">
                                {{-- Previous --}}
                                @if ($orders->onFirstPage())
                                    <button class="table-navigation disabled">
                                        <img src="{{ asset('assets/images/icons/angle_left.svg') }}" alt="icon" class="svg" />
                                    </button>
                                @else
                                    <a href="{{ $orders->previousPageUrl() }}" class="table-navigation">
                                        <img src="{{ asset('assets/images/icons/angle_left.svg') }}" alt="icon" class="svg" />
                                    </a>
                                @endif

                                {{-- Next --}}
                                @if ($orders->currentPage() == $orders->lastPage())
                                    <button class="table-navigation disabled">
                                        <img src="{{ asset('assets/images/icons/angle_right.svg') }}" alt="icon" class="svg" />
                                    </button>
                                @else
                                    <a href="{{ $orders->nextPageUrl() }}" class="table-navigation">
                                        <img src="{{ asset('assets/images/icons/angle_right.svg') }}" alt="icon" class="svg" />
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Press Enter in search to submit --}}
    <script>
        document.getElementById('searchInput')?.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                document.getElementById('filtersForm').submit();
            }
        });
    </script>

    {{-- Keep original delete modal JS --}}
    <script>
        document.addEventListener('click', function (e) {
            const toggle = e.target.closest('.action-toggle');
            const clickedFlyout = e.target.closest('.action-flyout') || e.target.closest('.action-menu');
            if (!toggle && clickedFlyout) return;
            if (!toggle) {
                document.querySelectorAll('.action-flyout').forEach(f => f.remove());
                return;
            }
            const existing = document.querySelectorAll('.action-flyout');
            existing.forEach(f => f.remove());
            const originalMenu = toggle.parentElement.querySelector('.action-menu');
            if (!originalMenu) return;
            const flyout = originalMenu.cloneNode(true);
            flyout.classList.add('action-flyout');
            flyout.style.display = 'block';
            flyout.style.position = 'absolute';
            document.body.appendChild(flyout);

            function place() {
                const rect = toggle.getBoundingClientRect();
                const fw = flyout.offsetWidth;
                const fh = flyout.offsetHeight;
                let top = rect.bottom + window.scrollY + 6;
                let left = rect.right + window.scrollX - fw;
                if (top + fh > window.scrollY + window.innerHeight) {
                    top = rect.top + window.scrollY - fh - 6;
                }
                if (left < window.scrollX + 6) left = rect.left + window.scrollX;
                flyout.style.top = top + 'px';
                flyout.style.left = left + 'px';
            }
            setTimeout(place, 0);
            const removeHandlers = () => {
                if (flyout && flyout.parentElement) flyout.remove();
                window.removeEventListener('resize', removeHandlers);
                window.removeEventListener('scroll', removeHandlers, true);
            };
            window.addEventListener('resize', removeHandlers);
            window.addEventListener('scroll', removeHandlers, true);
        });
    </script>

    <script>
        let deleteForm = null;

        function openDeleteModal(form) {
            deleteForm = form;
            document.getElementById('deleteModal').style.display = 'flex';
        }

        function closeDeleteModal() {
            document.getElementById('deleteModal').style.display = 'none';
        }

        function confirmDelete() {
            if (deleteForm) deleteForm.submit();
        }
    </script>




    <script>
        document.addEventListener('click', function (e) {

            // If clicking inside actions → do nothing
            if (e.target.closest('.table-item_actions')) {
                return;
            }

            // If clicking on a row
            const row = e.target.closest('.clickable-row');
            if (row) {
                window.location = row.dataset.url;
            }
        });
    </script>
@endsection