@extends('dashboard.layouts.app')

@section('title', 'Buscar Ticket - Proceso de Salida')

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- Header -->
    <div class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center space-x-3">
                    <a href="{{ route('dashboard.cochera.quick.historial') }}" 
                       class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                        <i data-lucide="arrow-left" class="h-5 w-5"></i>
                    </a>
                    <div>
                        <h1 class="text-xl font-semibold text-gray-900 dark:text-white">
                            🔍 Buscar Ticket - Registro de Salida
                        </h1>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Busca un ticket activo para registrar la salida
                        </p>
                    </div>
                </div>
                <div class="flex items-center space-x-2">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                        <i data-lucide="log-out" class="h-3 w-3 mr-1"></i>
                        Salida
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">


        <!-- No Results Message -->
        @if (session('no_results'))
        <div class="mb-6 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i data-lucide="search-x" class="h-5 w-5 text-yellow-400"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-yellow-700 dark:text-yellow-300">
                        No se encontraron tickets activos con los criterios de búsqueda ingresados.
                    </p>
                </div>
            </div>
        </div>
        @endif

        <!-- Search Form -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
            <form action="{{ route('dashboard.cochera.salida.buscar.post') }}" method="POST">
                @csrf
                
                <div class="space-y-6">
                    <!-- Search Type Selection -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                            🔍 Tipo de Búsqueda
                        </label>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <label class="relative flex cursor-pointer rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 p-4 shadow-sm focus:outline-none">
                                <input type="radio" name="tipo_busqueda" value="placa" class="sr-only" checked>
                                <span class="flex flex-1">
                                    <span class="flex flex-col">
                                        <span class="block text-sm font-medium text-gray-900 dark:text-white">
                                            <i data-lucide="truck" class="h-5 w-5 inline mr-2 text-blue-500"></i>
                                            Por Placa del Camión
                                        </span>
                                        <span class="mt-1 flex items-center text-sm text-gray-500 dark:text-gray-400">
                                            Buscar por número de placa
                                        </span>
                                    </span>
                                </span>
                                <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
                            </label>

                            <label class="relative flex cursor-pointer rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 p-4 shadow-sm focus:outline-none">
                                <input type="radio" name="tipo_busqueda" value="numero" class="sr-only">
                                <span class="flex flex-1">
                                    <span class="flex flex-col">
                                        <span class="block text-sm font-medium text-gray-900 dark:text-white">
                                            <i data-lucide="ticket" class="h-5 w-5 inline mr-2 text-green-500"></i>
                                            Por Número de Ticket
                                        </span>
                                        <span class="mt-1 flex items-center text-sm text-gray-500 dark:text-gray-400">
                                            Buscar por número de ticket
                                        </span>
                                    </span>
                                </span>
                                <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
                            </label>
                        </div>
                    </div>

                    <!-- Search Input -->
                    <div>
                        <label for="busqueda" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            🔍 Criterio de Búsqueda
                        </label>
                        <div class="relative">
                            <input type="text" 
                                   id="busqueda" 
                                   name="busqueda"
                                   placeholder="INGRESE LA PLACA DEL CAMIÓN O NÚMERO DE TICKET..."
                                   class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:text-white dark:focus:ring-green-400 dark:focus:border-green-400 input-uppercase"
                                   autocomplete="off"
                                   required
                                   minlength="3">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i data-lucide="search" class="h-5 w-5 text-gray-400"></i>
                            </div>
                        </div>
                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                            Ingrese al menos 3 caracteres para realizar la búsqueda
                        </p>
                    </div>

                    <!-- Search Button -->
                    <div class="flex justify-center">
                        <button type="submit" 
                                class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors duration-200">
                            <i data-lucide="search" class="h-5 w-5 mr-2"></i>
                            Buscar Ticket
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Instructions -->
        <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i data-lucide="info" class="h-5 w-5 text-blue-400"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">
                        Instrucciones de Búsqueda
                    </h3>
                    <div class="mt-2 text-sm text-blue-700 dark:text-blue-300">
                        <ul class="list-disc list-inside space-y-1">
                            <li>Busca tickets <strong>activos</strong> en tu cochera asignada</li>
                            <li>Puedes buscar por <strong>placa del camión</strong> o <strong>número de ticket</strong></li>
                            <li>Si hay un solo resultado, serás redirigido automáticamente</li>
                            <li>Si hay múltiples resultados, se mostrará una lista para seleccionar</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Error Messages -->
        @if ($errors->any())
        <div class="mt-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i data-lucide="alert-circle" class="h-5 w-5 text-red-400"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800 dark:text-red-200">
                        Error en la búsqueda
                    </h3>
                    <div class="mt-2 text-sm text-red-700 dark:text-red-300">
                        <ul class="list-disc list-inside space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Radio button selection styling
    const radioButtons = document.querySelectorAll('input[type="radio"]');
    const labels = document.querySelectorAll('label');

    radioButtons.forEach((radio, index) => {
        radio.addEventListener('change', function() {
            // Remove active styling from all labels
            labels.forEach(label => {
                label.classList.remove('border-green-500', 'ring-2', 'ring-green-500');
                label.classList.add('border-gray-300', 'dark:border-gray-600');
            });

            // Add active styling to selected label
            if (this.checked) {
                const label = this.closest('label');
                label.classList.remove('border-gray-300', 'dark:border-gray-600');
                label.classList.add('border-green-500', 'ring-2', 'ring-green-500');
            }
        });
    });

    // Set initial active state
    const initialRadio = document.querySelector('input[type="radio"]:checked');
    if (initialRadio) {
        const label = initialRadio.closest('label');
        label.classList.remove('border-gray-300', 'dark:border-gray-600');
        label.classList.add('border-green-500', 'ring-2', 'ring-green-500');
    }
});
</script>
@endsection