@extends('layouts.app')

@section('title', 'Generate QR Code')

@section('content')
<div class="min-h-screen bg-gray-50 p-4 lg:p-6">
    <div class="max-w-2xl mx-auto">
        @if(session('success'))
            <div class="mb-6 bg-green-50 border border-green-200 rounded-md p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-check-circle text-green-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-green-800">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif

        @if(session('error'))
            <div class="mb-6 bg-red-50 border border-red-200 rounded-md p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-circle text-red-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-red-800">{{ session('error') }}</p>
                    </div>
                </div>
            </div>
        @endif

        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <h5 class="text-lg font-semibold text-gray-900 m-0">
                    <i class="fas fa-qrcode mr-2"></i>
                    Generate QR Code
                </h5>
                <a href="{{ route('patrols.qr-codes') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Back
                </a>
            </div>
            <div class="p-6">
                <form action="{{ route('patrols.qr-codes.store') }}" method="POST">
                    @csrf

                    <!-- Information -->
                    <div class="mb-6">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-info-circle mr-2"></i>
                                QR Code Information
                            </h6>
                            <p class="text-gray-500 text-sm">First select a Site, then choose a checkpoint to generate a unique QR code for patrol tracking.</p>
                        </div>
                    </div>

                    <div class="mb-6">
                        <label for="service_id" class="block text-sm font-medium text-gray-700 mb-2">
                            Select Site
                            <span class="text-red-500">*</span>
                        </label>
                        <select 
                            id="service_id" 
                            name="service_id" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('service_id') border-red-500 @enderror"
                            required>
                            <option value="">-- Select a Site --</option>
                            @foreach($services as $service)
                                <option value="{{ $service->id }}" {{ old('service_id') == $service->id ? 'selected' : '' }}>
                                    {{ $service->service_name }}
                                    @if($service->client)
                                        - {{ $service->client->name }}
                                    @endif
                                </option>
                            @endforeach
                        </select>
                        @error('service_id')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-6">
                        <label for="checkpoint_id" class="block text-sm font-medium text-gray-700 mb-2">
                            Select Checkpoint
                            <span class="text-red-500">*</span>
                        </label>
                        <select 
                            id="checkpoint_id" 
                            name="checkpoint_id" 
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('checkpoint_id') border-red-500 @enderror"
                            required>
                            <option value="">-- Select a Site First --</option>
                            @foreach($checkpoints as $checkpoint)
                                <option value="{{ $checkpoint->id }}" 
                                        data-service-id="{{ $checkpoint->service_id }}"
                                        {{ old('checkpoint_id') == $checkpoint->id ? 'selected' : '' }}>
                                    {{ $checkpoint->checkpoint_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('checkpoint_id')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Form Actions -->
                    <div class="flex gap-3 pt-6">
                        <button type="submit" class="inline-flex items-center px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors font-medium">
                            <i class="fas fa-check mr-2"></i>Generate QR Code
                        </button>
                        <a href="{{ route('patrols.qr-codes') }}" class="inline-flex items-center px-6 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors font-medium">
                            <i class="fas fa-times mr-2"></i>Cancel
                        </a>
                    </div>
                </form>

                <!-- Help Text -->
                <div class="mt-8 p-4 bg-blue-50 border border-blue-200 rounded-md">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-lightbulb text-blue-400 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-blue-900 mb-1">What is a QR Code?</h3>
                            <p class="text-sm text-blue-700">
                                QR codes are used to track patrol checkpoints. Each checkpoint can have a unique QR code that patrol officers can scan to log their visits and verify their presence at specific locations.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const serviceSelect = document.getElementById('service_id');
    const checkpointSelect = document.getElementById('checkpoint_id');
    
    // Store all checkpoint options
    const allCheckpoints = Array.from(checkpointSelect.querySelectorAll('option[data-service-id]'));
    const placeholderOption = checkpointSelect.querySelector('option:not([data-service-id])');
    
    console.log('Found ' + allCheckpoints.length + ' checkpoints');
    allCheckpoints.forEach(opt => {
        console.log('Checkpoint:', opt.textContent, 'Site ID:', opt.getAttribute('data-service-id'));
    });
    
    // Handle Site selection change
    serviceSelect.addEventListener('change', function() {
        const selectedServiceId = this.value;
        console.log('Site changed to:', selectedServiceId);
        
        // Clear checkpoint select
        checkpointSelect.innerHTML = '';
        checkpointSelect.appendChild(placeholderOption.cloneNode(true));
        
        if (!selectedServiceId) {
            console.log('No Site selected, hiding all checkpoints');
            return;
        }
        
        // Filter and add matching checkpoints
        let matchCount = 0;
        allCheckpoints.forEach(checkpoint => {
            const checkpointServiceId = checkpoint.getAttribute('data-service-id');
            if (checkpointServiceId === selectedServiceId) {
                checkpointSelect.appendChild(checkpoint.cloneNode(true));
                matchCount++;
            }
        });
        
        console.log('Found ' + matchCount + ' checkpoints for Site ' + selectedServiceId);
        
        // Restore old selection if exists
        const oldCheckpointId = '{{ old("checkpoint_id") }}';
        if (oldCheckpointId && checkpointSelect.querySelector('option[value="' + oldCheckpointId + '"]')) {
            checkpointSelect.value = oldCheckpointId;
        }
    });
    
    // Trigger change event if Site was pre-selected
    if (serviceSelect.value) {
        console.log('Pre-selected Site:', serviceSelect.value);
        serviceSelect.dispatchEvent(new Event('change'));
    }
});
</script>
@endsection