@extends('dashboard.layouts.app')

@section('title', 'Registrar Ingreso - Cochera')

@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.comprobantes.index') }}" 
                       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">
                            🚗 Registrar Ingreso - Cochera
                        </h1>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Registro rápido de vehículo para estacionamiento
                        </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-in" class="h-3 w-3 mr-1"></i>
                    Registrar Ingreso
                </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <!-- Cochera Info Card -->
        @if($cochera)
        <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6">
            <div class="flex items-center space-x-3">
                <div class="flex-shrink-0">
                    <i data-lucide="building" class="h-6 w-6 text-blue-500"></i>
                </div>
                <div class="flex-1">
                    <h3 class="text-sm font-medium text-blue-900 dark:text-blue-100">
                        Cochera Actual
                    </h3>
                    <div class="mt-1 text-sm text-blue-800 dark:text-blue-200">
                        <p class="font-medium">{{ $cochera->nombre }}</p>
                        <p class="text-xs mt-1">
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-200">
                                {{ $cochera->codigo }}
                            </span>
                            @if($cochera->responsable)
                                • Responsable: {{ $cochera->responsable }}
                            @endif
                        </p>
                        @if($cochera->direccion)
                        <p class="text-xs mt-1 text-blue-700 dark:text-blue-300">
                            <i data-lucide="map-pin" class="h-3 w-3 inline mr-1"></i>
                            {{ $cochera->direccion }}
                        </p>
                        @endif
                    </div>
                </div>
                <div class="flex-shrink-0">
                    <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="check-circle" class="h-3 w-3 mr-1"></i>
                        Activa
                    </span>
                </div>
            </div>
        </div>
        @endif

        <!-- Form Card -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-medium text-gray-900 dark:text-white">
                    Registro de Vehículo
                </h2>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                    Complete solo los campos esenciales para el registro rápido
                </p>
            </div>

            <form action="{{ route('dashboard.cochera.quick.store') }}" method="POST" class="p-6 space-y-6">
                @csrf

                <!-- Step 1: Información del Vehículo -->
                <div class="space-y-4">
                    <div class="flex items-center space-x-2">
                        <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
                            <span class="text-blue-600 dark:text-blue-400 text-sm font-medium">1</span>
                        </div>
                        <h3 class="text-md font-medium text-gray-900 dark:text-white">Información del Vehículo</h3>
                    </div>

                    <!-- Placa del Camión -->
                    <div>
                        <label for="placa_camion" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Placa del Camión <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <input type="text" 
                                   id="placa_camion" 
                                   name="placa_camion" 
                                   value="{{ old('placa_camion') }}"
                                   required
                                   maxlength="10"
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-400 dark:focus:border-blue-400 text-lg font-mono input-uppercase"
                                   placeholder="ABC-1234"
                                   autocomplete="off">
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                <i data-lucide="truck" class="h-5 w-5 text-gray-400"></i>
                            </div>
                        </div>
                        @error('placa_camion')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Placa de la Carreta (Opcional) -->
                    <div>
                        <label for="placa_carreta" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Placa de la Carreta <span class="text-gray-500 text-xs">(Opcional)</span>
                        </label>
                        <div class="relative">
                            <input type="text" 
                                   id="placa_carreta" 
                                   name="placa_carreta" 
                                   value="{{ old('placa_carreta') }}"
                                   maxlength="10"
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-400 dark:focus:border-blue-400 text-lg font-mono input-uppercase"
                                   placeholder="XYZ-5678"
                                   autocomplete="off">
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                <i data-lucide="package" class="h-5 w-5 text-gray-400"></i>
                            </div>
                        </div>
                        @error('placa_carreta')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Descripción de la Carga -->
                    <div>
                        <label for="descripcion_carga" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Descripción de la Carga <span class="text-red-500">*</span>
                        </label>
                        <textarea id="descripcion_carga" 
                                  name="descripcion_carga" 
                                  required
                                  rows="2"
                                  maxlength="200"
                                  class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-400 dark:focus:border-blue-400"
                                  placeholder="Ej: Carga de maíz, Contenedores, etc.">{{ old('descripcion_carga') }}</textarea>
                        @error('descripcion_carga')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Step 2: Información del Conductor -->
                <div class="space-y-4">
                    <div class="flex items-center space-x-2">
                        <div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center">
                            <span class="text-green-600 dark:text-green-400 text-sm font-medium">2</span>
                        </div>
                        <h3 class="text-md font-medium text-gray-900 dark:text-white">Información del Conductor</h3>
                        <span class="text-xs text-gray-500 dark:text-gray-400">(Opcional)</span>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- DNI del Conductor -->
                        <div>
                            <label for="conductor_dni" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                DNI del Conductor
                            </label>
                            <input type="text" 
                                   id="conductor_dni" 
                                   name="conductor_dni" 
                                   value="{{ old('conductor_dni') }}"
                                   maxlength="8"
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-400 dark:focus:border-blue-400"
                                   placeholder="12345678"
                                   autocomplete="off">
                            @error('conductor_dni')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Nombre del Conductor -->
                        <div>
                            <label for="conductor_nombre" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Nombre del Conductor
                            </label>
                            <input type="text" 
                                   id="conductor_nombre" 
                                   name="conductor_nombre" 
                                   value="{{ old('conductor_nombre') }}"
                                   maxlength="100"
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-400 dark:focus:border-blue-400 input-uppercase"
                                   placeholder="JUAN PÉREZ"
                                   autocomplete="off">
                            @error('conductor_nombre')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Teléfono del Conductor -->
                        <div>
                            <label for="conductor_telefono" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Teléfono del Conductor
                            </label>
                            <input type="text" 
                                   id="conductor_telefono" 
                                   name="conductor_telefono" 
                                   value="{{ old('conductor_telefono') }}"
                                   maxlength="15"
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-400 dark:focus:border-blue-400"
                                   placeholder="999888777"
                                   autocomplete="off">
                            @error('conductor_telefono')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Información Automática -->
                <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 items-start space-x-3">
                        <i data-lucide="info" class="h-5 w-5 text-blue-500 mt-0.5"></i>
                        <div class="flex-1">
                            <h4 class="text-sm font-medium text-blue-900 dark:text-blue-100">
                                Información Automática
                            </h4>
                            <ul class="mt-2 text-sm text-blue-700 dark:text-blue-300 space-y-1">
                                <li>• Cochera: <span class="font-semibold">{{ $cochera->nombre ?? 'No asignada' }}</span> <span class="text-xs">({{ $cochera->codigo ?? 'N/A' }})</span></li>
                                <li>• Número de ticket: <span class="font-mono">Se generará automáticamente</span></li>
                                <li>• Fecha y hora de ingreso: <span class="font-mono">{{ now()->format('d/m/Y H:i') }}</span></li>
                                <li>• Estado: <span class="font-semibold text-green-600">Activo</span></li>
                                <li>• Verificación de vehículo abonado: <span class="font-semibold">Automática</span></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex flex-col sm:flex-row gap-3 pt-4">
                    <button type="submit" 
                            class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200 flex items-center justify-center space-x-2">
                        <i data-lucide="check-circle" class="h-5 w-5"></i>
                        <span>Registrar Vehículo</span>
                    </button>
                    
                    <a href="{{ route('dashboard.cochera.quick.historial') }}" 
                       class="flex-1 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 font-medium py-3 px-6 rounded-lg transition-colors duration-200 flex items-center justify-center space-x-2">
                        <i data-lucide="history" class="h-5 w-5"></i>
                        <span>Ver Historial</span>
                    </a>
                </div>
            </form>
        </div>

        <!-- Quick Actions -->
        <div class="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
            <h3 class="text-sm font-medium text-gray-900 dark:text-white mb-3">Acciones Rápidas</h3>
            <div class="grid grid-cols-2 gap-3">
                <button type="button" 
                        onclick="document.getElementById('placa_camion').focus()"
                        class="flex items-center justify-center space-x-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-lg transition-colors duration-200">
                    <i data-lucide="scan" class="h-4 w-4 text-gray-600 dark:text-gray-400"></i>
                    <span class="text-sm text-gray-700 dark:text-gray-300">Escanear Placa</span>
                </button>
                
                <button type="button" 
                        onclick="limpiarFormulario()"
                        class="flex items-center justify-center space-x-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-lg transition-colors duration-200">
                    <i data-lucide="refresh-cw" class="h-4 w-4 text-gray-600 dark:text-gray-400"></i>
                    <span class="text-sm text-gray-700 dark:text-gray-300">Limpiar</span>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-focus en la placa del camión
    document.getElementById('placa_camion').focus();
    
    // Auto-uppercase para placas
    const placas = ['placa_camion', 'placa_carreta'];
    placas.forEach(function(id) {
        const input = document.getElementById(id);
        if (input) {
            input.addEventListener('input', function() {
                this.value = this.value.toUpperCase();
            });
        }
    });
    
    // Auto-uppercase para DNI
    const dniInput = document.getElementById('conductor_dni');
    if (dniInput) {
        dniInput.addEventListener('input', function() {
            this.value = this.value.replace(/[^0-9]/g, '');
        });
    }
});

function limpiarFormulario() {
    if (confirm('¿Está seguro de que desea limpiar el formulario?')) {
        document.getElementById('placa_camion').value = '';
        document.getElementById('placa_carreta').value = '';
        document.getElementById('descripcion_carga').value = '';
        document.getElementById('conductor_dni').value = '';
        document.getElementById('conductor_nombre').value = '';
        document.getElementById('placa_camion').focus();
    }
}
</script>
@endsection