@extends('dashboard.layouts.app')

@section('title', 'Editar Ticket - 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.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">
                            ✏️ Editar Ticket - Cochera
                        </h1>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Modificar información del ticket #{{ $estacionamiento->numero_ticket }}
                        </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-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                        <i data-lucide="edit" class="h-3 w-3 mr-1"></i>
                        Editar Ticket
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <!-- Ticket Info Card -->
        <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="ticket" 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">
                        Información del Ticket
                    </h3>
                    <div class="mt-1 text-sm text-blue-800 dark:text-blue-200">
                        <p class="font-medium">Ticket #{{ $estacionamiento->numero_ticket }}</p>
                        <p class="text-xs mt-1">
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-200">
                                {{ ucfirst($estacionamiento->estado_ticket) }}
                            </span>
                            • Ingreso: {{ \Carbon\Carbon::parse($estacionamiento->fecha_ingreso)->format('d/m/Y H:i') }}
                        </p>
                        @if($estacionamiento->cochera)
                        <p class="text-xs mt-1 text-blue-700 dark:text-blue-300">
                            <i data-lucide="building" class="h-3 w-3 inline mr-1"></i>
                            {{ $estacionamiento->cochera->nombre }}
                        </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>
                        Activo
                    </span>
                </div>
            </div>
        </div>

        <!-- 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">
                    Editar Información del Ticket
                </h2>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                    Modifique los campos que necesite actualizar
                </p>
            </div>

            <form action="{{ route('dashboard.cochera.quick.update', $estacionamiento->public_id) }}" method="POST" class="p-6 space-y-6">
                @csrf
                @method('PUT')

                <!-- 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>
                        <input type="text" 
                               id="placa_camion" 
                               name="placa_camion" 
                               value="{{ old('placa_camion', $estacionamiento->placa_camion) }}"
                               placeholder="ABC-123"
                               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"
                               required>
                        @error('placa_camion')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Placa de la Carreta -->
                    <div>
                        <label for="placa_carreta" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            🚚 Placa de la Carreta
                        </label>
                        <input type="text" 
                               id="placa_carreta" 
                               name="placa_carreta" 
                               value="{{ old('placa_carreta', $estacionamiento->placa_carreta) }}"
                               placeholder="XYZ-789 (opcional)"
                               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('placa_carreta')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $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" 
                                  rows="3"
                                  placeholder="Describa brevemente la carga que transporta..."
                                  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"
                                  required>{{ old('descripcion_carga', $estacionamiento->descripcion_carga) }}</textarea>
                        @error('descripcion_carga')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $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>
                    </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 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" 
                               id="conductor_nombre" 
                               name="conductor_nombre" 
                               value="{{ old('conductor_nombre', $estacionamiento->conductor_nombre) }}"
                               placeholder="Juan Pérez"
                               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"
                               required>
                        @error('conductor_nombre')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- 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 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" 
                               id="conductor_dni" 
                               name="conductor_dni" 
                               value="{{ old('conductor_dni', $estacionamiento->conductor_dni) }}"
                               placeholder="12345678"
                               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"
                               required>
                        @error('conductor_dni')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $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', $estacionamiento->conductor_telefono) }}"
                               placeholder="999888777"
                               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('conductor_telefono')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Step 3: Observaciones -->
                <div class="space-y-4">
                    <div class="flex items-center space-x-2">
                        <div class="w-8 h-8 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
                            <span class="text-purple-600 dark:text-purple-400 text-sm font-medium">3</span>
                        </div>
                        <h3 class="text-md font-medium text-gray-900 dark:text-white">Observaciones</h3>
                    </div>

                    <!-- Observaciones -->
                    <div>
                        <label for="observaciones" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            📝 Observaciones Adicionales
                        </label>
                        <textarea id="observaciones" 
                                  name="observaciones" 
                                  rows="3"
                                  placeholder="Agregue cualquier observación adicional..."
                                  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('observaciones', $estacionamiento->observaciones) }}</textarea>
                        @error('observaciones')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                </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.quick.historial') }}" 
                       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>
                    
                    <div class="flex items-center space-x-3">
                        <a href="{{ route('dashboard.cochera.quick.show', $estacionamiento->public_id) }}" 
                           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="eye" class="h-4 w-4"></i>
                            Ver Detalles
                        </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>
                            Guardar Cambios
                        </button>
                    </div>
                </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="flex flex-wrap gap-2">
                <a href="{{ route('dashboard.cochera.quick.historial') }}" 
                   class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700">
                    <i data-lucide="list" class="h-4 w-4"></i>
                    Ver Historial
                </a>
                
                <a href="{{ route('dashboard.cochera.quick.create') }}" 
                   class="inline-flex items-center gap-2 rounded-lg bg-green-500 px-3 py-2 text-sm font-medium text-white hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700">
                    <i data-lucide="plus" class="h-4 w-4"></i>
                    Nuevo Ticket
                </a>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-uppercase para placas
    const placaCamion = document.getElementById('placa_camion');
    const placaCarreta = document.getElementById('placa_carreta');
    
    placaCamion.addEventListener('input', function() {
        this.value = this.value.toUpperCase();
    });
    
    placaCarreta.addEventListener('input', function() {
        this.value = this.value.toUpperCase();
    });
});
</script>
@endsection