@extends('layouts.public')

@section('content')
    <div class="text-center mb-8">
        <h1 class="text-2xl font-bold text-gray-900">{{ $club->name }}</h1>
        <p class="text-indigo-600 font-medium">{{ $venue->name }}</p>
        <p class="text-gray-500 text-sm mt-1">{{ date('D, M d, Y') }}</p>
    </div>

    <div x-data="{ 
        query: '', 
        results: [], 
        loading: false,
        search() {
            if (this.query.length < 2) {
                this.results = [];
                return;
            }
            this.loading = true;
            fetch(`{{ route('check-in.search', ['club' => $club->id, 'venue' => $venue->id, 'hash' => request()->hash]) }}?query=${this.query}`)
                .then(res => res.json())
                .then(data => {
                    this.results = data;
                    this.loading = false;
                });
        }
    }">
        <div class="relative">
            <label for="search" class="sr-only">Search members</label>
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </div>
                <input 
                    type="text" 
                    id="search" 
                    x-model="query" 
                    @input.debounce.300ms="search()" 
                    class="block w-full pl-10 pr-10 py-4 border border-gray-300 rounded-2xl text-lg leading-5 bg-gray-50 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all" 
                    placeholder="Type your name..."
                    autocomplete="off"
                >
                <div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer" x-show="query.length > 0" @click="query = ''; results = []" x-cloak>
                    <svg class="h-5 w-5 text-gray-400 hover:text-gray-600 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </div>
            </div>
        </div>

        <div class="mt-6 space-y-3">
            <template x-if="loading">
                <div class="flex justify-center py-4">
                    <svg class="animate-spin h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </div>
            </template>

            <template x-for="user in results" :key="user.id">
                <a :href="`{{ route('check-in.confirm', ['club' => $club->id, 'venue' => $venue->id, 'hash' => request()->hash, 'user' => 'USER_ID']) }}`.replace('USER_ID', user.id)" 
                   class="flex items-center justify-between p-4 bg-gray-50 border border-gray-100 rounded-2xl hover:bg-indigo-50 hover:border-indigo-200 transition-all group">
                    <div class="flex items-center space-x-4">
                        <div class="h-12 w-12 rounded-md overflow-hidden bg-gray-200 border-2 border-white shadow-sm">
                            <template x-if="user.photo_url_thumbnail">
                                <img :src="user.photo_url_thumbnail" class="h-full w-full object-cover">
                            </template>
                            <template x-if="!user.photo_url_thumbnail">
                                <div class="h-full w-full flex items-center justify-center text-gray-400">
                                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
                                    </svg>
                                </div>
                            </template>
                        </div>
                        <div>
                            <p class="text-lg font-bold text-gray-900 group-hover:text-indigo-600 transition-colors" x-text="user.name"></p>
                        </div>
                    </div>
                    <button class="bg-indigo-600 text-white px-4 py-2 rounded-xl text-sm font-bold shadow-sm group-hover:bg-indigo-700 transition-colors">
                        Sign in
                    </button>
                </a>
            </template>

            <template x-if="!loading && query.length >= 2 && results.length === 0">
                <p class="text-center text-gray-500 py-4">No members found matching your search.</p>
            </template>
        </div>
    </div>
@endsection