@extends('layouts.app')

@section('titulo', 'Editar comprobante ' . $comprobante->numero)

@section('content')
    <h1 class="h4 mb-3">Editar comprobante {{ $comprobante->numero }}</h1>

    <form method="POST" action="{{ route('contabilidad.comprobantes.update', $comprobante) }}" class="card p-4">
        @csrf
        @method('PUT')
        <div class="row g-3 mb-3">
            <div class="col-md-3">
                <label class="form-label">Tipo</label>
                <input type="text" class="form-control" value="{{ ucfirst($comprobante->tipo) }}" disabled>
            </div>
            <div class="col-md-3">
                <label class="form-label">Fecha</label>
                <input type="date" name="fecha" class="form-control" value="{{ $comprobante->fecha->toDateString() }}" required>
            </div>
            <div class="col-md-6">
                <label class="form-label">Concepto</label>
                <input type="text" name="concepto" class="form-control" value="{{ $comprobante->concepto }}" 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">Guardar cambios</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()]));
const lineasExistentes = @json($comprobante->lineas->map(fn($l) => [
    'cuenta_id' => $l->cuenta_id, 'descripcion' => $l->descripcion, 'debe' => $l->debe, 'haber' => $l->haber,
]));
let i = 0;
const tbody = document.querySelector('#tabla-lineas tbody');

function agregar(valores = null) {
    const idx = i++;
    const opciones = cuentas.map(c => `<option value="${c.id}" ${valores && valores.cuenta_id == c.id ? 'selected' : ''}>${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]" value="${valores ? (valores.descripcion ?? '') : ''}"></td>
        <td><input type="number" step="0.01" class="form-control form-control-sm inp-debe" name="lineas[${idx}][debe]" value="${valores ? valores.debe : 0}"></td>
        <td><input type="number" step="0.01" class="form-control form-control-sm inp-haber" name="lineas[${idx}][haber]" value="${valores ? valores.haber : 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)}`;
    alerta.className = (diferencia === 0 && debe > 0) ? 'alert alert-success mt-3' : 'alert alert-warning mt-3';
}

document.getElementById('btn-agregar').addEventListener('click', () => agregar());

if (lineasExistentes.length) {
    lineasExistentes.forEach(l => agregar(l));
} else {
    agregar();
    agregar();
}
recalcular();
</script>
@endsection