@extends('layouts.app')
@section('title', 'Nuevo Comprobante de Retención')
@section('header', 'Emitir Comprobante de Retención')

@section('content')
<div class="max-w-4xl mx-auto">
    <form method="POST" action="{{ route('facturacion.retencion.emitir') }}"
          x-data="retencionForm()" class="space-y-5">
        @csrf

        <!-- Sujeto retenido -->
        <div class="bg-white rounded-2xl shadow-md p-6">
            <h2 class="text-lg font-bold mb-4"><i class="fas fa-user mr-2 text-teal-500"></i>Sujeto retenido</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-semibold mb-1">Tipo de identificación</label>
                    <select name="sujeto_tipo_identificacion" required class="w-full px-3 py-2.5 border border-slate-300 rounded-lg">
                        <option value="04">RUC</option>
                        <option value="05">Cédula</option>
                        <option value="06">Pasaporte</option>
                        <option value="08">Identificación del Exterior</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold mb-1">Identificación</label>
                    <input type="text" name="sujeto_identificacion" required maxlength="20"
                           class="w-full px-3 py-2.5 border border-slate-300 rounded-lg" placeholder="N° de RUC o cédula">
                </div>
                <div>
                    <label class="block text-sm font-semibold mb-1">Razón social / Nombres</label>
                    <input type="text" name="sujeto_razon_social" required maxlength="300"
                           class="w-full px-3 py-2.5 border border-slate-300 rounded-lg" placeholder="Nombre del proveedor">
                </div>
            </div>
        </div>

        <!-- Documento de sustento -->
        <div class="bg-white rounded-2xl shadow-md p-6">
            <h2 class="text-lg font-bold mb-4"><i class="fas fa-file-contract mr-2 text-teal-500"></i>Documento de sustento</h2>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-semibold mb-1">Período fiscal</label>
                    <input type="text" name="periodo_fiscal" required placeholder="MM/AAAA" maxlength="7"
                           value="{{ now()->format('m/Y') }}" class="w-full px-3 py-2.5 border border-slate-300 rounded-lg">
                </div>
                <div>
                    <label class="block text-sm font-semibold mb-1">Tipo de documento</label>
                    <select name="doc_sustento_tipo" required class="w-full px-3 py-2.5 border border-slate-300 rounded-lg">
                        <option value="01">Factura</option>
                        <option value="03">Liquidación de compra</option>
                        <option value="04">Nota de Crédito</option>
                        <option value="05">Nota de Débito</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold mb-1">N° del documento</label>
                    <input type="text" name="doc_sustento_numero" required maxlength="17"
                           class="w-full px-3 py-2.5 border border-slate-300 rounded-lg font-mono" placeholder="001-001-000000001">
                </div>
                <div>
                    <label class="block text-sm font-semibold mb-1">Fecha de emisión</label>
                    <input type="date" name="doc_sustento_fecha" required
                           value="{{ now()->toDateString() }}" class="w-full px-3 py-2.5 border border-slate-300 rounded-lg">
                </div>
            </div>
        </div>

        <!-- Impuestos retenidos -->
        <div class="bg-white rounded-2xl shadow-md p-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-bold"><i class="fas fa-hand-holding-usd mr-2 text-teal-500"></i>Impuestos retenidos</h2>
                <button type="button" @click="agregar()" class="bg-teal-500 hover:bg-teal-600 text-white px-3 py-2 rounded-lg text-sm font-semibold">
                    <i class="fas fa-plus mr-1"></i> Agregar línea
                </button>
            </div>

            <div class="space-y-3">
                <template x-for="(r, i) in lineas" :key="i">
                    <div class="grid grid-cols-1 md:grid-cols-6 gap-2 items-end border-b border-slate-100 pb-3">
                        <div>
                            <label class="block text-xs font-semibold mb-1">Impuesto</label>
                            <select :name="`retenciones[${i}][codigo]`" x-model="r.codigo" class="w-full px-2 py-2 border border-slate-300 rounded-lg text-sm">
                                <option value="1">Renta</option>
                                <option value="2">IVA</option>
                                <option value="6">ISD</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold mb-1">Cód. retención</label>
                            <input type="text" :name="`retenciones[${i}][codigo_porcentaje]`" x-model="r.codigo_porcentaje"
                                   class="w-full px-2 py-2 border border-slate-300 rounded-lg text-sm" placeholder="Ej: 303">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold mb-1">Base imponible</label>
                            <input type="number" step="0.01" min="0" :name="`retenciones[${i}][base_imponible]`" x-model.number="r.base_imponible"
                                   class="w-full px-2 py-2 border border-slate-300 rounded-lg text-sm" placeholder="0.00">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold mb-1">% Retención</label>
                            <input type="number" step="0.01" min="0" :name="`retenciones[${i}][porcentaje]`" x-model.number="r.porcentaje"
                                   class="w-full px-2 py-2 border border-slate-300 rounded-lg text-sm" placeholder="0.00">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold mb-1">Valor retenido</label>
                            <input type="text" readonly :value="((r.base_imponible||0)*(r.porcentaje||0)/100).toFixed(2)"
                                   class="w-full px-2 py-2 border border-slate-200 bg-slate-50 rounded-lg text-sm font-semibold">
                            <input type="hidden" :name="`retenciones[${i}][descripcion]`" :value="`Retención ${r.codigo}`">
                        </div>
                        <div>
                            <button type="button" @click="quitar(i)" class="text-red-500 hover:bg-red-50 px-3 py-2 rounded-lg">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </template>
            </div>

            <div class="flex justify-end mt-4 pt-3 border-t border-slate-200">
                <div class="text-right">
                    <p class="text-sm text-slate-500">Total retenido</p>
                    <p class="text-2xl font-bold text-teal-600" x-text="'$' + total().toFixed(2)"></p>
                </div>
            </div>
        </div>

        <div class="flex justify-end gap-3">
            <a href="{{ route('facturacion.index') }}" class="px-6 py-3 bg-slate-200 rounded-lg font-semibold">Cancelar</a>
            <button type="submit" class="gradient-primary text-white px-6 py-3 rounded-lg font-semibold">
                <i class="fas fa-paper-plane mr-2"></i>Emitir y enviar al SRI
            </button>
        </div>
    </form>
</div>

<script>
function retencionForm() {
    return {
        lineas: [{ codigo: '1', codigo_porcentaje: '', base_imponible: 0, porcentaje: 0 }],
        agregar() {
            this.lineas.push({ codigo: '1', codigo_porcentaje: '', base_imponible: 0, porcentaje: 0 });
        },
        quitar(i) {
            if (this.lineas.length > 1) this.lineas.splice(i, 1);
        },
        total() {
            return this.lineas.reduce((s, r) => s + (r.base_imponible || 0) * (r.porcentaje || 0) / 100, 0);
        }
    }
}
</script>
@endsection