{{-- filepath: resources/views/content_management/partials/events_table.blade.php --}}

<div class="overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">

    {{-- Notification area for user feedback. References the parent component's variables. --}}
    <div x-show="eventNotificationMessage" x-cloak class="p-4 rounded-md mb-4 text-white" :class="{
            'bg-green-500': eventNotificationType === 'success',
            'bg-red-500': eventNotificationType === 'error'
        }" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-2">
        <span x-text="eventNotificationMessage"></span>
    </div>

    @php
        // Get the current sort column and direction from the request
        $sortColumn = request('sort', 'id');
        $sortDirection = request('direction', 'asc');

        // Helper function to generate a new sort URL
        $sortUrl = function ($column) use ($sortColumn, $sortDirection) {
            $newDirection = $sortDirection === 'asc' && $sortColumn === $column ? 'desc' : 'asc';
            return request()->fullUrlWithQuery(['sort' => $column, 'direction' => $newDirection]);
        };
    @endphp

    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-gray-50 dark:bg-gray-700">
            <tr>
                <th
                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                    <a href="{{ $sortUrl('id') }}" class="flex items-center space-x-1">
                        <span>ID</span>
                        {{-- Show the directional icon if this is the sorted column, otherwise show a neutral icon. --}}
                        @if ($sortColumn === 'id')
                            <i class="fas fa-sort-{{ $sortDirection === 'asc' ? 'up' : 'down' }}"></i>
                        @else
                            <i class="fas fa-sort"></i>
                        @endif
                    </a>
                </th>
                <th
                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                    <a href="{{ $sortUrl('title') }}" class="flex items-center space-x-1">
                        <span>Title</span>
                        @if ($sortColumn === 'title')
                            <i class="fas fa-sort-{{ $sortDirection === 'asc' ? 'up' : 'down' }}"></i>
                        @else
                            <i class="fas fa-sort"></i>
                        @endif
                    </a>
                </th>
                <th
                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                    <a href="{{ $sortUrl('desc') }}" class="flex items-center space-x-1">
                        <span>Description</span>
                        @if ($sortColumn === 'desc')
                            <i class="fas fa-sort-{{ $sortDirection === 'asc' ? 'up' : 'down' }}"></i>
                        @else
                            <i class="fas fa-sort"></i>
                        @endif
                    </a>
                </th>
                <th
                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                    Image
                </th>
                <th
                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                    <a href="{{ $sortUrl('date') }}" class="flex items-center space-x-1">
                        <span>Date</span>
                        @if ($sortColumn === 'date')
                            <i class="fas fa-sort-{{ $sortDirection === 'asc' ? 'up' : 'down' }}"></i>
                        @else
                            <i class="fas fa-sort"></i>
                        @endif
                    </a>
                </th>
                <th
                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                    <a href="{{ $sortUrl('active') }}" class="flex items-center space-x-1">
                        <span>Active</span>
                        @if ($sortColumn === 'active')
                            <i class="fas fa-sort-{{ $sortDirection === 'asc' ? 'up' : 'down' }}"></i>
                        @else
                            <i class="fas fa-sort"></i>
                        @endif
                    </a>
                </th>
                <th
                    class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                    Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
            @forelse ($events as $event)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors duration-150"
                    data-id="{{ $event->id }}">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                        {{ $event->id }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-xs sm:text-sm font-medium text-gray-900 dark:text-gray-100">
                        {{ $event->title }}
                    </td>
                    <td
                        class="px-6 py-4 text-xs sm:text-sm font-medium text-gray-900 dark:text-gray-100 max-w-xs overflow-hidden text-ellipsis">
                        {{ Str::limit($event->desc, 70) }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        @if ($event->image)
                            <img src="{{ Storage::url($event->image) }}" alt="Event Image"
                                class="w-16 h-16 object-cover rounded-md">
                        @else
                            <span class="text-gray-400">No Image</span>
                        @endif
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-xs sm:text-sm font-medium text-gray-900 dark:text-gray-100">
                        {{ $event->date->format('d/m/Y') }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" data-id="{{ $event->id }}" class="sr-only peer event-status-toggle" {{ $event->active ? 'checked' : '' }}
                                @change="toggleEventStatus({{ $event->id }}, $event.target.checked)">
                            <div
                                class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600">
                            </div>
                            <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">Active</span>
                        </label>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <button @click="openEventEditModal({{ $event->toJson() }})"
                            class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-3">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button @click="openEventDeleteModal({{ $event->id }})"
                            class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-200">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7"
                        class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500 dark:text-gray-400">
                        No events found.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>
<div class="mt-4">
    {{ $events->links() }}
</div>


<script>
    // This function provides the data object for the Alpine.js component.
    function eventTableData() {
        return {
            eventNotificationMessage: '',
            eventNotificationType: '',

            showEventNotification(message, type) {
                this.eventNotificationMessage = message;
                this.eventNotificationType = type;
                setTimeout(() => {
                    this.eventNotificationMessage = '';
                }, 3000);
            },

            async toggleEventStatus(eventId, isActive) {
                try {
                    // Ensure this line correctly finds the meta tag
                    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                    // Correctly build the URL using a simple string literal
                    const url = `/events/${eventId}/toggle-status`;

                    const response = await fetch(url, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify({ active: isActive })
                    });

                    if (!response.ok) {
                        throw new Error('Failed to update event status');
                    }

                    this.showEventNotification('Event status updated successfully!', 'success');

                } catch (error) {
                    console.error('Error toggling event status:', error);
                    this.showEventNotification('Failed to update event status. Please try again.', 'error');

                    // Rollback the toggle state on the front-end to reflect the error
                    document.querySelector(`.event-status-toggle[data-id="${eventId}"]`).checked = !isActive;
                }
            }
        }
    }
</script>