@extends('dashboard.layouts.app')

@section('title', 'Nueva Asignación de Usuario a 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.cochera-users.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">
                            👥 Nueva Asignación de Usuario a Cochera
                        </h1>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Asignar un usuario a una cochera específica con un rol determinado
                        </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="plus" class="h-3 w-3 mr-1"></i>
                        Nueva Asignación
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <!-- 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">
                    Información de la Asignación
                </h2>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                    Complete los campos para crear una nueva asignación
                </p>
            </div>

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

                <!-- Usuario -->
                <div>
                    <label for="user_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        👤 Usuario <span class="text-red-500">*</span>
                    </label>
                    <select id="user_id" 
                            name="user_id" 
                            required
                            class="w-full h-11 appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800">
                        <option value="">Seleccione un usuario</option>
                        @foreach($usuarios as $usuario)
                            <option value="{{ $usuario->id }}" {{ old('user_id') == $usuario->id ? 'selected' : '' }}>
                                {{ $usuario->name }} ({{ $usuario->email }})
                            </option>
                        @endforeach
                    </select>
                    @error('user_id')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Cochera -->
                <div>
                    <label for="cochera_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        🏢 Cochera <span class="text-red-500">*</span>
                    </label>
                    <select id="cochera_id" 
                            name="cochera_id" 
                            required
                            class="w-full h-11 appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800">
                        <option value="">Seleccione una cochera</option>
                        @foreach($cocheras as $cochera)
                            <option value="{{ $cochera->id }}" {{ old('cochera_id') == $cochera->id ? 'selected' : '' }}>
                                {{ $cochera->nombre }} ({{ $cochera->codigo }})
                            </option>
                        @endforeach
                    </select>
                    @error('cochera_id')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Rol en la Cochera -->
                <div>
                    <label for="rol_cochera" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        🎭 Rol en la Cochera <span class="text-red-500">*</span>
                    </label>
                    <select id="rol_cochera" 
                            name="rol_cochera" 
                            required
                            class="w-full h-11 appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800">
                        <option value="">Seleccione un rol</option>
                        <option value="admin" {{ old('rol_cochera') == 'admin' ? 'selected' : '' }}>
                            🛡️ Administrador - Control total de la cochera
                        </option>
                        <option value="supervisor" {{ old('rol_cochera') == 'supervisor' ? 'selected' : '' }}>
                            👁️ Supervisor - Supervisión y reportes
                        </option>
                        <option value="operativo" {{ old('rol_cochera') == 'operativo' ? 'selected' : '' }}>
                            👷 Operativo - Operaciones diarias
                        </option>
                    </select>
                    @error('rol_cochera')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Fecha de Asignación -->
                <div>
                    <label for="fecha_asignacion" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        📅 Fecha de Asignación <span class="text-red-500">*</span>
                    </label>
                    <input type="date" 
                           id="fecha_asignacion" 
                           name="fecha_asignacion" 
                           value="{{ old('fecha_asignacion', date('Y-m-d')) }}"
                           required
                           class="w-full h-11 appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800">
                    @error('fecha_asignacion')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Fecha de Fin de Asignación -->
                <div>
                    <label for="fecha_fin_asignacion" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        📅 Fecha de Fin de Asignación
                    </label>
                    <input type="date" 
                           id="fecha_fin_asignacion" 
                           name="fecha_fin_asignacion" 
                           value="{{ old('fecha_fin_asignacion') }}"
                           class="w-full h-11 appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        Deje vacío si la asignación es indefinida
                    </p>
                    @error('fecha_fin_asignacion')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Cochera por Defecto -->
                <div class="flex items-center">
                    <input type="checkbox" 
                           id="cochera_por_defecto" 
                           name="cochera_por_defecto" 
                           value="1"
                           {{ old('cochera_por_defecto') ? 'checked' : '' }}
                           class="h-4 w-4 text-brand-600 focus:ring-brand-500 border-gray-300 rounded">
                    <label for="cochera_por_defecto" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                        ⭐ Establecer como cochera por defecto del usuario
                    </label>
                </div>
                <p class="text-xs text-gray-500 dark:text-gray-400 -mt-4">
                    Si se marca, esta será la cochera principal del usuario
                </p>

                <!-- Notas -->
                <div>
                    <label for="notas" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        📝 Notas Adicionales
                    </label>
                    <textarea id="notas" 
                              name="notas" 
                              rows="3"
                              placeholder="Agregue cualquier observación sobre esta asignación..."
                              class="w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800">{{ old('notas') }}</textarea>
                    @error('notas')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Form Actions -->
                <div class="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
                    <a href="{{ route('dashboard.cochera-users.index') }}" 
                       class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-gray-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700">
                        <i data-lucide="x" class="h-4 w-4"></i>
                        Cancelar
                    </a>
                    
                    <button type="submit" 
                            class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600 focus:ring-4 focus:ring-brand-500/20 dark:bg-brand-600 dark:hover:bg-brand-700">
                        <i data-lucide="save" class="h-4 w-4"></i>
                        Crear Asignación
                    </button>
                </div>
            </form>
        </div>

        <!-- Info Card -->
        <div class="mt-6 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">
                <div class="flex-shrink-0">
                    <i data-lucide="info" class="h-5 w-5 text-blue-500"></i>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-blue-900 dark:text-blue-100">
                        Información sobre Roles
                    </h3>
                    <div class="mt-2 text-sm text-blue-800 dark:text-blue-200 space-y-1">
                        <p><strong>🛡️ Administrador:</strong> Control total, puede gestionar usuarios, configuraciones y operaciones.</p>
                        <p><strong>👁️ Supervisor:</strong> Puede ver reportes, supervisar operaciones y gestionar tickets.</p>
                        <p><strong>👷 Operativo:</strong> Puede realizar operaciones diarias como registrar ingresos/salidas.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Validar que fecha_fin_asignacion sea posterior a fecha_asignacion
    const fechaAsignacion = document.getElementById('fecha_asignacion');
    const fechaFinAsignacion = document.getElementById('fecha_fin_asignacion');
    
    fechaAsignacion.addEventListener('change', function() {
        if (fechaFinAsignacion.value && fechaFinAsignacion.value <= this.value) {
            fechaFinAsignacion.value = '';
            alert('La fecha de fin debe ser posterior a la fecha de asignación');
        }
    });
    
    fechaFinAsignacion.addEventListener('change', function() {
        if (this.value && this.value <= fechaAsignacion.value) {
            this.value = '';
            alert('La fecha de fin debe ser posterior a la fecha de asignación');
        }
    });
});
</script>
@endsection