@extends('padre.padre')

@section('contenido')
<style>
    .badge-domicilio {
        background-color: #0d6efd;
        color: #fff;
        font-size: 0.8rem;
    }
    .badge-mostrador {
        background-color: #6c757d;
        color: #fff;
        font-size: 0.8rem;
    }
    .badge-convenios {
        background-color: #0dcaf0;
        color: #000;
        font-size: 0.8rem;
    }
    .factura-code {
        font-family: monospace;
        font-weight: bold;
        font-size: 0.95rem;
        cursor: pointer;
    }
    .factura-code:hover {
        text-decoration: underline;
        color: #0d6efd;
    }
    .table-container {
        border-radius: 8px;
        overflow: hidden;
    }
    .bodega-col-wrapper label {
        display: block;
        width: 100%;
        margin-bottom: 0;
    }
    .bodega-col-wrapper select, #idbodegas {
        width: 100% !important;
        display: block;
        font-size: 0.85rem;
        height: 31px;
        padding: 0.2rem 0.5rem;
        border-radius: 0.25rem;
        border: 1px solid #ced4da;
    }
    .compact-toolbar {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
    }
    .stat-pill {
        font-size: 0.82rem;
        padding: 4px 10px;
        border-radius: 20px;
        font-weight: 600;
    }
</style>

<div class="container-fluid px-3 py-2">
    <!-- Header Compacto -->
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-2 pb-2 border-bottom">
        <div class="d-flex align-items-center gap-2">
            <img src="{{ asset('img/clientes1.svg') }}" alt="Domicilios" style="width:28px;height:28px;">
            <h5 class="mb-0 fw-bold">ASIGNACIÓN DE DOMICILIARIOS</h5>
            
            @php
                $totalFacturas = isset($facturas) ? count($facturas) : 0;
                $totalPendientes = 0;
                $totalAsignados = 0;

                if (isset($facturas)) {
                    foreach ($facturas as $f) {
                        if (!empty($f->idDomicilio) && $f->idDomicilio != '0') {
                            $totalAsignados++;
                        } else {
                            $totalPendientes++;
                        }
                    }
                }
            @endphp
            <!-- Badges resumen integrados -->
            <span class="badge bg-primary stat-pill ms-2" id="kpiTotal">🧾 Facturas: {{ $totalFacturas }}</span>
            <span class="badge bg-warning text-dark stat-pill" id="kpiPendientes">⏳ Pendientes: {{ $totalPendientes }}</span>
            <span class="badge bg-success stat-pill" id="kpiAsignados">🛵 Asignados: {{ $totalAsignados }}</span>
        </div>
        <div class="d-flex gap-2 align-items-center">
            <button type="button" class="btn btn-success btn-sm py-1 fw-bold shadow-sm" id="btnAbrirModalInforme" data-bs-toggle="modal" data-bs-target="#modalInformeDomicilios">
                <i class="fas fa-file-invoice-dollar"></i> 📊 Informe Domicilios
            </button>
            <a href="{{ url('vistadomicilio') }}" class="btn btn-outline-primary btn-sm py-1">
                <i class="fas fa-users-cog"></i> Repartidores
            </a>
            @include('menu.botonRegresar')
        </div>
    </div>

    <!-- Barra Unificada de Filtros y Asignación Rápida -->
    <div class="card compact-toolbar shadow-sm mb-3 border-0">
        <div class="card-body p-2">
            <!-- Fila 1: Filtros de Consulta -->
            <form action="{{ url('asignarDomicilio') }}" method="GET" id="formFiltros" class="row g-2 align-items-end mb-2 pb-2 border-bottom">
                <!-- Fecha Inicial -->
                <div class="col-6 col-md-2">
                    <label for="fi" class="form-label small fw-bold mb-0 text-muted">📅 F. Inicial</label>
                    <input type="date" name="fi" id="fi" class="form-control form-control-sm" value="{{ $fi ?? date('Y-m-d') }}" required>
                </div>

                <!-- Fecha Final -->
                <div class="col-6 col-md-2">
                    <label for="ff" class="form-label small fw-bold mb-0 text-muted">📅 F. Final</label>
                    <input type="date" name="ff" id="ff" class="form-control form-control-sm" value="{{ $ff ?? date('Y-m-d') }}" required>
                </div>

                <!-- Bodega -->
                <div class="col-6 col-md-2 bodega-col-wrapper">
                    <label class="form-label small fw-bold mb-0 text-muted">🏢 Bodega</label>
                    <div class="d-flex align-items-center">
                        @include('../menu.bodegas')
                    </div>
                </div>

                <!-- Tipo de Atención (Predeterminado: Domicilio) -->
                <div class="col-6 col-md-2">
                    <label for="tipoAtencion" class="form-label small fw-bold mb-0 text-muted">🛵 Tipo Atención</label>
                    <select name="tipoAtencion" id="tipoAtencion" class="form-select form-select-sm fw-semibold">
                        <option value="Domicilio" {{ ($tipoAtencion ?? 'Domicilio') == 'Domicilio' ? 'selected' : '' }}>🛵 Domicilio (Defecto)</option>
                        <option value="Mostrador" {{ ($tipoAtencion ?? '') == 'Mostrador' ? 'selected' : '' }}>🏢 Mostrador</option>
                        <option value="Convenios" {{ ($tipoAtencion ?? '') == 'Convenios' ? 'selected' : '' }}>📑 Convenios</option>
                        <option value="Todos" {{ ($tipoAtencion ?? '') == 'Todos' ? 'selected' : '' }}>🌐 Todos</option>
                    </select>
                </div>

                <!-- Estado Asignación Domicilio -->
                <div class="col-6 col-md-2">
                    <label for="estadoDomi" class="form-label small fw-bold mb-0 text-muted">📋 Estado</label>
                    <select name="estadoDomi" id="estadoDomi" class="form-select form-select-sm">
                        <option value="pendientes" {{ ($estadoDomi ?? 'pendientes') == 'pendientes' ? 'selected' : '' }}>🟡 Pendientes (Defecto)</option>
                        <option value="asignados" {{ ($estadoDomi ?? '') == 'asignados' ? 'selected' : '' }}>🟢 Asignados</option>
                        <option value="todos" {{ ($estadoDomi ?? '') == 'todos' ? 'selected' : '' }}>🌐 Todos</option>
                    </select>
                </div>

                <!-- Botones de Acción -->
                <div class="col-6 col-md-2 d-flex gap-1">
                    <button type="submit" class="btn btn-primary btn-sm flex-fill py-1" id="btnFiltrar">
                        <i class="fas fa-search"></i> Consultar
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm py-1" id="btnHoy" title="Ver hoy con Domicilio">
                        Hoy
                    </button>
                </div>
            </form>

            <!-- Fila 2: Asignación Rápida y Buscador en Vivo -->
            <form id="formAsignarDomicilio" autocomplete="off" onsubmit="return false;" class="row g-2 align-items-end">
                <div class="col-12 col-md-3">
                    <label for="numeroF" class="form-label small fw-bold mb-0 text-primary">
                        <i class="fas fa-barcode"></i> Escanear / Factura #:
                    </label>
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control form-control-sm fw-bold" id="numeroF" name="numeroF" placeholder="Ej: B1-12345" autofocus>
                        <button class="btn btn-outline-secondary" type="button" id="btnLimpiarNumeroF" title="Limpiar">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>

                <div class="col-12 col-md-4">
                    <label for="domicilioSelect" class="form-label small fw-bold mb-0 text-primary">
                        <i class="fas fa-motorcycle"></i> Domiciliario / Repartidor:
                    </label>
                    <select class="form-select form-select-sm" id="domicilioSelect" name="domicilioSelect">
                        <option value="">-- Seleccionar Domiciliario --</option>
                        @if(isset($domiciliarios) && count($domiciliarios) > 0)
                            @foreach($domiciliarios as $d)
                                <option value="{{ $d->iddm }}">
                                    {{ $d->nombreDomi }} {{ $d->apellidoDOm }} - CC: {{ $d->ccDomi }} {{ !empty($d->telDomi) ? '('.$d->telDomi.')' : '' }}
                                </option>
                            @endforeach
                        @endif
                    </select>
                </div>

                <div class="col-6 col-md-2 d-grid">
                    <button type="button" class="btn btn-success btn-sm fw-bold py-1" id="asignarDomicilio">
                        <i class="fas fa-check-circle"></i> Asignar
                    </button>
                </div>

                <!-- Buscador en tiempo real de la tabla -->
                <div class="col-6 col-md-3">
                    <label for="filtroTexto" class="form-label small fw-bold mb-0 text-muted">
                        <i class="fas fa-filter"></i> Filtrar en tabla:
                    </label>
                    <input type="text" id="filtroTexto" class="form-control form-control-sm" placeholder="Buscar factura, cliente, teléfono...">
                </div>
            </form>
        </div>
    </div>

    <!-- Listado y Tabla de Facturas -->
    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div class="table-responsive table-container">
                <table class="table table-sm table-hover table-striped align-middle mb-0" id="tablaFacturas">
                    <thead class="table-dark text-nowrap small">
                        <tr>
                            <th class="text-center py-2"># Factura</th>
                            <th class="py-2">Fecha / Hora</th>
                            <th class="py-2">Bodega</th>
                            <th class="text-center py-2">Tipo Atención</th>
                            <th class="py-2">Cliente</th>
                            <th class="py-2">Contacto / Dirección</th>
                            <th class="text-center py-2">Domiciliario Asignado</th>
                            <th class="text-center py-2">Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="cuerpoTablaFacturas">
                        @if(isset($facturas) && count($facturas) > 0)
                            @foreach($facturas as $item)
                                @php
                                    $tieneDomi = !empty($item->idDomicilio) && $item->idDomicilio != '0';
                                    $nombreRepartidor = $tieneDomi ? trim(($item->nombreDomi ?? '') . ' ' . ($item->apellidoDOm ?? '')) : 'Sin Asignar';
                                @endphp
                                <tr id="fila-{{ $item->factura }}" data-factura="{{ $item->factura }}" data-domicilio-id="{{ $item->idDomicilio ?? '' }}">
                                    <!-- Factura -->
                                    <td class="text-center">
                                        <span class="badge bg-light text-dark border factura-code" title="Clic para cargar en barra de asignación" onclick="seleccionarFactura('{{ $item->factura }}')">
                                            {{ $item->factura }}
                                        </span>
                                    </td>

                                    <!-- Fecha / Hora -->
                                    <td class="text-nowrap small">
                                        <div><i class="far fa-calendar-alt text-muted"></i> {{ date('Y-m-d', strtotime($item->fechaFactura)) }}</div>
                                        <div class="text-muted"><i class="far fa-clock"></i> {{ date('H:i A', strtotime($item->fechaFactura)) }}</div>
                                    </td>

                                    <!-- Bodega -->
                                    <td>
                                        <span class="badge bg-secondary">{{ $item->nombreBodega ?? ('Bodega '.$item->idbodegaF) }}</span>
                                    </td>

                                    <!-- Tipo Atención -->
                                    <td class="text-center">
                                        @if($item->tipoAtencion == 'Domicilio')
                                            <span class="badge badge-domicilio px-2 py-1"><i class="fas fa-motorcycle"></i> Domicilio</span>
                                        @elseif($item->tipoAtencion == 'Mostrador')
                                            <span class="badge badge-mostrador px-2 py-1"><i class="fas fa-store"></i> Mostrador</span>
                                        @elseif($item->tipoAtencion == 'Convenios')
                                            <span class="badge badge-convenios px-2 py-1"><i class="fas fa-file-contract"></i> Convenios</span>
                                        @else
                                            <span class="badge bg-info text-dark">{{ $item->tipoAtencion }}</span>
                                        @endif
                                    </td>

                                    <!-- Cliente -->
                                    <td>
                                        <div class="fw-bold small">{{ $item->clienteNombre ?? 'Cliente General' }}</div>
                                        <small class="text-muted">CC/NIT: {{ $item->clienteCedula ?? 'N/A' }}</small>
                                    </td>

                                    <!-- Contacto / Dirección -->
                                    <td class="small">
                                        @if(!empty($item->clienteTelefono))
                                            <div><i class="fas fa-phone text-success"></i> <a href="tel:{{ $item->clienteTelefono }}" class="text-decoration-none">{{ $item->clienteTelefono }}</a></div>
                                        @endif
                                        @if(!empty($item->clienteDireccion))
                                            <div class="text-truncate" style="max-width: 220px;" title="{{ $item->clienteDireccion }}">
                                                <i class="fas fa-map-marker-alt text-danger"></i> {{ $item->clienteDireccion }}
                                            </div>
                                        @endif
                                    </td>

                                    <!-- Domiciliario Asignado -->
                                    <td class="text-center celda-domiciliario">
                                        @if($tieneDomi)
                                            <span class="badge bg-success py-1 px-2">
                                                <i class="fas fa-check-circle"></i> {{ $nombreRepartidor }}
                                            </span>
                                            @if(!empty($item->telDomi))
                                                <div class="small text-muted mt-0"><i class="fas fa-phone-alt"></i> {{ $item->telDomi }}</div>
                                            @endif
                                        @else
                                            <span class="badge bg-warning text-dark py-1 px-2">
                                                <i class="fas fa-exclamation-triangle"></i> Pendiente
                                            </span>
                                        @endif
                                    </td>

                                    <!-- Acciones -->
                                    <td class="text-center text-nowrap">
                                        @if($tieneDomi)
                                            <button type="button" class="btn btn-outline-primary btn-sm py-1 px-2 me-1" title="Cambiar Repartidor" onclick="abrirModalAsignar('{{ $item->factura }}', '{{ $item->clienteNombre ?? '' }}', '{{ $item->idDomicilio ?? '' }}')">
                                                ✏️ Cambiar
                                            </button>
                                            <button type="button" class="btn btn-danger btn-sm py-1 px-2" title="Quitar Domiciliario Asignado" onclick="desasignarDomicilio('{{ $item->factura }}')">
                                                🗑️ Quitar
                                            </button>
                                        @else
                                            <button type="button" class="btn btn-primary btn-sm py-1 px-2" title="Asignar Domiciliario" onclick="abrirModalAsignar('{{ $item->factura }}', '{{ $item->clienteNombre ?? '' }}', '')">
                                                ➕ Asignar
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr id="filaSinDatos">
                                <td colspan="8" class="text-center py-4 text-muted">
                                    <div class="display-6 mb-1">🔍</div>
                                    <h6 class="mb-0">No se encontraron facturas con los filtros seleccionados</h6>
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Asignación Rápida por Fila -->
<div class="modal fade" id="modalAsignarDirecto" tabindex="-1" aria-labelledby="modalAsignarDirectoLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white py-2">
                <h6 class="modal-title mb-0" id="modalAsignarDirectoLabel">
                    <i class="fas fa-motorcycle"></i> Asignar Domiciliario
                </h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body py-3">
                <div class="mb-2">
                    <label class="form-label text-muted small fw-bold mb-0">FACTURA</label>
                    <div class="h5 text-primary fw-bold mb-0" id="modalFacturaTexto">---</div>
                    <small class="text-muted" id="modalClienteTexto"></small>
                </div>
                <input type="hidden" id="modalNumeroFactura">
                
                <div class="mb-2">
                    <label for="modalDomicilioSelect" class="form-label small fw-bold mb-1">Seleccionar Domiciliario:</label>
                    <select class="form-select" id="modalDomicilioSelect">
                        <option value="">-- Seleccionar Domiciliario --</option>
                        @if(isset($domiciliarios) && count($domiciliarios) > 0)
                            @foreach($domiciliarios as $d)
                                <option value="{{ $d->iddm }}">
                                    {{ $d->nombreDomi }} {{ $d->apellidoDOm }} - CC: {{ $d->ccDomi }}
                                </option>
                            @endforeach
                        @endif
                    </select>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-success btn-sm" id="btnConfirmarAsignacionModal">
                    <i class="fas fa-check"></i> Guardar Asignación
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Informe de Domicilios y Liquidación -->
<div class="modal fade" id="modalInformeDomicilios" tabindex="-1" aria-labelledby="modalInformeDomiciliosLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-dark text-white py-2">
                <div class="d-flex align-items-center gap-2">
                    <span class="fs-4">📊</span>
                    <div>
                        <h5 class="modal-title fw-bold mb-0" id="modalInformeDomiciliosLabel">INFORME Y LIQUIDACIÓN DE DOMICILIOS</h5>
                        <small class="text-light opacity-75">Resumen por repartidor, cálculo de entregas y descuento de devoluciones</small>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-3 bg-light">
                <!-- Barra de Filtros del Informe -->
                <div class="card shadow-sm border-0 mb-3">
                    <div class="card-body p-2 bg-white rounded">
                        <div class="row g-2 align-items-end">
                            <div class="col-6 col-md-2">
                                <label for="inf_fi" class="form-label small fw-bold mb-0 text-muted">📅 F. Inicial</label>
                                <input type="date" id="inf_fi" class="form-control form-control-sm" value="{{ date('Y-m-01') }}">
                            </div>
                            <div class="col-6 col-md-2">
                                <label for="inf_ff" class="form-label small fw-bold mb-0 text-muted">📅 F. Final</label>
                                <input type="date" id="inf_ff" class="form-control form-control-sm" value="{{ date('Y-m-d') }}">
                            </div>
                            <div class="col-12 col-md-3">
                                <label for="inf_bodega" class="form-label small fw-bold mb-0 text-muted">🏢 Bodega</label>
                                <select id="inf_bodega" class="form-select form-select-sm">
                                    @php
                                        $perfilInf = session()->get("perfil");
                                        $bodegasUserInf = session()->get("bodegasUser");
                                        $bodegaUserInf = session()->get("bodegaUser");
                                        $bodegasAllInf = session()->get("bodegas");
                                        if (empty($bodegasAllInf)) {
                                            try {
                                                $bodegasAllInf = \DB::table('bodegas')->get();
                                            } catch (\Exception $e) {
                                                $bodegasAllInf = [];
                                            }
                                        }
                                        $idsAsignadosInf = [];
                                        if (!empty($bodegasUserInf)) {
                                            foreach ($bodegasUserInf as $bu) {
                                                $idsAsignadosInf[] = is_object($bu) ? $bu->bodegaPermiti : $bu['bodegaPermiti'];
                                            }
                                        }
                                    @endphp
                                    @if ($perfilInf != 0)
                                        <option value="0">🌐 Todas las Bodegas</option>
                                    @endif
                                    @if (!empty($bodegasAllInf))
                                        @foreach ($bodegasAllInf as $b)
                                            @php
                                                $bId = is_object($b) ? $b->id : $b['id'];
                                                $bNombre = is_object($b) ? $b->nombreBodega : $b['nombreBodega'];
                                                $mostrarB = ($perfilInf != 0) || (empty($idsAsignadosInf) ? ($bId == $bodegaUserInf) : in_array($bId, $idsAsignadosInf) || $bId == $bodegaUserInf);
                                            @endphp
                                            @if ($mostrarB)
                                                <option value="{{ $bId }}">
                                                    🏢 {{ $bNombre }}
                                                </option>
                                            @endif
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="col-12 col-md-5 d-flex flex-wrap gap-1 align-items-end justify-content-md-end">
                                <div class="btn-group btn-group-sm me-1" role="group">
                                    <button type="button" class="btn btn-outline-secondary" onclick="setRangoInforme('hoy')">Hoy</button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="setRangoInforme('semana')">Semana</button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="setRangoInforme('mes')">Mes</button>
                                </div>
                                <button type="button" class="btn btn-primary btn-sm fw-bold px-3" id="btnConsultarInforme">
                                    <i class="fas fa-search"></i> Consultar
                                </button>
                                <button type="button" class="btn btn-success btn-sm fw-bold px-3" id="btnDescargarExcelInforme">
                                    <i class="fas fa-file-excel"></i> Excel (.xlsx)
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tarjetas KPI de Totales -->
                <div class="row g-2 mb-3">
                    <div class="col-6 col-md">
                        <div class="card border-0 shadow-sm p-2 text-center bg-white rounded">
                            <span class="text-muted small fw-bold text-uppercase">🛵 Repartidores</span>
                            <h5 class="fw-bold mb-0 text-dark" id="kpiInfRepartidores">0</h5>
                        </div>
                    </div>
                    <div class="col-6 col-md">
                        <div class="card border-0 shadow-sm p-2 text-center bg-white rounded">
                            <span class="text-muted small fw-bold text-uppercase">📦 Domicilios</span>
                            <h5 class="fw-bold mb-0 text-primary" id="kpiInfDomicilios">0</h5>
                        </div>
                    </div>
                    <div class="col-6 col-md">
                        <div class="card border-0 shadow-sm p-2 text-center bg-white rounded">
                            <span class="text-muted small fw-bold text-uppercase">💰 Facturado</span>
                            <h5 class="fw-bold mb-0 text-dark" id="kpiInfBruto">$ 0</h5>
                        </div>
                    </div>
                    <div class="col-6 col-md">
                        <div class="card border-0 shadow-sm p-2 text-center bg-white rounded">
                            <span class="text-muted small fw-bold text-uppercase">🔄 Devoluciones</span>
                            <h5 class="fw-bold mb-0 text-danger" id="kpiInfDevoluciones">$ 0</h5>
                        </div>
                    </div>
                    <div class="col-12 col-md">
                        <div class="card border-0 shadow-sm p-2 text-center bg-success text-white rounded">
                            <span class="text-white-50 small fw-bold text-uppercase">💵 Total Neto</span>
                            <h5 class="fw-bold mb-0 text-white" id="kpiInfNeto">$ 0</h5>
                        </div>
                    </div>
                </div>

                <!-- Buscador rápido en vivo de la tabla de informe -->
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h6 class="fw-bold mb-0 text-dark">
                        <i class="fas fa-list text-primary"></i> Resumen de Liquidación por Repartidor
                    </h6>
                    <div style="max-width: 280px;">
                        <input type="text" id="filtroTextoInforme" class="form-control form-control-sm" placeholder="🔍 Filtrar repartidor o cédula...">
                    </div>
                </div>

                <!-- Tabla de Resumen por Domiciliario -->
                <div class="card border-0 shadow-sm mb-3">
                    <div class="table-responsive" style="max-height: 380px;">
                        <table class="table table-sm table-hover table-striped align-middle mb-0" id="tablaResumenInforme">
                            <thead class="table-dark sticky-top small text-nowrap">
                                <tr>
                                    <th class="text-center py-2">#</th>
                                    <th class="py-2">Repartidor</th>
                                    <th class="py-2">Cédula</th>
                                    <th class="py-2">Teléfono</th>
                                    <th class="py-2">Bodegas</th>
                                    <th class="text-center py-2">Cant. Domicilios</th>
                                    <th class="text-center py-2">Con Devolución</th>
                                    <th class="text-end py-2">Total Facturado</th>
                                    <th class="text-end py-2">Total Devolución</th>
                                    <th class="text-end py-2">Total Neto</th>
                                    <th class="text-center py-2">% Part.</th>
                                    <th class="text-center py-2">Detalle</th>
                                </tr>
                            </thead>
                            <tbody id="cuerpoTablaInforme">
                                <tr>
                                    <td colspan="12" class="text-center py-4 text-muted">
                                        <div class="spinner-border spinner-border-sm text-primary mb-1" role="status"></div>
                                        <div>Cargando datos del informe...</div>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot class="table-secondary fw-bold small text-nowrap" id="pieTablaInforme" style="display: none;">
                                <tr>
                                    <td colspan="5" class="text-end">TOTALES GENERALES:</td>
                                    <td class="text-center" id="pieCantDomicilios">0</td>
                                    <td class="text-center" id="pieCantDevoluciones">0</td>
                                    <td class="text-end" id="pieTotalFacturado">$ 0</td>
                                    <td class="text-end text-danger" id="pieTotalDevoluciones">$ 0</td>
                                    <td class="text-end text-success" id="pieTotalNeto">$ 0</td>
                                    <td class="text-center">100%</td>
                                    <td></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer py-2 bg-white d-flex justify-content-between">
                <small class="text-muted"><i class="fas fa-info-circle"></i> Los valores descuentan notas de devolución y cancelaciones de facturas automáticamente.</small>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Submodal Detalle de Facturas por Repartidor -->
<div class="modal fade" id="modalDetalleFacturasRepartidor" tabindex="-1" aria-labelledby="modalDetalleFacturasRepartidorLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-primary text-white py-2">
                <div>
                    <h6 class="modal-title fw-bold mb-0" id="modalDetalleFacturasRepartidorLabel">
                        <i class="fas fa-receipt me-1"></i> Facturas Entregadas: <span id="nombreRepartidorDetalle">---</span>
                    </h6>
                    <small id="subtituloDetalleRepartidor" class="text-white-50"></small>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-2">
                <div class="table-responsive" style="max-height: 420px;">
                    <table class="table table-sm table-hover align-middle mb-0" id="tablaDetalleFacturas">
                        <thead class="table-light sticky-top small text-nowrap">
                            <tr>
                                <th class="text-center"># Factura</th>
                                <th>Fecha / Hora</th>
                                <th>Bodega</th>
                                <th>Cliente</th>
                                <th>Contacto / Dirección</th>
                                <th class="text-end">Valor Factura</th>
                                <th class="text-end">Devolución</th>
                                <th class="text-end">Valor Neto</th>
                            </tr>
                        </thead>
                        <tbody id="cuerpoTablaDetalleFacturas">
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Volver al Resumen</button>
            </div>
        </div>
    </div>
</div>

<!-- Scripts de Interacción -->
<script>
window.addEventListener('load', function() {
    const inputNumeroF = document.getElementById("numeroF");
    if(inputNumeroF) {
        inputNumeroF.focus();
        
        inputNumeroF.addEventListener('keydown', function(e) {
            if(e.key === 'Enter') {
                e.preventDefault();
                const domiSelect = document.getElementById("domicilioSelect");
                if(domiSelect.value) {
                    asignarDomicilioAFactura();
                } else {
                    domiSelect.focus();
                }
            }
        });
    }

    const btnAsignar = document.getElementById("asignarDomicilio");
    if(btnAsignar) {
        btnAsignar.addEventListener('click', function() {
            asignarDomicilioAFactura();
        });
    }

    const btnLimpiar = document.getElementById("btnLimpiarNumeroF");
    if(btnLimpiar) {
        btnLimpiar.addEventListener('click', function() {
            inputNumeroF.value = '';
            inputNumeroF.focus();
        });
    }

    const btnHoy = document.getElementById("btnHoy");
    if(btnHoy) {
        btnHoy.addEventListener('click', function() {
            const hoy = new Date().toISOString().split('T')[0];
            document.getElementById("fi").value = hoy;
            document.getElementById("ff").value = hoy;
            document.getElementById("tipoAtencion").value = "Domicilio";
            document.getElementById("estadoDomi").value = "pendientes";
            document.getElementById("formFiltros").submit();
        });
    }

    const filtroTexto = document.getElementById("filtroTexto");
    if(filtroTexto) {
        filtroTexto.addEventListener('input', function() {
            const val = this.value.toLowerCase().trim();
            const filas = document.querySelectorAll("#cuerpoTablaFacturas tr[data-factura]");
            let visibles = 0;

            filas.forEach(fila => {
                const textoFila = fila.innerText.toLowerCase();
                if(textoFila.includes(val)) {
                    fila.style.display = "";
                    visibles++;
                } else {
                    fila.style.display = "none";
                }
            });

            const kpiTotal = document.getElementById("kpiTotal");
            if(kpiTotal) {
                kpiTotal.innerText = `🧾 Facturas: ${visibles}`;
            }
        });
    }

    const btnConfirmModal = document.getElementById("btnConfirmarAsignacionModal");
    if(btnConfirmModal) {
        btnConfirmModal.addEventListener('click', function() {
            ejecutarAsignacionModal();
        });
    }

    // Eventos para el Informe de Domicilios
    const btnConsInf = document.getElementById("btnConsultarInforme");
    if(btnConsInf) {
        btnConsInf.addEventListener('click', function() {
            cargarInformeDomicilios();
        });
    }

    const btnDescExcel = document.getElementById("btnDescargarExcelInforme");
    if(btnDescExcel) {
        btnDescExcel.addEventListener('click', function() {
            descargarExcelInforme();
        });
    }

    const modalInfEl = document.getElementById('modalInformeDomicilios');
    if(modalInfEl) {
        modalInfEl.addEventListener('shown.bs.modal', function () {
            if (datosInformeGlobal.length === 0) {
                cargarInformeDomicilios();
            }
        });
    }

    const filtroTextoInf = document.getElementById("filtroTextoInforme");
    if(filtroTextoInf) {
        filtroTextoInf.addEventListener('input', function() {
            const val = this.value.toLowerCase().trim();
            const filas = document.querySelectorAll("#cuerpoTablaInforme tr[data-repartidor]");
            filas.forEach(f => {
                const repText = f.getAttribute('data-repartidor') || '';
                f.style.display = repText.includes(val) ? '' : 'none';
            });
        });
    }
});

function seleccionarFactura(numeroFactura) {
    const inputNumeroF = document.getElementById("numeroF");
    if(inputNumeroF) {
        inputNumeroF.value = numeroFactura;
        const domiSelect = document.getElementById("domicilioSelect");
        if(domiSelect) {
            domiSelect.focus();
        }
    }
}

function abrirModalAsignar(numeroFactura, clienteNombre, idDomicilioActual) {
    document.getElementById("modalFacturaTexto").innerText = numeroFactura;
    document.getElementById("modalClienteTexto").innerText = clienteNombre ? `Cliente: ${clienteNombre}` : '';
    document.getElementById("modalNumeroFactura").value = numeroFactura;
    
    const selectModal = document.getElementById("modalDomicilioSelect");
    selectModal.value = idDomicilioActual || "";

    const modalEl = document.getElementById("modalAsignarDirecto");
    const modal = new bootstrap.Modal(modalEl);
    modal.show();
}

function ejecutarAsignacionModal() {
    const numeroFactura = document.getElementById("modalNumeroFactura").value;
    const selectModal = document.getElementById("modalDomicilioSelect");
    const idDomicilio = selectModal.value;

    if(!idDomicilio) {
        alert('Por favor seleccione un domiciliario');
        return;
    }

    const token = document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').getAttribute('content') : '';
    const formData = new FormData();
    formData.append('numeroFactura', numeroFactura);
    formData.append('idDomicilio', idDomicilio);
    formData.append('_token', token);

    fetch('{{ url("asignarDomicilioFactura") }}', {
        method: 'POST',
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if(data.estado === 'ok') {
            const modalEl = document.getElementById("modalAsignarDirecto");
            const modalInstance = bootstrap.Modal.getInstance(modalEl);
            if(modalInstance) modalInstance.hide();

            actualizarFilaAsignada(numeroFactura, data.domiciliario || null, idDomicilio);
            alert(data.mensaje || 'Domiciliario asignado correctamente');
        } else {
            alert('Error: ' + data.mensaje);
        }
    })
    .catch(err => {
        console.error('Error:', err);
        alert('Error al procesar la asignación');
    });
}

function asignarDomicilioAFactura() {
    const select = document.getElementById("domicilioSelect");
    const numeroFactura = document.getElementById("numeroF").value.trim();

    if(!numeroFactura) {
        alert('Por favor ingrese o escanee el número de factura');
        document.getElementById("numeroF").focus();
        return;
    }
    if(!select.value) {
        alert('Por favor seleccione un domiciliario');
        select.focus();
        return;
    }

    const token = document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').getAttribute('content') : '';
    const formData = new FormData();
    formData.append('numeroFactura', numeroFactura);
    formData.append('idDomicilio', select.value);
    formData.append('_token', token);

    fetch('{{ url("asignarDomicilioFactura") }}', {
        method: 'POST',
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if(data.estado === 'ok') {
            actualizarFilaAsignada(numeroFactura, data.domiciliario || null, select.value);
            alert(data.mensaje || 'Domicilio asignado exitosamente');
            document.getElementById("numeroF").value = '';
            select.value = '';
            document.getElementById("numeroF").focus();
        } else {
            alert('Error: ' + data.mensaje);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al asignar el domicilio');
    });
}

function desasignarDomicilio(numeroFactura) {
    if(!confirm(`¿Está seguro de quitar el domiciliario asignado a la factura ${numeroFactura}?`)) {
        return;
    }

    const token = document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').getAttribute('content') : '';
    const formData = new FormData();
    formData.append('numeroFactura', numeroFactura);
    formData.append('_token', token);

    fetch('{{ url("desasignarDomicilioFactura") }}', {
        method: 'POST',
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if(data.estado === 'ok') {
            actualizarFilaDesasignada(numeroFactura);
            alert(data.mensaje || 'Domiciliario desasignado');
        } else {
            alert('Error: ' + data.mensaje);
        }
    })
    .catch(err => {
        console.error('Error:', err);
        alert('Error al desasignar domiciliario');
    });
}

function actualizarFilaAsignada(numeroFactura, domiciliario, idDomicilio) {
    const fila = document.getElementById(`fila-${numeroFactura}`);
    if(fila) {
        fila.setAttribute('data-domicilio-id', idDomicilio);
        const celdaDomi = fila.querySelector('.celda-domiciliario');
        if(celdaDomi) {
            let nombreText = 'Asignado';
            let telText = '';
            if(domiciliario) {
                nombreText = `${domiciliario.nombreDomi || ''} ${domiciliario.apellidoDOm || ''}`.trim();
                telText = domiciliario.telDomi ? `<div class="small text-muted mt-0"><i class="fas fa-phone-alt"></i> ${domiciliario.telDomi}</div>` : '';
            } else {
                const select = document.getElementById("domicilioSelect");
                const opt = select.querySelector(`option[value="${idDomicilio}"]`);
                if(opt) nombreText = opt.textContent;
            }

            celdaDomi.innerHTML = `
                <span class="badge bg-success py-1 px-2">
                    <i class="fas fa-check-circle"></i> ${nombreText}
                </span>
                ${telText}
            `;
        }

        const celdaAcciones = fila.querySelector('td:last-child');
        if(celdaAcciones) {
            celdaAcciones.innerHTML = `
                <button type="button" class="btn btn-outline-primary btn-sm py-1 px-2 me-1" title="Cambiar Repartidor" onclick="abrirModalAsignar('${numeroFactura}', '', '${idDomicilio}')">
                    ✏️ Cambiar
                </button>
                <button type="button" class="btn btn-danger btn-sm py-1 px-2" title="Quitar Domiciliario Asignado" onclick="desasignarDomicilio('${numeroFactura}')">
                    🗑️ Quitar
                </button>
            `;
        }
    }
    recalcularKPIs();
}

function actualizarFilaDesasignada(numeroFactura) {
    const fila = document.getElementById(`fila-${numeroFactura}`);
    if(fila) {
        fila.setAttribute('data-domicilio-id', '');
        const celdaDomi = fila.querySelector('.celda-domiciliario');
        if(celdaDomi) {
            celdaDomi.innerHTML = `
                <span class="badge bg-warning text-dark py-1 px-2">
                    <i class="fas fa-exclamation-triangle"></i> Pendiente
                </span>
            `;
        }

        const celdaAcciones = fila.querySelector('td:last-child');
        if(celdaAcciones) {
            celdaAcciones.innerHTML = `
                <button type="button" class="btn btn-primary btn-sm py-1 px-2" title="Asignar Domiciliario" onclick="abrirModalAsignar('${numeroFactura}', '', '')">
                    ➕ Asignar
                </button>
            `;
        }
    }
    recalcularKPIs();
}

function recalcularKPIs() {
    const filas = document.querySelectorAll("#cuerpoTablaFacturas tr[data-factura]");
    let pendientes = 0;
    let asignados = 0;

    filas.forEach(f => {
        const domId = f.getAttribute('data-domicilio-id');
        if(domId && domId !== '' && domId !== '0') {
            asignados++;
        } else {
            pendientes++;
        }
    });

    const kpiP = document.getElementById("kpiPendientes");
    const kpiA = document.getElementById("kpiAsignados");
    if(kpiP) kpiP.innerText = `⏳ Pendientes: ${pendientes}`;
    if(kpiA) kpiA.innerText = `🛵 Asignados: ${asignados}`;
}

// ========================================================
// FUNCIONES PARA EL INFORME DE DOMICILIOS Y EXPORTACIÓN
// ========================================================
let datosInformeGlobal = [];

function setRangoInforme(tipo) {
    const hoy = new Date();
    const hoyStr = hoy.toISOString().split('T')[0];
    const inputFi = document.getElementById("inf_fi");
    const inputFf = document.getElementById("inf_ff");

    if (tipo === 'hoy') {
        inputFi.value = hoyStr;
        inputFf.value = hoyStr;
    } else if (tipo === 'semana') {
        const diaSem = hoy.getDay();
        const diffLunes = hoy.getDate() - diaSem + (diaSem === 0 ? -6 : 1);
        const lunes = new Date(hoy.setDate(diffLunes));
        inputFi.value = lunes.toISOString().split('T')[0];
        inputFf.value = hoyStr;
    } else if (tipo === 'mes') {
        const y = hoy.getFullYear();
        const m = String(hoy.getMonth() + 1).padStart(2, '0');
        inputFi.value = `${y}-${m}-01`;
        inputFf.value = hoyStr;
    }
    cargarInformeDomicilios();
}

function formatearMoneda(val) {
    return '$ ' + Number(val || 0).toLocaleString('es-CO', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
}

function cargarInformeDomicilios() {
    const fi = document.getElementById("inf_fi").value;
    const ff = document.getElementById("inf_ff").value;
    const bodega = document.getElementById("inf_bodega").value;
    const tbody = document.getElementById("cuerpoTablaInforme");
    const tfoot = document.getElementById("pieTablaInforme");

    tbody.innerHTML = `
        <tr>
            <td colspan="12" class="text-center py-4 text-muted">
                <div class="spinner-border spinner-border-sm text-primary mb-1" role="status"></div>
                <div>Consultando facturas y devoluciones...</div>
            </td>
        </tr>
    `;
    tfoot.style.display = "none";

    fetch(`{{ url('obtenerInformeDomicilios') }}?fi=${fi}&ff=${ff}&bodega=${bodega}`)
        .then(res => res.json())
        .then(data => {
            if (data.estado !== 'ok') {
                tbody.innerHTML = `<tr><td colspan="12" class="text-center py-4 text-danger">Error: ${data.mensaje || 'No se pudo cargar el informe'}</td></tr>`;
                return;
            }

            datosInformeGlobal = data.resumen || [];

            // Actualizar KPIs
            const kpis = data.kpis || {};
            document.getElementById("kpiInfRepartidores").innerText = kpis.total_repartidores || 0;
            document.getElementById("kpiInfDomicilios").innerText = kpis.total_domicilios || 0;
            document.getElementById("kpiInfBruto").innerText = formatearMoneda(kpis.total_facturado);
            document.getElementById("kpiInfDevoluciones").innerText = formatearMoneda(kpis.total_devoluciones);
            document.getElementById("kpiInfNeto").innerText = formatearMoneda(kpis.total_neto);

            if (datosInformeGlobal.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="12" class="text-center py-4 text-muted">
                            <div class="display-6 mb-1">🔍</div>
                            <h6>No se encontraron domicilios en el rango y bodega seleccionados</h6>
                        </td>
                    </tr>
                `;
                return;
            }

            renderizarTablaInforme(datosInformeGlobal, kpis.total_neto || 1);

            // Actualizar pie de tabla
            document.getElementById("pieCantDomicilios").innerText = kpis.total_domicilios || 0;
            let totConDevo = 0;
            datosInformeGlobal.forEach(x => { totConDevo += (x.cant_con_devolucion || 0); });
            document.getElementById("pieCantDevoluciones").innerText = totConDevo;
            document.getElementById("pieTotalFacturado").innerText = formatearMoneda(kpis.total_facturado);
            document.getElementById("pieTotalDevoluciones").innerText = formatearMoneda(kpis.total_devoluciones);
            document.getElementById("pieTotalNeto").innerText = formatearMoneda(kpis.total_neto);
            tfoot.style.display = "";
        })
        .catch(err => {
            console.error('Error al cargar informe:', err);
            tbody.innerHTML = `<tr><td colspan="12" class="text-center py-4 text-danger">Error de comunicación al consultar el informe.</td></tr>`;
        });
}

function renderizarTablaInforme(lista, granTotalNeto) {
    const tbody = document.getElementById("cuerpoTablaInforme");
    let html = '';

    lista.forEach((rep, idx) => {
        const part = granTotalNeto > 0 ? ((rep.total_neto / granTotalNeto) * 100).toFixed(1) + '%' : '0%';
        const tieneDevo = rep.total_devoluciones > 0;
        const bodegasText = (rep.bodegas || []).join(', ') || 'N/A';
        const esSinAsignar = rep.id === 'sin_asignar';

        html += `
            <tr class="${esSinAsignar ? 'table-warning' : ''}" data-repartidor="${rep.nombre.toLowerCase()} ${rep.cedula}">
                <td class="text-center fw-bold text-muted">${idx + 1}</td>
                <td>
                    <div class="fw-bold ${esSinAsignar ? 'text-danger' : 'text-dark'}">${rep.nombre}</div>
                </td>
                <td class="text-muted small">${rep.cedula || 'N/A'}</td>
                <td class="small">${rep.telefono ? '<i class="fas fa-phone-alt text-success me-1"></i>' + rep.telefono : '-'}</td>
                <td class="small"><span class="badge bg-secondary">${bodegasText}</span></td>
                <td class="text-center fw-bold">
                    <span class="badge bg-primary px-2">${rep.cant_domicilios}</span>
                </td>
                <td class="text-center">
                    ${tieneDevo ? '<span class="badge bg-danger px-2">' + rep.cant_con_devolucion + ' dev.</span>' : '<span class="text-muted small">0</span>'}
                </td>
                <td class="text-end fw-semibold">${formatearMoneda(rep.total_facturado)}</td>
                <td class="text-end fw-semibold ${tieneDevo ? 'text-danger' : 'text-muted'}">
                    ${tieneDevo ? '- ' + formatearMoneda(rep.total_devoluciones) : '$ 0'}
                </td>
                <td class="text-end fw-bold text-success">${formatearMoneda(rep.total_neto)}</td>
                <td class="text-center small text-muted">${part}</td>
                <td class="text-center">
                    <button type="button" class="btn btn-outline-primary btn-sm py-0 px-2" title="Ver facturas de este repartidor" onclick="verDetalleFacturasRepartidor('${rep.id}')">
                        👁️ Facturas
                    </button>
                </td>
            </tr>
        `;
    });

    tbody.innerHTML = html;
}

function verDetalleFacturasRepartidor(idRepartidor) {
    const rep = datosInformeGlobal.find(x => String(x.id) === String(idRepartidor));
    if (!rep) return;

    document.getElementById("nombreRepartidorDetalle").innerText = rep.nombre;
    document.getElementById("subtituloDetalleRepartidor").innerText = `Cédula: ${rep.cedula || 'N/A'} | Facturas: ${rep.cant_domicilios} | Total Neto: ${formatearMoneda(rep.total_neto)}`;

    const tbody = document.getElementById("cuerpoTablaDetalleFacturas");
    let html = '';

    (rep.facturas || []).forEach(f => {
        const tieneDevo = f.devolucion > 0;
        html += `
            <tr>
                <td class="text-center fw-bold font-monospace">${f.factura}</td>
                <td class="small">${f.fecha}</td>
                <td class="small"><span class="badge bg-secondary">${f.bodega}</span></td>
                <td>
                    <div class="fw-bold small">${f.cliente}</div>
                    <small class="text-muted">${f.cliente_cedula || ''}</small>
                </td>
                <td class="small">
                    ${f.telefono ? '<div><i class="fas fa-phone text-success me-1"></i>' + f.telefono + '</div>' : ''}
                    ${f.direccion ? '<div class="text-truncate" style="max-width: 180px;" title="' + f.direccion + '"><i class="fas fa-map-marker-alt text-danger me-1"></i>' + f.direccion + '</div>' : ''}
                </td>
                <td class="text-end fw-semibold">${formatearMoneda(f.valor)}</td>
                <td class="text-end ${tieneDevo ? 'text-danger fw-semibold' : 'text-muted'}">${tieneDevo ? '- ' + formatearMoneda(f.devolucion) : '$ 0'}</td>
                <td class="text-end fw-bold text-success">${formatearMoneda(f.valor_neto)}</td>
            </tr>
        `;
    });

    tbody.innerHTML = html;
    const modalDetalle = new bootstrap.Modal(document.getElementById("modalDetalleFacturasRepartidor"));
    modalDetalle.show();
}

function descargarExcelInforme() {
    const fi = document.getElementById("inf_fi").value;
    const ff = document.getElementById("inf_ff").value;
    const bodega = document.getElementById("inf_bodega").value;

    window.location.href = `{{ url('exportarInformeDomiciliosExcel') }}?fi=${fi}&ff=${ff}&bodega=${bodega}`;
}
</script>
@endsection