@extends('layouts.app')

@section('title', 'Events')

@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" />
                </svg>
            </li>
            <li><a href="#" class="hover:text-blue-600">Events</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" />
                </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-4 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="M9 17v2h6v-2m2-10h-2l-1-2H10l-1 2H7v10h10V7z" />
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Total Events</p>
                <p class="text-2xl font-bold text-gray-900" id="totalEventsCard">0</p>
            </div>
        </div>

        <div class="bg-white p-4 rounded shadow flex items-center">
            <div class="p-2 bg-yellow-100 rounded-full">
                <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6 0a9 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">Upcoming</p>
                <p class="text-2xl font-bold text-gray-900" id="upcomingEventsCard">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">Ongoing</p>
                <p class="text-2xl font-bold text-gray-900" id="ongoingEventsCard">0</p>
            </div>
        </div>

        <div class="bg-white p-4 rounded shadow flex items-center">
            <div class="p-2 bg-gray-100 rounded-full">
                <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6"/>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Completed</p>
                <p class="text-2xl font-bold text-gray-900" id="completedEventsCard">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="filterTitle" placeholder="Title" class="px-2 py-1 border rounded w-1/4">
            <select id="filterCategory" class="px-2 py-1 border rounded">
                <option value="">All Categories</option>
                <option value="Music">Music</option>
                <option value="Conference">Conference</option>
                <option value="Sports">Sports</option>
                <option value="Workshop">Workshop</option>
            </select>
            <select id="filterStatus" class="px-2 py-1 border rounded">
                <option value="">All Status</option>
                <option value="upcoming">Upcoming</option>
                <option value="ongoing">Ongoing</option>
                <option value="completed">Completed</option>
                <option value="cancelled">Cancelled</option>
            </select>
            <button id="btnFilter" class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700">Filter</button>
        </div>

        <!-- Add Event button -->
        <a href="{{ route('events.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 Event
        </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">Title</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Category</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Venue</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Start Date</th>
                <th class="px-2 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">End 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">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="eventTableBody" 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 Events
            function loadEvents(page = 1) {
                currentPage = page;
                let filters = {
                    title: $('#filterTitle').val(),
                    category: $('#filterCategory').val(),
                    event_status: $('#filterStatus').val(),
                    page: currentPage,
                    perPage: perPage
                };

                $.get('{{ route("events.data") }}', filters, function(res) {
                    let tbody = '';
                    res.data.forEach((event, 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">${event.title}</td>
                        <td class="px-2 py-2 text-xs">${event.category}</td>
                        <td class="px-2 py-2 text-xs">${event.venue_name ?? '-'}</td>
                        <td class="px-2 py-2 text-xs">${event.start_datetime}</td>
                        <td class="px-2 py-2 text-xs">${event.end_datetime}</td>
                        <td class="px-2 py-2 text-xs">${event.event_status}</td>
                        <td class="px-2 py-2 text-xs">${event.created_date}</td>
                        <td class="px-2 py-2 text-xs">
                            <button class="text-blue-600 hover:text-blue-900" onclick="editEvent(${event.event_id})">Edit</button>
                            <button class="ml-2 text-red-600 hover:text-red-900" onclick="deleteEvent(${event.event_id})">Delete</button>
                        </td>
                    </tr>`;
                    });
                    $('#eventTableBody').html(tbody);
                    $('#totalRecords').text('Total: ' + res.total);

                    // Update summary cards
                    $('#totalEventsCard').text(res.total);
                    $('#upcomingEventsCard').text(res.upcoming);
                    $('#ongoingEventsCard').text(res.ongoing);
                    $('#completedEventsCard').text(res.completed);

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

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

            // Initial load
            loadEvents();
        });

        // Edit Event
        function editEvent(id) {
            window.location.href = `/events/${id}/edit`;
        }

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