@extends('dashboard.layouts.app')

@section('title', 'Detalles del Período de Facturación')

@section('content')
<div class="min-h-screen p-6">
    <div class="mx-auto max-w-7xl">
        <!-- Header -->
        <div class="mb-6">
            <div class="flex items-center gap-3 mb-2">
                <a href="{{ route('dashboard.cochera-periodos.index') }}" 
                   class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white 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="arrow-left" class="w-4 h-4"></i>
                </a>
                <div class="flex-1">
                    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">
                        {{ $periodo->getNombrePeriodo() }}
                    </h1>
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        {{ $periodo->cochera->nombre }} - {{ $periodo->cochera->direccion }}
                    </p>
                </div>
                <div class="flex items-center gap-3">
                    @if($periodo->estado === 'abierto')
                        <a href="{{ route('dashboard.cochera-periodos.edit', $periodo->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 hover:border-gray-400 dark:border-gray-600 dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06] dark:hover:border-gray-500">
                            <i data-lucide="edit" class="h-4 w-4"></i>
                            Editar
                        </a>
                    @endif
                    
                    @if($periodo->estado === 'abierto' && $periodo->haTerminado())
                        <form method="POST" action="{{ route('dashboard.cochera-periodos.cerrar', $periodo->id) }}" class="inline">
                            @csrf
                            @method('PATCH')
                            <button type="submit" 
                                    class="inline-flex items-center gap-2 rounded-lg bg-yellow-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-yellow-600 focus:ring-4 focus:ring-yellow-500/20"
                                    onclick="return confirm('¿Está seguro de cerrar este período?')">
                                <i data-lucide="lock" class="h-4 w-4"></i>
                                Cerrar Período
                            </button>
                        </form>
                    @endif
                    
                    @if($periodo->estado === 'cerrado')
                        <form method="POST" action="{{ route('dashboard.cochera-periodos.facturar', $periodo->id) }}" class="inline">
                            @csrf
                            @method('PATCH')
                            <button type="submit" 
                                    class="inline-flex items-center gap-2 rounded-lg bg-green-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-green-600 focus:ring-4 focus:ring-green-500/20"
                                    onclick="return confirm('¿Está seguro de marcar este período como facturado?')">
                                <i data-lucide="check-circle" class="h-4 w-4"></i>
                                Marcar Facturado
                            </button>
                        </form>
                    @endif
                </div>
            </div>
        </div>

        <!-- Estado y progreso -->
        <div class="mb-6 grid grid-cols-1 gap-6 lg:grid-cols-3">
            <!-- Estado -->
            <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Estado del Período</h3>
                        <div class="mt-2">
                            @if($periodo->estado === 'abierto')
                                <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="unlock" class="w-4 h-4 mr-2"></i>
                                    {{ $periodo->estaEnCurso() ? 'En Curso' : 'Abierto' }}
                                </span>
                            @elseif($periodo->estado === 'cerrado')
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
                                    <i data-lucide="lock" class="w-4 h-4 mr-2"></i>
                                    Cerrado
                                </span>
                            @else
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                    <i data-lucide="check-circle" class="w-4 h-4 mr-2"></i>
                                    Facturado
                                </span>
                            @endif
                        </div>
                    </div>
                    <div class="text-right">
                        @if($periodo->fecha_cierre)
                            <p class="text-sm text-gray-500 dark:text-gray-400">Cerrado el:</p>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ $periodo->fecha_cierre->format('d/m/Y') }}
                            </p>
                        @endif
                        @if($periodo->fecha_facturacion)
                            <p class="text-sm text-gray-500 dark:text-gray-400">Facturado el:</p>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ $periodo->fecha_facturacion->format('d/m/Y') }}
                            </p>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Progreso -->
            <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Progreso del Período</h3>
                <div class="mt-4">
                    @if($periodo->estaEnCurso())
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm text-gray-600 dark:text-gray-300">{{ $periodo->getProgreso() }}% completado</span>
                            <span class="text-sm text-gray-500 dark:text-gray-400">{{ $periodo->getDiasRestantes() }} días restantes</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-3 dark:bg-gray-700">
                            <div class="bg-brand-500 h-3 rounded-full transition-all duration-300" style="width: {{ $periodo->getProgreso() }}%"></div>
                        </div>
                    @else
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ $periodo->haTerminado() ? 'Período terminado' : 'Período pendiente' }}
                            </span>
                            <span class="text-sm text-gray-500 dark:text-gray-400">
                                {{ $periodo->fecha_inicio->diffInDays($periodo->fecha_fin) + 1 }} días total
                            </span>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Fechas -->
            <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Período</h3>
                <div class="mt-4 space-y-3">
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Inicio:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white">
                            {{ $periodo->fecha_inicio->format('d/m/Y') }}
                        </span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Fin:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white">
                            {{ $periodo->fecha_fin->format('d/m/Y') }}
                        </span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-300">Tipo:</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white">
                            {{ ucfirst($periodo->tipo_periodo) }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Estadísticas -->
        <div class="mb-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
            <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900">
                            <i data-lucide="truck" class="h-5 w-5 text-blue-600 dark:text-blue-400"></i>
                        </div>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Vehículos Abonados</p>
                        <p class="text-2xl font-semibold text-gray-900 dark:text-white">
                            {{ $estadisticas['total_vehiculos_abonados'] }}
                        </p>
                    </div>
                </div>
            </div>

            <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-green-100 dark:bg-green-900">
                            <i data-lucide="file-text" class="h-5 w-5 text-green-600 dark:text-green-400"></i>
                        </div>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Facturas Generadas</p>
                        <p class="text-2xl font-semibold text-gray-900 dark:text-white">
                            {{ $estadisticas['total_facturas_generadas'] }}
                        </p>
                    </div>
                </div>
            </div>

            <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-yellow-100 dark:bg-yellow-900">
                            <i data-lucide="clock" class="h-5 w-5 text-yellow-600 dark:text-yellow-400"></i>
                        </div>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Pendientes</p>
                        <p class="text-2xl font-semibold text-gray-900 dark:text-white">
                            {{ $estadisticas['facturas_pendientes'] }}
                        </p>
                    </div>
                </div>
            </div>

            <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900">
                            <i data-lucide="dollar-sign" class="h-5 w-5 text-purple-600 dark:text-purple-400"></i>
                        </div>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Monto Facturado</p>
                        <p class="text-2xl font-semibold text-gray-900 dark:text-white">
                            S/ {{ number_format($estadisticas['monto_total_facturado'], 2) }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Vehículos abonados y facturas -->
        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <!-- Vehículos abonados -->
            <div class="rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
                <div class="border-b border-gray-200 px-6 py-4 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                        Vehículos Abonados
                    </h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        Vehículos activos durante este período
                    </p>
                </div>
                <div class="p-6">
                    @if($vehiculosAbonados->count() > 0)
                        <div class="space-y-4">
                            @foreach($vehiculosAbonados as $vehiculo)
                                <div class="flex items-center justify-between rounded-lg border border-gray-100 p-4 dark:border-gray-800">
                                    <div>
                                        <p class="font-medium text-gray-900 dark:text-white">
                                            {{ $vehiculo->placa_camion }}
                                            @if($vehiculo->placa_carreta)
                                                + {{ $vehiculo->placa_carreta }}
                                            @endif
                                        </p>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">
                                            {{ $vehiculo->conductor_nombre }}
                                        </p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">
                                            {{ ucfirst($vehiculo->tipo_abono) }} - S/ {{ number_format($vehiculo->monto_abono, 2) }}
                                        </p>
                                    </div>
                                    <div class="text-right">
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium 
                                            {{ $vehiculo->estado === 'activo' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200' }}">
                                            {{ ucfirst($vehiculo->estado) }}
                                        </span>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                            Vence: {{ $vehiculo->fecha_vencimiento->format('d/m/Y') }}
                                        </p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8">
                            <i data-lucide="truck" class="h-12 w-12 mx-auto text-gray-400 mb-4"></i>
                            <p class="text-gray-500 dark:text-gray-400">No hay vehículos abonados en este período</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Facturas periódicas -->
            <div class="rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
                <div class="border-b border-gray-200 px-6 py-4 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                        Facturas Periódicas
                    </h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        Facturas generadas para este período
                    </p>
                </div>
                <div class="p-6">
                    @if($periodo->facturasPeriodicas->count() > 0)
                        <div class="space-y-4">
                            @foreach($periodo->facturasPeriodicas as $factura)
                                <div class="flex items-center justify-between rounded-lg border border-gray-100 p-4 dark:border-gray-800">
                                    <div>
                                        <p class="font-medium text-gray-900 dark:text-white">
                                            {{ $factura->vehiculoAbonado->placa_camion }}
                                        </p>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">
                                            {{ $factura->cantidad_tickets }} tickets
                                        </p>
                                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                                            S/ {{ number_format($factura->monto_total, 2) }}
                                        </p>
                                    </div>
                                    <div class="text-right">
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium 
                                            {{ $factura->estado === 'pendiente' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' : 
                                               ($factura->estado === 'facturado' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 
                                               'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200') }}">
                                            {{ ucfirst($factura->estado) }}
                                        </span>
                                        @if($factura->fecha_facturacion)
                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                {{ $factura->fecha_facturacion->format('d/m/Y') }}
                                            </p>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8">
                            <i data-lucide="file-text" class="h-12 w-12 mx-auto text-gray-400 mb-4"></i>
                            <p class="text-gray-500 dark:text-gray-400">No hay facturas generadas para este período</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Observaciones -->
        @if($periodo->observaciones)
            <div class="mt-6 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Observaciones</h3>
                <p class="text-gray-600 dark:text-gray-300">{{ $periodo->observaciones }}</p>
            </div>
        @endif
    </div>
</div>
@endsection