@extends('layouts.admin')

@section('header')
    Venues
@endsection

@section('content')
    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 text-gray-900">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-lg font-medium leading-6 text-gray-900">All Venues</h3>
                <div class="flex gap-3">
                    @if(auth()->user()->role === 'admin' || auth()->user()->role === 'club_manager')
                        <a href="{{ route('venues.create') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                            Add Venue
                        </a>
                    @endif
                </div>
            </div>

            @if(session('success'))
                <div class="mb-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                    <span class="block sm:inline">{{ session('success') }}</span>
                </div>
            @endif

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Name
                            </th>
                            @if(auth()->user()->role === 'admin')
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Club
                                </th>
                            @endif
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Location
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Contact
                            </th>
                            @if(auth()->user()->role === 'club_manager')
                                <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Primary
                                </th>
                            @endif
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Actions
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($venues as $venue)
                            <tr class="hover:bg-gray-50" x-data="{ isPrimary: {{ $venue->is_primary ? 'true' : 'false' }}, loading: false }">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ $venue->name }}</div>
                                </td>
                                @if(auth()->user()->role === 'admin')
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">{{ $venue->club->name }}</div>
                                    </td>
                                @endif
                                <td class="px-6 py-4">
                                    <div class="text-sm text-gray-900">{{ $venue->town_city }}</div>
                                    <div class="text-sm text-gray-500">{{ $venue->postcode }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">{{ $venue->contact_name }}</div>
                                    <div class="text-sm text-gray-500">{{ $venue->contact_phone }}</div>
                                </td>
                                @if(auth()->user()->role === 'club_manager')
                                    <td class="px-6 py-4 whitespace-nowrap text-center">
                                        <button 
                                            @click="
                                                if(isPrimary) return; 
                                                loading = true;
                                                fetch('{{ route('venues.set-primary', $venue) }}', {
                                                    method: 'POST',
                                                    headers: {
                                                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                                        'Content-Type': 'application/json'
                                                    }
                                                }).then(res => {
                                                    if(res.ok) {
                                                        window.location.reload(); 
                                                    } else {
                                                        loading = false;
                                                        alert('Failed to update primary venue.');
                                                    }
                                                })
                                            "
                                            :disabled="isPrimary || loading"
                                            :class="isPrimary ? 'bg-green-600' : 'bg-gray-200'"
                                            class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 {{ $venue->is_primary ? 'bg-green-600' : 'bg-gray-200' }}"
                                            role="switch" 
                                            :aria-checked="isPrimary">
                                            <span 
                                                class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out {{ $venue->is_primary ? 'translate-x-5' : 'translate-x-0' }}"
                                                :class="isPrimary ? 'translate-x-5' : 'translate-x-0'"
                                            >
                                                <span 
                                                    class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity {{ $venue->is_primary ? 'opacity-0 duration-100 ease-out' : 'opacity-100 duration-200 ease-in' }}" 
                                                    :class="isPrimary ? 'opacity-0 duration-100 ease-out' : 'opacity-100 duration-200 ease-in'"
                                                    aria-hidden="true"
                                                >
                                                    <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
                                                        <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                    </svg>
                                                </span>
                                                <span 
                                                    class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity {{ $venue->is_primary ? 'opacity-100 duration-200 ease-in' : 'opacity-0 duration-100 ease-out' }}" 
                                                    :class="isPrimary ? 'opacity-100 duration-200 ease-in' : 'opacity-0 duration-100 ease-out'"
                                                    aria-hidden="true"
                                                >
                                                    <svg class="h-3 w-3 text-green-600" fill="currentColor" viewBox="0 0 12 12">
                                                        <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </button>
                                    </td>
                                @endif
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <a href="{{ route('venues.show', $venue) }}" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a>
                                    <a href="{{ route('venues.edit', $venue) }}" class="text-blue-600 hover:text-blue-900 mr-3">Edit</a>
                                    @if(auth()->user()->role === 'club_manager')
                                        <a href="{{ route('check-in.qr', $venue) }}" target="_blank" class="text-green-600 hover:text-green-900">QR Code</a>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ auth()->user()->role === 'club_manager' ? 6 : 5 }}" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">
                                    No venues found.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-4">
                {{ $venues->links() }}
            </div>
        </div>
    </div>
@endsection