@extends('dashboard.layouts.app')

@section('title', 'Detalles del Vehículo Abonado')

@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.vehiculos-abonados.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">
                            Detalles del Vehículo Abonado
                        </h1>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Información completa del vehículo y su abono
                        </p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    <a href="{{ route('dashboard.vehiculos-abonados.edit', $vehiculoAbonado->public_id) }}" 
                       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="edit" class="h-4 w-4 mr-2"></i>
                        Editar
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <!-- Estado del Vehículo -->
        <div class="mb-6">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                        <div class="flex-shrink-0">
                            <i data-lucide="truck" class="h-12 w-12 text-blue-500"></i>
                        </div>
                        <div>
                            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
                                {{ $vehiculoAbonado->placa_camion }}
                                @if($vehiculoAbonado->placa_carreta)
                                    <span class="text-gray-500">+ {{ $vehiculoAbonado->placa_carreta }}</span>
                                @endif
                            </h2>
                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                {{ $vehiculoAbonado->cochera->nombre }}
                            </p>
                        </div>
                    </div>
                    <div class="text-right">
                        @switch($vehiculoAbonado->estado)
                            @case('activo')
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                    <i data-lucide="check-circle" class="h-4 w-4 mr-1"></i>
                                    Activo
                                </span>
                                @break
                            @case('inactivo')
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
                                    <i data-lucide="pause-circle" class="h-4 w-4 mr-1"></i>
                                    Inactivo
                                </span>
                                @break
                            @case('vencido')
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                                    <i data-lucide="x-circle" class="h-4 w-4 mr-1"></i>
                                    Vencido
                                </span>
                                @break
                        @endswitch
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Información del Vehículo -->
            <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">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">
                        <i data-lucide="truck" class="h-5 w-5 inline mr-2 text-blue-500"></i>
                        Información del Vehículo
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Placa del Camión</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->placa_camion }}</dd>
                        </div>
                        @if($vehiculoAbonado->placa_carreta)
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Placa de la Carreta</dt>
                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->placa_carreta }}</dd>
                            </div>
                        @endif
                        @if($vehiculoAbonado->marca_camion)
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Marca</dt>
                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->marca_camion }}</dd>
                            </div>
                        @endif
                        @if($vehiculoAbonado->modelo_camion)
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Modelo</dt>
                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->modelo_camion }}</dd>
                            </div>
                        @endif
                        @if($vehiculoAbonado->color_camion)
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Color</dt>
                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->color_camion }}</dd>
                            </div>
                        @endif
                        @if($vehiculoAbonado->anio_camion)
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Año</dt>
                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->anio_camion }}</dd>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Información del Conductor -->
            <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">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">
                        <i data-lucide="user" class="h-5 w-5 inline mr-2 text-green-500"></i>
                        Información del Conductor
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Nombre</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->conductor_nombre }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">DNI</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->conductor_dni }}</dd>
                        </div>
                        @if($vehiculoAbonado->conductor_telefono)
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Teléfono</dt>
                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->conductor_telefono }}</dd>
                            </div>
                        @endif
                        @if($vehiculoAbonado->conductor_licencia)
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Licencia</dt>
                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->conductor_licencia }}</dd>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Información del Cliente -->
            <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">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">
                        <i data-lucide="building" class="h-5 w-5 inline mr-2 text-purple-500"></i>
                        Información del Cliente
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    @if($vehiculoAbonado->cliente)
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Razón Social</dt>
                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->cliente->razon_social }}</dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">RUC</dt>
                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->cliente->numero_documento }}</dd>
                            </div>
                            @if($vehiculoAbonado->cliente->direccion)
                                <div class="col-span-2">
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Dirección</dt>
                                    <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->cliente->direccion }}</dd>
                                </div>
                            @endif
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i data-lucide="user-x" class="mx-auto h-8 w-8 text-gray-400"></i>
                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Sin cliente asignado</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Información del Abono -->
            <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">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">
                        <i data-lucide="credit-card" class="h-5 w-5 inline mr-2 text-yellow-500"></i>
                        Información del Abono
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Tipo de Abono</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->getTipoAbonoFormateado() }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Monto</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->getMontoFormateado() }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Fecha de Inicio</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->fecha_inicio->format('d/m/Y') }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Fecha de Vencimiento</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->fecha_vencimiento->format('d/m/Y') }}</dd>
                        </div>
                    </div>
                    
                    <!-- Estado de Vigencia -->
                    <div class="mt-4 p-4 rounded-lg bg-gray-50 dark:bg-gray-700">
                        @if($vehiculoAbonado->estaVigente())
                            <div class="flex items-center">
                                <i data-lucide="check-circle" class="h-5 w-5 text-green-500 mr-2"></i>
                                <span class="text-sm text-green-700 dark:text-green-300">Abono vigente</span>
                            </div>
                        @elseif($vehiculoAbonado->estaVencido())
                            <div class="flex items-center">
                                <i data-lucide="x-circle" class="h-5 w-5 text-red-500 mr-2"></i>
                                <span class="text-sm text-red-700 dark:text-red-300">
                                    Vencido hace {{ $vehiculoAbonado->fecha_vencimiento->diffInDays(now()) }} días
                                </span>
                            </div>
                        @elseif($vehiculoAbonado->vencePronto())
                            <div class="flex items-center">
                                <i data-lucide="alert-triangle" class="h-5 w-5 text-yellow-500 mr-2"></i>
                                <span class="text-sm text-yellow-700 dark:text-yellow-300">
                                    Vence en {{ $vehiculoAbonado->getDiasRestantes() }} días
                                </span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Observaciones -->
        @if($vehiculoAbonado->observaciones)
            <div class="mt-6 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">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">
                        <i data-lucide="file-text" class="h-5 w-5 inline mr-2 text-gray-500"></i>
                        Observaciones
                    </h3>
                </div>
                <div class="p-6">
                    <p class="text-sm text-gray-900 dark:text-white">{{ $vehiculoAbonado->observaciones }}</p>
                </div>
            </div>
        @endif

        <!-- Acciones -->
        <div class="mt-6 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">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">
                    <i data-lucide="settings" class="h-5 w-5 inline mr-2 text-gray-500"></i>
                    Acciones
                </h3>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap gap-3">
                    <form method="POST" action="{{ route('dashboard.vehiculos-abonados.renovar', $vehiculoAbonado->public_id) }}" class="inline">
                        @csrf
                        <button type="submit" 
                                class="inline-flex items-center px-4 py-2 border border-transparent text-sm 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="refresh-cw" class="h-4 w-4 mr-2"></i>
                            Renovar Abono
                        </button>
                    </form>

                    <form method="POST" action="{{ route('dashboard.vehiculos-abonados.cambiar-estado', $vehiculoAbonado->public_id) }}" class="inline">
                        @csrf
                        <input type="hidden" name="estado" value="{{ $vehiculoAbonado->estado == 'activo' ? 'inactivo' : 'activo' }}">
                        <button type="submit" 
                                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="{{ $vehiculoAbonado->estado == 'activo' ? 'pause' : 'play' }}" class="h-4 w-4 mr-2"></i>
                            {{ $vehiculoAbonado->estado == 'activo' ? 'Desactivar' : 'Activar' }}
                        </button>
                    </form>

                    <form method="POST" action="{{ route('dashboard.vehiculos-abonados.destroy', $vehiculoAbonado->public_id) }}" 
                          class="inline" 
                          onsubmit="return confirm('¿Estás seguro de que quieres eliminar este vehículo abonado?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" 
                                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="trash-2" class="h-4 w-4 mr-2"></i>
                            Eliminar
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection