@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

    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">{{ __('Gate Tickets') }}</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li>
                        <a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a>
                    </li>
                    <li><a href="{{ route('order-items.index') }}">{{ __('Gate Tickets') }}</a></li>
                </ul>
            </div>
            <div class="dashboard_main-actions">
                @can('item-order.scanner')
                    <a href="{{ route('item-order.scanner') }}" class="dashboard_main-btn">{{ __('Barcode Scanner') }}</a>
                @endcan
            </div>
        </div>

        <div class="dashboard_main-body">
            <div class="dashboard_main-card">
                <div class="table-header">
                    <h2 class="table-title">{{ __('Overview') }}</h2>
                </div>

                {{-- Tabs / Filters based on Payment Status --}}
                <div class="table_tabs-content">
                    <div class="table-tabs">
                        @php
                            $baseQuery = request()->except(['page', 'payment_status']);
                            $paymentStatus = request('payment_status', 'all');
                        @endphp

                        <button data-filter="All" class="{{ $paymentStatus === 'all' ? 'active' : '' }}"
                            onclick="window.location='{{ route('order-items.index', array_merge($baseQuery, ['payment_status' => 'all'])) }}'">
                            {{ __('All') }}
                        </button>

                        <button data-filter="Pending" class="{{ $paymentStatus === 'Pending' ? 'active' : '' }}"
                            onclick="window.location='{{ route('order-items.index', array_merge($baseQuery, ['payment_status' => 'Pending'])) }}'">
                            {{ __('Pending') }}
                        </button>

                        <button data-filter="Paid" class="{{ $paymentStatus === 'paid' ? 'active' : '' }}"
                            onclick="window.location='{{ route('order-items.index', array_merge($baseQuery, ['payment_status' => 'paid'])) }}'">
                            {{ __('Paid') }}
                        </button>

                        <button data-filter="Failed" class="{{ $paymentStatus === 'Failed' ? 'active' : '' }}"
                            onclick="window.location='{{ route('order-items.index', array_merge($baseQuery, ['payment_status' => 'Failed'])) }}'">
                            {{ __('Failed') }}
                        </button>

                        <button data-filter="Cancelled" class="{{ $paymentStatus === 'Cancelled' ? 'active' : '' }}"
                            onclick="window.location='{{ route('order-items.index', array_merge($baseQuery, ['payment_status' => 'Cancelled'])) }}'">
                            {{ __('Cancelled') }}
                        </button>

                        <button data-filter="Refunded" class="{{ $paymentStatus === 'Refunded' ? 'active' : '' }}"
                            onclick="window.location='{{ route('order-items.index', array_merge($baseQuery, ['payment_status' => 'Refunded'])) }}'">
                            {{ __('Refunded') }}
                        </button>

                        {{-- <button data-filter="Partially Refunded"
                            class="{{ $paymentStatus === 'Partially Refunded' ? 'active' : '' }}"
                            onclick="window.location='{{ route('order-items.index', array_merge($baseQuery, ['payment_status' => 'Partially Refunded'])) }}'">
                            Partially Refunded
                        </button> --}}
                    </div>
                </div>



                {{-- Filters Row --}}
                <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('order-items.index') }}" method="GET"
                        style="display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; width:100%;">

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

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

                        {{-- Sort --}}
                        <select name="sort" id="sortSelect" class="table-sort_select"
                            onchange="document.getElementById('filtersForm').submit()"
                            style="padding:0.5rem; flex:1 1 120px; min-width:120px;">
                            <option value="">{{ __('Sort By') }}</option>
                            <option value="id" {{ request('sort') === 'id' ? 'selected' : '' }}>{{ __('ID') }}</option>
                            <option value="order_id" {{ request('sort') === 'order_id' ? 'selected' : '' }}>
                                {{ __('Order ID') }}
                            </option>
                            <option value="ticket_type_title" {{ request('sort') === 'ticket_type_title' ? 'selected' : '' }}>
                                {{ __('Ticket Type') }}</option>
                            <option value="price" {{ request('sort') === 'price' ? 'selected' : '' }}>{{ __('Price') }}
                            </option>
                            <option value="created_at" {{ request('sort') === 'created_at' ? 'selected' : '' }}>
                                {{ __('Created Date') }}</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>




                        {{-- 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 --}}
                        {{-- <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;" /> --}}


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

                {{-- Table --}}
                <div class="table-body">
                    <div class="table-content">
                        <div class="table-responsive">
                            <table class="table" id="dashboardTable" style="width:100%; border-collapse:collapse;">
                                <thead>
                                    <tr>
                                        <th style="width:40px;"><label class="table-checkbox"><input
                                                    type="checkbox" /></label></th>
                                        <th>{{ __('ID') }}</th>
                                        <th>{{ __('Order ID') }}</th>
                                        <th>{{ __('Ticket Type') }}</th>
                                        <th> {{ __('Event') }}</th>
                                        <th>{{ __('Price') }}</th>
                                        <th>{{ __('Barcode') }}</th>
                                        <th>{{ __('Customer Name') }}</th>
                                        <th>{{ __('Email') }}</th>
                                        <th style="width:80px;"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($orderItems as $item)
                                        <tr>
                                            <td>
                                                <label class="table-checkbox">
                                                    <input type="checkbox" />
                                                </label>
                                            </td>


                                            <td onclick="window.location='{{ route('order-items.show', $item->id) }}'"
                                                style="cursor: pointer;">
                                                <div class="table-vendor">
                                                    <p class="text">
                                                        #{{ $item->id }}
                                                    </p>
                                                </div>
                                            </td>

                                            <td>
                                                <div class="table-vendor">
                                                    <p class="text">
                                                        {{ __('Order #') }}{{ $item->order_id }}
                                                    </p>
                                                </div>
                                            </td>
                                            <td>{{ $item->ticket_type_title }}</td>
                                            <td>{{ $item?->order?->event?->title }}</td>

                                            {{-- <td>
                                                @php
                                                $paymentClass = match ($item->payment_status) {
                                                'paid' => 'active_status',
                                                'Pending' => 'pending',
                                                'Failed' => 'inactive',
                                                'Refunded' => 'inactive',
                                                default => 'inactive',
                                                };
                                                @endphp
                                                <span class="table-status {{ $paymentClass }}">
                                                    {{ ucfirst($item->payment_status ?? 'N/A') }}
                                                </span>
                                            </td> --}}
                                            <td>${{ number_format($item->price, 2) }}</td>
                                            </td>
                                            <td>
                                                @if ($item->bar_code)
                                                    <span class="barcode">{{ $item->bar_code }}</span>
                                                @else
                                                    <span class="muted">—</span>
                                                @endif
                                            </td>

                                            <td>{{ $item?->order?->first_name . ' ' . $item?->order?->last_name }}</td>
                                            <td>{{ $item?->order?->email }}</td>

                                            <td>
                                                <div class="table-item_actions" style="position: relative;">

                                                    <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>

                                                    <div class="action-menu">
                                                        @can('order_items.edit')
                                                            <a href="{{ route('order-items.edit', $item->id) }}">
                                                                <i class="icon">
                                                                    <img src="{{ asset('assets/images/icons/edit.svg') }}"
                                                                        alt="icon" class="svg" />
                                                                </i>
                                                                {{ __('Edit') }}
                                                            </a>
                                                        @endcan
                                                        @can('order_items.destroy')
                                                            <form action="{{ route('order-items.destroy', $item->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
                                                        {{-- @can('order_items.show')--}}
                                                        <a href="{{ route('order-items.show', $item->id) }}">
                                                            <i class="icon">
                                                                <img src="{{ asset('assets/images/icons/info.svg') }}"
                                                                    alt="icon" class="svg" />
                                                            </i>
                                                            {{ __('View Details') }}
                                                        </a>
                                                        {{-- @endcan--}}
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="12" style="text-align:center; padding:2rem;">
                                                {{ __('No order items found.') }}</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="table-navigations">
                        {{-- Items per page dropdown --}}
                        <form method="GET" action="{{ route('order-items.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>{{ $orderItems->currentPage() }}</span> {{ __('of') }}
                                <span>{{ $orderItems->lastPage() }}</span>
                            </p>

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

                                {{-- Next --}}
                                @if ($orderItems->currentPage() == $orderItems->lastPage())
                                    <button class="table-navigation disabled">
                                        <img src="{{ asset('assets/images/icons/angle_right.svg') }}" alt="icon" class="svg" />
                                    </button>
                                @else
                                    <a href="{{ $orderItems->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>

    <!-- 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>

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

        // Action menu flyout functionality
        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);
        });

        // Delete modal functionality
        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>
@endsection