@extends('partials.layout')

@section('title', 'Registrar Depósito')
@section('subtitle', 'Registrar depósitos agrupando cierres de turno')

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

@section('content')
    <div class="card" style="max-width:900px">
        <div class="card-body">
        <form method="POST" action="{{ route('depositos.store') }}">
            @csrf

            <label>Fecha depósito</label>
            <input type="date" name="fecha_deposito" value="{{ old('fecha_deposito', $fechaDeposito) }}" required>

            <label>Fecha del efectivo</label>
            <div style="display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;">
                <div style="display:flex;flex-direction:column;min-width:180px;">
                    <label style="font-weight:600;margin-bottom:4px">Desde</label>
                    <input type="date" id="fecha_inicio" name="fecha_inicio" value="{{ old('fecha_inicio', $fechaEfectivo) }}" required>
                </div>
                <div style="display:flex;flex-direction:column;min-width:180px;">
                    <label style="font-weight:600;margin-bottom:4px">Hasta</label>
                    <input type="date" id="fecha_fin" name="fecha_fin" value="{{ old('fecha_fin', $fechaEfectivo) }}" required>
                </div>
                <div style="display:flex;align-items:center;min-height:46px;">
                    <button type="button" id="btnBuscar" class="btn">
                        <span class="icon" style="display:inline-block;vertical-align:middle;margin-right:6px">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6"/><path d="m20 20-4.5-4.5"/></svg>
                        </span>
                        <span class="label">Buscar</span>
                    </button>
                </div>
            </div>

            <div style="margin-top:8px; color:#64748b; font-size:13px;">
                Se mostrarán todos los cierres del rango seleccionado.
            </div>

            <div id="cierresContainer" style="margin-top:12px">
                <!-- Cierres con checkboxes aparecerán aquí -->
            </div>

            <div class="total">Total seleccionado: <span id="totalSeleccionado">0.00</span></div>

            <div style="margin-top:12px;display:flex;gap:12px;flex-wrap:wrap;">
                <div style="flex:1;min-width:200px;">
                    <label>Monto esperado</label>
                    <input type="number" name="monto_esperado" id="montoEsperado" step="0.01" min="0" value="{{ old('monto_esperado', '0.00') }}" required>
                </div>
                <div style="flex:1;min-width:200px;">
                    <label>Monto depositado</label>
                    <input type="number" name="monto_depositado" id="montoDepositado" step="0.01" min="0" value="{{ old('monto_depositado', '0.00') }}" required>
                </div>
            </div>

            <div id="diferenciaMontoLabel" style="margin-top:8px;display:none;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:600;"></div>

            <div style="margin-top:12px">
                <label>Observaciones (opcional)</label>
                <textarea name="observaciones" rows="3">{{ old('observaciones') }}</textarea>
            </div>

            <div style="margin-top:12px">
                <button type="submit" class="btn primary">Registrar depósito</button>
            </div>
        </form>
        </div>
    </div>

    <script>
        const btnBuscar = document.getElementById('btnBuscar');
        const fechaInicioInput = document.getElementById('fecha_inicio');
        const fechaFinInput = document.getElementById('fecha_fin');
        const container = document.getElementById('cierresContainer');
        const totalEl = document.getElementById('totalSeleccionado');

        btnBuscar.addEventListener('click', async () => {
            const inicio = fechaInicioInput.value;
            const fin = fechaFinInput.value;

            if (!inicio || !fin) {
                alert('Seleccione desde y hasta en Fecha del efectivo');
                return;
            }

            btnBuscar.disabled = true;
            const loadingLabel = btnBuscar.querySelector('.label');
            if (loadingLabel) {
                loadingLabel.textContent = 'Buscar';
            }

            const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            try {
                const payload = { fecha_inicio: inicio, fecha_fin: fin };

                const res = await fetch('{{ route('depositos.efectivos') }}', {
                    method: 'POST',
                    headers: {'Content-Type':'application/json','X-CSRF-TOKEN': token},
                    body: JSON.stringify(payload)
                });

                const json = await res.json();
                renderCierres(json.items || []);
            } catch (err) {
                alert('Error al obtener cierres');
            } finally {
                btnBuscar.disabled = false;
                const lbl = btnBuscar.querySelector('.label');
                if (lbl) lbl.textContent = 'Buscar';
            }
        });

        function renderCierres(items) {
            container.innerHTML = '';
            if (!items.length) {
                container.innerHTML = '<div>No se encontraron cierres para las fechas seleccionadas.</div>';
                updateTotal();
                return;
            }

            const table = document.createElement('table');
            const thead = document.createElement('thead');
            thead.innerHTML = '<tr><th>ID Cierre</th><th>Usuario</th><th>Efectivo</th><th>Fecha</th><th>Turno</th></tr>';
            table.appendChild(thead);
            const tbody = document.createElement('tbody');

            items.forEach(it => {
                const tr = document.createElement('tr');
                if (it.ya_depositado) {
                    tr.style.backgroundColor = '#fef2f2';
                    tr.style.color = '#b91c1c';
                }
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'cierres[]';
                hiddenInput.value = it.id_cierre;
                tr.appendChild(hiddenInput);
                tr.appendChild(document.createElement('td')).textContent = it.id_cierre;
                tr.appendChild(document.createElement('td')).textContent = it.usuario;
                tr.appendChild(document.createElement('td')).textContent = it.efectivo;
                tr.appendChild(document.createElement('td')).textContent = it.fecha;
                tr.appendChild(document.createElement('td')).textContent = it.turno;
                tbody.appendChild(tr);
            });

            table.appendChild(tbody);
            container.appendChild(table);
            updateTotal();
        }

        // detect manual edits to monto depositado so we don't overwrite user input
        const montoDepositadoEl = document.getElementById('montoDepositado');
        const montoEsperadoEl = document.getElementById('montoEsperado');
        const diferenciaMontoLabel = document.getElementById('diferenciaMontoLabel');
        if (montoDepositadoEl) {
            montoDepositadoEl._userEdited = false;
            montoDepositadoEl.addEventListener('input', () => { montoDepositadoEl._userEdited = true; actualizarDiferenciaMonto(); });
        }

        function actualizarDiferenciaMonto() {
            if (!diferenciaMontoLabel || !montoEsperadoEl || !montoDepositadoEl) return;

            const esperado = parseFloat(montoEsperadoEl.value || '0');
            const depositado = parseFloat(montoDepositadoEl.value || '0');
            const diferencia = depositado - esperado;

            if (Math.abs(diferencia) < 0.0001) {
                diferenciaMontoLabel.style.display = 'none';
                diferenciaMontoLabel.textContent = '';
                return;
            }

            const esFaltante = diferencia < 0;
            diferenciaMontoLabel.style.display = 'block';
            diferenciaMontoLabel.textContent = esFaltante
                ? `Faltante: S/ ${Math.abs(diferencia).toFixed(2)}`
                : `Sobrante: S/ ${Math.abs(diferencia).toFixed(2)}`;
            diferenciaMontoLabel.style.background = esFaltante ? '#fef2f2' : '#ecfdf5';
            diferenciaMontoLabel.style.color = esFaltante ? '#991b1b' : '#166534';
            diferenciaMontoLabel.style.border = `1px solid ${esFaltante ? '#fecaca' : '#a7f3d0'}`;
        }

        function updateTotal() {
            const hiddenInputs = container.querySelectorAll('input[type="hidden"][name="cierres[]"]');
            let total = 0;
            hiddenInputs.forEach(input => {
                const row = input.closest('tr');
                const montoCell = row?.children[3];
                const montoValue = montoCell?.textContent || '0';
                total += parseFloat(montoValue) || 0;
            });
            totalEl.textContent = total.toFixed(2);
            const montoEsperado = document.getElementById('montoEsperado');
            const montoDepositado = document.getElementById('montoDepositado');
            if (montoEsperado) montoEsperado.value = total.toFixed(2);
            if (montoDepositado && !montoDepositado._userEdited) montoDepositado.value = total.toFixed(2);
            actualizarDiferenciaMonto();
        }

        if (montoEsperadoEl) {
            montoEsperadoEl.addEventListener('input', actualizarDiferenciaMonto);
        }
        if (montoDepositadoEl) {
            montoDepositadoEl.addEventListener('change', actualizarDiferenciaMonto);
        }
    </script>
@endsection