@extends('layouts.app')
@section('title', 'Configuración SRI')
@section('header', 'Configuración SRI - Ecuador')

@section('content')
<div x-data="{ tab: 'sri' }" class="grid grid-cols-1 lg:grid-cols-4 gap-5">
    <div class="lg:col-span-1 bg-white rounded-2xl shadow-md p-3 h-fit">
        <button @click="tab='sri'" :class="tab=='sri' ? 'gradient-primary text-white' : ''" class="w-full text-left px-4 py-3 rounded-lg mb-1 flex items-center gap-3">
            <i class="fas fa-shield-alt w-5"></i><span>Datos SRI</span>
        </button>
        <button @click="tab='certificado'" :class="tab=='certificado' ? 'gradient-primary text-white' : ''" class="w-full text-left px-4 py-3 rounded-lg mb-1 flex items-center gap-3">
            <i class="fas fa-certificate w-5"></i><span>Certificado de Firma</span>
        </button>
        <button @click="tab='puntos'" :class="tab=='puntos' ? 'gradient-primary text-white' : ''" class="w-full text-left px-4 py-3 rounded-lg mb-1 flex items-center gap-3">
            <i class="fas fa-store w-5"></i><span>Puntos de Emisión</span>
        </button>
        <button @click="tab='ayuda'" :class="tab=='ayuda' ? 'gradient-primary text-white' : ''" class="w-full text-left px-4 py-3 rounded-lg mb-1 flex items-center gap-3">
            <i class="fas fa-question-circle w-5"></i><span>Ayuda</span>
        </button>
    </div>

    <div class="lg:col-span-3">
        <!-- Datos SRI -->
        <div x-show="tab=='sri'" class="bg-white rounded-2xl shadow-md p-6">
            <h2 class="text-xl font-bold mb-5"><i class="fas fa-shield-alt mr-2 text-emerald-500"></i>Configuración del SRI</h2>
            <form method="POST" action="{{ route('facturacion.configuracion.guardar') }}" enctype="multipart/form-data">
                @csrf
                <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded mb-5">
                    <p class="text-sm text-blue-700"><i class="fas fa-info-circle mr-1"></i>
                    Para emitir comprobantes electrónicos necesitas un RUC habilitado en el SRI y un certificado de firma digital (.p12) emitido por una entidad autorizada.</p>
                </div>

                <h3 class="font-bold text-slate-700 mb-3">Ambiente de emisión</h3>
                <div class="grid grid-cols-2 gap-3 mb-5">
                    <label class="cursor-pointer">
                        <input type="radio" name="sri_ambiente" value="1" {{ ($empresa->sri_ambiente ?? '1') == '1' ? 'checked' : '' }} class="peer hidden">
                        <div class="border-2 border-slate-200 peer-checked:border-yellow-500 peer-checked:bg-yellow-50 rounded-xl p-4">
                            <div class="flex items-center gap-2 mb-2">
                                <i class="fas fa-flask text-yellow-500 text-xl"></i>
                                <span class="font-bold">Pruebas</span>
                            </div>
                            <p class="text-xs text-slate-500">Ambiente de certificación. Los comprobantes NO tienen validez tributaria.</p>
                        </div>
                    </label>
                    <label class="cursor-pointer">
                        <input type="radio" name="sri_ambiente" value="2" {{ ($empresa->sri_ambiente ?? '') == '2' ? 'checked' : '' }} class="peer hidden">
                        <div class="border-2 border-slate-200 peer-checked:border-emerald-500 peer-checked:bg-emerald-50 rounded-xl p-4">
                            <div class="flex items-center gap-2 mb-2">
                                <i class="fas fa-rocket text-emerald-500 text-xl"></i>
                                <span class="font-bold">Producción</span>
                            </div>
                            <p class="text-xs text-slate-500">Ambiente oficial. Los comprobantes tienen validez tributaria.</p>
                        </div>
                    </label>
                </div>

                <h3 class="font-bold text-slate-700 mb-3">Direcciones</h3>
                <div class="grid grid-cols-1 gap-4 mb-5">
                    <div>
                        <label class="block text-sm font-semibold mb-1">Dirección de la matriz *</label>
                        <input type="text" name="dir_matriz" value="{{ $empresa->dir_matriz }}"
                               class="w-full px-3 py-2.5 border border-slate-300 rounded-lg" placeholder="Av. Principal y calle secundaria">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold mb-1">Dirección del establecimiento</label>
                        <input type="text" name="dir_establecimiento" value="{{ $empresa->dir_establecimiento }}"
                               class="w-full px-3 py-2.5 border border-slate-300 rounded-lg" placeholder="Dirección del local emisor">
                    </div>
                </div>

                <h3 class="font-bold text-slate-700 mb-3">Ubicación</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-5">
                    <div>
                        <label class="block text-sm font-semibold mb-1">Provincia</label>
                        <input type="text" name="provincia" value="{{ $empresa->provincia }}" class="w-full px-3 py-2.5 border border-slate-300 rounded-lg" placeholder="Pichincha">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold mb-1">Cantón</label>
                        <input type="text" name="canton" value="{{ $empresa->canton }}" class="w-full px-3 py-2.5 border border-slate-300 rounded-lg" placeholder="Quito">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold mb-1">Parroquia</label>
                        <input type="text" name="parroquia" value="{{ $empresa->parroquia }}" class="w-full px-3 py-2.5 border border-slate-300 rounded-lg" placeholder="Parroquia">
                    </div>
                </div>

                <h3 class="font-bold text-slate-700 mb-3">Información tributaria</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
                    <div>
                        <label class="block text-sm font-semibold mb-1">N° Contribuyente Especial</label>
                        <input type="text" name="contribuyente_especial" value="{{ $empresa->contribuyente_especial }}"
                               class="w-full px-3 py-2.5 border border-slate-300 rounded-lg" placeholder="Dejar vacío si no aplica">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold mb-1">N° Resolución Agente de Retención</label>
                        <input type="text" name="agente_retencion" value="{{ $empresa->agente_retencion }}"
                               class="w-full px-3 py-2.5 border border-slate-300 rounded-lg" placeholder="Dejar vacío si no aplica">
                    </div>
                </div>

                <label class="flex items-center gap-3 cursor-pointer p-4 bg-slate-50 rounded-xl mb-3">
                    <input type="checkbox" name="obligado_contabilidad" value="1" {{ $empresa->obligado_contabilidad ? 'checked' : '' }} class="w-5 h-5 rounded text-emerald-500">
                    <div>
                        <p class="font-semibold text-slate-800">Obligado a llevar contabilidad</p>
                        <p class="text-xs text-slate-500">Marca esta opción si la empresa está obligada a llevar contabilidad</p>
                    </div>
                </label>

                <label class="flex items-center gap-3 cursor-pointer p-4 bg-emerald-50 rounded-xl mb-5">
                    <input type="checkbox" name="facturacion_electronica_activa" value="1" {{ $empresa->facturacion_electronica_activa ? 'checked' : '' }} class="w-5 h-5 rounded text-emerald-500">
                    <div>
                        <p class="font-semibold text-emerald-800">Activar facturación electrónica</p>
                        <p class="text-xs text-emerald-700">Habilita la emisión automática de facturas electrónicas en las ventas</p>
                    </div>
                </label>

                <button class="gradient-primary text-white px-6 py-3 rounded-lg font-semibold"><i class="fas fa-save mr-2"></i>Guardar configuración</button>
            </form>
        </div>

        <!-- Certificado -->
        <div x-show="tab=='certificado'" x-cloak class="bg-white rounded-2xl shadow-md p-6">
            <h2 class="text-xl font-bold mb-5"><i class="fas fa-certificate mr-2 text-emerald-500"></i>Certificado de Firma Digital</h2>
            <form method="POST" action="{{ route('facturacion.configuracion.guardar') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="sri_ambiente" value="{{ $empresa->sri_ambiente ?? '1' }}">

                <div class="bg-amber-50 border-l-4 border-amber-500 p-4 rounded mb-5">
                    <p class="text-sm text-amber-800"><i class="fas fa-exclamation-triangle mr-1"></i>
                    <strong>Importante:</strong> El certificado de firma es un archivo <strong>.p12</strong> (o .pfx) emitido por una entidad de certificación autorizada en Ecuador: <strong>Security Data, ANF AC, Banco Central del Ecuador, Uanataca, Lazzate</strong>, entre otras. Sin él NO podrás firmar ni autorizar comprobantes.</p>
                </div>

                @if($empresa->sri_certificado_path)
                    <div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-5">
                        <p class="font-semibold text-green-800"><i class="fas fa-check-circle mr-1"></i>Certificado cargado</p>
                        <p class="text-xs text-green-700 mt-1 font-mono">{{ basename($empresa->sri_certificado_path) }}</p>
                    </div>
                @endif

                <div class="mb-4">
                    <label class="block text-sm font-semibold mb-2">Subir certificado (.p12 o .pfx)</label>
                    <input type="file" name="sri_certificado" accept=".p12,.pfx"
                           class="block w-full text-sm file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-emerald-50 file:text-emerald-700">
                </div>

                <div class="mb-5">
                    <label class="block text-sm font-semibold mb-1">Contraseña del certificado</label>
                    <input type="password" name="sri_certificado_clave" class="w-full px-3 py-2.5 border border-slate-300 rounded-lg" placeholder="••••••••">
                    <p class="text-xs text-slate-500 mt-1">Deja este campo vacío para conservar la contraseña ya guardada.</p>
                </div>

                <button class="gradient-primary text-white px-6 py-3 rounded-lg font-semibold"><i class="fas fa-upload mr-2"></i>Guardar certificado</button>
            </form>
        </div>

        <!-- Puntos de emisión -->
        <div x-show="tab=='puntos'" x-cloak class="bg-white rounded-2xl shadow-md p-6">
            <h2 class="text-xl font-bold mb-5"><i class="fas fa-store mr-2 text-emerald-500"></i>Puntos de Emisión</h2>

            <form method="POST" action="{{ route('facturacion.puntos.crear') }}" class="grid grid-cols-1 md:grid-cols-4 gap-3 mb-5 pb-5 border-b border-slate-200">
                @csrf
                <input name="estab" required maxlength="3" minlength="3" placeholder="Estab. 001" class="px-3 py-2 border border-slate-300 rounded-lg font-mono">
                <input name="pto_emi" required maxlength="3" minlength="3" placeholder="Punto 001" class="px-3 py-2 border border-slate-300 rounded-lg font-mono">
                <input name="descripcion" placeholder="Descripción" class="px-3 py-2 border border-slate-300 rounded-lg">
                <button class="gradient-primary text-white px-4 py-2 rounded-lg"><i class="fas fa-plus mr-1"></i>Agregar</button>
            </form>

            <table class="w-full text-sm">
                <thead class="text-xs uppercase text-slate-500 border-b">
                    <tr>
                        <th class="text-left py-2">Establecimiento</th>
                        <th class="text-left py-2">Punto</th>
                        <th class="text-right py-2">Sec. Factura</th>
                        <th class="text-right py-2">Sec. N. Crédito</th>
                        <th class="text-right py-2">Sec. Retención</th>
                        <th class="text-left py-2">Descripción</th>
                    </tr>
                </thead>
                <tbody>
                @forelse($puntos as $p)
                    <tr class="border-b">
                        <td class="py-2 font-mono font-semibold">{{ $p->estab }}</td>
                        <td class="py-2 font-mono font-semibold">{{ $p->pto_emi }}</td>
                        <td class="py-2 text-right font-mono">{{ str_pad($p->sec_factura, 9, '0', STR_PAD_LEFT) }}</td>
                        <td class="py-2 text-right font-mono">{{ str_pad($p->sec_nota_credito, 9, '0', STR_PAD_LEFT) }}</td>
                        <td class="py-2 text-right font-mono">{{ str_pad($p->sec_retencion, 9, '0', STR_PAD_LEFT) }}</td>
                        <td class="py-2">{{ $p->descripcion ?: '—' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="text-center py-8 text-slate-400">No hay puntos de emisión. Crea uno arriba (por defecto 001-001).</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>

        <!-- Ayuda -->
        <div x-show="tab=='ayuda'" x-cloak class="bg-white rounded-2xl shadow-md p-6">
            <h2 class="text-xl font-bold mb-5"><i class="fas fa-question-circle mr-2 text-emerald-500"></i>Guía rápida - SRI Ecuador</h2>

            <div class="space-y-4">
                <div class="border-l-4 border-emerald-500 bg-emerald-50 p-4 rounded">
                    <h3 class="font-bold text-emerald-800 mb-2">1. Ambiente de Pruebas</h3>
                    <p class="text-sm text-emerald-700">El sistema inicia en ambiente de <strong>Pruebas</strong> (código 1). Úsalo para validar el flujo completo de firma, recepción y autorización antes de pasar a Producción.</p>
                </div>

                <div class="border-l-4 border-blue-500 bg-blue-50 p-4 rounded">
                    <h3 class="font-bold text-blue-800 mb-2">2. Certificado de firma</h3>
                    <p class="text-sm text-blue-700">Necesitas un archivo .p12 con tu firma electrónica. Entidades autorizadas: Security Data, ANF AC, Banco Central del Ecuador, Uanataca, Lazzate.</p>
                </div>

                <div class="border-l-4 border-purple-500 bg-purple-50 p-4 rounded">
                    <h3 class="font-bold text-purple-800 mb-2">3. Comprobantes soportados</h3>
                    <ul class="text-sm text-purple-700 list-disc list-inside mt-1">
                        <li><strong>01</strong> - Factura</li>
                        <li><strong>04</strong> - Nota de Crédito</li>
                        <li><strong>05</strong> - Nota de Débito</li>
                        <li><strong>07</strong> - Comprobante de Retención</li>
                    </ul>
                </div>

                <div class="border-l-4 border-orange-500 bg-orange-50 p-4 rounded">
                    <h3 class="font-bold text-orange-800 mb-2">4. Flujo de emisión (facturación directa)</h3>
                    <ol class="text-sm text-orange-700 list-decimal list-inside space-y-1">
                        <li>Realizar la venta de tipo FACTURA en el POS</li>
                        <li>El sistema genera el XML y la clave de acceso (49 dígitos)</li>
                        <li>Firma el XML con el certificado (XAdES-BES)</li>
                        <li>Envía al servicio de Recepción del SRI</li>
                        <li>Consulta la Autorización y guarda el comprobante autorizado</li>
                    </ol>
                </div>

                <div class="border-l-4 border-red-500 bg-red-50 p-4 rounded">
                    <h3 class="font-bold text-red-800 mb-2">5. Anulaciones</h3>
                    <p class="text-sm text-red-700">En Ecuador las facturas se anulan o corrigen mediante una <strong>Nota de Crédito</strong>. Para cargos adicionales se emite una <strong>Nota de Débito</strong>.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection