@extends('layouts.app')

@section('title', 'Tickets')

@section('content')
    <!-- Breadcrumb -->
    <nav class="mb-4">
        <ol class="flex items-center space-x-2 text-sm text-gray-600">
            <li><a href="{{ url('dashboard') }}" class="hover:text-blue-600">Dashboard</a></li>
            <li>
                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </li>
            <li><a href="{{ route('tickets.index') }}" class="hover:text-blue-600">Tickets</a></li>
            <li>
                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </li>
            <li class="text-gray-900 font-medium">List</li>
        </ol>
    </nav>

    <!-- Overview Metrics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 flex items-center">
            <div class="p-3 bg-blue-50 rounded-full">
                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 002 2 2 2 0 010 4 2 2 0 00-2 2v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 00-2-2 2 2 0 010-4 2 2 0 002-2V7a2 2 0 00-2-2H5z"></path>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Total Tickets</p>
                <p class="text-2xl font-semibold text-gray-900" id="totalTicketsCard">0</p>
            </div>
        </div>

        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 flex items-center">
            <div class="p-3 bg-green-50 rounded-full">
                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Open Tickets</p>
                <p class="text-2xl font-semibold text-gray-900" id="openTicketsCard">0</p>
            </div>
        </div>

        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 flex items-center">
            <div class="p-3 bg-red-50 rounded-full">
                <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Closed Tickets</p>
                <p class="text-2xl font-semibold text-gray-900" id="closedTicketsCard">0</p>
            </div>
        </div>
    </div>

    <!-- Filters Bar -->
    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-6 flex flex-wrap gap-3 items-center justify-between">
        <div class="flex flex-wrap gap-3 items-center flex-1">
            <input type="text" id="filterType" placeholder="Filter by ticket type..." class="px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 w-full md:w-1/3">

            <select id="filterStatus" class="px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
                <option value="">All Statuses</option>
                <option value="open">Open</option>
                <option value="closed">Closed</option>
            </select>

            <button id="btnFilter" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 transition">Filter</button>
            <button id="btnReset" class="px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-200 transition">Reset</button>
        </div>

        <div class="flex items-center space-x-3">
            <div class="flex items-center space-x-1">
                <label for="perPage" class="text-xs text-gray-500">Show:</label>
                <select id="perPage" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-1 focus:ring-indigo-500">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                </select>
            </div>

            <a href="{{ route('tickets.create') }}" class="inline-flex items-center px-3 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 transition">
                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Add Ticket
            </a>
        </div>
    </div>

    <!-- Table Container -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 text-sm">
                <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">SL</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Event Name</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Ticket Type</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Price</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Created Date</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
                </thead>
                <tbody id="ticketTableBody" class="bg-white divide-y divide-gray-200">
                <!-- Dynamic Rows -->
                </tbody>
            </table>
        </div>

        <!-- Table Footer / Pagination -->
        <div class="px-4 py-3 bg-gray-50 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-3">
            <p id="paginationInfo" class="text-xs text-gray-600">Showing 0 to 0 of 0 entries</p>
            <div id="pagination" class="flex items-center space-x-1"></div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let currentPage = 1;

        function renderStatusBadge(status) {
            const rawStatus = status?.toString().toLowerCase() ?? '';
            const isOpen = rawStatus === 'active' || rawStatus === 'available';
            const style = isOpen ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800';
            const label = isOpen ? 'Open' : 'Closed';
            return `<span class="px-2 py-0.5 text-xs font-medium rounded-full ${style}">${label}</span>`;
        }

        function formatCurrency(val) {
            if (val === null || val === undefined) return '-';
            const num = parseFloat(val);
            return isNaN(num) ? val : '$' + num.toFixed(2);
        }

        function formatDate(dateStr) {
            if (!dateStr) return '-';
            const date = new Date(dateStr);
            return isNaN(date.getTime()) ? dateStr : date.toLocaleDateString();
        }

        function loadTickets(page = 1) {
            currentPage = page;

            let filters = {
                ticket_type: $('#filterType').val(),
                ticket_status: $('#filterStatus').val(),
                page: currentPage,
                perPage: $('#perPage').val()
            };

            $.get('{{ route("tickets.data") }}', filters, function(res) {
                // 1. Update Metrics Cards
                if (res.metrics) {
                    $('#totalTicketsCard').text(res.metrics.total);
                    $('#openTicketsCard').text(res.metrics.open);
                    $('#closedTicketsCard').text(res.metrics.closed);
                }

                const ticketsData = res.tickets;
                let tbody = '';

                // 2. Render Rows
                if (!ticketsData.data || ticketsData.data.length === 0) {
                    tbody = `<tr><td colspan="6" class="text-center py-6 text-gray-500">No tickets found matching your criteria.</td></tr>`;
                } else {
                    ticketsData.data.forEach((ticket, index) => {
                        const sl = (ticketsData.current_page - 1) * ticketsData.per_page + index + 1;
                        const statusVal = ticket.ticket_status ?? ticket.status;

                        tbody += `
                            <tr class="hover:bg-gray-50 transition">
                                <td class="px-4 py-3 text-xs font-mono text-gray-500">${sl}</td>
                                <td class="px-4 py-3 text-xs font-medium text-gray-900">${ticket.event_name}</td>
                                <td class="px-4 py-3 text-xs font-medium text-gray-900">${ticket.ticket_type}</td>
                                <td class="px-4 py-3 text-xs font-mono text-gray-700">${formatCurrency(ticket.price)}</td>
                                <td class="px-4 py-3 text-xs">${renderStatusBadge(statusVal)}</td>
                                <td class="px-4 py-3 text-xs text-gray-500">${formatDate(ticket.created_date ?? ticket.created_at)}</td>
                                <td class="px-4 py-3 text-xs text-right space-x-2">
                                    <button class="text-indigo-600 hover:text-indigo-900 font-medium" onclick="editTicket(${ticket.ticket_id ?? ticket.id})">Edit</button>
                                    <button class="text-red-600 hover:text-red-900 font-medium" onclick="deleteTicket(${ticket.ticket_id ?? ticket.id})">Delete</button>
                                </td>
                            </tr>`;
                    });
                }
                $('#ticketTableBody').html(tbody);

                // 3. Render Pagination Info
                const from = ticketsData.from ?? 0;
                const to = ticketsData.to ?? 0;
                const total = ticketsData.total ?? 0;
                $('#paginationInfo').text(`Showing ${from} to ${to} of ${total} entries`);

                // 4. Render Pagination Controls
                let paginationHtml = '';
                if (ticketsData.last_page > 1) {
                    // Previous
                    paginationHtml += `<button onclick="loadTickets(${ticketsData.current_page - 1})"
                        class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium ${ticketsData.current_page === 1 ? 'opacity-50 cursor-not-allowed text-gray-400' : 'hover:bg-gray-100 text-gray-700'}"
                        ${ticketsData.current_page === 1 ? 'disabled' : ''}>&laquo;</button>`;

                    // Page Buttons
                    for (let i = 1; i <= ticketsData.last_page; i++) {
                        const isActive = i === ticketsData.current_page;
                        paginationHtml += `<button onclick="loadTickets(${i})"
                            class="px-3 py-1 border text-xs font-medium rounded-md ${isActive ? 'bg-indigo-600 text-white border-indigo-600' : 'border-gray-300 hover:bg-gray-100 text-gray-700'}">${i}</button>`;
                    }

                    // Next
                    paginationHtml += `<button onclick="loadTickets(${ticketsData.current_page + 1})"
                        class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium ${ticketsData.current_page === ticketsData.last_page ? 'opacity-50 cursor-not-allowed text-gray-400' : 'hover:bg-gray-100 text-gray-700'}"
                        ${ticketsData.current_page === ticketsData.last_page ? 'disabled' : ''}>&raquo;</button>`;
                }
                $('#pagination').html(paginationHtml);
            });
        }

        $(document).ready(function() {
            // Filter click
            $('#btnFilter').on('click', function() {
                loadTickets(1);
            });

            // Filter on Enter key
            $('#filterType').on('keypress', function(e) {
                if (e.which === 13) loadTickets(1);
            });

            // Per Page change
            $('#perPage').on('change', function() {
                loadTickets(1);
            });

            // Reset filters
            $('#btnReset').on('click', function() {
                $('#filterType').val('');
                $('#filterStatus').val('');
                loadTickets(1);
            });

            // Initial Load
            loadTickets();
        });

        // Actions
        function editTicket(id) {
            window.location.href = `/tickets/${id}/edit`;
        }

        function deleteTicket(id) {
            Swal.fire({
                title: 'Are you sure?',
                text: "This ticket will be permanently deleted.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '/tickets/' + id,
                        type: 'DELETE',
                        data: { _token: '{{ csrf_token() }}' },
                        success: function(res) {
                            if (res.success) {
                                Swal.fire('Deleted!', res.message || 'Ticket deleted successfully.', 'success');
                                loadTickets(currentPage);
                            } else {
                                Swal.fire('Error!', res.message || 'Action failed.', 'error');
                            }
                        },
                        error: function() {
                            Swal.fire('Error!', 'Something went wrong on the server.', 'error');
                        }
                    });
                }
            });
        }
    </script>
@endpush