@extends('layouts.admin')
@section('title', 'QR Code Check-In')
@section('page-title', 'QR Code Check-In')
@section('page-subtitle', 'Scan member QR codes for attendance')

@section('content')
<div class="space-y-6">
    @if(session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
        {{ session('success') }}
    </div>
    @endif
    
    @if(session('error'))
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
        {{ session('error') }}
    </div>
    @endif

    <div class="card-royal p-8 text-center">
        <div class="max-w-lg mx-auto">
            <div class="w-24 h-24 mx-auto mb-6 rounded-full gold-gradient flex items-center justify-center">
                <i class="fas fa-qrcode text-white text-4xl"></i>
            </div>
            
            <h2 class="font-cinzel text-2xl font-bold text-[var(--text-primary)] mb-2">QR Code Scanner</h2>
            <p class="text-[var(--text-secondary)] mb-8">Select a service and scan the member's QR code to check them in</p>
            
            <form action="{{ route('admin.attendance.process-qr-checkin') }}" method="POST" class="space-y-6">
                @csrf
                
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2 text-left">Select 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 text-left">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2 text-left">Enter QR Code / Member ID</label>
                    <input type="text" name="qr_code" id="qr_code" required placeholder="Enter QR code value or member ID"
                        class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] text-center text-lg font-mono"
                        autocomplete="off">
                    @error('qr_code')
                        <p class="text-red-500 text-sm mt-1 text-left">{{ $message }}</p>
                    @enderror
                </div>
                
                <button type="submit" class="w-full btn-royal px-8 py-4 rounded-lg text-white text-lg font-semibold">
                    <i class="fas fa-check-circle mr-2"></i> Check In Member
                </button>
            </form>
            
            <div class="mt-8 p-6 bg-[var(--bg-secondary)] rounded-lg">
                <h3 class="font-semibold text-[var(--text-primary)] mb-3"><i class="fas fa-info-circle mr-2 text-gold-500"></i>How to use:</h3>
                <ol class="text-sm text-[var(--text-secondary)] text-left space-y-2">
                    <li>1. Select the service for which you're taking attendance</li>
                    <li>2. Scan or enter the member's QR code value</li>
                    <li>3. The system will automatically check them in for that service</li>
                </ol>
            </div>
        </div>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="card-royal p-6">
            <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">
                <i class="fas fa-mobile-alt mr-2 text-gold-500"></i>Mobile Check-In
            </h3>
            <p class="text-[var(--text-secondary)] text-sm mb-4">
                Members can check themselves in using their smartphones by visiting:
            </p>
            <code class="block bg-gray-800 text-green-400 px-4 py-2 rounded text-sm break-all mb-4">
                {{ url('/check-in') }}/[member-qr-code]
            </code>
            <div class="border-2 border-dashed border-[var(--border-color)] rounded-lg p-4 text-center bg-white">
                <p class="text-xs text-gray-500 mb-2">Sample QR Code:</p>
                <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ urlencode(url('/check-in') . '/SAMPLE123') }}" alt="Mobile Check-In QR Code" class="mx-auto mb-2">
                <p class="text-xs text-gray-500">{{ url('/check-in') }}/SAMPLE123</p>
            </div>
            <div class="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                <p class="text-xs text-blue-700 dark:text-blue-400">
                    <i class="fas fa-info-circle mr-1"></i>
                    Each member has a unique QR code in their profile. Share their personal check-in link for easy self-service attendance.
                </p>
            </div>
        </div>
        
        <div class="card-royal p-6">
            <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">
                <i class="fas fa-print mr-2 text-gold-500"></i>Print QR Codes
            </h3>
            <p class="text-[var(--text-secondary)] text-sm mb-4">
                Generate and print QR codes for members who don't have smartphones.
            </p>
            <div class="space-y-3">
                <a href="{{ route('admin.members.index') }}" class="inline-flex items-center px-4 py-2 bg-gold-500 text-white rounded-lg hover:bg-gold-600 transition-colors">
                    <i class="fas fa-users mr-2"></i> View Members
                </a>
                <a href="{{ route('admin.members.index') }}?print_qr=true" class="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                    <i class="fas fa-print mr-2"></i> Print All QR Codes
                </a>
            </div>
            <div class="mt-4 p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
                <p class="text-xs text-gray-600 dark:text-gray-400">
                    <i class="fas fa-lightbulb mr-1"></i>
                    Tip: Download individual member QR codes from their profile page for personalized attendance cards.
                </p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const qrInput = document.getElementById('qr_code');
        if (qrInput) {
            qrInput.focus();
        }
    });
</script>
@endpush