@extends('layouts.app')

@section('title', 'Bookings')

@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" 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="#" class="hover:text-blue-600">Bookings</a></li>
            <li>
                <svg class="w-4 h-4" 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">View</li>
        </ol>
    </nav>

    <!-- Overview Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
        <div class="bg-white p-4 rounded shadow flex items-center">
            <div class="p-2 bg-blue-100 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Total Bookings</p>
                <p class="text-2xl font-bold text-gray-900" id="totalBookingsCard">0</p>
            </div>
        </div>

        <div class="bg-white p-4 rounded shadow flex items-center">
            <div class="p-2 bg-green-100 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"/>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Active</p>
                <p class="text-2xl font-bold text-gray-900" id="activeBookingsCard">0</p>
            </div>
        </div>

        <div class="bg-white p-4 rounded shadow flex items-center">
            <div class="p-2 bg-red-100 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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Closed</p>
                <p class="text-2xl font-bold text-gray-900" id="closedBookingsCard">0</p>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white p-4 mb-4 flex justify-between items-center">
        <div class="flex space-x-2 items-center">
            <input type="text" id="filterUser" placeholder="User Name" class="px-2 py-1 border rounded w-1/4">
            <input type="text" id="filterEvent" placeholder="Event Name" class="px-2 py-1 border rounded w-1/4">
            <select id="filterStatus" class="px-2 py-1 border rounded">
                <option value="">All Status</option>
                <option value="active">Active</option>
                <option value="inactive">Closed</option>
            </select>
            <select id="filterPaymentStatus" class="px-2 py-1 border rounded">
                <option value="">All Payments</option>
                <option value="paid">Paid</option>
                <option value="pending">Pending</option>
            </select>
            <button id="btnFilter" class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700">Filter</button>
        </div>

        <!-- Add Booking button -->
        <a href="{{ route('bookings.create') }}"
           class="flex items-center px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 text-xs">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            Add Booking
        </a>
    </div>

    <p id="totalRecords" class="mb-2 text-sm text-gray-600">Total: 0</p>

    <!-- Table -->
    <div class="overflow-x-auto bg-white p-4 rounded shadow">
        <table class="min-w-full text-xs">
            <thead class="bg-gray-50">
            <tr>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">SL</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">User</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Event</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Tickets</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Total Amount</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Payment Status</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Booking Date</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Status</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Actions</th>
            </tr>
            </thead>
            <tbody id="bookingTableBody" class="bg-white divide-y divide-gray-200"></tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-3 flex justify-between items-center">
        <div id="pagination" class="flex space-x-1"></div>
        <div class="text-sm text-gray-500" id="paginationInfo"></div>
    </div>
@endsection

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

        $(document).ready(function() {
            function loadBookings(page = 1) {
                currentPage = page;
                let filters = {
                    user_name: $('#filterUser').val(),
                    event_name: $('#filterEvent').val(),
                    status: $('#filterStatus').val(),
                    payment_status: $('#filterPaymentStatus').val(),
                    page: currentPage,
                    perPage: perPage
                };

                $.get('{{ route("bookings.data") }}', filters, function(res) {
                    let tbody = '';
                    res.data.forEach((booking, index) => {
                        let ticketsList = booking.booking_details.map(d => `${d.ticket.ticket_type} x${d.quantity}`).join(', ');
                        tbody += `<tr>
                        <td class="px-2 py-2 text-xs">${(currentPage-1)*perPage + index + 1}</td>
                        <td class="px-2 py-2 text-xs">${booking.user.full_name}</td>
                        <td class="px-2 py-2 text-xs">${booking.event.title}</td>
                        <td class="px-2 py-2 text-xs">${ticketsList}</td>
                        <td class="px-2 py-2 text-xs">${booking.total_amount}</td>
                        <td class="px-2 py-2 text-xs">${booking.payment_status}</td>
                        <td class="px-2 py-2 text-xs">${booking.booking_date}</td>
                        <td class="px-2 py-2 text-xs">${booking.status}</td>
                        <td class="px-2 py-2 text-xs">
                            <button class="text-blue-600 hover:text-blue-900" onclick="editBooking(${booking.booking_id})">Edit</button>
                            <button class="ml-2 text-red-600 hover:text-red-900" onclick="deleteBooking(${booking.booking_id})">Delete</button>
                        </td>
                    </tr>`;
                    });
                    $('#bookingTableBody').html(tbody);
                    $('#totalRecords').text('Total: ' + res.total);

                    // Update summary cards
                    $('#totalBookingsCard').text(res.total);
                    $('#activeBookingsCard').text(res.counts.active);
                    $('#closedBookingsCard').text(res.counts.inactive);

                    // Pagination
                    let pagination = '';
                    if (res.currentPage > 1) {
                        pagination += `<button onclick="loadBookings(${res.currentPage-1})" class="px-2 py-1 border rounded">&laquo;</button>`;
                    }
                    for (let i=1; i<=res.lastPage; i++) {
                        pagination += `<button onclick="loadBookings(${i})" class="px-2 py-1 border rounded ${i === res.currentPage ? 'bg-indigo-600 text-white' : ''}">${i}</button>`;
                    }
                    if (res.currentPage < res.lastPage) {
                        pagination += `<button onclick="loadBookings(${res.currentPage+1})" class="px-2 py-1 border rounded">&raquo;</button>`;
                    }
                    $('#pagination').html(pagination);
                });
            }

            $('#btnFilter').on('click', function() {
                loadBookings(1);
            });

            loadBookings();
        });

        function editBooking(id) {
            window.location.href = `/bookings/${id}/edit`;
        }

        function deleteBooking(id) {
            Swal.fire({
                title: 'Are you sure?',
                text: "This booking will be permanently deleted.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '/bookings/' + id,
                        type: 'DELETE',
                        data: { _token: '{{ csrf_token() }}' },
                        success: function(res) {
                            if (res.success) {
                                Swal.fire('Deleted!', res.message, 'success');
                                loadBookings(currentPage);
                            } else {
                                Swal.fire('Error!', res.message, 'error');
                            }
                        },
                        error: function() {
                            Swal.fire('Error!', 'Something went wrong!', 'error');
                        }
                    });
                }
            });
        }
    </script>
@endpush