@extends('dashboard.layouts.app')

@section('title', 'Facturas Periódicas')

@section('content')
<div class="min-h-screen p-6">
    <div class="mx-auto max-w-screen-2xl">
        <!-- Header -->
        <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Facturas Periódicas</h1>
                <p class="text-sm text-gray-600 dark:text-gray-400">Gestión de facturas mensuales/quincenales de clientes abonados</p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('dashboard.cochera-facturas-periodicas.create') }}" 
                   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="plus" class="h-4 w-4"></i>
                    Nueva Factura
                </a>
            </div>
        </div>

        <!-- Filtros -->
        <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
            <form method="GET" action="{{ route('dashboard.cochera-facturas-periodicas.index') }}" class="space-y-4">
                <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-6">
                    <!-- Búsqueda general -->
                    <div class="lg:col-span-2">
                        <label for="search" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Búsqueda</label>
                        <input 
                            type="text" 
                            name="search" 
                            id="search"
                            value="{{ request('search') }}"
                            placeholder="Buscar por placa, cliente, RUC o comprobante..."
                            class="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"
                        >
                    </div>

                    <!-- Filtro por cochera -->
                    <div>
                        <label for="cochera_id" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Cochera</label>
                        <div class="relative">
                            <select 
                                name="cochera_id" 
                                id="cochera_id"
                                class="h-11 w-full 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="">Todas las cocheras</option>
                                @foreach($cocheras as $cochera)
                                    <option value="{{ $cochera->id }}" {{ request('cochera_id') == $cochera->id ? 'selected' : '' }}>
                                        {{ $cochera->nombre }}
                                    </option>
                                @endforeach
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <i data-lucide="chevron-down" class="h-4 w-4 text-gray-400"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Filtro por estado -->
                    <div>
                        <label for="estado" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Estado</label>
                        <div class="relative">
                            <select 
                                name="estado" 
                                id="estado"
                                class="h-11 w-full 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="">Todos los estados</option>
                                <option value="pendiente" {{ request('estado') == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                                <option value="facturado" {{ request('estado') == 'facturado' ? 'selected' : '' }}>Facturado</option>
                                <option value="cancelado" {{ request('estado') == 'cancelado' ? 'selected' : '' }}>Cancelado</option>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <i data-lucide="chevron-down" class="h-4 w-4 text-gray-400"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Filtro por año -->
                    <div>
                        <label for="año" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Año</label>
                        <div class="relative">
                            <select 
                                name="año" 
                                id="año"
                                class="h-11 w-full 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="">Todos los años</option>
                                @foreach($años as $año)
                                    <option value="{{ $año }}" {{ request('año') == $año ? 'selected' : '' }}>
                                        {{ $año }}
                                    </option>
                                @endforeach
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <i data-lucide="chevron-down" class="h-4 w-4 text-gray-400"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Filtro por mes -->
                    <div>
                        <label for="mes" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Mes</label>
                        <div class="relative">
                            <select 
                                name="mes" 
                                id="mes"
                                class="h-11 w-full 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="">Todos los meses</option>
                                <option value="1" {{ request('mes') == '1' ? 'selected' : '' }}>Enero</option>
                                <option value="2" {{ request('mes') == '2' ? 'selected' : '' }}>Febrero</option>
                                <option value="3" {{ request('mes') == '3' ? 'selected' : '' }}>Marzo</option>
                                <option value="4" {{ request('mes') == '4' ? 'selected' : '' }}>Abril</option>
                                <option value="5" {{ request('mes') == '5' ? 'selected' : '' }}>Mayo</option>
                                <option value="6" {{ request('mes') == '6' ? 'selected' : '' }}>Junio</option>
                                <option value="7" {{ request('mes') == '7' ? 'selected' : '' }}>Julio</option>
                                <option value="8" {{ request('mes') == '8' ? 'selected' : '' }}>Agosto</option>
                                <option value="9" {{ request('mes') == '9' ? 'selected' : '' }}>Septiembre</option>
                                <option value="10" {{ request('mes') == '10' ? 'selected' : '' }}>Octubre</option>
                                <option value="11" {{ request('mes') == '11' ? 'selected' : '' }}>Noviembre</option>
                                <option value="12" {{ request('mes') == '12' ? 'selected' : '' }}>Diciembre</option>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <i data-lucide="chevron-down" class="h-4 w-4 text-gray-400"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Botones -->
                    <div class="flex items-end gap-2 lg:col-span-6">
                        <button 
                            type="submit"
                            class="inline-flex h-11 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="search" class="h-4 w-4"></i>
                            Buscar
                        </button>
                        <a 
                            href="{{ route('dashboard.cochera-facturas-periodicas.index') }}"
                            class="inline-flex h-11 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-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
                        >
                            <i data-lucide="x" class="h-4 w-4"></i>
                            Limpiar
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <!-- Tabla -->
        <div class="rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900">
            <div class="overflow-x-auto">
                <table class="w-full table-auto">
                    <thead class="bg-gray-50 dark:bg-gray-800">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                Cliente/Vehículo
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                Período
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                Tickets
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                Monto
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                Estado
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                Marcar Período
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                Comprobante
                            </th>
                            <th class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                Acciones
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
                        @forelse($facturas as $factura)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
                                <td class="whitespace-nowrap px-6 py-4">
                                    <div class="flex flex-col">
                                        <div class="text-sm font-medium text-gray-900 dark:text-white">
                                            {{ $factura->vehiculoAbonado->cliente->nombre ?? 'Sin cliente' }}
                                        </div>
                                        <div class="text-sm text-gray-500 dark:text-gray-400">
                                            <i data-lucide="truck" class="inline h-3 w-3 mr-1"></i>
                                            {{ $factura->vehiculoAbonado->placa_camion ?? 'Sin placa' }}
                                        </div>
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-6 py-4">
                                    @if($factura->periodoFacturacion)
                                        <div class="text-sm text-gray-900 dark:text-white">
                                            {{ \Carbon\Carbon::parse($factura->periodoFacturacion->fecha_inicio)->format('M Y') }}
                                        </div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">
                                            {{ ucfirst($factura->periodoFacturacion->tipo_periodo) }}
                                        </div>
                                    @else
                                        <span class="text-sm text-gray-400">Sin período</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-6 py-4">
                                    <div class="text-sm font-medium text-gray-900 dark:text-white">
                                        {{ $factura->cantidad_tickets }}
                                    </div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">
                                        tickets
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-6 py-4">
                                    <div class="text-sm font-medium text-gray-900 dark:text-white">
                                        S/. {{ number_format($factura->monto_total, 2) }}
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-6 py-4">
                                    <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 
                                        @if($factura->estado === 'pendiente') bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200
                                        @elseif($factura->estado === 'facturado') bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                                        @else bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200
                                        @endif">
                                        {{ ucfirst($factura->estado) }}
                                    </span>
                                </td>
                                <td class="whitespace-nowrap px-6 py-4">
                                    @if($factura->marcar_periodo_facturado)
                                        <span class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 text-xs font-semibold text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                            <i data-lucide="check-circle" class="h-3 w-3"></i>
                                            Sí
                                        </span>
                                    @else
                                        <span class="inline-flex items-center gap-1 rounded-full bg-gray-100 px-2 text-xs font-semibold text-gray-600 dark:bg-gray-700 dark:text-gray-300">
                                            <i data-lucide="x-circle" class="h-3 w-3"></i>
                                            No
                                        </span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-6 py-4">
                                    @if($factura->comprobante)
                                        <div class="text-sm text-gray-900 dark:text-white">
                                            {{ $factura->comprobante->serie }}-{{ str_pad($factura->comprobante->numero, 8, '0', STR_PAD_LEFT) }}
                                        </div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">
                                            {{ $factura->fecha_facturacion ? \Carbon\Carbon::parse($factura->fecha_facturacion)->format('d/m/Y') : '' }}
                                        </div>
                                    @else
                                        <span class="text-sm text-gray-400">Sin generar</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-2">
                                        <!-- Ver -->
                                        <a href="{{ route('dashboard.cochera-facturas-periodicas.show', $factura) }}" 
                                           class="inline-flex items-center gap-1 rounded-md bg-blue-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-600 focus:ring-4 focus:ring-blue-500/20">
                                            <i data-lucide="eye" class="h-3 w-3"></i>
                                            Ver
                                        </a>

                                        @if($factura->estado === 'pendiente')
                                            <!-- Editar -->
                                            <a href="{{ route('dashboard.cochera-facturas-periodicas.edit', $factura) }}" 
                                               class="inline-flex items-center gap-1 rounded-md bg-yellow-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-yellow-600 focus:ring-4 focus:ring-yellow-500/20">
                                                <i data-lucide="edit-3" class="h-3 w-3"></i>
                                                Editar
                                            </a>

                                            <!-- Facturar -->
                                            <button type="button" 
                                                    onclick="openFacturarModal({{ $factura->id }}, '{{ $factura->vehiculoAbonado->placa_camion ?? '' }}')"
                                                    class="inline-flex items-center gap-1 rounded-md bg-green-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-green-600 focus:ring-4 focus:ring-green-500/20">
                                                <i data-lucide="check-circle" class="h-3 w-3"></i>
                                                Facturar
                                            </button>

                                            <!-- Cancelar -->
                                            <button type="button" 
                                                    onclick="openCancelarModal({{ $factura->id }}, '{{ $factura->vehiculoAbonado->placa_camion ?? '' }}')"
                                                    class="inline-flex items-center gap-1 rounded-md bg-red-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-600 focus:ring-4 focus:ring-red-500/20">
                                                <i data-lucide="x-circle" class="h-3 w-3"></i>
                                                Cancelar
                                            </button>

                                            <!-- Eliminar -->
                                            <form action="{{ route('dashboard.cochera-facturas-periodicas.destroy', $factura) }}" 
                                                  method="POST" 
                                                  class="inline-block"
                                                  onsubmit="return confirm('¿Está seguro de eliminar esta factura?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" 
                                                        class="inline-flex items-center gap-1 rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 focus:ring-4 focus:ring-gray-500/20">
                                                    <i data-lucide="trash-2" class="h-3 w-3"></i>
                                                    Eliminar
                                                </button>
                                            </form>
                                        @endif

                                        @if($factura->estado === 'cancelado')
                                            <!-- Reactivar -->
                                            <form action="{{ route('dashboard.cochera-facturas-periodicas.reactivar', $factura->id) }}" 
                                                  method="POST" 
                                                  class="inline-block"
                                                  onsubmit="return confirm('¿Está seguro de reactivar esta factura?')">
                                                @csrf
                                                @method('PATCH')
                                                <button type="submit" 
                                                        class="inline-flex items-center gap-1 rounded-md bg-orange-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-orange-600 focus:ring-4 focus:ring-orange-500/20">
                                                    <i data-lucide="rotate-ccw" class="h-3 w-3"></i>
                                                    Reactivar
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-6 py-12 text-center">
                                    <div class="flex flex-col items-center">
                                        <i data-lucide="file-text" class="h-12 w-12 text-gray-400 dark:text-gray-600 mb-4"></i>
                                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
                                            No hay facturas periódicas
                                        </h3>
                                        <p class="text-gray-500 dark:text-gray-400 mb-4">
                                            Comience creando su primera factura periódica.
                                        </p>
                                        <a href="{{ route('dashboard.cochera-facturas-periodicas.create') }}" 
                                           class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2 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="plus" class="h-4 w-4"></i>
                                            Crear factura
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($facturas->hasPages())
                <div class="border-t border-gray-200 bg-white px-4 py-3 dark:border-gray-700 dark:bg-gray-900">
                    {{ $facturas->appends(request()->query())->links() }}
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Modal para Facturar -->
<div id="facturarModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-50">
    <div class="w-full max-w-md rounded-lg bg-white p-6 dark:bg-gray-800">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
            Generar Comprobante
        </h3>
        <form id="facturarForm" method="POST">
            @csrf
            @method('PATCH')
            <div class="space-y-4">
                <!-- Empresa Emisora -->
                <div>
                    <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Empresa Emisora <span class="text-red-500">*</span>
                    </label>
                    <select name="empresa_id" id="empresa_id" required 
                            class="h-11 w-full 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="">Seleccionar empresa...</option>
                        @foreach($empresasDisponibles as $empresa)
                            <option value="{{ $empresa->id }}" 
                                    data-ruc="{{ $empresa->ruc }}"
                                    data-razon-social="{{ $empresa->razon_social }}">
                                {{ $empresa->razon_social }} - {{ $empresa->ruc }}
                                @if(str_starts_with($empresa->ruc, '10'))
                                    (RUS - Principalmente Boletas)
                                @elseif(str_starts_with($empresa->ruc, '20'))
                                    (RUC 20 - Facturas y Boletas)
                                @endif
                            </option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-gray-500">
                        Selecciona la empresa que emitirá el comprobante. RUS (10...) para boletas, RUC 20 (20...) para facturas.
                    </p>
                </div>

                <!-- Tipo de Comprobante -->
                <div>
                    <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Tipo de Comprobante</label>
                    <select name="tipo_comprobante" id="tipo_comprobante" required 
                            class="h-11 w-full 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="boleta">Boleta</option>
                        <option value="factura">Factura</option>
                    </select>
                    <p class="mt-1 text-xs text-gray-500">
                        <span class="text-orange-600">⚠️ Recomendación:</span> Boletas con empresa RUS, Facturas con empresa RUC 20
                    </p>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Serie</label>
                    <input type="text" name="serie" value="F001" required 
                           class="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">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Número</label>
                    <input type="number" name="numero" value="1" min="1" required 
                           class="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">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Fecha de Facturación</label>
                    <input type="date" name="fecha_facturacion" value="{{ date('Y-m-d') }}" required 
                           class="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">
                </div>
            </div>
            <div class="mt-6 flex justify-end gap-3">
                <button type="button" onclick="closeFacturarModal()" 
                        class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                    Cancelar
                </button>
                <button type="submit" 
                        class="rounded-lg bg-green-500 px-4 py-2 text-sm font-medium text-white hover:bg-green-600 focus:ring-4 focus:ring-green-500/20">
                    Generar Comprobante
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Modal para Cancelar -->
<div id="cancelarModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-50">
    <div class="w-full max-w-md rounded-lg bg-white p-6 dark:bg-gray-800">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
            Cancelar Factura
        </h3>
        <form id="cancelarForm" method="POST">
            @csrf
            @method('PATCH')
            <div class="space-y-4">
                <div>
                    <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Motivo de Cancelación</label>
                    <textarea name="observaciones_cancelacion" rows="3" 
                              class="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"
                              placeholder="Motivo de la cancelación (opcional)"></textarea>
                </div>
            </div>
            <div class="mt-6 flex justify-end gap-3">
                <button type="button" onclick="closeCancelarModal()" 
                        class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                    Cerrar
                </button>
                <button type="submit" 
                        class="rounded-lg bg-red-500 px-4 py-2 text-sm font-medium text-white hover:bg-red-600 focus:ring-4 focus:ring-red-500/20">
                    Cancelar Factura
                </button>
            </div>
        </form>
    </div>
</div>

<script>
// Modal para facturar
function openFacturarModal(facturaId, placa) {
    document.getElementById('facturarForm').action = `/dashboard/cochera-facturas-periodicas/${facturaId}/facturar`;
    
    // Resetear selecciones al abrir modal
    document.getElementById('empresa_id').value = '';
    document.getElementById('tipo_comprobante').value = 'boleta';
    
    document.getElementById('facturarModal').classList.remove('hidden');
    document.getElementById('facturarModal').classList.add('flex');
}

function closeFacturarModal() {
    document.getElementById('facturarModal').classList.add('hidden');
    document.getElementById('facturarModal').classList.remove('flex');
}

// Modal para cancelar
function openCancelarModal(facturaId, placa) {
    document.getElementById('cancelarForm').action = `/dashboard/cochera-facturas-periodicas/${facturaId}/cancelar`;
    document.getElementById('cancelarModal').classList.remove('hidden');
    document.getElementById('cancelarModal').classList.add('flex');
}

function closeCancelarModal() {
    document.getElementById('cancelarModal').classList.add('hidden');
    document.getElementById('cancelarModal').classList.remove('flex');
}

// Cerrar modales al hacer clic fuera
document.getElementById('facturarModal').addEventListener('click', function(e) {
    if (e.target === this) closeFacturarModal();
});

document.getElementById('cancelarModal').addEventListener('click', function(e) {
    if (e.target === this) closeCancelarModal();
});

// 🎯 Lógica automática de selección de empresa según tipo de comprobante
document.getElementById('tipo_comprobante').addEventListener('change', function() {
    const tipoComprobante = this.value;
    const empresaSelect = document.getElementById('empresa_id');
    const empresaOptions = empresaSelect.querySelectorAll('option[value!=""]');
    
    console.log('🎯 Tipo de comprobante seleccionado:', tipoComprobante);
    
    // Lógica de selección automática
    let empresaRecomendada = null;
    
    if (tipoComprobante === 'boleta') {
        // Buscar empresa RUS (RUC que empiece con 10)
        empresaRecomendada = Array.from(empresaOptions).find(option => {
            const ruc = option.getAttribute('data-ruc');
            return ruc && ruc.startsWith('10');
        });
    } else if (tipoComprobante === 'factura') {
        // Buscar empresa RUC 20 (RUC que empiece con 20)
        empresaRecomendada = Array.from(empresaOptions).find(option => {
            const ruc = option.getAttribute('data-ruc');
            return ruc && ruc.startsWith('20');
        });
    }
    
    if (empresaRecomendada) {
        empresaSelect.value = empresaRecomendada.value;
        console.log('✅ Empresa seleccionada automáticamente:', empresaRecomendada.textContent.trim());
        
        // Efecto visual de confirmación
        empresaSelect.style.borderColor = '#10b981';
        setTimeout(() => {
            empresaSelect.style.borderColor = '';
        }, 1000);
    } else {
        console.log('⚠️ No se encontró empresa recomendada para:', tipoComprobante);
    }
});

// 🔄 Validación en tiempo real de combinación empresa-tipo
document.getElementById('empresa_id').addEventListener('change', function() {
    const empresaId = this.value;
    const tipoComprobante = document.getElementById('tipo_comprobante').value;
    
    if (!empresaId) return;
    
    const selectedOption = this.querySelector(`option[value="${empresaId}"]`);
    const ruc = selectedOption ? selectedOption.getAttribute('data-ruc') : '';
    
    // Mostrar advertencias si la combinación no es ideal
    let warning = '';
    if (tipoComprobante === 'factura' && ruc.startsWith('10')) {
        warning = '⚠️ Empresa RUS seleccionada para Factura. Recomendamos usar empresa RUC 20.';
    } else if (tipoComprobante === 'boleta' && ruc.startsWith('20')) {
        warning = 'ℹ️ Empresa RUC 20 seleccionada para Boleta. También puede usar empresa RUS.';
    }
    
    // Mostrar/ocultar advertencia (puedes personalizar esto según tu UI)
    if (warning) {
        console.log(warning);
    }
});
</script>
@endsection