@extends('layouts.app')
@section('title', 'Emitir comprobante')

@section('content')
    <div class="page-head"><h1>Emitir comprobante</h1></div>

    @if($series->isEmpty() || $clientes->isEmpty())
        <div class="alert alert-info">
            Necesitas al menos
            @if($series->isEmpty()) una <a href="{{ route('series.create') }}">serie</a> @endif
            @if($series->isEmpty() && $clientes->isEmpty()) y @endif
            @if($clientes->isEmpty()) un <a href="{{ route('clientes.create') }}">cliente</a> @endif
            para emitir.
        </div>
    @endif

    <form method="POST" action="{{ route('comprobantes.store') }}" id="formComprobante">
        @csrf
        <div class="card" style="margin-bottom:16px">
            <div class="card-body">
                <div class="form-grid">
                    <div class="field">
                        <label>Serie / Tipo *</label>
                        <select name="serie_id" required>
                            <option value="">— Seleccionar —</option>
                            @foreach($series as $s)
                                <option value="{{ $s->id }}" @selected(old('serie_id') == $s->id)>{{ $s->serie }} · {{ $s->tipo_comprobante->label() }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Cliente *</label>
                        <select name="cliente_id" required>
                            <option value="">— Seleccionar —</option>
                            @foreach($clientes as $cl)
                                <option value="{{ $cl->id }}" @selected(old('cliente_id') == $cl->id)>{{ $cl->tipo_documento->label() }} {{ $cl->numero_documento }} · {{ $cl->razon_social }}</option>
                            @endforeach
                        </select>
                        <span class="hint"><a href="{{ route('clientes.create') }}" target="_blank">+ nuevo cliente</a></span>
                    </div>
                    <div class="field">
                        <label>Fecha de emisión *</label>
                        <input type="date" name="fecha_emision" value="{{ old('fecha_emision', now()->format('Y-m-d')) }}" required>
                    </div>
                </div>
            </div>
        </div>

        <div class="card" style="margin-bottom:16px">
            <div class="card-body">
                <div class="flex-between" style="margin-bottom:12px">
                    <strong>Detalle</strong>
                    <button type="button" class="btn btn-sm" id="btnAgregar">+ Agregar línea</button>
                </div>
                <div class="table-wrap">
                    <table class="tabla" id="tablaLineas">
                        <thead>
                            <tr>
                                <th style="width:22%">Producto</th>
                                <th>Descripción *</th>
                                <th style="width:8%">Unid.</th>
                                <th style="width:10%">Cant. *</th>
                                <th style="width:13%">V. Unit. (sin IGV) *</th>
                                <th style="width:14%">Afectación</th>
                                <th style="width:12%" class="text-right">Importe</th>
                                <th style="width:40px"></th>
                            </tr>
                        </thead>
                        <tbody id="lineasBody"></tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <table style="width:100%">
                    <tr>
                        <td style="vertical-align:top">
                            <div class="field" style="max-width:420px">
                                <label>Observación (opcional)</label>
                                <textarea name="observacion" rows="2">{{ old('observacion') }}</textarea>
                            </div>
                        </td>
                        <td style="width:320px;vertical-align:top">
                            <table class="tabla">
                                <tr><td>Op. Gravada</td><td class="text-right mono">S/ <span id="tGravado">0.00</span></td></tr>
                                <tr><td>Op. Exonerada</td><td class="text-right mono">S/ <span id="tExonerado">0.00</span></td></tr>
                                <tr><td>Op. Inafecta</td><td class="text-right mono">S/ <span id="tInafecto">0.00</span></td></tr>
                                <tr><td>IGV (18%)</td><td class="text-right mono">S/ <span id="tIgv">0.00</span></td></tr>
                                <tr><td><strong>TOTAL</strong></td><td class="text-right mono"><strong>S/ <span id="tTotal">0.00</span></strong></td></tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <div class="form-actions">
                    <button class="btn btn-primary" type="submit">Generar y firmar</button>
                    <a href="{{ route('comprobantes.index') }}" class="btn btn-ghost">Cancelar</a>
                </div>
            </div>
        </div>
    </form>

    {{-- Plantilla de fila --}}
    <template id="filaTpl">
        <tr>
            <td>
                <select class="sel-prod">
                    <option value="">— manual —</option>
                </select>
            </td>
            <td><input name="__desc" class="in-desc" required></td>
            <td><input name="__unid" class="in-unid" value="NIU" required></td>
            <td><input name="__cant" class="in-cant" type="number" step="0.0001" min="0.0001" value="1" required></td>
            <td><input name="__vu" class="in-vu" type="number" step="0.000001" min="0" value="0" required></td>
            <td>
                <select name="__afe" class="in-afe">
                    <option value="10">Gravado</option>
                    <option value="20">Exonerado</option>
                    <option value="30">Inafecto</option>
                </select>
            </td>
            <td class="text-right mono out-imp">0.00</td>
            <td><button type="button" class="btn btn-sm btn-danger btn-del">✕</button></td>
        </tr>
    </template>

    <script>
        const PRODUCTOS = @json($productosJs);

        const IGV = 0.18;
        const body = document.getElementById('lineasBody');
        const tpl = document.getElementById('filaTpl');
        let idx = 0;

        function opcionesProducto() {
            let html = '<option value="">— manual —</option>';
            PRODUCTOS.forEach(p => { html += `<option value="${p.id}">${p.descripcion}</option>`; });
            return html;
        }

        function agregarFila() {
            const node = tpl.content.cloneNode(true);
            const tr = node.querySelector('tr');
            const i = idx++;
            const sel = tr.querySelector('.sel-prod');
            sel.innerHTML = opcionesProducto();

            // nombres con índice
            tr.querySelector('.in-desc').name = `lineas[${i}][descripcion]`;
            tr.querySelector('.in-unid').name = `lineas[${i}][unidad]`;
            tr.querySelector('.in-cant').name = `lineas[${i}][cantidad]`;
            tr.querySelector('.in-vu').name = `lineas[${i}][valor_unitario]`;
            tr.querySelector('.in-afe').name = `lineas[${i}][tipo_afectacion_igv]`;

            const hidProd = document.createElement('input');
            hidProd.type = 'hidden'; hidProd.name = `lineas[${i}][producto_id]`;
            tr.querySelector('td').appendChild(hidProd);
            const hidCod = document.createElement('input');
            hidCod.type = 'hidden'; hidCod.name = `lineas[${i}][codigo]`;
            tr.querySelector('td').appendChild(hidCod);

            sel.addEventListener('change', () => {
                const p = PRODUCTOS.find(x => x.id == sel.value);
                if (p) {
                    tr.querySelector('.in-desc').value = p.descripcion;
                    tr.querySelector('.in-unid').value = p.unidad;
                    tr.querySelector('.in-vu').value = p.valor_unitario;
                    tr.querySelector('.in-afe').value = p.afectacion;
                    hidProd.value = p.id; hidCod.value = p.codigo || '';
                } else { hidProd.value = ''; hidCod.value = ''; }
                recalc();
            });

            tr.querySelectorAll('input, select').forEach(el => el.addEventListener('input', recalc));
            tr.querySelector('.btn-del').addEventListener('click', () => { tr.remove(); recalc(); });

            body.appendChild(tr);
            recalc();
        }

        function recalc() {
            let gravado = 0, exonerado = 0, inafecto = 0, igv = 0;
            body.querySelectorAll('tr').forEach(tr => {
                const cant = parseFloat(tr.querySelector('.in-cant').value) || 0;
                const vu = parseFloat(tr.querySelector('.in-vu').value) || 0;
                const afe = tr.querySelector('.in-afe').value;
                const vv = Math.round(cant * vu * 100) / 100;
                let li = vv;
                if (afe === '10' || afe === '11') { const g = Math.round(vv * IGV * 100) / 100; igv += g; li += g; gravado += vv; }
                else if (afe === '20') exonerado += vv;
                else if (afe === '30') inafecto += vv;
                tr.querySelector('.out-imp').textContent = li.toFixed(2);
            });
            document.getElementById('tGravado').textContent = gravado.toFixed(2);
            document.getElementById('tExonerado').textContent = exonerado.toFixed(2);
            document.getElementById('tInafecto').textContent = inafecto.toFixed(2);
            document.getElementById('tIgv').textContent = igv.toFixed(2);
            document.getElementById('tTotal').textContent = (gravado + exonerado + inafecto + igv).toFixed(2);
        }

        document.getElementById('btnAgregar').addEventListener('click', agregarFila);
        agregarFila(); // primera fila
    </script>
@endsection