@extends('layouts.admin')

@section('header')
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 w-full">
        <div class="flex flex-col">
            <span class="text-xs font-black text-gray-900 uppercase tracking-[0.2em] mb-0">Attendance Record</span>
            <h1 class="text-2xl font-bold text-gray-900">
                {{ $date->format('l') }}
                <span class="text-gray-400 font-medium">{{ $date->format('jS F Y') }}</span>
            </h1>
        </div>

        <!-- Mark student as attended search -->
        <div class="flex flex-col items-end gap-2" x-data="memberSearch()">
            <label class="text-xs font-black text-gray-900 uppercase tracking-[0.2em] mb-0 px-1">Mark student as attended</label>
            <div class="flex items-center gap-2 w-full md:w-[500px]">
                <!-- Venue Selector -->
                <div class="relative w-1/3">
                    <select 
                        x-model="venueId" 
                        @change="searchMembers()"
                        class="w-full pl-4 pr-10 py-3 bg-white border-2 border-gray-100 rounded-2xl focus:border-indigo-500 focus:ring-0 transition-all text-sm font-bold shadow-sm appearance-none bg-none"
                    >
                        @foreach($venues as $venue)
                            <option value="{{ $venue->id }}">{{ $venue->name }}</option>
                        @endforeach
                    </select>
                    <div class="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                </div>

                <div class="relative w-2/3">
                    <div class="relative group">
                        <input 
                            type="text" 
                            x-model="query" 
                            @input.debounce.300ms="searchMembers()"
                            @keydown.escape="showResults = false"
                            @click.away="showResults = false"
                            placeholder="Search name..." 
                            class="w-full pl-11 pr-4 py-3 bg-white border-2 border-gray-100 rounded-2xl focus:border-indigo-500 focus:ring-0 transition-all text-sm font-bold shadow-sm placeholder:text-gray-300 placeholder:font-medium"
                        >
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400 group-focus-within:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <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>
                        
                        <!-- Loading Spinner -->
                        <div x-show="loading" class="absolute inset-y-0 right-0 pr-4 flex items-center">
                            <svg class="animate-spin h-4 w-4 text-indigo-500" xmlns="http://www.w3.org/2000/svg" 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>
                    </div>

                    <!-- Search Results Dropdown -->
                    <div 
                        x-show="showResults && results.length > 0" 
                        x-transition:enter="transition ease-out duration-200"
                        x-transition:enter-start="opacity-0 translate-y-2"
                        x-transition:enter-end="opacity-100 translate-y-0"
                        class="absolute z-50 mt-3 w-full bg-white rounded-2xl shadow-2xl border border-gray-100 py-2 max-h-[400px] overflow-y-auto ring-1 ring-black/5"
                        style="display: none;"
                    >
                        <template x-for="result in results" :key="result.id">
                            <div class="px-4 py-3 hover:bg-slate-50 transition-colors flex items-center justify-between group/result border-b border-gray-50 last:border-0">
                                <div class="flex items-center gap-4">
                                    <div class="w-12 h-12 rounded-xl bg-gray-50 border-2 border-white shadow-sm overflow-hidden flex-shrink-0 group-hover/result:scale-110 transition-transform">
                                        <template x-if="result.photo_url">
                                            <img :src="result.photo_url" class="w-full h-full object-cover">
                                        </template>
                                        <template x-if="!result.photo_url">
                                            <div class="w-full h-full flex items-center justify-center text-gray-300">
                                                <svg class="w-7 h-7" 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 class="flex flex-col">
                                        <div class="text-sm font-black text-gray-900" x-text="result.name"></div>
                                    </div>
                                </div>
                                <form :action="'{{ route('sessions.store-manual', $date->format('Y-m-d')) }}'" method="POST">
                                    @csrf
                                    <input type="hidden" name="user_id" :value="result.id">
                                    <input type="hidden" name="venue_id" :value="venueId">
                                    <button type="submit" class="px-3 py-2 bg-white border border-gray-200 text-indigo-600 text-[10px] font-black uppercase tracking-widest rounded-xl hover:bg-indigo-600 hover:text-white hover:border-indigo-600 transition-all shadow-sm active:scale-95 whitespace-nowrap">
                                        Add to session
                                    </button>
                                </form>
                            </div>
                        </template>
                    </div>

                    <!-- No Results -->
                    <div x-show="showResults && results.length === 0 && query.length >= 2 && !loading" class="absolute z-50 mt-3 w-full bg-white rounded-2xl shadow-2xl border border-gray-100 p-6 text-center shadow-indigo-100/50" style="display: none;">
                        <div class="bg-gray-50 h-16 w-16 rounded-full flex items-center justify-center mx-auto mb-3">
                            <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 17.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <p class="text-sm font-bold text-gray-600 italic">No matching members found.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function sessionNotesForm(initialData) {
            return {
                noteId: initialData.noteId,
                title: initialData.title,
                details: initialData.details,
                loading: false,
                message: '',
                messageType: 'success',

                saveNote() {
                    this.loading = true;
                    this.message = '';

                    const isUpdate = !!this.noteId;
                    const url = isUpdate ? `/events/${this.noteId}` : '{{ route('events.store') }}';

                    const formData = new FormData();
                    if (isUpdate) formData.append('_method', 'PUT');
                    formData.append('title', this.title);
                    formData.append('details', this.details);
                    formData.append('event_type_id', '{{ $otherEventTypeId }}');
                    formData.append('date_time', '{{ $date->format('Y-m-d') }}' + 'T18:00');
                    formData.append('end_date_time', '{{ $date->format('Y-m-d') }}' + 'T18:00');
                    formData.append('is_session_note', '1');
                    formData.append('_token', '{{ csrf_token() }}');

                    fetch(url, {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    })
                    .then(async response => {
                        const data = await response.json();
                        if (!response.ok) {
                            throw new Error(data.message || 'Error occurred');
                        }
                        return data;
                    })
                    .then(data => {
                        this.loading = false;
                        this.messageType = 'success';
                        if (data.id) {
                            this.noteId = data.id;
                            this.message = 'Session notes saved successfully!';
                            setTimeout(() => this.message = '', 3000);
                        }
                    })
                    .catch(error => {
                        this.loading = false;
                        console.error('Error:', error);
                        this.messageType = 'error';
                        this.message = error.message || 'Error saving notes. Please try again.';
                    });
                },

                deleteNote() {
                    if (!confirm('Are you sure you want to delete these notes?')) return;

                    this.loading = true;
                    this.message = '';

                    fetch(`/events/${this.noteId}`, {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    })
                    .then(async response => {
                        const data = await response.json();
                        if (!response.ok) {
                            throw new Error(data.message || 'Error occurred');
                        }
                        return data;
                    })
                    .then(data => {
                        this.loading = false;
                        this.messageType = 'success';
                        this.message = 'Session notes deleted successfully.';
                        
                        // Reset form
                        this.noteId = null;
                        this.title = '';
                        this.details = '';
                        
                        setTimeout(() => this.message = '', 3000);
                    })
                    .catch(error => {
                        this.loading = false;
                        console.error('Error:', error);
                        this.messageType = 'error';
                        this.message = error.message || 'Error deleting notes.';
                    });
                }
            }
        }

        function memberSearch() {
            return {
                query: '',
                results: [],
                loading: false,
                showResults: false,
                venueId: '{{ $venues->firstWhere("is_primary", true)?->id ?? $venues->first()?->id }}',
                searchMembers() {
                    if (this.query.length < 2) {
                        this.results = [];
                        this.showResults = false;
                        return;
                    }
                    this.loading = true;
                    this.showResults = true;
                    fetch(`{{ route('sessions.search-members', $date->format('Y-m-d')) }}?query=${encodeURIComponent(this.query)}&venue_id=${this.venueId}`)
                        .then(res => res.json())
                        .then(data => {
                            this.results = data;
                            this.loading = false;
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                }
            }
        }
    </script>
@endsection

@section('content')
    <div class="mb-6 flex flex-col sm:flex-row items-center justify-between gap-4">
        <a href="{{ route('sessions.index', ['month' => $date->month, 'year' => $date->year]) }}" 
           class="inline-flex items-center px-4 py-2.5 bg-white border border-gray-200 rounded-xl text-xs font-black uppercase tracking-widest text-gray-700 hover:bg-gray-50 hover:text-indigo-600 transition-all shadow-sm group w-full sm:w-auto justify-center">
            <svg class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7 7-7m8 14l-7-7 7-7" />
            </svg>
            Back to Calendar
        </a>
        
        <div class="flex flex-wrap items-center justify-center sm:justify-end gap-2 w-full sm:w-auto">
            @foreach($groupStats as $stat)
                <div class="px-3 py-1.5 bg-white border border-gray-200 rounded-xl shadow-sm flex items-center gap-2 transition-all hover:border-indigo-200 hover:shadow-md">
                    <span class="text-[9px] font-black text-gray-400 uppercase tracking-widest">{{ $stat['name'] }}</span>
                    <div class="h-4 w-px bg-gray-200"></div>
                    <span class="text-xs font-black text-indigo-600">{{ $stat['count'] }}</span>
                </div>
            @endforeach
            
            <div class="ml-0 sm:ml-2 px-4 py-2.5 bg-indigo-600 border border-indigo-700 rounded-xl shadow-md flex items-center gap-3 transition-transform hover:scale-105">
                <span class="text-[9px] font-black text-indigo-100 uppercase tracking-[0.2em]">Grand Total</span>
                <div class="h-5 w-px bg-indigo-500"></div>
                <span class="text-base font-black text-white leading-none">{{ $sessions->count() }}</span>
            </div>
        </div>
    </div>

     <!-- Session Notes Section -->
     <div class="mb-6 bg-white overflow-hidden shadow-sm sm:rounded-2xl border border-gray-200"
          x-data="sessionNotesForm({
             noteId: {{ $sessionNote ? $sessionNote->id : 'null' }},
             title: {{ $sessionNote ? json_encode($sessionNote->title) : "'Session Note'" }},
             details: {{ $sessionNote ? json_encode($sessionNote->details) : "''" }}
          })">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center min-h-[64px]">
            <h2 class="text-lg font-bold text-gray-900">Session Notes</h2>
            <span x-show="message" x-text="message" :class="messageType === 'success' ? 'bg-green-100 text-green-800 border-green-200' : 'bg-red-100 text-red-800 border-red-200'" class="px-3 py-1 rounded-lg text-sm font-bold border shadow-sm transition-all" x-transition></span>
        </div>
        <div class="p-6 grid grid-cols-1 gap-6">

            <input type="hidden" x-model="title" />
            
            <div>
                <x-input-label for="note_details" :value="__('Overview')" />
                <textarea id="note_details" rows="5" x-model="details" class="block mt-1 w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"></textarea>
            </div>
            <div class="flex items-center">
                <button type="button" x-show="noteId" @click="deleteNote" class="text-xs text-red-600 hover:text-red-800 font-medium underline transition-colors" ::disabled="loading" style="display: none;">
                    Delete Notes
                </button>
                <x-primary-button type="button" @click="saveNote" ::disabled="loading" class="ml-auto">
                    <span x-text="loading ? 'Saving...' : (noteId ? 'Update Notes' : 'Save Notes')"></span>
                </x-primary-button>
            </div>
        </div>
    </div>

    <div class="bg-white overflow-hidden shadow-sm sm:rounded-2xl border border-gray-200">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50/50">
                    <tr>
                        <th scope="col" class="px-6 py-4 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">Member</th>
                        <th scope="col" class="px-6 py-4 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">Rank</th>
                        <th scope="col" class="px-6 py-4 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">Check-in Time</th>
                        <th scope="col" class="px-6 py-4 text-xs font-medium text-gray-500 uppercase tracking-wider text-left">Venue</th>
                        @if(auth()->user()->role === 'club_manager')
                            <th scope="col" class="px-6 py-4 text-xs font-medium text-gray-500 uppercase tracking-wider text-right">Action</th>
                        @endif
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($sessions as $session)
                        <tr class="hover:bg-indigo-50/20 transition-colors group">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <a href="{{ route('members.show', $session->user) }}" class="flex items-center group/member">
                                    <div class="h-12 w-12 rounded-xl overflow-hidden bg-gray-100 border-2 border-white shadow-sm flex-shrink-0 group-hover/member:scale-110 transition-transform duration-300">
                                        @if($session->user->photo_url_thumbnail)
                                            <img src="{{ $session->user->photo_url_thumbnail }}" class="h-full w-full object-cover">
                                        @else
                                            <div class="h-full w-full flex items-center justify-center text-gray-300">
                                                <svg class="h-7 h-7" 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>
                                        @endif
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-black text-gray-900 group-hover/member:text-indigo-600 transition-colors tracking-tight">{{ $session->user->name }}</div>
                                    </div>
                                </a>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($session->user->rank)
                                    <div class="flex items-center gap-2">
                                        <div class="w-8 h-8 rounded border-2 border-gray-300" style="@if($session->user->rank->css)background:{{ $session->user->rank->css }}@else background-color: {{ $session->user->rank->color ?? '#cccccc' }};@endif"></div>
                                        <span class="text-sm text-gray-900">{{ $session->user->rank->name }}</span>
                                    </div>
                                @else
                                    <span class="text-sm text-gray-900">No Rank</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-3 py-1.5 rounded-xl text-xs font-black bg-indigo-50 text-indigo-700 border border-indigo-100 shadow-sm">
                                    <svg class="w-3.5 h-3.5 mr-2 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    @if($session->created_at->format('H:i') === '23:59')
                                        ADDED
                                    @else
                                        {{ $session->created_at->format('H:i') }}
                                    @endif
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="text-[10px] text-indigo-500 font-black uppercase tracking-[0.1em] bg-indigo-50/50 px-3 py-1.5 rounded-xl border border-indigo-100/50">
                                    {{ $session->venue->name }}
                                </span>
                            </td>
                            @if(auth()->user()->role === 'club_manager')
                                <td class="px-6 py-4 whitespace-nowrap text-right">
                                    <form action="{{ route('sessions.destroy', $session->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Are you sure you want to remove this member from the session?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="p-2 text-gray-400 hover:text-red-600 transition-colors rounded-lg hover:bg-red-50" title="Remove from session">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                            </svg>
                                        </button>
                                    </form>
                                </td>
                            @endif
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ auth()->user()->role === 'club_manager' ? '5' : '4' }}" class="px-6 py-24 text-center">
                                <div class="bg-gray-50 h-24 w-24 rounded-full flex items-center justify-center mx-auto mb-6 shadow-inner ring-8 ring-white">
                                    <svg class="w-12 h-12 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 17.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                </div>
                                <p class="text-lg font-black text-gray-400 italic font-display uppercase tracking-widest">No attendance records today</p>
                                <p class="text-sm text-gray-400 mt-2 font-medium">Use the search box above to mark members as attended manually.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection