

<?php $__env->startSection('title','Cuadre de Caja'); ?>
<?php $__env->startSection('subtitle','Registrar lecturas por isla, lado y manguera'); ?>

<?php $__env->startSection('back'); ?>
    <?php if(isset($fecha) && isset($idTurno) && isset($idUsuario)): ?>
        <a class="btn" href="<?php echo e(route('cierres_turno.cuadre_caja.lista')); ?>">← Volver a la lista</a>
    <?php else: ?>
        <a class="btn" href="<?php echo e(route('dashboard')); ?>">← Volver</a>
    <?php endif; ?>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
    <?php ($canEdit = $canEdit ?? true); ?>
    <?php ($totalVentasBase = $totalVentasInicial ?? ($totalVentasCalculado ?? ($cierre->total_ventas ?? 0))); ?>
    <?php ($submitLabel = isset($cierre) ? 'Actualizar Cuadre' : 'Guardar Cuadre'); ?>
    <?php ($esEdicion = isset($cierre)); ?>

    <?php 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>
    <?php endif; ?>

    <form method="POST" action="<?php echo e(route('cierres_turno.cuadre_caja.store')); ?>" id="cuadre-caja-form" data-es-edicion="<?php echo e($esEdicion ? '1' : '0'); ?>">
        <?php echo csrf_field(); ?>

        <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>
                <?php if($esEdicion): ?>
                    <input type="hidden" name="id_usuario" value="<?php echo e(old('id_usuario', $idUsuario ?? auth()->id())); ?>">
                <?php endif; ?>
                <select name="id_usuario" required style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px" <?php echo e(($canEdit && !$esEdicion) ? '' : 'disabled'); ?>>
                    <option value="">-- Seleccione --</option>
                    <?php $__currentLoopData = $usuarios; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $usuario): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($usuario->id_usuario); ?>" <?php echo e(old('id_usuario', $idUsuario ?? auth()->id()) == $usuario->id_usuario ? 'selected' : ''); ?>>
                            <?php echo e(trim(($usuario->nombres ?? '') . ' ' . ($usuario->apellidos ?? '')) ?: $usuario->usuario); ?>

                        </option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>

            <div>
                <label style="display:block;font-weight:700;margin-bottom:6px">Fecha</label>
                <input type="date" name="fecha" value="<?php echo e(old('fecha', $fecha ?? date('Y-m-d'))); ?>" required style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px" <?php echo e($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" <?php echo e($canEdit ? '' : 'disabled'); ?>>
                    <option value="">-- Seleccione --</option>
                    <?php $__currentLoopData = $turnos; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $turno): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($turno->id_turno); ?>" <?php echo e(old('id_turno', $idTurno ?? null) == $turno->id_turno ? 'selected' : ''); ?>>
                            <?php echo e($turno->turnos); ?>

                        </option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr;gap:14px;align-items:start">
            <?php $__currentLoopData = $islas; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $isla): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <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"><?php echo e($isla->nombre ?? 'Isla'); ?></h3>
                    <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px">
                        <?php $__currentLoopData = $isla->caras; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cara): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <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"><?php echo e($cara->nombre ?? 'Lado'); ?></h4>
                                <div style="display:grid;gap:8px">
                                    <?php $__currentLoopData = $cara->mangueras; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $manguera): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <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"><?php echo e($manguera->numero_manguera ?: $index + 1); ?> — <?php echo e($manguera->tipoCombustible->nombre ?? 'Sin combustible'); ?></span>
                                                <span style="font-size:11px;color:#64748b">Precio galón: <strong data-manguera-precio="<?php echo e($manguera->id_manguera); ?>"><?php echo e(number_format((float) ($manguerasCuadreBase[$manguera->id_manguera]['precio_turno'] ?? 0), 2, '.', '')); ?></strong></span>
                                            </div>
                                            <input type="number" step="0.001" name="mediciones[<?php echo e($manguera->id_manguera); ?>]" value="<?php echo e(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)" <?php echo e($canEdit ? '' : 'disabled'); ?>>
                                        </label>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </article>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </section>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </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>

            <?php 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">
                    <?php echo e($errors->first('diferencias')); ?>

                </div>
            <?php 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(4,minmax(0,1fr));gap:12px">
                <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>
                        <?php $__currentLoopData = $tipos; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tipo): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($tipo->id_tipo_combustible); ?>"><?php echo e($tipo->nombre ?? 'Tipo de combustible'); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </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>

            <?php 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">
                        <?php $__currentLoopData = $diferencias; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <li>
                                <?php echo e(optional($item->created_at)->format('d/m/Y H:i')); ?> — <?php echo e($item->tipoCombustible->nombre ?? 'Tipo'); ?> — <?php echo e(number_format((float) $item->total, 2)); ?>

                                <?php if(!empty($item->observacion)): ?> — <?php echo e($item->observacion); ?><?php endif; ?>
                            </li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </ul>
                </div>
            <?php 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">
                <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="<?php echo e(number_format((float) $totalVentasBase, 2, '.', '')); ?>" value="<?php echo e(number_format((float) $totalVentasBase, 2, '.', '')); ?>" 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">Efectivo</label>
                    <input type="number" step="0.01" name="efectivo" value="<?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(old('descuentos', $cierre->descuentos ?? '')); ?>" style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
                </div>

                <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="<?php echo e(old('diferencia', $cierre->diferencia ?? 0)); ?>" readonly style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc">
                </div>
            </div>
        </section>

        <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap">
            <?php if($canEdit): ?>
                <button class="btn primary" type="submit"><?php echo e($submitLabel); ?></button>
            <?php endif; ?>
            <a class="btn" href="<?php echo e(route('cierres_turno.cuadre_caja.lista')); ?>">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 = <?php echo json_encode($manguerasCuadreBase ?? [], 15, 512) ?>;
            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 restaurarTotalInicial() {
                if (totalVentasEl && (totalVentasEl.value === '' || totalVentasEl.value === '0.00')) {
                    totalVentasEl.value = Number(totalVentasInicial || 0).toFixed(2);
                }
            }

            function forzarTotalInicial() {
                if (!totalVentasEl) 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();

            if (!esEdicion) {
                renderTarjetaValores();
            }

            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 = <?php echo json_encode($tipos->map(fn($tipo) => ['id' => $tipo->id_tipo_combustible, 'nombre' => $tipo->nombre])->toArray(), 512) ?>;
            let existingDiferenciasTotal = 0;

            const formularioDiferencia = document.getElementById('diferencia-form');
            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 diferenciaHidden = document.getElementById('diferencias-hidden');
            const diferenciaDrafts = <?php echo json_encode($diferenciasRows, 15, 512) ?>;

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

            function fetchPrecioPorTipo(idTipoCombustible) {
                const idTurno = turnoEl?.value;
                const fecha = fechaEl?.value;

                if (!idTipoCombustible || !idTurno || !fecha) {
                    return Promise.resolve(0);
                }

                return fetch(`<?php echo e(route('cierres_turno.obtener_precio')); ?>?id_tipo_combustible=${idTipoCombustible}&id_turno=${idTurno}&fecha=${fecha}`)
                    .then(response => response.json())
                    .then(data => Number(data?.precio ?? 0));
            }

            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() {
                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 updateMangueraPriceLabel(idManguera, precio) {
                const label = document.querySelector(`[data-manguera-precio="${idManguera}"]`);
                if (label) {
                    label.textContent = Number(precio || 0).toFixed(2);
                }

                if (manguerasBase?.[idManguera]) {
                    manguerasBase[idManguera].precio_turno = Number(precio || 0);
                }
            }

            async function actualizarPreciosMangueras() {
                const idTurno = turnoEl?.value;
                const fecha = fechaEl?.value;

                if (!idTurno || !fecha) {
                    Object.keys(manguerasBase || {}).forEach((idManguera) => updateMangueraPriceLabel(idManguera, 0));
                    if (!esEdicion) {
                        actualizarTarjetaDesdeMangueras();
                    }
                    return;
                }

                const promesas = Object.entries(manguerasBase || {}).map(async ([idManguera, base]) => {
                    const idTipoCombustible = base?.tipo_combustible_id;
                    if (!idTipoCombustible) {
                        updateMangueraPriceLabel(idManguera, 0);
                        return;
                    }

                    try {
                        const response = await fetch(`<?php echo e(route('cierres_turno.obtener_precio')); ?>?id_tipo_combustible=${encodeURIComponent(idTipoCombustible)}&id_turno=${encodeURIComponent(idTurno)}&fecha=${encodeURIComponent(fecha)}`);
                        if (!response.ok) {
                            throw new Error('No se pudo obtener el precio del galón');
                        }

                        const data = await response.json();
                        updateMangueraPriceLabel(idManguera, Number(data?.precio ?? 0));
                    } catch (error) {
                        updateMangueraPriceLabel(idManguera, 0);
                    }
                });

                await Promise.all(promesas);

                if (!esEdicion) {
                    actualizarTarjetaDesdeMangueras();
                }
            }

            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();
                const total = getTarjetaRowsFromInputs().reduce((sum, item) => sum + (Number(item.total) || 0), 0);
                if (totalVentasEl) {
                    totalVentasEl.value = total.toFixed(2);
                }
                calcDiferencia();
            }

            function cargarPrecioForm() {
                const idTipoCombustible = formTipoEl?.value;
                if (!idTipoCombustible) {
                    if (formPrecioEl) formPrecioEl.value = '0.00';
                    recalcularFormTotal();
                    return;
                }

                fetchPrecioPorTipo(idTipoCombustible).then((precio) => {
                    if (formPrecioEl) {
                        formPrecioEl.value = Number(precio).toFixed(2);
                        recalcularFormTotal();
                        calcDiferencia();
                    }
                }).catch(() => {
                    if (formPrecioEl) {
                        formPrecioEl.value = '0.00';
                        recalcularFormTotal();
                    }
                });
            }

            function buildDiferenciaItem(record, index) {
                const tipo = diferenciaTipoList.find((t) => String(t.id) === String(record.id_tipo_combustible));
                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(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_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 clearFormDiferencia() {
                if (formCantidadEl) formCantidadEl.value = '';
                if (formTotalEl) formTotalEl.value = '0.00';
                if (formObservacionEl) formObservacionEl.value = '';
            }

            function addDiferenciaFromForm() {
                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 (!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_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();
            }

            function actualizarPreciosDiferencias() {
                if (!turnoEl?.value || !fechaEl?.value) return;

                Promise.all(diferenciaDrafts.map((item) => {
                    if (!item.id_tipo_combustible) return Promise.resolve();
                    return fetchPrecioPorTipo(item.id_tipo_combustible).then((precio) => {
                        item.precio = Number(precio).toFixed(2);
                        item.total = (Number(item.cantidad_galones) || 0) * Number(precio);
                    });
                })).then(() => {
                    renderListaDiferencias();
                    calcDiferencia();
                });
            }

            formTipoEl?.addEventListener('change', cargarPrecioForm);
            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));
                }
            });

            const refrescarPreciosPorTurno = () => {
                cargarResumenVentas();
                cargarPrecioForm();
                actualizarPreciosDiferencias();
                actualizarPreciosMangueras();
            };

            turnoEl?.addEventListener('change', refrescarPreciosPorTurno);
            fechaEl?.addEventListener('change', refrescarPreciosPorTurno);
            if (!esEdicion) {
                usuarioEl?.addEventListener('change', cargarResumenVentas);
            }

            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();
                }
            });

            renderListaDiferencias();
            cargarPrecioForm();
            calcDiferencia();
            actualizarPreciosMangueras();

            async function cargarResumenVentas() {
                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 = `<?php echo e(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, () => {
                    cargarResumenVentas();
                    calcDiferencia();
                }));
            });

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

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

            setTimeout(cargarResumenVentas, 0);
            if (!esEdicion) {
                setTimeout(actualizarTarjetaDesdeMangueras, 0);
            }
            renderListaDiferencias();
            cargarPrecioForm();
            calcDiferencia();
        })();
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('partials.layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\laragon\www\grifo\resources\views/cierres_turno/cuadre_caja.blade.php ENDPATH**/ ?>