@extends('layouts.admin')
@section('title', 'Bulk Check-In')
@section('page-title', 'Bulk Check-In')
@section('page-subtitle', 'Check in multiple members at once')

@section('content')
<div class="space-y-6">
    <div class="card-royal p-8">
        <h2 class="font-cinzel text-xl font-bold text-[var(--text-primary)] mb-6">
            <i class="fas fa-users-cog mr-2 text-gold-500"></i> Bulk Member Check-In
        </h2>
        
        <form action="{{ route('admin.attendance.process-bulk-checkin') }}" method="POST" class="space-y-6">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Service *</label>
                    <select name="service_id" required class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                        <option value="">-- Select a service --</option>
                        @foreach($services as $service)
                            <option value="{{ $service->id }}">{{ $service->name }} - {{ \Carbon\Carbon::parse($service->start_time)->format('l, M j, Y g:i A') }}</option>
                        @endforeach
                    </select>
                    @error('service_id')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Date *</label>
                    <input type="date" name="date" required value="{{ date('Y-m-d') }}" 
                        class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    @error('date')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            
            <div>
                <div class="flex items-center justify-between mb-3">
                    <label class="block text-sm font-medium text-[var(--text-primary)]">Select Members *</label>
                    <button type="button" id="select-all" class="text-sm text-gold-500 hover:text-gold-600">Select All</button>
                </div>
                
                <div class="border border-[var(--border-color)] rounded-lg max-h-96 overflow-y-auto">
                    <div class="p-4 bg-[var(--bg-secondary)] border-b border-[var(--border-color)] sticky top-0">
                        <input type="text" id="search-members" placeholder="Search members..." 
                            class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] text-sm">
                    </div>
                    
                    <div id="members-list" class="divide-y divide-[var(--border-color)]">
                        @forelse(\App\Models\Member::where('membership_status', 'active')->orderBy('first_name')->get() as $member)
                            <label class="flex items-center gap-3 p-4 hover:bg-[var(--bg-secondary)] cursor-pointer member-item">
                                <input type="checkbox" name="member_ids[]" value="{{ $member->id }}" 
                                    class="w-5 h-5 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                                @if($member->profile_photo)
                                    <img src="{{ asset('storage/' . $member->profile_photo) }}" alt="{{ $member->full_name }}" class="w-12 h-12 rounded-full object-cover border-2 border-gold-500/30">
                                @else
                                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-gold-400 to-royal-500 flex items-center justify-center text-white font-semibold text-lg flex-shrink-0">
                                        {{ substr($member->first_name, 0, 1) }}{{ substr($member->last_name, 0, 1) }}
                                    </div>
                                @endif
                                <div class="flex-1 min-w-0">
                                    <p class="text-[var(--text-primary)] font-medium">{{ $member->full_name }}</p>
                                    <p class="text-sm text-[var(--text-secondary)]">{{ $member->phone ?? 'No phone' }} · {{ $member->member_id ?? '' }}</p>
                                </div>
                                <span class="px-2 py-1 text-xs rounded-full {{ $member->isMinor() ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700' }}">
                                    {{ $member->isMinor() ? 'Minor' : 'Adult' }}
                                </span>
                            </label>
                        @empty
                            <div class="p-8 text-center text-[var(--text-secondary)]">
                                <i class="fas fa-users text-4xl mb-3 opacity-50"></i>
                                <p>No active members found</p>
                            </div>
                        @endforelse
                    </div>
                </div>
                @error('member_ids')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            
            <div class="flex justify-end gap-4">
                <a href="{{ route('admin.attendance.index') }}" class="px-6 py-3 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] transition-colors">
                    Cancel
                </a>
                <button type="submit" class="btn-royal px-8 py-3 rounded-lg text-white font-semibold">
                    <i class="fas fa-check mr-2"></i> Check In Selected Members
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.getElementById('select-all').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('input[name="member_ids[]"]');
        const allChecked = Array.from(checkboxes).every(cb => cb.checked);
        checkboxes.forEach(cb => cb.checked = !allChecked);
        this.textContent = allChecked ? 'Select All' : 'Deselect All';
    });
    
    document.getElementById('search-members').addEventListener('input', function() {
        const search = this.value.toLowerCase();
        document.querySelectorAll('.member-item').forEach(item => {
            const text = item.textContent.toLowerCase();
            item.style.display = text.includes(search) ? 'flex' : 'none';
        });
    });
</script>
@endpush