@extends('layouts.app')

@section('title', 'Venues')

@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">Venues</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 Venues</p>
                <p class="text-2xl font-bold text-gray-900" id="totalVenuesCard">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="activeVenuesCard">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">Inactive</p>
                <p class="text-2xl font-bold text-gray-900" id="inactiveVenuesCard">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="filterName" placeholder="Name" class="px-2 py-1 border rounded w-1/4">
            <input type="text" id="filterCity" placeholder="City" 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">Inactive</option>
            </select>
            <button id="btnFilter" class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700">Filter</button>
        </div>

        <!-- Add Venue button -->
        <a href="{{ route('venues.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 Venue
        </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">Name</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Address</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">City</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">State</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Capacity</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">Created Date</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Actions</th>
            </tr>
            </thead>
            <tbody id="venueTableBody" 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() {
            // Load Venues
            function loadVenues(page = 1) {
                currentPage = page;
                let filters = {
                    name: $('#filterName').val(),
                    city: $('#filterCity').val(),
                    status: $('#filterStatus').val(),
                    page: currentPage,
                    perPage: perPage
                };

                $.get('{{ route("venues.data") }}', filters, function(res) {
                    let tbody = '';
                    res.data.forEach((venue, index) => {
                        tbody += `<tr>
                        <td class="px-2 py-2 text-xs">${(currentPage-1)*perPage + index + 1}</td>
                        <td class="px-2 py-2 text-xs">${venue.name}</td>
                        <td class="px-2 py-2 text-xs">${venue.address}</td>
                        <td class="px-2 py-2 text-xs">${venue.city}</td>
                        <td class="px-2 py-2 text-xs">${venue.state}</td>
                        <td class="px-2 py-2 text-xs">${venue.capacity}</td>
                        <td class="px-2 py-2 text-xs">${venue.status}</td>
                        <td class="px-2 py-2 text-xs">${venue.created_date}</td>
                        <td class="px-2 py-2 text-xs">
                            <button class="text-blue-600 hover:text-blue-900" onclick="editVenue(${venue.venue_id})">Edit</button>
                            <button class="ml-2 text-red-600 hover:text-red-900" onclick="deleteVenue(${venue.venue_id})">Delete</button>
                        </td>
                    </tr>`;
                    });
                    $('#venueTableBody').html(tbody);
                    $('#totalRecords').text('Total: ' + res.total);

                    // Update summary cards
                    $('#totalVenuesCard').text(res.total);
                    $('#activeVenuesCard').text(res.active);
                    $('#inactiveVenuesCard').text(res.inactive);

                    // Pagination
                    let pagination = '';
                    if (res.currentPage > 1) {
                        pagination += `<button onclick="loadVenues(${res.currentPage-1})" class="px-2 py-1 border rounded">&laquo;</button>`;
                    }
                    for (let i=1; i<=res.lastPage; i++) {
                        pagination += `<button onclick="loadVenues(${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="loadVenues(${res.currentPage+1})" class="px-2 py-1 border rounded">&raquo;</button>`;
                    }
                    $('#pagination').html(pagination);
                });
            }

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

            // Initial load
            loadVenues();
        });

        // Edit
        function editVenue(id) {
            window.location.href = `/venues/${id}/edit`;
        }

        // Delete
        function deleteVenue(id) {
            Swal.fire({
                title: 'Are you sure?',
                text: "This venue 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: '/venues/' + id,
                        type: 'DELETE',
                        data: { _token: '{{ csrf_token() }}' },
                        success: function(res) {
                            if (res.success) {
                                Swal.fire('Deleted!', res.message, 'success');
                                loadVenues(currentPage);
                            } else {
                                Swal.fire('Error!', res.message, 'error');
                            }
                        },
                        error: function() {
                            Swal.fire('Error!', 'Something went wrong!', 'error');
                        }
                    });
                }
            });
        }

        // Make loadVenues global for pagination buttons
        function loadVenues(page = 1) {
            let filters = {
                name: $('#filterName').val(),
                city: $('#filterCity').val(),
                status: $('#filterStatus').val(),
                page: page,
                perPage: perPage
            };

            $.get('{{ route("venues.data") }}', filters, function(res) {
                let tbody = '';
                res.data.forEach((venue, index) => {
                    tbody += `<tr>
                    <td class="px-2 py-2 text-xs">${(page-1)*perPage + index + 1}</td>
                    <td class="px-2 py-2 text-xs">${venue.name}</td>
                    <td class="px-2 py-2 text-xs">${venue.address}</td>
                    <td class="px-2 py-2 text-xs">${venue.city}</td>
                    <td class="px-2 py-2 text-xs">${venue.state}</td>
                    <td class="px-2 py-2 text-xs">${venue.capacity}</td>
                    <td class="px-2 py-2 text-xs">${venue.status}</td>
                    <td class="px-2 py-2 text-xs">${venue.created_date}</td>
                    <td class="px-2 py-2 text-xs">
                        <button class="text-blue-600 hover:text-blue-900" onclick="editVenue(${venue.venue_id})">Edit</button>
                        <button class="ml-2 text-red-600 hover:text-red-900" onclick="deleteVenue(${venue.venue_id})">Delete</button>
                    </td>
                </tr>`;
                });
                $('#venueTableBody').html(tbody);
                $('#totalRecords').text('Total: ' + res.total);

                // Update cards
                $('#totalVenuesCard').text(res.total);
                $('#activeVenuesCard').text(res.active);
                $('#inactiveVenuesCard').text(res.inactive);

                // Pagination
                let pagination = '';
                if (res.currentPage > 1) {
                    pagination += `<button onclick="loadVenues(${res.currentPage-1})" class="px-2 py-1 border rounded">&laquo;</button>`;
                }
                for (let i=1; i<=res.lastPage; i++) {
                    pagination += `<button onclick="loadVenues(${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="loadVenues(${res.currentPage+1})" class="px-2 py-1 border rounded">&raquo;</button>`;
                }
                $('#pagination').html(pagination);
            });
        }
    </script>
@endpush