@extends('dashboard.layouts.app')

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

    <!-- Main Content -->
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <!-- Información Principal -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
            <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 del Vehículo
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Placa del Camión -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Placa del Camión
                        </label>
                        <p class="text-lg font-semibold text-gray-900 dark:text-white">
                            {{ $estacionamiento->placa_camion }}
                        </p>
                    </div>

                    <!-- Placa de la Carreta -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Placa de la Carreta
                        </label>
                        <p class="text-lg font-semibold text-gray-900 dark:text-white">
                            {{ $estacionamiento->placa_carreta ?: 'No registrada' }}
                        </p>
                    </div>

                    <!-- Descripción de la Carga -->
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Descripción de la Carga
                        </label>
                        <p class="text-gray-900 dark:text-white">
                            {{ $estacionamiento->descripcion_carga }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Información del Conductor -->
        <div class="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
            <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 del Conductor
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Nombre del Conductor -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Nombre del Conductor
                        </label>
                        <p class="text-gray-900 dark:text-white">
                            {{ $estacionamiento->conductor_nombre ?: 'No registrado' }}
                        </p>
                    </div>

                    <!-- DNI del Conductor -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            DNI del Conductor
                        </label>
                        <p class="text-gray-900 dark:text-white">
                            {{ $estacionamiento->conductor_dni ?: 'No registrado' }}
                        </p>
                    </div>

                    <!-- Teléfono del Conductor -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Teléfono del Conductor
                        </label>
                        <p class="text-gray-900 dark:text-white">
                            {{ $estacionamiento->conductor_telefono ?: 'No registrado' }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Información del Estacionamiento -->
        <div class="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
            <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 del Estacionamiento
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Fecha de Ingreso -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Fecha de Ingreso
                        </label>
                        <p class="text-gray-900 dark:text-white">
                            {{ \Carbon\Carbon::parse($estacionamiento->fecha_ingreso)->format('d/m/Y H:i') }}
                        </p>
                    </div>

                    <!-- Fecha de Salida -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Fecha de Salida
                        </label>
                        <p class="text-gray-900 dark:text-white">
                            {{ $estacionamiento->fecha_salida ? \Carbon\Carbon::parse($estacionamiento->fecha_salida)->format('d/m/Y H:i') : 'En estacionamiento' }}
                        </p>
                    </div>

                    <!-- Estado del Ticket -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Estado del Ticket
                        </label>
                        @php
                            $estadoColors = [
                                'activo' => 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
                                'cerrado' => 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
                                'perdido' => 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
                                'anulado' => 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'
                            ];
                            $estadoColor = $estadoColors[$estacionamiento->estado_ticket ?? 'activo'] ?? 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
                        @endphp
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ $estadoColor }}">
                            @if($estacionamiento->estado_ticket === 'activo')
                                <i data-lucide="play-circle" class="h-4 w-4 mr-2"></i>
                            @elseif($estacionamiento->estado_ticket === 'cerrado')
                                <i data-lucide="check-circle" class="h-4 w-4 mr-2"></i>
                            @elseif($estacionamiento->estado_ticket === 'perdido')
                                <i data-lucide="x-circle" class="h-4 w-4 mr-2"></i>
                            @elseif($estacionamiento->estado_ticket === 'anulado')
                                <i data-lucide="ban" class="h-4 w-4 mr-2"></i>
                            @endif
                            {{ ucfirst($estacionamiento->estado_ticket ?? 'activo') }}
                        </span>
                    </div>

                    <!-- Número de Ticket -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Número de Ticket
                        </label>
                        <p class="text-lg font-semibold text-gray-900 dark:text-white">
                            {{ $estacionamiento->numero_ticket }}
                        </p>
                    </div>

                    <!-- Duración -->
                    @if($estacionamiento->fecha_salida)
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Duración
                        </label>
                        <p class="text-gray-900 dark:text-white">
                            @if($estacionamiento->tipo_duracion === 'dias')
                                {{ $estacionamiento->cantidad_duracion }} día(s)
                            @else
                                {{ $estacionamiento->cantidad_duracion }} hora(s)
                            @endif
                        </p>
                    </div>

                    <!-- Monto Total -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Monto Total
                        </label>
                        <p class="text-lg font-semibold text-green-600 dark:text-green-400">
                            S/ {{ number_format($estacionamiento->monto_total, 2) }}
                        </p>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Acciones -->
        <div class="mt-6 flex flex-wrap gap-3">
            <a href="{{ route('dashboard.cochera.quick.historial') }}" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
                <i data-lucide="arrow-left" class="h-4 w-4 mr-2"></i>
                Volver al Historial
            </a>

            @if($estacionamiento->estado_ticket === 'activo')
            <a href="{{ route('dashboard.cochera.salida.procesar', $estacionamiento->public_id) }}" 
               class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
                <i data-lucide="log-out" class="h-4 w-4 mr-2"></i>
                Registrar Salida
            </a>

            <a href="{{ route('dashboard.cochera.quick.edit', $estacionamiento->public_id) }}" 
               class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
                <i data-lucide="edit" class="h-4 w-4 mr-2"></i>
                Editar Ticket
            </a>

            <button onclick="anularTicket('{{ $estacionamiento->public_id }}')" 
                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200">
                <i data-lucide="ban" class="h-4 w-4 mr-2"></i>
                Anular Ticket
            </button>
            @endif
        </div>
    </div>
</div>

<script>
function anularTicket(publicId) {
    if (confirm('¿Está seguro de que desea anular este ticket? Esta acción no se puede deshacer.')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("dashboard.cochera.quick.anular", ":id") }}'.replace(':id', publicId);
        
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken;
        form.appendChild(csrfInput);
        
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
@endsection