@extends('partials.layout')

@section('title', 'Corregir Cuadre')
@section('subtitle', 'Editar registros de salidas y recalcular totales')

@section('back')
    <a class="btn" href="{{ route('dashboard') }}">← Volver</a>
@endsection

@section('content')
    <form method="GET" action="{{ route('registros_salidas.corregir_cuadre') }}" style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;margin-bottom:16px">
        <div>
            <label>Fecha</label>
            <input type="date" name="fecha" value="{{ $fecha ?? now()->toDateString() }}">
        </div>
        <div>
            <label>Usuario</label>
            <select name="id_usuario">
                <option value="">Todos</option>
                @foreach($usuarios as $u)
                    <option value="{{ $u->id_usuario }}" {{ (isset($usuarioId) && (string)$usuarioId === (string)$u->id_usuario) ? 'selected' : '' }}>
                        {{ $u->nombres ?? $u->name ?? $u->usuario }}
                    </option>
                @endforeach
            </select>
        </div>
        <div>
            <label>Turno</label>
            <select name="id_turno">
                <option value="">Todos</option>
                @foreach($turnos as $t)
                    <option value="{{ $t->id_turno }}" {{ (isset($turnoId) && (string)$turnoId === (string)$t->id_turno) ? 'selected' : '' }}>
                        {{ $t->turnos ?? $t->nombre }}
                    </option>
                @endforeach
            </select>
        </div>
        <div style="display:flex;gap:8px;align-items:end;flex-wrap:wrap">
            <button class="btn primary" type="submit">Filtrar</button>
            <a class="btn" href="{{ route('registros_salidas.corregir_cuadre') }}">Hoy</a>
        </div>
    </form>

    @php
        $mostrarAcciones = !empty($fecha) && !empty($usuarioId) && !empty($turnoId);
    @endphp

    <div style="overflow:auto;border:1px solid #e2e8f0;border-radius:12px">
        <table id="tableRegistros">
            <thead>
                <tr>
                    <th>Fecha de Inicio</th>
                    <th>Usuario</th>
                    <th>Turno</th>
                    <th>Manguera</th>
                    <th>Saldo Inicial</th>
                    <th>Saldo Final</th>
                    <th>Precio Galón</th>
                    <th>Total</th>
                    @if($mostrarAcciones)
                        <th>Acción</th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @forelse($items as $it)
                    <tr data-id="{{ $it->id_salida }}" data-id-manguera="{{ $it->id_manguera }}" data-id-usuario="{{ $it->id_usuario }}" data-id-turno="{{ $it->id_turno }}" data-fecha-inicio="{{ optional($it->fecha_inicio)->toDateString() }}" data-saldo-final="{{ number_format((float)($it->saldo_final ?? 0), 3, '.', '') }}" data-precio-galon="{{ number_format((float)($it->precio_galon ?? 0), 2, '.', '') }}">
                        <td>{{ optional($it->fecha_inicio)->format('d/m/Y') }}</td>
                        <td>{{ $it->usuario?->nombres ?? $it->usuario?->name ?? $it->usuario }}</td>
                        <td>{{ $it->turno?->turnos ?? $it->turno?->nombre ?? $it->id_turno }}</td>
                        <td>{{ optional($it->manguera)->tipoCombustible?->nombre ?? optional($it->manguera)->nombre ?? 'Sin combustible' }}</td>
                        <td><input type="number" step="0.001" name="saldo_inicial" value="{{ number_format((float)($it->saldo_inicial ?? 0), 3, '.', '') }}" /></td>
                        <td class="cell-saldo-final"><input type="number" step="0.001" name="saldo_final" value="{{ number_format((float)($it->saldo_final ?? 0), 3, '.', '') }}" /></td>
                        <td class="cell-precio-galon">{{ number_format((float)($it->precio_galon ?? 0), 2, '.', '') }}</td>
                        <td class="cell-total">{{ number_format((float)($it->total ?? 0), 2, '.', '') }}</td>
                        @if($mostrarAcciones)
                            <td><button type="button" class="btn primary btn-save" data-id="{{ $it->id_salida }}">Guardar</button></td>
                        @endif
                    </tr>
                @empty
                    <tr>
                        <td colspan="{{ $mostrarAcciones ? 10 : 9 }}" style="padding:14px;text-align:center;color:#64748b;">No hay registros para la fecha y filtros seleccionados.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @php
        $cierreSelected = $cierre ?? null;
        $cierreFecha = $cierreSelected?->fecha?->toDateString() ?? ($fecha ?? now()->toDateString());
        $cierreUsuarioId = $cierreSelected?->id_usuario ?? $usuarioId;
        $cierreTurnoId = $cierreSelected?->id_turno ?? $turnoId;
        $cierreUsuarioNombre = null;
        if (!empty($cierreUsuarioId)) {
            $cierreUsuarioNombre = optional($usuarios->firstWhere('id_usuario', (string) $cierreUsuarioId))->nombres ?? optional($usuarios->firstWhere('id_usuario', (string) $cierreUsuarioId))->name ?? optional($usuarios->firstWhere('id_usuario', (string) $cierreUsuarioId))->usuario ?? '';
        }
        $cierreTurnoNombre = null;
        if (!empty($cierreTurnoId)) {
            $cierreTurnoNombre = optional($turnos->firstWhere('id_turno', (string) $cierreTurnoId))->turnos ?? optional($turnos->firstWhere('id_turno', (string) $cierreTurnoId))->nombre ?? '';
        }
        $mostrarCierreTurno = !empty($fecha) && !empty($usuarioId) && !empty($turnoId);
    @endphp

    @if($mostrarCierreTurno)
        <section style="margin-top:22px;border:1px solid #e2e8f0;border-radius:12px;padding:16px;background:#f8fafc;box-shadow:0 8px 24px rgba(15,23,42,0.06)">
            <h3 style="margin:0 0 12px 0;font-size:18px;color:#111827">Cierre de turno</h3>

            <form id="cierre-turno-form" data-cierre-url="{{ url('cierres-turno/corregir-cuadre') }}" data-total-diferencias="{{ number_format((float) $totalDiferencias, 2, '.', '') }}">
                <input type="hidden" name="fecha" value="{{ $cierreFecha }}">
                <input type="hidden" name="id_usuario" value="{{ $cierreUsuarioId }}">
                <input type="hidden" name="id_turno" value="{{ $cierreTurnoId }}">

                <div style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end">
                    <div>
                        <div style="padding:0;border:none;background:transparent;color:#0f172a;min-height:0;display:block;font-size:15px;font-weight:700">{{ \Carbon\Carbon::parse($cierreFecha)->format('d/m/Y') }}</div>
                    </div>
                    <div>
                        <div style="padding:0;border:none;background:transparent;color:#0f172a;min-height:0;display:block;font-size:15px;font-weight:700">{{ $cierreUsuarioNombre ?: '-' }}</div>
                    </div>
                    <div>
                        <div style="padding:0;border:none;background:transparent;color:#0f172a;min-height:0;display:block;font-size:15px;font-weight:700">{{ $cierreTurnoNombre ?: '-' }}</div>
                    </div>
                    <div style="display:flex;justify-content:flex-end;align-items:flex-end">
                        <button type="button" class="btn primary" id="btn-cierre-guardar" style="margin-top:20px">Guardar cierre</button>
                    </div>
                </div>

                <div style="display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:16px">
                    <div>
                        <label>Total ventas</label>
                        <input type="number" step="0.01" name="total_ventas" value="{{ number_format((float)($cierreSelected?->total_ventas ?? 0), 2, '.', '') }}" readonly />
                    </div>
                    <div>
                        <label>Efectivo</label>
                        <input type="number" step="0.01" name="efectivo" value="{{ number_format((float)($cierreSelected?->efectivo ?? 0), 2, '.', '') }}" />
                    </div>
                    <div>
                        <label>Crédito</label>
                        <input type="number" step="0.01" name="credito" value="{{ number_format((float)($cierreSelected?->credito ?? 0), 2, '.', '') }}" />
                    </div>
                    <div>
                        <label>Visa</label>
                        <input type="number" step="0.01" name="visa" value="{{ number_format((float)($cierreSelected?->visa ?? 0), 2, '.', '') }}" />
                    </div>
                    <div>
                        <label>Descuentos</label>
                        <input type="number" step="0.01" name="descuentos" value="{{ number_format((float)($cierreSelected?->descuentos ?? 0), 2, '.', '') }}" />
                    </div>
                    <div style="grid-column:1/-1; max-width: 220px;">
                        <label>Diferencia</label>
                        <input type="number" step="0.01" name="diferencia" value="{{ number_format((float)($cierreSelected?->diferencia ?? 0), 2, '.', '') }}" readonly style="max-width:220px;" />
                    </div>
                </div>
            </form>
        </section>
    @endif

    <script>
        function actualizarDiferenciaCierre() {
            const form = document.getElementById('cierre-turno-form');
            if (!form) {
                return;
            }

            const valor = (nombre) => parseFloat(form.querySelector(`input[name="${nombre}"]`).value) || 0;
            const totalDiferencias = parseFloat(form.dataset.totalDiferencias) || 0;
            const diferencia = valor('total_ventas') - valor('efectivo') - valor('credito') - valor('visa') - valor('descuentos') - totalDiferencias;
            form.querySelector('input[name="diferencia"]').value = diferencia.toFixed(2);
        }

        function actualizarTotalVentasDesdeFilas() {
            const total = Array.from(document.querySelectorAll('.cell-total')).reduce((sum, el) => {
                const valor = parseFloat(el.innerText || '0');
                return sum + (Number.isFinite(valor) ? valor : 0);
            }, 0);

            const inputTotal = document.querySelector('#cierre-turno-form input[name="total_ventas"]');
            if (inputTotal) {
                inputTotal.value = total.toFixed(2);
            }

            actualizarDiferenciaCierre();
            return total;
        }

        actualizarTotalVentasDesdeFilas();

        document.addEventListener('input', function (e) {
            const input = e.target;
            if (input.matches('input[name="efectivo"], input[name="credito"], input[name="visa"], input[name="descuentos"]')) {
                actualizarDiferenciaCierre();
                return;
            }

            if (!input.matches('input[name="saldo_inicial"], input[name="saldo_final"]')) {
                return;
            }

            const tr = input.closest('tr');
            const saldoInicial = parseFloat(tr.querySelector('input[name="saldo_inicial"]').value) || 0;
            const saldoFinal = parseFloat(tr.querySelector('input[name="saldo_final"]').value) || 0;
            const precioGalon = parseFloat(tr.dataset.precioGalon) || 0;
            const total = Math.max(0, saldoFinal - saldoInicial) * precioGalon;

            tr.querySelector('.cell-total').innerText = total.toFixed(2);
            actualizarTotalVentasDesdeFilas();
        });

        function setSavedButtonState(button, isSaved) {
            button.style.background = isSaved ? '#16a34a' : '#ef4444';
            button.style.borderColor = isSaved ? '#16a34a' : '#ef4444';
            button.innerHTML = isSaved ? '✓' : 'Guardar';
            button.dataset.saved = isSaved ? 'true' : 'false';
        }

        document.addEventListener('click', function (e) {
            if (e.target && e.target.classList.contains('btn-save')) {
                const tr = e.target.closest('tr');
                const id = tr.dataset.id;
                const payload = {
                    id_manguera: tr.dataset.idManguera,
                    fecha_inicio: tr.dataset.fechaInicio,
                    id_usuario: tr.dataset.idUsuario,
                    id_turno: tr.dataset.idTurno,
                    saldo_inicial: tr.querySelector('input[name="saldo_inicial"]').value,
                    saldo_final: tr.querySelector('input[name="saldo_final"]').value,
                    precio_galon: tr.dataset.precioGalon,
                };

                actualizarTotalVentasDesdeFilas();

                fetch(`{{ url('registros-salidas/corregir-cuadre') }}/${id}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(payload)
                }).then(r => r.json()).then(data => {
                    if (data.success) {
                        tr.querySelector('.cell-total').innerText = parseFloat(data.total).toFixed(2);
                        actualizarTotalVentasDesdeFilas();
                        setSavedButtonState(e.target, true);
                    } else {
                        alert('Error al guardar');
                    }
                }).catch(err => {
                    console.error(err);
                    alert('Error de red');
                });
            }

            if (e.target && e.target.id === 'btn-cierre-guardar') {
                const form = document.getElementById('cierre-turno-form');
                const totalVentasActual = actualizarTotalVentasDesdeFilas();
                const formData = new FormData(form);
                formData.set('total_ventas', totalVentasActual.toFixed(2));
                const payload = Object.fromEntries(formData.entries());

                fetch(form.dataset.cierreUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(payload)
                }).then(r => r.json()).then(data => {
                    if (data.success) {
                        const btn = e.target;
                        btn.style.background = '#16a34a';
                        btn.style.borderColor = '#16a34a';
                        btn.innerHTML = '✓';
                    } else {
                        alert('Error al guardar el cierre de turno');
                    }
                }).catch(err => {
                    console.error(err);
                    alert('Error de red al guardar el cierre de turno');
                });
            }
        });

        document.querySelectorAll('input[name="saldo_inicial"]').forEach(inp => {
            inp.addEventListener('input', function () {
                const tr = this.closest('tr');
                if (!tr) return;

                const si = parseFloat(tr.querySelector('input[name="saldo_inicial"]').value) || 0;
                const sf = parseFloat(tr.dataset.saldoFinal) || 0;
                const pg = parseFloat(tr.dataset.precioGalon) || 0;
                const gal = Math.max(0, sf - si);
                tr.querySelector('.cell-total').innerText = (gal * pg).toFixed(2);
            });
        });
    </script>
@endsection