@extends('layouts.app')

@section('titulo', 'Nuevo comprobante contable')

@section('content')
    <h1 class="h4 mb-3">Nuevo comprobante contable</h1>

    <form method="POST" action="{{ route('contabilidad.comprobantes.store') }}" class="card p-4">
        @csrf
        <div class="row g-3 mb-3">
            <div class="col-md-3">
                <label class="form-label">Tipo</label>
                <select name="tipo" class="form-select" required>
                    <option value="diario">Diario</option>
                    <option value="ingreso">Ingreso</option>
                    <option value="egreso">Egreso</option>
                    <option value="ajuste">Ajuste</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Fecha</label>
                <input type="date" name="fecha" class="form-control" value="{{ now()->toDateString() }}" required>
            </div>
            <div class="col-md-6">
                <label class="form-label">Concepto</label>
                <input type="text" name="concepto" class="form-control" required maxlength="500">
            </div>
        </div>

        <table class="table" id="tabla-lineas">
            <thead><tr><th style="width:40%">Cuenta</th><th style="width:20%">Descripcion</th><th style="width:15%">Debe</th><th style="width:15%">Haber</th><th></th></tr></thead>
            <tbody></tbody>
        </table>
        <button type="button" class="btn btn-sm btn-outline-primary" id="btn-agregar">+ Agregar linea</button>

        <div class="alert mt-3" id="alerta-balance"></div>

        <button type="submit" class="btn btn-primary mt-2 d-block" id="btn-guardar">Guardar comprobante</button>
        <p class="text-muted small mt-2 mb-0">El sistema no permite guardar comprobantes descuadrados: la suma del Debe debe ser igual a la suma del Haber.</p>
    </form>
@endsection

@section('scripts')
<script>
const cuentas = @json($cuentas->map(fn($c) => ['id'=>$c->id,'nombre'=>$c->nombreCompleto()]));
let i = 0;
const tbody = document.querySelector('#tabla-lineas tbody');

function agregar() {
    const idx = i++;
    const opciones = cuentas.map(c => `<option value="${c.id}">${c.nombre}</option>`).join('');
    const fila = document.createElement('tr');
    fila.innerHTML = `
        <td>
            <select class="form-select form-select-sm" name="lineas[${idx}][cuenta_id]" required>
                <option value="">-- Selecciona --</option>
                ${opciones}
            </select>
        </td>
        <td><input type="text" class="form-control form-control-sm" name="lineas[${idx}][descripcion]"></td>
        <td><input type="number" step="0.01" class="form-control form-control-sm inp-debe" name="lineas[${idx}][debe]" value="0"></td>
        <td><input type="number" step="0.01" class="form-control form-control-sm inp-haber" name="lineas[${idx}][haber]" value="0"></td>
        <td><button type="button" class="btn btn-sm btn-outline-danger" onclick="this.closest('tr').remove(); recalcular();">x</button></td>
    `;
    tbody.appendChild(fila);
    fila.querySelectorAll('.inp-debe, .inp-haber').forEach(inp => inp.addEventListener('input', recalcular));
}

function recalcular() {
    let debe = 0, haber = 0;
    document.querySelectorAll('.inp-debe').forEach(i => debe += parseFloat(i.value || 0));
    document.querySelectorAll('.inp-haber').forEach(i => haber += parseFloat(i.value || 0));
    const alerta = document.getElementById('alerta-balance');
    const diferencia = Math.round((debe - haber) * 100) / 100;
    alerta.textContent = `Debe: ${debe.toFixed(2)}  |  Haber: ${haber.toFixed(2)}  |  Diferencia: ${diferencia.toFixed(2)}`;
    if (diferencia === 0 && debe > 0) {
        alerta.className = 'alert alert-success mt-3';
    } else {
        alerta.className = 'alert alert-warning mt-3';
    }
}

document.getElementById('btn-agregar').addEventListener('click', agregar);
agregar();
agregar();
recalcular();
</script>
@endsection