@extends('partials.layout')

@section('title','Cuadre de Caja')
@section('subtitle','Registrar lecturas por isla, lado y manguera')

@section('back')
    @if(isset($fecha) && isset($idTurno) && isset($idUsuario))
        <a class="btn" href="{{ route('cierres_turno.cuadre_caja.lista') }}{{ isset($queryString) && $queryString ? '?' . $queryString : '' }}">← Volver a la lista</a>
    @else
        <a class="btn" href="{{ route('dashboard') }}">← Volver</a>
    @endif
@endsection

@section('content')
    @php($canEdit = $canEdit ?? true)
    @php($totalVentasBase = $totalVentasInicial ?? ($totalVentasCalculado ?? ($cierre->total_ventas ?? 0)))
    @php($esEdicion = ! $canEdit)
    @php($submitLabel = $esEdicion ? 'Actualizar Cuadre' : 'Guardar Cuadre')
    @php($esAdmin = strtoupper(trim((string) auth()->user()->rol)) === 'ADMIN')
    @php($fechaMinima = now()->subDay()->toDateString())
    @php($fechaMaxima = now()->toDateString())

    @if(!$canEdit)
        <div style="margin-bottom:12px;padding:10px 12px;border:1px solid #bfdbfe;background:#eff6ff;color:#1e3a8a;border-radius:10px;font-size:13px">
            Modo solo lectura. Solo el rol ADMIN puede editar este cuadre.
        </div>
    @endif

    <form method="POST" action="{{ route('cierres_turno.cuadre_caja.store') }}" id="cuadre-caja-form" data-es-edicion="{{ $esEdicion ? '1' : '0' }}">
        @csrf
        @foreach(($filtros ?? []) as $key => $value)
            @if($value !== null && $value !== '')
                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
            @endif
        @endforeach

        <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px">
            <div style="grid-column:1/-1">
                <label style="display:block;font-weight:700;margin-bottom:6px">Usuario</label>
                @if($esEdicion && ! $canEdit)
                    <input type="hidden" name="id_usuario" value="{{ old('id_usuario', $idUsuario ?? auth()->id()) }}">
                @endif
                <select name="id_usuario" required style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px" {{ $canEdit ? '' : 'disabled' }}>
                    <option value="">-- Seleccione --</option>
                    @foreach($usuarios as $usuario)
                        <option value="{{ $usuario->id_usuario }}" {{ old('id_usuario', $idUsuario ?? auth()->id()) == $usuario->id_usuario ? 'selected' : '' }}>
                            {{ trim(($usuario->nombres ?? '') . ' ' . ($usuario->apellidos ?? '')) ?: $usuario->usuario }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label style="display:block;font-weight:700;margin-bottom:6px">Fecha</label>
                <input type="date" name="fecha" value="{{ old('fecha', $fecha ?? date('Y-m-d')) }}" min="{{ $fechaMinima }}" max="{{ $fechaMaxima }}" required style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px" {{ $canEdit ? '' : 'disabled' }}>
            </div>

            <div>
                <label style="display:block;font-weight:700;margin-bottom:6px">Turno</label>
                <select name="id_turno" required style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px" {{ $canEdit ? '' : 'disabled' }}>
                    <option value="">-- Seleccione --</option>
                    @foreach($turnos as $turno)
                        <option value="{{ $turno->id_turno }}" {{ old('id_turno', $idTurno ?? null) == $turno->id_turno ? 'selected' : '' }}>
                            {{ $turno->turnos }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr;gap:14px;align-items:start">
            @foreach($islas as $isla)
                <section style="border:1px solid #e2e8f0;border-radius:14px;padding:14px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,0.06)">
                    <h3 style="margin:0 0 10px 0;font-size:18px;color:#ffffff;background:#2563eb;padding:6px 10px;border-radius:8px;text-align:center">{{ $isla->nombre ?? 'Isla' }}</h3>
                    <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px">
                        @foreach($isla->caras as $cara)
                            <article style="border:1px solid #dc2626;border-radius:12px;padding:12px;background:linear-gradient(135deg,#fee2e2,#fff7ed)">
                                <h4 style="margin:0 0 8px 0;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#ffffff;background:#dc2626;padding:6px 8px;border-radius:8px;text-align:center">{{ $cara->nombre ?? 'Lado' }}</h4>
                                <div style="display:grid;gap:8px">
                                    @foreach($cara->mangueras as $index => $manguera)
                                        <label style="display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid #e5eefb;border-radius:10px;padding:8px 10px;font-size:13px;color:#0f172a">
                                            <div style="display:flex;flex-direction:column;gap:2px;min-width:0">
                                                <span style="font-weight:700">{{ $manguera->numero_manguera ?: $index + 1 }} — {{ $manguera->tipoCombustible->nombre ?? 'Sin combustible' }}</span>
                                                <span style="font-size:11px;color:#64748b">Precio galón: <strong data-manguera-precio="{{ $manguera->id_manguera }}" data-precio-guardado="{{ $esEdicion ? '1' : '0' }}">{{ number_format((float) ($manguerasCuadreBase[$manguera->id_manguera]['precio_turno'] ?? 0), 2, '.', '') }}</strong></span>
                                            </div>
                                            <input type="number" step="0.001" name="mediciones[{{ $manguera->id_manguera }}]" value="{{ old('mediciones.' . $manguera->id_manguera, $mediciones[$manguera->id_manguera] ?? '') }}" placeholder="0.000" style="width:120px;padding:9px;border:2px solid #2563eb;border-radius:10px;text-align:right;background:#fff7ed;box-shadow:0 0 0 2px rgba(37,99,235,0.12)" {{ $canEdit ? '' : 'disabled' }}>
                                        </label>
                                    @endforeach
                                </div>
                            </article>
                        @endforeach
                    </div>
                </section>
            @endforeach
        </div>

        <section style="margin-top:24px;border:1px solid #e2e8f0;border-radius:14px;padding:16px;background:#f8fafc;box-shadow:0 8px 24px rgba(15,23,42,0.06)">
            <h3 style="margin:0 0 10px 0;font-size:18px;color:#111827">Registro de diferencias</h3>
            <p style="margin:0 0 14px 0;color:#475569;font-size:13px">Agrega registros de diferencia para el personal, fecha y turno seleccionados. Se guardan junto al cuadre.</p>

            @if($errors->has('diferencias'))
                <div style="margin-bottom:12px;padding:10px;border:1px solid #fecaca;background:#fef2f2;color:#b91c1c;border-radius:10px;font-size:13px">
                    {{ $errors->first('diferencias') }}
                </div>
            @endif

            @php ($diferenciasRows = old('diferencias') ?? (isset($diferencias) && $diferencias && method_exists($diferencias, 'count') && $diferencias->count() > 0 ? $diferencias->toArray() : []))

            <div id="diferencia-form" style="display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px">
                <div>
                    <label style="display:block;font-weight:700;margin-bottom:6px">Concepto</label>
                    <select data-field="id_concepto" style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
                        <option value="">-- Seleccione --</option>
                        @foreach($conceptos as $concepto)
                            <option value="{{ $concepto->id_concepto }}">{{ $concepto->nombre ?? 'Concepto' }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label style="display:block;font-weight:700;margin-bottom:6px">Combustible</label>
                    <select data-field="id_tipo_combustible" style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
                        <option value="">-- Seleccione --</option>
                        @foreach($tipos as $tipo)
                            <option value="{{ $tipo->id_tipo_combustible }}">{{ $tipo->nombre ?? 'Tipo de combustible' }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label style="display:block;font-weight:700;margin-bottom:6px">Cantidad galones</label>
                    <input type="number" step="0.001" min="0" data-field="cantidad_galones" value="" placeholder="0.000" style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
                </div>
                <div>
                    <label style="display:block;font-weight:700;margin-bottom:6px">Precio</label>
                    <input type="number" step="0.01" min="0" data-field="precio" value="" readonly style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc">
                </div>
                <div>
                    <label style="display:block;font-weight:700;margin-bottom:6px">Total</label>
                    <input type="number" step="0.01" min="0" data-field="total" value="0.00" readonly style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc">
                </div>
                <div style="grid-column:1/-1">
                    <label style="display:block;font-weight:700;margin-bottom:6px">Observación</label>
                    <input type="text" data-field="observacion" value="" style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
                </div>
            </div>

            <button type="button" id="add-diferencia-row" class="btn" style="margin-top:12px">Agregar registro de diferencia</button>

            <div id="diferencias-listado" style="margin-top:18px;display:none;border:1px solid #e2e8f0;border-radius:12px;padding:14px;background:#fff">
                <h4 style="margin:0 0 10px 0;font-size:15px;color:#111827">Registros de diferencia agregados</h4>
                <div id="diferencias-listado-contenido" style="font-size:13px;color:#475569">
                    <p style="margin:0;color:#64748b">No hay registros agregados.</p>
                </div>
            </div>
            <div id="diferencias-hidden" style="display:none"></div>

            @if(!empty($diferencias) && $diferencias->isNotEmpty())
                <div style="margin-top:16px;border:1px solid #cbd5e1;border-radius:12px;padding:12px;background:#f8fafc">
                    <h4 style="margin:0 0 8px 0;font-size:14px;color:#111827">Diferencias ya registradas</h4>
                    <ul style="margin:0;padding-left:18px;color:#475569;font-size:13px;line-height:1.6">
                        @foreach($diferencias as $item)
                            <li>
                                {{ optional($item->created_at)->format('d/m/Y H:i') }} — {{ $item->concepto->nombre ?? ($item->tipoCombustible->nombre ?? 'Tipo') }} — {{ number_format((float) $item->total, 2) }}
                                @if(!empty($item->observacion)) — {{ $item->observacion }}@endif
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </section>

        <section style="margin-top:24px;border:1px solid #e2e8f0;border-radius:14px;padding:16px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,0.06)">
            <h3 style="margin:0 0 10px 0;font-size:18px;color:#111827">Cierre de turno</h3>
            <p style="margin:0 0 14px 0;color:#475569;font-size:13px">Completa los montos del cierre y guarda todo con el botón final.</p>

            <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px">
                @if($esAdmin)
                    <div>
                        <label style="display:block;font-weight:700;margin-bottom:6px">Total ventas (calculado)</label>
                        <input type="number" step="0.01" name="total_ventas" id="total_ventas" data-initial-total="{{ number_format((float) $totalVentasBase, 2, '.', '') }}" value="{{ number_format((float) $totalVentasBase, 2, '.', '') }}" readonly style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc">
                    </div>
                @else
                    <input type="hidden" name="total_ventas" id="total_ventas" data-initial-total="{{ number_format((float) $totalVentasBase, 2, '.', '') }}" value="{{ number_format((float) $totalVentasBase, 2, '.', '') }}">
                @endif

                <div>
                    <label style="display:block;font-weight:700;margin-bottom:6px">Efectivo</label>
                    <input type="number" step="0.01" name="efectivo" value="{{ old('efectivo', $cierre->efectivo ?? '') }}" style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
                </div>

                <div>
                    <label style="display:block;font-weight:700;margin-bottom:6px">Crédito</label>
                    <input type="number" step="0.01" name="credito" value="{{ old('credito', $cierre->credito ?? '') }}" style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
                </div>

                <div>
                    <label style="display:block;font-weight:700;margin-bottom:6px">Visa</label>
                    <input type="number" step="0.01" name="visa" value="{{ old('visa', $cierre->visa ?? '') }}" style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
                </div>

                <div>
                    <label style="display:block;font-weight:700;margin-bottom:6px">Descuentos</label>
                    <input type="number" step="0.01" name="descuentos" value="{{ old('descuentos', $cierre->descuentos ?? '') }}" style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
                </div>

                @if($esAdmin)
                    <div style="grid-column:1/-1">
                        <label style="display:block;font-weight:700;margin-bottom:6px">Diferencia (calculada)</label>
                        <input type="number" step="0.01" name="diferencia" id="diferencia" value="{{ old('diferencia', $cierre->diferencia ?? 0) }}" readonly style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc">
                    </div>
                @else
                    <input type="hidden" name="diferencia" id="diferencia" value="{{ old('diferencia', $cierre->diferencia ?? 0) }}">
                @endif
            </div>
        </section>

        <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap">
            @if($canEdit)
                <button class="btn primary" type="submit">{{ $submitLabel }}</button>
            @endif
            <a class="btn" href="{{ route('cierres_turno.cuadre_caja.lista') }}{{ isset($queryString) && $queryString ? '?' . $queryString : '' }}">Cancelar</a>
        </div>
    </form>

    <div id="confirmar-guardado-modal" aria-hidden="true" style="display:none;position:fixed;inset:0;z-index:50;align-items:center;justify-content:center;padding:16px;background:rgba(15,23,42,0.55);backdrop-filter:blur(2px)">
        <div role="dialog" aria-modal="true" aria-labelledby="confirmar-guardado-title" style="width:min(100%,440px);background:#fff;border-radius:16px;box-shadow:0 24px 80px rgba(15,23,42,0.28);overflow:hidden">
            <div style="padding:18px 20px;border-bottom:1px solid #e2e8f0;background:linear-gradient(135deg,#eff6ff,#ffffff)">
                <h3 id="confirmar-guardado-title" style="margin:0;font-size:18px;color:#0f172a">Confirmar grabación</h3>
            </div>
            <div style="padding:18px 20px;color:#334155;font-size:14px;line-height:1.6">
                <p style="margin:0">¿Deseas grabar el cuadre de caja? Esta acción enviará la información registrada al sistema.</p>
            </div>
            <div style="padding:0 20px 20px 20px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap">
                <button type="button" id="cancelar-guardado-modal" class="btn">Cancelar</button>
                <button type="button" id="confirmar-guardado-modal-btn" class="btn primary">Sí, grabar</button>
            </div>
        </div>
    </div>

    <script>
        (function () {
            const form = document.getElementById('cuadre-caja-form');
            const modal = document.getElementById('confirmar-guardado-modal');
            const confirmarBtn = document.getElementById('confirmar-guardado-modal-btn');
            const cancelarBtn = document.getElementById('cancelar-guardado-modal');
            const totalVentasEl = document.getElementById('total_ventas');
            const totalVentasInicial = Number(totalVentasEl?.dataset.initialTotal ?? totalVentasEl?.value ?? 0);
            const manguerasBase = @json($manguerasCuadreBase ?? []);
            const tarjetaValores = document.getElementById('tarjeta-valores-venta');
            const tarjetaValoresBody = document.getElementById('tarjeta-valores-venta-body');
            const tarjetaValoresVacia = document.getElementById('tarjeta-valores-vacia');
            const esEdicion = form?.dataset.esEdicion === '1';
            let puedeEnviar = false;

            function abrirModalConfirmacion() {
                if (!modal) return;
                modal.style.display = 'flex';
                modal.setAttribute('aria-hidden', 'false');
            }

            function cerrarModalConfirmacion() {
                if (!modal) return;
                modal.style.display = 'none';
                modal.setAttribute('aria-hidden', 'true');
            }

            function preservarTotalEnEdicion() {
                if (!totalVentasEl || !esEdicion) return;

                const valorActual = totalVentasEl.value;
                const valorNumerico = Number(valorActual || totalVentasInicial || 0);
                const valorFinal = Number.isFinite(valorNumerico) && valorNumerico > 0
                    ? valorNumerico
                    : Number(totalVentasInicial || 0);

                totalVentasEl.value = valorFinal.toFixed(2);
            }

            function restaurarTotalInicial() {
                if (esEdicion) {
                    preservarTotalEnEdicion();
                    return;
                }

                if (totalVentasEl && (totalVentasEl.value === '' || totalVentasEl.value === '0.00')) {
                    totalVentasEl.value = Number(totalVentasInicial || 0).toFixed(2);
                }
            }

            function forzarTotalInicial() {
                if (!totalVentasEl) return;
                if (esEdicion) {
                    preservarTotalEnEdicion();
                    return;
                }
                totalVentasEl.value = Number(totalVentasInicial || 0).toFixed(2);
            }

            form?.addEventListener('submit', (event) => {
                if (puedeEnviar) {
                    return;
                }

                event.preventDefault();
                abrirModalConfirmacion();
            });

            confirmarBtn?.addEventListener('click', () => {
                if (!form) return;
                puedeEnviar = true;
                form.submit();
            });

            cancelarBtn?.addEventListener('click', cerrarModalConfirmacion);

            modal?.addEventListener('click', (event) => {
                if (event.target === modal) {
                    cerrarModalConfirmacion();
                }
            });

            document.addEventListener('keydown', (event) => {
                if (event.key === 'Escape') {
                    cerrarModalConfirmacion();
                }
            });

            forzarTotalInicial();

            const diferenciaEl = document.getElementById('diferencia');
            const efectivoEl = document.querySelector('input[name="efectivo"]');
            const creditoEl = document.querySelector('input[name="credito"]');
            const visaEl = document.querySelector('input[name="visa"]');
            const descuentosEl = document.querySelector('input[name="descuentos"]');
            const turnoEl = document.querySelector('select[name="id_turno"]');
            const fechaEl = document.querySelector('input[name="fecha"]');
            const usuarioEl = document.querySelector('select[name="id_usuario"]');
            const idUsuarioFijo = document.querySelector('input[name="id_usuario"]')?.value || usuarioEl?.value || '';
            const addDiferenciaBtn = document.getElementById('add-diferencia-row');
            const diferenciaTipoList = @json($tipos->map(fn($tipo) => ['id' => $tipo->id_tipo_combustible, 'nombre' => $tipo->nombre])->toArray());
            const diferenciaConceptoList = @json($conceptos->map(fn($concepto) => ['id' => $concepto->id_concepto, 'nombre' => $concepto->nombre])->toArray());
            const preciosPorCombustible = @json($preciosPorCombustible ?? []);
            let existingDiferenciasTotal = 0;

            const formularioDiferencia = document.getElementById('diferencia-form');
            const formConceptoEl = formularioDiferencia?.querySelector('[data-field="id_concepto"]');
            const formTipoEl = formularioDiferencia?.querySelector('[data-field="id_tipo_combustible"]');
            const formCantidadEl = formularioDiferencia?.querySelector('[data-field="cantidad_galones"]');
            const formPrecioEl = formularioDiferencia?.querySelector('[data-field="precio"]');
            const formTotalEl = formularioDiferencia?.querySelector('[data-field="total"]');
            const formObservacionEl = formularioDiferencia?.querySelector('[data-field="observacion"]');
            const diferenciaListado = document.getElementById('diferencias-listado');
            const diferenciaListadoContenido = document.getElementById('diferencias-listado-contenido');
            const diferenciaDrafts = @json($diferenciasRows);

            function escapeHtml(value) {
                return String(value ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
            }

            function recalcularFormTotal() {
                const cantidad = parseFloat(formCantidadEl?.value || '0');
                const precio = parseFloat(formPrecioEl?.value || '0');
                const total = Number.isFinite(cantidad) && Number.isFinite(precio) ? cantidad * precio : 0;
                if (formTotalEl) {
                    formTotalEl.value = total.toFixed(2);
                }
            }

            function sumDiferenciasLocales() {
                return diferenciaDrafts.reduce((sum, item) => sum + (Number(item.total) || 0), 0);
            }

            function calcDiferencia() {
                preservarTotalEnEdicion();

                const totalVentas = parseFloat(totalVentasEl?.value || '0');
                const efectivo = parseFloat(efectivoEl?.value || '0');
                const credito = parseFloat(creditoEl?.value || '0');
                const visa = parseFloat(visaEl?.value || '0');
                const descuentos = parseFloat(descuentosEl?.value || '0');
                const totalDiferencias = existingDiferenciasTotal + sumDiferenciasLocales();
                const diferencia = totalVentas - (efectivo + credito + visa + descuentos + totalDiferencias);

                if (diferenciaEl) {
                    diferenciaEl.value = Number.isFinite(diferencia) ? diferencia.toFixed(2) : '0.00';
                }
            }

            function getMangueraInputId(input) {
                const match = String(input?.name || '').match(/^mediciones\[(\d+)\]$/);
                return match ? Number(match[1]) : null;
            }

            function getMangueraBase(idManguera) {
                return manguerasBase?.[idManguera] ?? null;
            }

            function getTarjetaRowsFromInputs() {
                return Array.from(document.querySelectorAll('input[name^="mediciones["]')).map((input) => {
                    const idManguera = getMangueraInputId(input);
                    if (!idManguera) {
                        return null;
                    }

                    const base = getMangueraBase(idManguera);
                    const saldoFinal = Number(input.value || 0);
                    const saldoInicial = Number(base?.saldo_inicial ?? 0);
                    const precioTurno = Number(base?.precio_turno ?? 0);
                    const galones = Math.max(0, saldoFinal - saldoInicial);
                    const total = galones * precioTurno;

                    return {
                        id_salida: base?.id_salida ?? '-',
                        fecha_inicio: base?.fecha_inicio ?? '-',
                        manguera: base?.manguera ?? `Manguera ${idManguera}`,
                        saldo_inicial: saldoInicial,
                        saldo_final: saldoFinal,
                        galones_vendidos: galones,
                        precio_turno: precioTurno,
                        total,
                    };
                }).filter(Boolean);
            }

            function renderTarjetaValores() {
                if (!tarjetaValores || !tarjetaValoresBody) {
                    return;
                }

                const filas = getTarjetaRowsFromInputs();

                if (tarjetaValoresVacia) {
                    tarjetaValoresVacia.style.display = filas.length ? 'none' : 'block';
                }

                tarjetaValores.style.display = filas.length ? 'block' : 'none';

                tarjetaValoresBody.innerHTML = filas.length
                    ? filas.map((detalle) => `
                        <tr style="border-top:1px solid #eef2f7">
                            <td style="padding:10px;white-space:nowrap">${detalle.id_salida}</td>
                            <td style="padding:10px;white-space:nowrap">${detalle.fecha_inicio}</td>
                            <td style="padding:10px">${escapeHtml(detalle.manguera)}</td>
                            <td style="padding:10px;white-space:nowrap">${Number(detalle.saldo_inicial || 0).toFixed(3)}</td>
                            <td style="padding:10px;white-space:nowrap">${Number(detalle.saldo_final || 0).toFixed(3)}</td>
                            <td style="padding:10px;white-space:nowrap">${Number(detalle.galones_vendidos || 0).toFixed(3)}</td>
                            <td style="padding:10px;white-space:nowrap">${Number(detalle.precio_turno || 0).toFixed(2)}</td>
                            <td style="padding:10px;white-space:nowrap;font-weight:700;color:#0f172a">${Number(detalle.total || 0).toFixed(2)}</td>
                        </tr>
                    `).join('')
                    : '';
            }

            function actualizarTarjetaDesdeMangueras() {
                renderTarjetaValores();
                if (esEdicion) {
                    const total = getTarjetaRowsFromInputs().reduce((sum, item) => sum + (Number(item.total) || 0), 0);
                    if (totalVentasEl) {
                        totalVentasEl.value = total.toFixed(2);
                    }
                }
                calcDiferencia();
            }

            function buildDiferenciaItem(record, index) {
                const tipo = diferenciaTipoList.find((t) => String(t.id) === String(record.id_tipo_combustible));
                const concepto = diferenciaConceptoList.find((c) => String(c.id) === String(record.id_concepto));
                const observacionText = record.observacion ? escapeHtml(record.observacion) : '-';

                return `
                    <div style="padding:10px 0; border-bottom:1px solid #e2e8f0; display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start">
                        <div>
                            <strong>#${index + 1}</strong> ${escapeHtml(concepto?.nombre ?? 'Sin concepto')} — ${escapeHtml(tipo?.nombre ?? 'No definido')} — ${escapeHtml(record.cantidad_galones || '0')} galones — ${escapeHtml(Number(record.precio || 0).toFixed(2))} c/u — Total: ${escapeHtml(Number(record.total || 0).toFixed(2))}
                            <div style="color:#64748b;font-size:12px;margin-top:4px">${observacionText}</div>
                        </div>
                        <button type="button" class="btn" data-remove-index="${index}" style="height:36px;white-space:nowrap">Eliminar</button>
                        <input type="hidden" name="diferencias[${index}][id_concepto]" value="${escapeHtml(record.id_concepto)}">
                        <input type="hidden" name="diferencias[${index}][id_tipo_combustible]" value="${escapeHtml(record.id_tipo_combustible)}">
                        <input type="hidden" name="diferencias[${index}][cantidad_galones]" value="${escapeHtml(record.cantidad_galones)}">
                        <input type="hidden" name="diferencias[${index}][precio]" value="${escapeHtml(Number(record.precio || 0).toFixed(2))}">
                        <input type="hidden" name="diferencias[${index}][total]" value="${escapeHtml(Number(record.total || 0).toFixed(2))}">
                        <input type="hidden" name="diferencias[${index}][observacion]" value="${escapeHtml(record.observacion || '')}">
                    </div>`;
            }

            function renderListaDiferencias() {
                if (!diferenciaListado || !diferenciaListadoContenido) return;

                if (!diferenciaDrafts.length) {
                    diferenciaListado.style.display = 'none';
                    diferenciaListadoContenido.innerHTML = '<p style="margin:0;color:#64748b">No hay registros agregados.</p>';
                    return;
                }

                diferenciaListado.style.display = 'block';
                const itemsHtml = diferenciaDrafts.map(buildDiferenciaItem).join('');
                const totalSum = diferenciaDrafts.reduce((s, it) => s + (Number(it.total) || 0), 0);
                const totalCount = diferenciaDrafts.length;

                const footerHtml = `
                    <div style="padding-top:10px;margin-top:8px;border-top:1px dashed #e2e8f0;display:flex;justify-content:space-between;align-items:center">
                        <div style="color:#475569;font-size:13px">Registros de diferencia agregados: <strong>${totalCount}</strong></div>
                        <div style="color:#0f172a;font-size:14px;font-weight:700">Sumatoria: ${Number(totalSum || 0).toFixed(2)}</div>
                    </div>`;

                diferenciaListadoContenido.innerHTML = itemsHtml + footerHtml;
            }

            function actualizarPrecioDiferencia() {
                const idTipoCombustible = formTipoEl?.value;
                const precio = idTipoCombustible && preciosPorCombustible[idTipoCombustible] !== undefined
                    ? Number(preciosPorCombustible[idTipoCombustible] ?? 0)
                    : 0;

                if (formPrecioEl) {
                    formPrecioEl.value = Number.isFinite(precio) ? precio.toFixed(2) : '0.00';
                }

                recalcularFormTotal();
                calcDiferencia();
            }

            function clearFormDiferencia() {
                if (formConceptoEl) formConceptoEl.value = '';
                if (formCantidadEl) formCantidadEl.value = '';
                if (formTotalEl) formTotalEl.value = '0.00';
                if (formObservacionEl) formObservacionEl.value = '';
            }

            function addDiferenciaFromForm() {
                const idConcepto = formConceptoEl?.value;
                const idTipoCombustible = formTipoEl?.value;
                const cantidad = parseFloat(formCantidadEl?.value || '0');
                const precio = parseFloat(formPrecioEl?.value || '0');
                const total = parseFloat(formTotalEl?.value || '0');
                const observacion = formObservacionEl?.value || '';

                if (!idConcepto) {
                    alert('Seleccione el concepto antes de agregar.');
                    return;
                }

                if (!idTipoCombustible) {
                    alert('Seleccione el combustible antes de agregar.');
                    return;
                }

                if (!Number.isFinite(cantidad) || cantidad <= 0) {
                    alert('Ingrese una cantidad de galones válida.');
                    return;
                }

                if (!Number.isFinite(precio) || precio <= 0) {
                    alert('El precio no se ha cargado. Verifique el combustible y turno.');
                    return;
                }

                diferenciaDrafts.push({
                    id_concepto: idConcepto,
                    id_tipo_combustible: idTipoCombustible,
                    cantidad_galones: cantidad.toFixed(3),
                    precio: precio.toFixed(2),
                    total: total.toFixed(2),
                    observacion: observacion.trim(),
                });

                renderListaDiferencias();
                clearFormDiferencia();
                calcDiferencia();
            }

            function removeDiferencia(index) {
                diferenciaDrafts.splice(index, 1);
                renderListaDiferencias();
                calcDiferencia();
            }

            formTipoEl?.addEventListener('change', actualizarPrecioDiferencia);
            formCantidadEl?.addEventListener('input', recalcularFormTotal);
            addDiferenciaBtn?.addEventListener('click', addDiferenciaFromForm);
            document.addEventListener('click', (event) => {
                const target = event.target;
                if (target?.matches('[data-remove-index]')) {
                    removeDiferencia(Number(target.dataset.removeIndex));
                }
            });

            document.querySelectorAll('input[name^="mediciones["]').forEach((input) => {
                input.addEventListener('input', actualizarTarjetaDesdeMangueras);
                input.addEventListener('change', actualizarTarjetaDesdeMangueras);
            });

            form?.addEventListener('input', (event) => {
                if (event.target?.matches?.('input[name^="mediciones["]')) {
                    actualizarTarjetaDesdeMangueras();
                }
            });

            form?.addEventListener('change', (event) => {
                if (event.target?.matches?.('input[name^="mediciones["]')) {
                    actualizarTarjetaDesdeMangueras();
                }
            });

            async function cargarResumenVentas() {
                if (esEdicion) {
                    calcDiferencia();
                    return;
                }

                const idTurno = turnoEl?.value;
                const fecha = fechaEl?.value;

                if (!idTurno || !fecha) {
                    restaurarTotalInicial();
                    calcDiferencia();
                    return;
                }

                const mediciones = Array.from(document.querySelectorAll('input[name^="mediciones["]'))
                    .reduce((acc, input) => {
                        const value = input.value;
                        if (value !== '' && value !== null) {
                            acc[input.name.match(/\[(\d+)\]/)?.[1] || input.name] = value;
                        }
                        return acc;
                    }, {});

                const url = `{{ route('cierres_turno.resumen_ventas') }}?id_turno=${encodeURIComponent(idTurno)}&fecha=${encodeURIComponent(fecha)}&id_usuario=${encodeURIComponent(idUsuarioFijo ?? '')}&es_edicion=${esEdicion ? '1' : '0'}&mediciones=${encodeURIComponent(JSON.stringify(mediciones))}`;

                try {
                    const response = await fetch(url, {
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });

                    if (!response.ok) {
                        throw new Error('No se pudo obtener el resumen de ventas');
                    }

                    const data = await response.json();
                    if (totalVentasEl) totalVentasEl.value = Number(data?.total ?? 0).toFixed(2);
                    existingDiferenciasTotal = Number(data?.total_diferencias ?? 0);
                    calcDiferencia();
                } catch (e) {
                    restaurarTotalInicial();
                    existingDiferenciasTotal = 0;
                    calcDiferencia();
                }
            }

            [efectivoEl, creditoEl, visaEl, descuentosEl].forEach((el) => {
                ['input', 'change'].forEach((evt) => el?.addEventListener(evt, calcDiferencia));
            });

            document.querySelectorAll('input[name^="mediciones["]').forEach((el) => {
                ['input', 'change'].forEach((evt) => el?.addEventListener(evt, () => {
                    if (!esEdicion) {
                        cargarResumenVentas();
                    }
                    calcDiferencia();
                }));
            });

            form?.addEventListener('input', (event) => {
                if (event.target?.matches?.('input[name^="mediciones["]')) {
                    if (!esEdicion) {
                        cargarResumenVentas();
                    }
                    calcDiferencia();
                }
            });

            form?.addEventListener('change', (event) => {
                if (event.target?.matches?.('input[name^="mediciones["]')) {
                    if (!esEdicion) {
                        cargarResumenVentas();
                    }
                    calcDiferencia();
                }
            });

            renderListaDiferencias();
            actualizarPrecioDiferencia();
            calcDiferencia();
            if (!esEdicion) {
                actualizarTarjetaDesdeMangueras();
                setTimeout(cargarResumenVentas, 0);
            }
        })();
    </script>
@endsection