@extends('layouts.app')
@section('title','Nueva Factura/Boleta')
@section('page-title','Emitir Comprobante de Venta')

@section('content')
<form method="POST" action="{{ route('comercial.facturas.store') }}" id="formFactura">
@csrf

<div class="row">
{{-- Columna izquierda --}}
<div class="col-md-8">

    {{-- Encabezado --}}
    <div class="card mb-3">
        <div class="card-header"><h3 class="card-title">Datos del Comprobante</h3></div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Tipo *</label>
                        <select name="tipo" class="form-control @error('tipo') is-invalid @enderror" id="tipoComp" required>
                            <option value="factura" {{ (old('tipo', request('tipo','factura'))=='factura')?'selected':'' }}>Factura (F001)</option>
                            <option value="boleta"  {{ (old('tipo', request('tipo'))=='boleta')?'selected':'' }}>Boleta de Venta (B001)</option>
                        </select>
                        @error('tipo')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Fecha de Emisión *</label>
                        <input type="date" name="fecha_emision" value="{{ old('fecha_emision', today()->toDateString()) }}"
                            class="form-control @error('fecha_emision') is-invalid @enderror" required>
                        @error('fecha_emision')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Fecha de Vencimiento</label>
                        <input type="date" name="fecha_vencimiento" value="{{ old('fecha_vencimiento') }}"
                            class="form-control @error('fecha_vencimiento') is-invalid @enderror">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Moneda *</label>
                        <select name="moneda" class="form-control" id="monedaSel" required>
                            <option value="PEN" {{ old('moneda','PEN')=='PEN'?'selected':'' }}>S/ Soles (PEN)</option>
                            <option value="USD" {{ old('moneda')=='USD'?'selected':'' }}>US$ Dólares (USD)</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4" id="tcBox">
                    <div class="form-group">
                        <label>Tipo de Cambio</label>
                        <input type="number" name="tipo_cambio" step="0.001" min="0" value="{{ old('tipo_cambio') }}"
                            class="form-control" placeholder="S/ por 1 USD">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Pedido relacionado</label>
                        <select name="pedido_id" class="form-control select2" id="pedidoSel">
                            <option value="">— Sin asociar —</option>
                            @foreach($pedidos as $ped)
                            <option value="{{ $ped->id }}" {{ old('pedido_id', $pedido?->id)==$ped->id?'selected':'' }}
                                data-cliente="{{ $ped->cliente?->ruc ?? $ped->cliente?->tax_id }}"
                                data-razon="{{ $ped->cliente?->razon_social }}"
                                data-dir="{{ $ped->cliente?->direccion }}"
                                data-moneda="{{ $ped->moneda }}">
                                {{ $ped->numero }} — {{ $ped->cliente?->nombre_display }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Cliente --}}
    <div class="card mb-3">
        <div class="card-header"><h3 class="card-title">Datos del Adquirente / Receptor</h3></div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Tipo de Documento *</label>
                        <select name="cliente_tipo_doc" class="form-control" id="tipoDoc" required>
                            <option value="6" {{ old('cliente_tipo_doc','6')=='6'?'selected':'' }}>RUC</option>
                            <option value="1" {{ old('cliente_tipo_doc')=='1'?'selected':'' }}>DNI</option>
                            <option value="4" {{ old('cliente_tipo_doc')=='4'?'selected':'' }}>C.E.</option>
                            <option value="7" {{ old('cliente_tipo_doc')=='7'?'selected':'' }}>Pasaporte</option>
                            <option value="0" {{ old('cliente_tipo_doc')=='0'?'selected':'' }}>Sin Doc.</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>N° Documento *</label>
                        <div class="input-group">
                            <input type="text" name="cliente_num_doc" id="numDoc"
                                value="{{ old('cliente_num_doc', $pedido?->cliente?->ruc ?? $pedido?->cliente?->tax_id) }}"
                                class="form-control @error('cliente_num_doc') is-invalid @enderror" required>
                            <div class="input-group-append">
                                <button type="button" class="btn btn-outline-secondary btn-sm" id="btnBuscarDoc" title="Buscar en SUNAT/RENIEC">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                        @error('cliente_num_doc')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Razón Social / Nombre *</label>
                        <input type="text" name="cliente_razon_social" id="razonSocial"
                            value="{{ old('cliente_razon_social', $pedido?->cliente?->razon_social) }}"
                            class="form-control @error('cliente_razon_social') is-invalid @enderror" required>
                        @error('cliente_razon_social')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Dirección</label>
                        <input type="text" name="cliente_direccion" id="clienteDir"
                            value="{{ old('cliente_direccion', $pedido?->cliente?->direccion) }}"
                            class="form-control">
                    </div>
                </div>
                <input type="hidden" name="cliente_id" id="clienteIdHidden" value="{{ old('cliente_id', $pedido?->cliente_id) }}">
            </div>
        </div>
    </div>

    {{-- Ítems --}}
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title">Ítems del Comprobante</h3>
            <button type="button" class="btn btn-sm btn-success" id="btnAddItem"><i class="fas fa-plus mr-1"></i>Agregar línea</button>
        </div>
        <div class="card-body p-0">
            <table class="table table-sm table-bordered mb-0" id="tablaItems">
                <thead class="thead-dark">
                    <tr>
                        <th style="width:30%;">Descripción</th>
                        <th style="width:8%;">Unidad</th>
                        <th style="width:8%;">Cantidad</th>
                        <th style="width:10%;">P. Unit. (sin IGV)</th>
                        <th style="width:7%;">Afect.</th>
                        <th style="width:9%;">Subtotal</th>
                        <th style="width:9%;">IGV</th>
                        <th style="width:9%;">Total</th>
                        <th style="width:5%;">&nbsp;</th>
                    </tr>
                </thead>
                <tbody id="itemsBody">
                    @php $oldItems = old('items', [[]]); @endphp
                    @foreach($oldItems as $k => $item)
                    <tr class="item-row">
                        <td><input type="text" name="items[{{ $k }}][descripcion]" value="{{ $item['descripcion'] ?? '' }}" class="form-control form-control-sm" required placeholder="Ej: Pulpa de Maracuyá congelada 20 kg"></td>
                        <td>
                            <select name="items[{{ $k }}][unidad]" class="form-control form-control-sm">
                                @foreach(\App\Models\FacturaVentaItem::$UNIDADES as $u => $ul)
                                <option value="{{ $u }}" {{ ($item['unidad'] ?? 'KGM')==$u?'selected':'' }}>{{ $u }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td><input type="number" name="items[{{ $k }}][cantidad]" value="{{ $item['cantidad'] ?? 1 }}" step="0.001" min="0.001" class="form-control form-control-sm item-calc" required></td>
                        <td><input type="number" name="items[{{ $k }}][precio_unitario]" value="{{ $item['precio_unitario'] ?? '' }}" step="0.0001" min="0" class="form-control form-control-sm item-calc" required></td>
                        <td>
                            <select name="items[{{ $k }}][tipo_afectacion]" class="form-control form-control-sm item-calc">
                                <option value="10" {{ ($item['tipo_afectacion'] ?? '10')=='10'?'selected':'' }}>Gravado</option>
                                <option value="20" {{ ($item['tipo_afectacion'] ?? '')=='20'?'selected':'' }}>Exonerado</option>
                                <option value="30" {{ ($item['tipo_afectacion'] ?? '')=='30'?'selected':'' }}>Inafecto</option>
                            </select>
                        </td>
                        <td class="text-right"><span class="sub-val">—</span></td>
                        <td class="text-right"><span class="igv-val">—</span></td>
                        <td class="text-right"><span class="tot-val">—</span></td>
                        <td class="text-center"><button type="button" class="btn btn-xs btn-danger btn-remove-item"><i class="fas fa-times"></i></button></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="card-footer text-right" id="totalesFooter">
            <span class="mr-3">Subtotal: <strong id="dispSubtotal">S/ 0.00</strong></span>
            <span class="mr-3">IGV (18%): <strong id="dispIgv">S/ 0.00</strong></span>
            <span class="font-weight-bold" style="font-size:1.1em;">TOTAL: <strong id="dispTotal">S/ 0.00</strong></span>
        </div>
    </div>

    {{-- Observaciones --}}
    <div class="card mb-3">
        <div class="card-header"><h3 class="card-title">Observaciones</h3></div>
        <div class="card-body">
            <textarea name="observaciones" rows="2" class="form-control" placeholder="Opcional…">{{ old('observaciones') }}</textarea>
        </div>
    </div>

</div>
{{-- Columna derecha: resumen --}}
<div class="col-md-4">
    <div class="card sticky-top" style="top:70px;">
        <div class="card-header bg-primary text-white"><h3 class="card-title">Resumen</h3></div>
        <div class="card-body">
            <dl class="row small mb-0">
                <dt class="col-6 text-muted">Tipo comprobante:</dt>
                <dd class="col-6" id="rTipo">Factura</dd>
                <dt class="col-6 text-muted">Serie:</dt>
                <dd class="col-6" id="rSerie">F001</dd>
                <dt class="col-6 text-muted">Moneda:</dt>
                <dd class="col-6" id="rMoneda">PEN</dd>
            </dl>
            <hr>
            <table class="table table-sm mb-0">
                <tr><td>Subtotal</td><td class="text-right" id="rSub">S/ 0.00</td></tr>
                <tr><td>IGV (18%)</td><td class="text-right" id="rIgv">S/ 0.00</td></tr>
                <tr class="font-weight-bold"><td>TOTAL</td><td class="text-right" id="rTot">S/ 0.00</td></tr>
            </table>
        </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-primary btn-block">
                <i class="fas fa-file-invoice mr-1"></i>Emitir Comprobante
            </button>
            <a href="{{ route('comercial.facturas.index') }}" class="btn btn-secondary btn-block mt-1">Cancelar</a>
        </div>
    </div>
</div>
</div>
</form>

<template id="tmplItem">
<tr class="item-row">
    <td><input type="text" name="items[__K__][descripcion]" class="form-control form-control-sm" required placeholder="Descripción del producto/servicio"></td>
    <td>
        <select name="items[__K__][unidad]" class="form-control form-control-sm">
            @foreach(\App\Models\FacturaVentaItem::$UNIDADES as $u => $ul)
            <option value="{{ $u }}" {{ $u=='KGM'?'selected':'' }}>{{ $u }}</option>
            @endforeach
        </select>
    </td>
    <td><input type="number" name="items[__K__][cantidad]" value="1" step="0.001" min="0.001" class="form-control form-control-sm item-calc" required></td>
    <td><input type="number" name="items[__K__][precio_unitario]" value="" step="0.0001" min="0" class="form-control form-control-sm item-calc" required></td>
    <td>
        <select name="items[__K__][tipo_afectacion]" class="form-control form-control-sm item-calc">
            <option value="10" selected>Gravado</option>
            <option value="20">Exonerado</option>
            <option value="30">Inafecto</option>
        </select>
    </td>
    <td class="text-right"><span class="sub-val">—</span></td>
    <td class="text-right"><span class="igv-val">—</span></td>
    <td class="text-right"><span class="tot-val">—</span></td>
    <td class="text-center"><button type="button" class="btn btn-xs btn-danger btn-remove-item"><i class="fas fa-times"></i></button></td>
</tr>
</template>

@push('scripts')
<script>
let itemIdx = {{ count(old('items', [[]])) }};
const sym = () => document.getElementById('monedaSel').value === 'USD' ? 'US$' : 'S/';

function calcRow(row) {
    const qty  = parseFloat(row.querySelector('[name*=cantidad]').value) || 0;
    const pu   = parseFloat(row.querySelector('[name*=precio_unitario]').value) || 0;
    const afec = row.querySelector('[name*=tipo_afectacion]').value;
    const sub  = Math.round(qty * pu * 100) / 100;
    const igv  = afec === '10' ? Math.round(sub * 0.18 * 100) / 100 : 0;
    const tot  = Math.round((sub + igv) * 100) / 100;
    row.querySelector('.sub-val').textContent = sub.toFixed(2);
    row.querySelector('.igv-val').textContent = igv.toFixed(2);
    row.querySelector('.tot-val').textContent = tot.toFixed(2);
    return { sub, igv, tot };
}

function recalcAll() {
    let s = 0, g = 0, t = 0;
    document.querySelectorAll('.item-row').forEach(r => {
        const v = calcRow(r); s += v.sub; g += v.igv; t += v.tot;
    });
    const sy = sym();
    document.getElementById('dispSubtotal').textContent = sy+' '+s.toFixed(2);
    document.getElementById('dispIgv').textContent       = sy+' '+g.toFixed(2);
    document.getElementById('dispTotal').textContent     = sy+' '+t.toFixed(2);
    document.getElementById('rSub').textContent = sy+' '+s.toFixed(2);
    document.getElementById('rIgv').textContent = sy+' '+g.toFixed(2);
    document.getElementById('rTot').textContent = sy+' '+t.toFixed(2);
}

document.getElementById('tablaItems').addEventListener('input', e => {
    if (e.target.closest('.item-row')) recalcAll();
});
document.getElementById('tablaItems').addEventListener('change', e => {
    if (e.target.closest('.item-row')) recalcAll();
});
document.getElementById('tablaItems').addEventListener('click', e => {
    if (e.target.closest('.btn-remove-item')) {
        e.target.closest('.item-row').remove();
        recalcAll();
    }
});

document.getElementById('btnAddItem').addEventListener('click', () => {
    const tmpl = document.getElementById('tmplItem').innerHTML.replace(/__K__/g, itemIdx++);
    const tmp  = document.createElement('tbody');
    tmp.innerHTML = tmpl;
    document.getElementById('itemsBody').appendChild(tmp.firstElementChild);
    recalcAll();
});

document.getElementById('tipoComp').addEventListener('change', function() {
    document.getElementById('rTipo').textContent  = this.options[this.selectedIndex].text;
    document.getElementById('rSerie').textContent = this.value === 'factura' ? 'F001' : 'B001';
    // Boleta no requiere RUC
    if (this.value === 'boleta') {
        document.getElementById('tipoDoc').value = '1';
    } else {
        document.getElementById('tipoDoc').value = '6';
    }
});

document.getElementById('monedaSel').addEventListener('change', function() {
    document.getElementById('rMoneda').textContent = this.value;
    document.getElementById('tcBox').style.display = this.value === 'USD' ? '' : 'none';
    recalcAll();
});

// Pre-llenar cliente desde pedido seleccionado
document.getElementById('pedidoSel').addEventListener('change', function() {
    const opt = this.options[this.selectedIndex];
    if (opt.value) {
        document.getElementById('numDoc').value      = opt.dataset.cliente || '';
        document.getElementById('razonSocial').value = opt.dataset.razon  || '';
        document.getElementById('clienteDir').value  = opt.dataset.dir    || '';
    }
});

// Búsqueda RUC/DNI
document.getElementById('btnBuscarDoc').addEventListener('click', function() {
    const doc  = document.getElementById('numDoc').value.trim();
    const tipo = document.getElementById('tipoDoc').value;
    if (!doc) return;
    const url  = tipo === '6'
        ? "{{ route('api.sunat.ruc', ['ruc' => '__RUC__']) }}".replace('__RUC__', doc)
        : "{{ route('api.reniec.dni', ['dni' => '__DNI__']) }}".replace('__DNI__', doc);
    fetch(url).then(r => r.json()).then(d => {
        if (d.razonSocial || d.nombre) {
            document.getElementById('razonSocial').value = d.razonSocial || d.nombre;
            document.getElementById('clienteDir').value  = d.direccion || '';
        }
    }).catch(() => {});
});

document.getElementById('tcBox').style.display = document.getElementById('monedaSel').value === 'USD' ? '' : 'none';
recalcAll();
</script>
@endpush
@endsection