@extends('layouts.app')

@section('content')

{{-- Alerts --}}
@if(session('success'))
    <div class="alert border-0 shadow-sm rounded-4 mb-3 d-flex align-items-center" style="background:#f0fdf4;border-left:4px solid #22c55e!important;">
        <i class="bi bi-check-circle-fill fs-5 me-2 text-success"></i>
        <div>{{ session('success') }}</div>
        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
    </div>
@endif
@if(session('error'))
    <div class="alert border-0 shadow-sm rounded-4 mb-3 d-flex align-items-center" style="background:#fff1f2;border-left:4px solid #f43f5e!important;">
        <i class="bi bi-x-circle-fill fs-5 me-2 text-danger"></i>
        <div>{{ session('error') }}</div>
        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
    </div>
@endif
@if($errors->any())
    <div class="alert border-0 shadow-sm rounded-4 mb-3" style="background:#fff1f2;border-left:4px solid #f43f5e!important;">
        <div class="d-flex align-items-start">
            <i class="bi bi-exclamation-triangle-fill fs-5 me-2 text-danger"></i>
            <div>
                <strong>No se pudo guardar:</strong>
                <ul class="mb-0 ps-3">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
        <button type="button" class="btn-close position-absolute top-0 end-0 mt-2 me-2" data-bs-dismiss="alert"></button>
    </div>
@endif

{{-- ═══ TABS compactos ═══ --}}
<div class="d-flex flex-wrap gap-1 mb-3 justify-content-between align-items-center">
<div class="d-flex flex-wrap gap-1">
    @php
        $tabs = [
            ['id'=>'empresa',  'icon'=>'bi-building',          'label'=>'Empresa'],
            ['id'=>'sunat',    'icon'=>'bi-receipt-cutoff',     'label'=>'SUNAT / PSE'],
            ['id'=>'ticket',   'icon'=>'bi-printer',            'label'=>'Ticket'],
            ['id'=>'impresoras','icon'=>'bi-hdd-network-fill',  'label'=>'Impresoras'],
            ['id'=>'api',      'icon'=>'bi-cpu',                'label'=>'API DNI/RUC'],
            ['id'=>'backup',   'icon'=>'bi-cloud-download',     'label'=>'Backup'],
            ['id'=>'reinicio', 'icon'=>'bi-arrow-counterclockwise','label'=>'Reinicio'],
        ];
    @endphp
    @foreach($tabs as $i => $tab)
        <button type="button"
            class="cfg-tab btn btn-sm fw-semibold {{ $i===0?'active':'' }} {{ $tab['id']==='reinicio'?'text-danger border-danger':'' }}"
            data-target="#pane-{{ $tab['id'] }}"
            onclick="switchTab(this)">
            <i class="bi {{ $tab['icon'] }} me-1"></i>{{ $tab['label'] }}
        </button>
    @endforeach
</div>
    <form action="{{ route('config.pin.lock') }}" method="POST" onsubmit="return confirmarEnvio(this, 'Vas a salir de Configuración. Tendrás que ingresar el PIN de nuevo para volver.', {confirmText:'Sí, bloquear'})">
        @csrf
        <button type="submit" class="btn btn-sm btn-outline-secondary fw-semibold">
            <i class="bi bi-lock-fill me-1"></i> Bloquear
        </button>
    </form>
</div>

<div id="tab-content-wrapper">

    {{-- ══════════════════════ EMPRESA ══════════════════════ --}}
    <div id="pane-empresa" class="cfg-pane">
        <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="card border-0 shadow-sm rounded-4">

                <div class="cfg-section cfg-blue">
                    <span class="cfg-section-title"><i class="bi bi-shop"></i> Datos del negocio</span>
                    <div class="row g-2">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Nombre del negocio</label>
                            <input type="text" name="company_name" class="form-control form-control-sm" value="{{ $settings['company_name'] ?? '' }}" placeholder="Mi Restaurante" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Teléfono</label>
                            <input type="text" name="company_phone" class="form-control form-control-sm" value="{{ $settings['company_phone'] ?? '' }}" placeholder="999-888-777">
                        </div>
                        <div class="col-12">
                            <label class="form-label small fw-semibold">Dirección</label>
                            <input type="text" name="company_address" class="form-control form-control-sm" value="{{ $settings['company_address'] ?? '' }}" placeholder="Av. Principal 123">
                        </div>
                        <div class="col-md-5">
                            <label class="form-label small fw-semibold">Zona Horaria</label>
                            <select name="timezone" class="form-select form-select-sm">
                                @foreach($timezones as $tz => $label)
                                    <option value="{{ $tz }}" {{ ($settings['timezone'] ?? 'America/Lima') == $tz ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small fw-semibold">Moneda</label>
                            <select name="currency_symbol" class="form-select form-select-sm">
                                <option value="S/" {{ ($settings['currency_symbol'] ?? '') == 'S/' ? 'selected' : '' }}>S/ Soles</option>
                                <option value="$"  {{ ($settings['currency_symbol'] ?? '') == '$'  ? 'selected' : '' }}>$ Dólares</option>
                                <option value="€"  {{ ($settings['currency_symbol'] ?? '') == '€'  ? 'selected' : '' }}>€ Euros</option>
                                <option value="COP" {{ ($settings['currency_symbol'] ?? '') == 'COP' ? 'selected' : '' }}>COP Pesos Col.</option>
                                <option value="MXN" {{ ($settings['currency_symbol'] ?? '') == 'MXN' ? 'selected' : '' }}>MXN Pesos Mex.</option>
                                <option value="CLP" {{ ($settings['currency_symbol'] ?? '') == 'CLP' ? 'selected' : '' }}>CLP Pesos Chi.</option>
                                <option value="ARS" {{ ($settings['currency_symbol'] ?? '') == 'ARS' ? 'selected' : '' }}>ARS Pesos Arg.</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold">Logo</label>
                            <input type="file" name="company_logo" class="form-control form-control-sm" accept="image/*">
                        </div>
                    </div>
                </div>

                <div class="cfg-section cfg-pink">
                    <span class="cfg-section-title"><i class="bi bi-shield-lock-fill"></i> PIN de acceso a Configuración</span>
                    <p class="small mb-2">
                        @if(!empty($settings['config_pin']))
                            <span class="text-success fw-bold"><i class="bi bi-check-circle-fill"></i> PIN activado</span> — escribe uno nuevo abajo solo si quieres cambiarlo.
                        @else
                            <span class="text-warning fw-bold"><i class="bi bi-exclamation-triangle-fill"></i> Sin PIN configurado</span> — cualquier Administrador puede entrar aquí libremente.
                        @endif
                    </p>
                    <div class="row g-2">
                        <div class="col-md-4">
                            <input type="password" name="new_config_pin" class="form-control form-control-sm" placeholder="Nuevo PIN (mín. 4 caracteres)" minlength="4" maxlength="20">
                        </div>
                    </div>
                </div>

                <div class="cfg-section cfg-teal">
                    <span class="cfg-section-title"><i class="bi bi-image"></i> Pantalla de inicio de sesión</span>
                    <div class="row g-2">
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold">Portada (foto del restaurante)</label>
                            <input type="file" name="login_cover_image" class="form-control form-control-sm" accept="image/*">
                            @if(!empty($settings['login_cover_image']))
                                <img src="{{ asset('storage/'.$settings['login_cover_image']) }}" class="mt-2 rounded-3 border" style="max-height:60px;">
                            @endif
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold">Etiqueta destacada</label>
                            <input type="text" name="login_hero_badge" class="form-control form-control-sm" value="{{ $settings['login_hero_badge'] ?? '' }}" placeholder="🔥 Sistema #1 en gestión gastronómica">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold">Título</label>
                            <input type="text" name="login_hero_title" class="form-control form-control-sm" value="{{ $settings['login_hero_title'] ?? '' }}" placeholder="Tu restaurante, bajo control total">
                        </div>
                        <div class="col-12">
                            <label class="form-label small fw-semibold">Subtítulo / mensaje publicitario</label>
                            <input type="text" name="login_hero_subtitle" class="form-control form-control-sm" value="{{ $settings['login_hero_subtitle'] ?? '' }}" placeholder="Vende más, pierde menos y olvídate del papeleo.">
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-end mt-1">
                    <button type="submit" class="btn btn-sm btn-primary fw-semibold px-4"><i class="bi bi-save me-1"></i>Guardar</button>
                </div>
            </div>
        </form>
    </div>

    {{-- ══════════════════════ SUNAT + PSE (fusionado) ══════════════════════ --}}
    <div id="pane-sunat" class="cfg-pane d-none">
        <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="card border-0 shadow-sm rounded-4">
                @php
                    $ambiente = $settings['sunat_environment'] ?? 'beta';
                    $tieneCert = !empty($settings['sunat_cert_path']);
                    $pseProveedor = $settings['sunat_pse_proveedor'] ?? '';
                    $pseEntorno   = $settings['sunat_pse_entorno'] ?? 'test';
                    $pseUsuarioClave = ['gior', 'qpse', 'validapse', 'sendfact'];
                    $pseActivo = in_array($pseProveedor, ['nubefact','gior','qpse','validapse','sendfact'], true);
                @endphp
                <div class="alert {{ $ambiente==='produccion'?'alert-danger':'alert-warning' }} py-1 px-3 small mb-2">
                    <strong>Ambiente:</strong> {{ $ambiente==='produccion'?'PRODUCCIÓN':'BETA (pruebas)' }}
                    @if(!$tieneCert) · <span class="badge bg-secondary">cert. demo</span>@endif
                </div>

                <div class="cfg-section cfg-blue">
                    <span class="cfg-section-title"><i class="bi bi-building"></i> Identificación del emisor</span>
                    <div class="row g-2">
                        <div class="col-md-4"><label class="form-label small fw-semibold">RUC emisor</label><input type="text" name="sunat_ruc" class="form-control form-control-sm" value="{{ $settings['sunat_ruc']??'' }}" maxlength="11" placeholder="20000000001"></div>
                        <div class="col-md-5"><label class="form-label small fw-semibold">Razón social</label><input type="text" name="sunat_razon_social" class="form-control form-control-sm" value="{{ $settings['sunat_razon_social']??'' }}" placeholder="MI EMPRESA SAC"></div>
                        <div class="col-md-3"><label class="form-label small fw-semibold">Nombre comercial</label><input type="text" name="sunat_nombre_comercial" class="form-control form-control-sm" value="{{ $settings['sunat_nombre_comercial']??'' }}"></div>
                        <div class="col-12"><label class="form-label small fw-semibold">Dirección fiscal</label><input type="text" name="sunat_direccion_fiscal" class="form-control form-control-sm" value="{{ $settings['sunat_direccion_fiscal']??'' }}" placeholder="AV. PRINCIPAL 123"></div>
                        <div class="col-2"><label class="form-label small fw-semibold">Ubigeo</label><input type="text" name="sunat_ubigeo" class="form-control form-control-sm" value="{{ $settings['sunat_ubigeo']??'150101' }}" maxlength="6"></div>
                        <div class="col-3"><label class="form-label small fw-semibold">Departamento</label><input type="text" name="sunat_departamento" class="form-control form-control-sm" value="{{ $settings['sunat_departamento']??'LIMA' }}"></div>
                        <div class="col-3"><label class="form-label small fw-semibold">Provincia</label><input type="text" name="sunat_provincia" class="form-control form-control-sm" value="{{ $settings['sunat_provincia']??'LIMA' }}"></div>
                        <div class="col-2"><label class="form-label small fw-semibold">Distrito</label><input type="text" name="sunat_distrito" class="form-control form-control-sm" value="{{ $settings['sunat_distrito']??'LIMA' }}"></div>
                        <div class="col-2"><label class="form-label small fw-semibold">Urbanización</label><input type="text" name="sunat_urbanizacion" class="form-control form-control-sm" value="{{ $settings['sunat_urbanizacion']??'-' }}"></div>
                    </div>
                </div>

                <div class="cfg-section cfg-yellow">
                    <span class="cfg-section-title"><i class="bi bi-sliders"></i> Ambiente</span>
                    <div class="row g-2">
                        <div class="col-md-3"><label class="form-label small fw-semibold">Ambiente</label><select name="sunat_environment" class="form-select form-select-sm fw-bold"><option value="beta" {{ $ambiente==='beta'?'selected':'' }}>BETA</option><option value="produccion" {{ $ambiente==='produccion'?'selected':'' }}>PRODUCCIÓN</option></select></div>
                        <div class="col-md-2"><label class="form-label small fw-semibold">IGV %</label><input type="number" step="0.01" name="sunat_igv_rate" class="form-control form-control-sm" value="{{ $settings['sunat_igv_rate']??'18' }}"></div>
                    </div>
                </div>

                <div class="cfg-section cfg-teal d-flex align-items-center justify-content-between gap-2">
                    <div>
                        <span class="cfg-section-title mb-1"><i class="bi bi-cloud-upload"></i> Enviar a SUNAT automáticamente</span>
                        <div class="small" style="max-width:560px;">
                            Activado: cada boleta/factura se envía a SUNAT apenas se genera. Desactivado: queda "Pendiente" en Comprobantes → SUNAT hasta que le des clic a enviar.
                        </div>
                    </div>
                    <div class="form-check form-switch fs-4 mb-0 flex-shrink-0">
                        <input type="hidden" name="sunat_envio_automatico" value="0">
                        <input class="form-check-input" type="checkbox" id="envioAutomatico" name="sunat_envio_automatico" value="1"
                               {{ ($settings['sunat_envio_automatico'] ?? '1') !== '0' ? 'checked' : '' }}>
                    </div>
                </div>

                <div class="cfg-section cfg-green d-flex align-items-center justify-content-between gap-2">
                    <div>
                        <span class="cfg-section-title mb-1"><i class="bi bi-tree-fill"></i> Régimen de Selva (exonerado de IGV)</span>
                        <div class="small" style="max-width:560px;">
                            Actívalo solo si <b>este negocio</b> está domiciliado y opera dentro de la zona de Selva (Ley N° 27037).
                            Todas las ventas se calculan sin IGV. Verifica con tu contador antes de activarlo.
                        </div>
                    </div>
                    <div class="form-check form-switch fs-4 mb-0 flex-shrink-0">
                        <input type="hidden" name="sunat_regimen_selva" value="0">
                        <input class="form-check-input" type="checkbox" id="regimenSelva" name="sunat_regimen_selva" value="1"
                               {{ !empty($settings['sunat_regimen_selva']) ? 'checked' : '' }}>
                    </div>
                </div>

                <div class="cfg-section cfg-orange">
                    <span class="cfg-section-title"><i class="bi bi-signpost-split-fill"></i> ¿Cómo vas a firmar y enviar tus comprobantes a SUNAT?</span>
                    <div class="row g-2 mt-1">
                        <div class="col-md-6">
                            <label class="modo-envio-card" id="cardCertificado">
                                <input type="radio" name="modo_envio_sunat" value="certificado" id="modoCertificado"
                                       onchange="setModoEnvio('certificado')" {{ !$pseActivo ? 'checked' : '' }}>
                                <div class="modo-envio-icon"><i class="bi bi-shield-lock-fill"></i></div>
                                <div>
                                    <div class="fw-bold">Certificado Digital propio</div>
                                    <div class="small text-muted">Firmas y envías tú mismo con tu .pfx. Sin costo por comprobante.</div>
                                </div>
                            </label>
                        </div>
                        <div class="col-md-6">
                            <label class="modo-envio-card" id="cardPse">
                                <input type="radio" name="modo_envio_sunat" value="pse" id="modoPse"
                                       onchange="setModoEnvio('pse')" {{ $pseActivo ? 'checked' : '' }}>
                                <div class="modo-envio-icon"><i class="bi bi-plug-fill"></i></div>
                                <div>
                                    <div class="fw-bold">PSE (Proveedor externo)</div>
                                    <div class="small text-muted">Nubefact, QPSE, Gior, etc. firman y envían por ti. No necesitas certificado.</div>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>

                {{-- ═══ Bloque PSE: solo visible si el modo elegido es "pse" ═══ --}}
                <div class="cfg-section cfg-orange" id="bloque_pse" style="{{ $pseActivo ? '' : 'display:none' }}">
                    <span class="cfg-section-title"><i class="bi bi-plug-fill"></i> Datos del proveedor PSE</span>
                    <div class="row g-2 align-items-end">
                        <div class="col-md-5">
                            <label class="form-label small fw-semibold">Proveedor PSE</label>
                            <select name="sunat_pse_proveedor" id="pse_proveedor_input" class="form-select form-select-sm" onchange="selectPSE(this.value)">
                                <option value="" {{ $pseProveedor===''?'selected':'' }}>— Elige un proveedor —</option>
                                <option value="nubefact" {{ $pseProveedor==='nubefact'?'selected':'' }}>Nubefact</option>
                                <option value="qpse" {{ $pseProveedor==='qpse'?'selected':'' }}>QPSE</option>
                                <option value="gior" {{ $pseProveedor==='gior'?'selected':'' }}>Gior Technology</option>
                                <option value="validapse" {{ $pseProveedor==='validapse'?'selected':'' }}>Validapse</option>
                                <option value="sendfact" {{ $pseProveedor==='sendfact'?'selected':'' }}>SendFact</option>
                            </select>
                        </div>
                        <div class="col-md-3" id="pse_entorno_wrap">
                            <label class="form-label small fw-semibold">Entorno PSE</label>
                            <select name="sunat_pse_entorno" class="form-select form-select-sm fw-bold">
                                <option value="test" {{ $pseEntorno==='test'?'selected':'' }}>🧪 Pruebas</option>
                                <option value="prod" {{ $pseEntorno==='prod'?'selected':'' }}>🚀 Producción</option>
                            </select>
                        </div>
                    </div>

                    {{-- Info del proveedor seleccionado --}}
                    <div id="pse_info_box" class="alert py-2 px-3 small mt-2 mb-0 border-0 rounded-3 {{ empty($pseProveedor)?'d-none':'' }}" style="background:#fff;">
                        @if($pseProveedor==='nubefact')
                            🟢 <strong>Nubefact</strong> — Obtén tu token en <a href="https://www.nubefact.com" target="_blank">nubefact.com</a> → Panel → Token API.
                        @elseif($pseProveedor==='qpse')
                            🟢 <strong>QPSE</strong> — Usa el usuario y contraseña de tu cuenta en <a href="https://qpse.pe" target="_blank">qpse.pe</a>
                        @elseif($pseProveedor==='gior')
                            🟢 <strong>Gior Technology</strong> — Usa el usuario y contraseña de tu cuenta en <a href="https://www.giortechnology.com" target="_blank">giortechnology.com</a>
                        @elseif($pseProveedor==='validapse')
                            🟢 <strong>Validapse</strong> — Usa el usuario y contraseña de tu cuenta en <a href="https://validapse.com" target="_blank">validapse.com</a>
                        @elseif($pseProveedor==='sendfact')
                            🟢 <strong>SendFact</strong> — Usa el usuario y contraseña de tu cuenta en <a href="https://sendfact.com" target="_blank">sendfact.com</a>
                        @endif
                    </div>

                    {{-- Campos Nubefact (Token + URL de cuenta) --}}
                    <div id="campos_nubefact" class="row g-2 mt-1 {{ $pseProveedor==='nubefact'?'':'d-none' }}">
                        <div class="col-md-8">
                            <label class="form-label small fw-semibold">Token / API Key</label>
                            <input type="text" name="sunat_pse_token" class="form-control form-control-sm"
                                   value="{{ $settings['sunat_pse_token']??'' }}" placeholder="Token del proveedor PSE">
                        </div>
                        <div class="col-12">
                            <label class="form-label small fw-semibold">URL de la API</label>
                            <input type="text" name="sunat_pse_url" class="form-control form-control-sm"
                                   value="{{ $settings['sunat_pse_url']??'' }}" placeholder="Ej: https://api.nubefact.com/api/v1">
                            <div class="form-text" style="font-size:.68rem">La encuentras en tu panel de Nubefact → "Datos de acceso a la API".</div>
                        </div>
                    </div>

                    {{-- Campos Usuario + Clave (Gior, QPSE, Validapse, SendFact) --}}
                    <div id="campos_usuario_clave" class="row g-2 mt-1 {{ in_array($pseProveedor, $pseUsuarioClave) ? '' : 'd-none' }}">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Usuario</label>
                            <input type="text" name="sunat_pse_usuario" class="form-control form-control-sm"
                                   value="{{ $settings['sunat_pse_usuario']??'' }}" placeholder="Usuario de tu cuenta PSE">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Clave</label>
                            <input type="password" name="sunat_pse_clave" class="form-control form-control-sm"
                                   value="{{ $settings['sunat_pse_clave']??'' }}" placeholder="••••••••">
                        </div>
                    </div>
                </div>

                {{-- ═══ Bloque Credenciales SOL + Certificado: visibles solo si el modo elegido es "certificado" ═══ --}}
                <div class="cfg-section cfg-purple" id="bloque_credenciales_sol" style="{{ $pseActivo ? 'display:none' : '' }}">
                    <span class="cfg-section-title"><i class="bi bi-key-fill"></i> Credenciales SOL</span>
                    <div class="row g-2">
                        <div class="col-md-3"><label class="form-label small fw-semibold">Usuario SOL</label><input type="text" name="sunat_sol_user" class="form-control form-control-sm" value="{{ $settings['sunat_sol_user']??'MODDATOS' }}"></div>
                        <div class="col-md-3"><label class="form-label small fw-semibold">Clave SOL</label><input type="password" name="sunat_sol_pass" class="form-control form-control-sm" value="{{ $settings['sunat_sol_pass']??'' }}" placeholder="••••••••"></div>
                        <div class="col-md-3">
                            <label class="form-label small fw-semibold">Usuario Secundario</label>
                            <input type="text" name="sunat_sol_user_secundario" class="form-control form-control-sm" value="{{ $settings['sunat_sol_user_secundario']??'' }}" placeholder="Usuario secundario SOL">
                            <div class="form-text" style="font-size:.68rem">Este usuario es el que envía los comprobantes a SUNAT.</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small fw-semibold">Clave del Usuario Secundario</label>
                            <input type="password" name="sunat_sol_pass_secundario" class="form-control form-control-sm" value="{{ $settings['sunat_sol_pass_secundario']??'' }}" placeholder="••••••••">
                            <div class="form-text" style="font-size:.68rem">Esta es la clave que usa el sistema para enviar a SUNAT.</div>
                        </div>
                    </div>
                </div>

                {{-- Certificado digital: solo tiene sentido si NO se usa PSE, se oculta automáticamente --}}
                <div class="cfg-section cfg-purple" id="bloque_certificado" style="{{ $pseActivo ? 'display:none' : '' }}">
                    <span class="cfg-section-title"><i class="bi bi-shield-lock"></i> Certificado digital</span>
                    <div class="row g-2">
                        <div class="col-md-8">
                            <label class="form-label small fw-semibold">Certificado (.pfx)</label>
                            <input type="file" name="sunat_cert_file" class="form-control form-control-sm" accept=".pfx,.p12">
                            @if($tieneCert)<small class="text-success"><i class="bi bi-check-circle"></i> <code>{{ $settings['sunat_cert_path'] }}</code></small>
                            @else<small class="text-warning">Sin cert. Para BETA: <code>php artisan sunat:cert:demo</code></small>@endif
                        </div>
                        <div class="col-md-4"><label class="form-label small fw-semibold">Contraseña .pfx</label><input type="password" name="sunat_cert_password" class="form-control form-control-sm" value="{{ $settings['sunat_cert_password']??'' }}" placeholder="(opcional)"></div>
                    </div>
                </div>

                <div class="d-flex justify-content-end mt-1">
                    <button type="submit" class="btn btn-sm btn-primary fw-semibold px-4"><i class="bi bi-save me-1"></i>Guardar</button>
                </div>
            </div>
        </form>
    </div>


    <script>
    function setModoEnvio(modo) {
        const esPse = modo === 'pse';
        document.getElementById('bloque_pse').style.display = esPse ? '' : 'none';
        document.getElementById('bloque_certificado').style.display = esPse ? 'none' : '';
        document.getElementById('bloque_credenciales_sol').style.display = esPse ? 'none' : '';
        document.getElementById('cardCertificado').classList.toggle('is-active', !esPse);
        document.getElementById('cardPse').classList.toggle('is-active', esPse);

        // Si vuelve a "Certificado propio", limpiamos el proveedor PSE para
        // que el sistema no siga usando PSE por detrás con datos viejos.
        if (!esPse) {
            const sel = document.getElementById('pse_proveedor_input');
            if (sel) { sel.value = ''; selectPSE(''); }
        }
    }

    function selectPSE(proveedor) {
        const infos = {
            nubefact:  '🟢 <strong>Nubefact</strong> — Obtén tu token en <a href="https://www.nubefact.com" target="_blank">nubefact.com</a> → Panel → Token API.',
            qpse:      '🟢 <strong>QPSE</strong> — Usa el usuario y contraseña de tu cuenta en <a href="https://qpse.pe" target="_blank">qpse.pe</a>',
            gior:      '🟢 <strong>Gior Technology</strong> — Usa el usuario y contraseña de tu cuenta en <a href="https://www.giortechnology.com" target="_blank">giortechnology.com</a>',
            validapse: '🟢 <strong>Validapse</strong> — Usa el usuario y contraseña de tu cuenta en <a href="https://validapse.com" target="_blank">validapse.com</a>',
            sendfact:  '🟢 <strong>SendFact</strong> — Usa el usuario y contraseña de tu cuenta en <a href="https://sendfact.com" target="_blank">sendfact.com</a>',
        };
        const box = document.getElementById('pse_info_box');
        box.innerHTML = infos[proveedor] || '';
        box.classList.toggle('d-none', !infos[proveedor]);
        document.getElementById('campos_nubefact').classList.toggle('d-none', proveedor !== 'nubefact');
        document.getElementById('campos_usuario_clave').classList.toggle('d-none', !['gior','qpse','validapse','sendfact'].includes(proveedor));
    }

    // Estado inicial de las tarjetas al cargar la página
    document.addEventListener('DOMContentLoaded', function () {
        const checked = document.querySelector('input[name="modo_envio_sunat"]:checked');
        if (checked) {
            document.getElementById('cardCertificado').classList.toggle('is-active', checked.value === 'certificado');
            document.getElementById('cardPse').classList.toggle('is-active', checked.value === 'pse');
        }
    });
    </script>

    {{-- ══════════════════════ TICKET ══════════════════════ --}}
    <div id="pane-ticket" class="cfg-pane d-none">
        <form action="{{ route('settings.update') }}" method="POST">
            @csrf
            <div class="card border-0 shadow-sm rounded-4 p-3">
                <div class="row g-3 align-items-start">
                    <div class="col-md-7">
                        <label class="form-label small fw-semibold mb-1">Mensaje al pie del ticket</label>
                        <input type="text" name="ticket_footer" class="form-control form-control-sm"
                               id="input_ticket_footer"
                               value="{{ $settings['ticket_footer'] ?? '¡Gracias por su visita!' }}"
                               placeholder="¡Gracias por su preferencia!">
                        <div class="form-text small">Aparece al final de cada ticket impreso.</div>
                        <div class="mt-3 d-flex justify-content-start">
                            <button type="submit" class="btn btn-sm btn-primary fw-semibold px-4"><i class="bi bi-save me-1"></i>Guardar</button>
                        </div>
                    </div>
                    <div class="col-md-5">
                        {{-- Vista previa 80mm --}}
                        <div class="border rounded-3 bg-white p-2 mx-auto" style="max-width:240px;font-family:'Courier New',monospace;font-size:11px;line-height:1.5;">
                            <div class="text-center fw-bold" style="font-size:12px;">{{ $settings['company_name']??'Mi Restaurante' }}</div>
                            @if(!empty($settings['sunat_ruc']))<div class="text-center">RUC: {{ $settings['sunat_ruc'] }}</div>@endif
                            @if(!empty($settings['company_phone']))<div class="text-center">Telf: {{ $settings['company_phone'] }}</div>@endif
                            <div style="border-top:1px dashed #ccc;margin:4px 0;"></div>
                            <div class="text-center fw-bold">TICKET V000001</div>
                            <div class="text-center">{{ now()->format('d/m/Y H:i') }}</div>
                            <div style="border-top:1px dashed #ccc;margin:4px 0;"></div>
                            <div>Producto Ejemplo</div>
                            <div class="d-flex justify-content-between"><span>2 x S/ 10.00</span><span>S/ 20.00</span></div>
                            <div style="border-top:1px dashed #ccc;margin:4px 0;"></div>
                            <div class="d-flex justify-content-between fw-bold"><span>TOTAL:</span><span>S/ 20.00</span></div>
                            <div style="border-top:1px dashed #ccc;margin:4px 0;"></div>
                            <div class="text-center" id="preview_footer">{{ $settings['ticket_footer']??'¡Gracias por su visita!' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    {{-- ══════════════════════ IMPRESORAS DEL LOCAL ══════════════════════ --}}
    <div id="pane-impresoras" class="cfg-pane d-none">
        @php
            $printerConnected = !empty($printerLastSeen) && now()->diffInSeconds($printerLastSeen) < 20;
        @endphp

        <div class="card border-0 shadow-sm rounded-4">
            <div class="small text-muted mb-2" style="font-size:.72rem">
                La comanda sale sola en la impresora que le corresponda a cada categoría, y la boleta/nota de venta sale sola en Caja al cobrar.
                Necesitas el puente corriendo en la laptop de caja.
            </div>

            <form action="{{ route('settings.update') }}" method="POST" class="mb-2">
                @csrf
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="printerRemoteEnabled" name="printer_remote_enabled" value="1"
                           onchange="this.form.submit()"
                           {{ !empty($settings['printer_remote_enabled']) ? 'checked' : '' }}>
                    <label class="form-check-label fw-semibold small" for="printerRemoteEnabled">Activar impresión remota</label>
                </div>
            </form>

            @if(!empty($settings['printer_remote_enabled']))
                @if($printerConnected)
                    <div class="cfg-section cfg-green py-1 px-2 mb-2" style="font-size:.74rem">
                        <i class="bi bi-check-circle-fill"></i> <strong>Puente conectado</strong> — {{ \Carbon\Carbon::parse($printerLastSeen)->diffForHumans() }}
                    </div>
                @else
                    <div class="cfg-section cfg-yellow py-1 px-2 mb-2" style="font-size:.74rem">
                        <i class="bi bi-exclamation-triangle-fill"></i> <strong>Puente sin conexión</strong>
                        {{ $printerLastSeen ? 'desde ' . \Carbon\Carbon::parse($printerLastSeen)->diffForHumans() : '(nunca se ha conectado)' }}
                    </div>
                @endif
            @endif

            {{-- Lista de impresoras --}}
            <span class="cfg-section-title" style="margin-bottom:4px"><i class="bi bi-printer"></i> Impresoras del local</span>
            <div class="d-flex flex-column gap-1 mb-2">
                @foreach($printers as $printer)
                @php
                    $colorClase = $printer->role === 'caja' ? 'cfg-blue' : ($printer->role === 'cocina' ? 'cfg-green' : 'cfg-purple');
                    $badgeClase = $printer->role === 'caja' ? 'text-bg-primary' : ($printer->role === 'cocina' ? 'text-bg-success' : 'text-bg-secondary');
                @endphp
                <div class="cfg-section {{ $colorClase }} d-flex align-items-center gap-2 flex-wrap py-1 px-2 mb-0">
                    <form action="{{ route('printers.update', $printer) }}" method="POST" class="d-flex align-items-center gap-2 flex-wrap flex-grow-1">
                        @csrf
                        @method('PUT')
                        <span class="badge {{ $badgeClase }}" style="min-width:62px;font-size:.65rem">
                            {{ $printer->role === 'caja' ? 'Fija' : ($printer->role === 'cocina' ? 'Fija' : 'Estación') }}
                        </span>
                        <input type="text" name="name" value="{{ $printer->name }}" class="form-control form-control-sm" style="max-width:140px" required>
                        <input type="text" name="ip" value="{{ $printer->ip }}" class="form-control form-control-sm" style="max-width:140px" placeholder="192.168.0.xxx">
                        <button type="submit" class="btn btn-sm btn-outline-primary py-0"><i class="bi bi-check-lg"></i></button>
                        <span class="small text-muted" style="font-size:.65rem">
                            {{ $printer->role === 'caja' ? 'Boletas y notas de venta' : ($printer->role === 'cocina' ? 'Categorías sin estación' : 'Asígnale categorías') }}
                        </span>
                    </form>
                    @if(!in_array($printer->role, ['caja', 'cocina']))
                        <form action="{{ route('printers.destroy', $printer) }}" method="POST"
                              onsubmit="return confirm('¿Eliminar la impresora {{ $printer->name }}? Las categorías que la usaban volverán a imprimir en Cocina.')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-outline-danger py-0"><i class="bi bi-trash"></i></button>
                        </form>
                    @endif
                </div>
                @endforeach
            </div>

            {{-- Agregar impresora nueva --}}
            <form action="{{ route('printers.store') }}" method="POST" class="d-flex align-items-end gap-2 flex-wrap mb-2">
                @csrf
                <div>
                    <label class="form-label small fw-semibold">Impresora nueva</label>
                    <input type="text" name="name" class="form-control form-control-sm" style="max-width:160px" placeholder="Ej: Parrilla" required>
                </div>
                <div>
                    <label class="form-label small fw-semibold">IP</label>
                    <input type="text" name="ip" class="form-control form-control-sm" style="max-width:140px" placeholder="192.168.0.248">
                </div>
                <button type="submit" class="btn btn-sm btn-outline-success fw-semibold">
                    <i class="bi bi-plus-lg"></i> Agregar
                </button>
            </form>
            <div class="cfg-section cfg-blue py-1 px-2 mb-2" style="font-size:.7rem">
                <i class="bi bi-info-circle"></i> Después de agregar, entra a <strong>Productos → Categorías</strong> y elige a cuál imprime cada una.
            </div>

            <div class="d-flex gap-2 flex-wrap align-items-center">
                <a href="{{ route('printers.bridge_download') }}" class="btn btn-sm btn-outline-dark fw-semibold px-3">
                    <i class="bi bi-download me-1"></i> Descargar puente (laptop de caja)
                </a>
                <a href="{{ route('printers.bridge_download', ['tipo' => 'py']) }}" class="small text-muted">
                    ¿Prefieres Python? descárgalo aquí
                </a>
                <a href="{{ route('printers.queue') }}" class="btn btn-sm btn-outline-secondary fw-semibold px-3">
                    <i class="bi bi-list-check me-1"></i> Ver cola y errores
                </a>
            </div>
            <div class="form-text mt-2" style="font-size:.72rem">
                El puente por defecto usa PowerShell — ya viene instalado en Windows 10/11, no hace falta instalar nada más.
                Para abrirlo: clic derecho sobre el archivo descargado → <strong>"Ejecutar con PowerShell"</strong>.
                Si Windows lo bloquea por venir de internet, abre PowerShell como administrador una sola vez y corre:
                <code>Set-ExecutionPolicy RemoteSigned -Scope CurrentUser</code>
            </div>
        </div>

        <form action="{{ route('printers.regenerate_token') }}" method="POST" onsubmit="return confirm('Esto invalida el token actual. Vas a tener que volver a descargar el puente en la laptop de caja. ¿Continuar?')">
            @csrf
            <button type="submit" class="btn btn-link btn-sm text-muted px-0">
                <i class="bi bi-arrow-repeat"></i> Regenerar token de seguridad del puente
            </button>
        </form>
    </div>

    {{-- ══════════════════════ API DNI/RUC ══════════════════════ --}}
    <div id="pane-api" class="cfg-pane d-none">
        <form action="{{ route('settings.update') }}" method="POST">
            @csrf

            {{-- ─── PERÚ ─────────────────────────────────────────── --}}
            <div class="card border-0 shadow-sm rounded-4 p-3 mb-3">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <span class="fs-5">🇵🇪</span>
                    <h6 class="fw-bold mb-0">Perú — RENIEC / SUNAT</h6>
                </div>

                <div class="d-flex align-items-start gap-2 p-2 rounded-3 bg-light border mb-3">
                    <div class="form-check form-switch mt-1">
                        <input class="form-check-input" type="checkbox" role="switch"
                               name="api_consulta_interna" value="1"
                               {{ !empty($settings['api_consulta_interna'])?'checked':'' }}
                               onchange="toggleConsultaInterna(this.checked)">
                    </div>
                    <div>
                        <div class="small fw-semibold">Usar consulta interna</div>
                        <div class="text-muted" style="font-size:11px;">Activa solo si tienes una API propia en tu servidor.</div>
                    </div>
                </div>

                <div id="bloque_url">
                    <label class="form-label small fw-semibold mb-1">URL</label>
                    @php
                        $presets = ['https://apiperu.dev'=>'apiperu.dev','https://apis.net.pe'=>'apis.net.pe','https://apiperu.info'=>'apiperu.info','https://dniruc.apisperu.com'=>'apisperu.com'];
                        $urlActual = $settings['apiperu_url']??'https://apiperu.dev';
                        $esCustom  = !array_key_exists($urlActual,$presets);
                    @endphp
                    <div class="d-flex flex-wrap gap-1 mb-2">
                        @foreach($presets as $url => $label)
                            <button type="button" class="btn btn-xs preset-btn {{ $urlActual===$url?'btn-success':'btn-outline-secondary' }} fw-semibold" data-url="{{ $url }}" onclick="selectPreset(this)" style="font-size:11px;padding:2px 10px;">{{ $label }}</button>
                        @endforeach
                        <button type="button" class="btn btn-xs preset-btn {{ $esCustom?'btn-success':'btn-outline-secondary' }} fw-semibold" data-url="custom" onclick="selectPreset(this)" style="font-size:11px;padding:2px 10px;">Personalizada</button>
                    </div>
                    <input type="text" name="apiperu_url" id="input_api_url" class="form-control form-control-sm font-monospace" value="{{ $urlActual }}" {{ !$esCustom?'readonly':'' }} placeholder="https://apiperu.dev">
                </div>

                <div class="row g-2 mt-1 align-items-end">
                    <div class="col-md-9">
                        <label class="form-label small fw-semibold mb-1">Token</label>
                        <div class="input-group input-group-sm">
                            <input type="password" name="apiperu_token" id="input_api_token" class="form-control font-monospace" value="{{ $settings['apiperu_token']??'' }}" placeholder="eyJ0eXAiOiJKV1Qi...">
                            <button class="btn btn-outline-secondary" type="button" onclick="toggleTokenVis('input_api_token','eye_peru')"><i class="bi bi-eye" id="eye_peru"></i></button>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <button type="button" class="btn btn-sm btn-outline-success w-100" onclick="probarApi()">
                            <i class="bi bi-lightning-charge me-1"></i>Probar
                        </button>
                        <div id="test_result" class="mt-1" style="font-size:11px;"></div>
                    </div>
                </div>
                @if(!empty($settings['apiperu_token']))
                    <div class="small text-success mt-1"><i class="bi bi-check-circle me-1"></i>Token configurado · Búsqueda activa</div>
                @else
                    <div class="small text-warning mt-1"><i class="bi bi-exclamation-triangle me-1"></i>Sin token · Búsqueda desactivada</div>
                @endif
            </div>

            {{-- ─── PAÍSES INTERNACIONALES ────────────────────────── --}}
            @php
                $paises = [
                    ['code'=>'mx','flag'=>'🇲🇽','nombre'=>'México','tipo'=>'RFC / CURP','field_url'=>'api_mx_url','field_token'=>'api_mx_token','placeholder_url'=>'https://api.ejemplo.com.mx','placeholder_token'=>'Token de tu proveedor México'],
                    ['code'=>'ec','flag'=>'🇪🇨','nombre'=>'Ecuador','tipo'=>'RUC / CI','field_url'=>'api_ec_url','field_token'=>'api_ec_token','placeholder_url'=>'https://api.sri.gob.ec','placeholder_token'=>'Token de tu proveedor Ecuador'],
                    ['code'=>'ar','flag'=>'🇦🇷','nombre'=>'Argentina','tipo'=>'CUIT / DNI','field_url'=>'api_ar_url','field_token'=>'api_ar_token','placeholder_url'=>'https://afip.ejemplo.com.ar','placeholder_token'=>'Token de tu proveedor Argentina'],
                    ['code'=>'cl','flag'=>'🇨🇱','nombre'=>'Chile','tipo'=>'RUT','field_url'=>'api_cl_url','field_token'=>'api_cl_token','placeholder_url'=>'https://api.sii.cl','placeholder_token'=>'Token de tu proveedor Chile'],
                    ['code'=>'co','flag'=>'🇨🇴','nombre'=>'Colombia','tipo'=>'NIT / CC','field_url'=>'api_co_url','field_token'=>'api_co_token','placeholder_url'=>'https://api.dian.gov.co','placeholder_token'=>'Token de tu proveedor Colombia'],
                ];
            @endphp

            <div class="row g-2 mb-3">
                @foreach($paises as $p)
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm rounded-4 p-3 h-100">
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <span class="fs-5">{{ $p['flag'] }}</span>
                            <div>
                                <div class="fw-bold small">{{ $p['nombre'] }}</div>
                                <div class="text-muted" style="font-size:11px;">Consulta {{ $p['tipo'] }}</div>
                            </div>
                            @if(!empty($settings[$p['field_token']]))
                                <span class="badge bg-success ms-auto" style="font-size:10px;"><i class="bi bi-check-circle me-1"></i>Activo</span>
                            @else
                                <span class="badge bg-light text-secondary ms-auto border" style="font-size:10px;">Sin configurar</span>
                            @endif
                        </div>
                        <div class="mb-1">
                            <input type="text" name="{{ $p['field_url'] }}" class="form-control form-control-sm font-monospace" value="{{ $settings[$p['field_url']]??'' }}" placeholder="{{ $p['placeholder_url'] }}">
                            <div style="font-size:10px;" class="text-muted ps-1">URL de la API</div>
                        </div>
                        <div class="input-group input-group-sm">
                            <input type="password" name="{{ $p['field_token'] }}" id="tok_{{ $p['code'] }}" class="form-control font-monospace" value="{{ $settings[$p['field_token']]??'' }}" placeholder="{{ $p['placeholder_token'] }}">
                            <button class="btn btn-outline-secondary" type="button" onclick="toggleTokenVis('tok_{{ $p['code'] }}','eye_{{ $p['code'] }}')"><i class="bi bi-eye" id="eye_{{ $p['code'] }}"></i></button>
                        </div>
                        <div style="font-size:10px;" class="text-muted ps-1">Token de acceso</div>
                    </div>
                </div>
                @endforeach
            </div>

            <div class="d-flex justify-content-end">
                <button type="submit" class="btn btn-sm btn-primary fw-semibold px-4"><i class="bi bi-save me-1"></i>Guardar</button>
            </div>
        </form>
    </div>

    {{-- ══════════════════════ BACKUP ══════════════════════ --}}
    <div id="pane-backup" class="cfg-pane d-none">
        <div class="row g-3">
            <div class="col-lg-7">
                <div class="card border-0 shadow-sm rounded-4 p-4 text-center">
                    <i class="bi bi-cloud-download text-success mb-2" style="font-size:3rem;"></i>
                    <h6 class="fw-bold mb-1">Descargar Backup</h6>
                    <p class="text-muted small mb-3">Genera un archivo <strong>.sql</strong> con toda la información: productos, ventas, clientes, mesas, pedidos, etc.</p>
                    <form action="{{ route('system.backup') }}" method="POST">
                        @csrf
                        <button type="submit" class="btn btn-success fw-bold px-5 shadow"><i class="bi bi-download me-2"></i>Descargar Ahora</button>
                    </form>
                    <div class="text-muted mt-2" style="font-size:11px;"><i class="bi bi-file-code me-1"></i>backup_restaurante_{{ now()->format('Y-m-d') }}.sql</div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="card border-0 shadow-sm rounded-4 p-3 bg-light h-100">
                    <h6 class="fw-bold mb-2"><i class="bi bi-arrow-repeat me-1 text-primary"></i>¿Cómo restaurar?</h6>
                    <ol class="small text-muted ps-3 mb-2">
                        <li>Abre <strong>phpMyAdmin</strong></li>
                        <li>Selecciona la BD <code class="text-success">{{ env('DB_DATABASE','restaurante_db') }}</code></li>
                        <li>Pestaña <strong>Importar</strong></li>
                        <li>Selecciona el <code>.sql</code></li>
                        <li>Clic en <strong>Continuar</strong></li>
                    </ol>
                    <div class="alert alert-warning py-1 px-2 small mb-0"><i class="bi bi-lightbulb me-1"></i>Haz backup diario. Guárdalo en Google Drive o USB.</div>
                </div>
            </div>
            <div class="col-12">
                <div class="card border-0 shadow-sm rounded-4 p-3">
                    <h6 class="fw-bold mb-2"><i class="bi bi-bar-chart me-1"></i>Resumen de la Base de Datos</h6>
                    <div class="row g-2 text-center">
                        @php
                            $resumen = [
                                ['label'=>'Pedidos','icon'=>'bi-cart-check','color'=>'primary','count'=>\App\Models\Order::count()],
                                ['label'=>'Clientes','icon'=>'bi-people','color'=>'success','count'=>\App\Models\Client::count()],
                                ['label'=>'Productos','icon'=>'bi-box-seam','color'=>'warning','count'=>\App\Models\Product::count()],
                                ['label'=>'Categorías','icon'=>'bi-tags','color'=>'info','count'=>\App\Models\Category::count()],
                                ['label'=>'Mesas','icon'=>'bi-grid-3x3','color'=>'secondary','count'=>\App\Models\Table::count()],
                                ['label'=>'Detalle','icon'=>'bi-list-ol','color'=>'danger','count'=>\App\Models\OrderDetail::count()],
                            ];
                        @endphp
                        @foreach($resumen as $item)
                        <div class="col-4 col-md-2">
                            <div class="border rounded-3 py-2 px-1">
                                <i class="bi {{ $item['icon'] }} fs-5 text-{{ $item['color'] }}"></i>
                                <div class="fw-bold text-{{ $item['color'] }}">{{ number_format($item['count']) }}</div>
                                <div class="text-muted" style="font-size:10px;">{{ $item['label'] }}</div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ══════════════════════ REINICIO ══════════════════════ --}}
    <div id="pane-reinicio" class="cfg-pane d-none">
        <div class="card border-0 shadow-sm rounded-4 border-top border-danger border-3">
            <div class="card-header bg-danger text-white fw-bold py-2 px-3 rounded-top-4">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>Reinicio Total del Sistema
            </div>
            <div class="card-body p-3">
                <div class="alert alert-danger py-2 small">
                    <strong>ADVERTENCIA:</strong> Esta acción eliminará <u>TODOS</u> los datos:
                    <ul class="mb-1 mt-1">
                        <li>Ventas, detalle de ventas, cuentas por cobrar</li>
                        <li>Reservas y gastos · Cajas y movimientos</li>
                        <li>Stock de productos (queda en cero)</li>
                        <li>Clientes registrados</li>
                    </ul>
                    <strong>Esta acción NO se puede deshacer. Haz un backup antes.</strong>
                </div>
                @php $claveSeguridad = substr(md5(date('Ymd').env('APP_KEY','secret')),0,6); @endphp
                <form action="{{ route('system.reset') }}" method="POST" id="form_reinicio">
                    @csrf
                    <input type="hidden" name="reset_type" id="hidden_reset_type" value="conservar">
                    <input type="hidden" name="password"   id="hidden_password" value="">
                    <div class="row g-2 mb-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold mb-1">Clave de Seguridad</label>
                            <input type="text" id="input_clave" class="form-control form-control-sm border-danger" placeholder="Escribe la clave de seguridad" autocomplete="off">
                            <div class="form-text small">La clave es: <strong>{{ $claveSeguridad }}</strong></div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold mb-1">Confirmación</label>
                            <input type="text" id="input_confirmacion" class="form-control form-control-sm border-danger" placeholder="Escribe CONFIRMAR para continuar" autocomplete="off">
                        </div>
                    </div>
                    <div class="d-flex gap-2 flex-wrap">
                        <button type="button" class="btn btn-warning btn-sm fw-bold flex-fill" onclick="ejecutarReinicio('conservar')">
                            <i class="bi bi-arrow-counterclockwise me-1"></i>Reiniciar Conservando Productos
                        </button>
                        <button type="button" class="btn btn-danger btn-sm fw-bold flex-fill" onclick="ejecutarReinicio('total')">
                            <i class="bi bi-trash3 me-1"></i>Reinicio Total
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>{{-- /tab-content-wrapper --}}

<style>
.cfg-tab {
    background: var(--card-bg);
    border: 1px solid #e0e0ee;
    color: var(--text-main);
    border-radius: 8px;
    font-size: 12px;
    padding: 5px 14px;
    transition: all .15s;
}
.cfg-tab.active {
    background: var(--primary, #ff8c00);
    color: #fff !important;
    border-color: transparent;
}
.cfg-tab:hover:not(.active) { background: #f0eeff; }

/* ── Secciones compactas con color, estilo gestionpro02 ── */
.cfg-pane .card { padding: 12px !important; }
.cfg-pane .form-label { margin-bottom: 2px !important; font-size: .74rem; }
.cfg-pane .row.g-2 { --bs-gutter-y: .4rem; }
.cfg-pane .row.g-3 { --bs-gutter-y: .5rem; }
.cfg-pane hr.my-3 { margin: .6rem 0 !important; }
.cfg-pane h6 { font-size: .82rem; margin-bottom: .35rem !important; }
.cfg-pane p.small, .cfg-pane .form-text { font-size: .7rem !important; margin-bottom: .3rem; }
.cfg-pane .form-control-sm, .cfg-pane .form-select-sm { padding: .28rem .5rem; font-size: .78rem; }

.cfg-section {
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 8px;
}
.cfg-section-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 6px;
    display: block;
}
.cfg-blue    { background: #eff6ff; }
.cfg-blue    .cfg-section-title { color: #1d4ed8; }
.cfg-green   { background: #f0fdf4; }
.cfg-green   .cfg-section-title { color: #15803d; }
.cfg-yellow  { background: #fffbeb; }
.cfg-yellow  .cfg-section-title { color: #b45309; }
.cfg-purple  { background: #f5f3ff; }
.cfg-purple  .cfg-section-title { color: #6d28d9; }
.cfg-pink    { background: #fdf2f8; }
.cfg-pink    .cfg-section-title { color: #be185d; }
.cfg-teal    { background: #f0fdfa; }
.cfg-teal    .cfg-section-title { color: #0f766e; }
.cfg-gray    { background: #f8fafc; }
.cfg-gray    .cfg-section-title { color: #475569; }
.cfg-orange  { background: #fff7ed; }
.cfg-orange  .cfg-section-title { color: #c2410c; }

.modo-envio-card {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: .75rem;
    padding: .7rem .9rem;
    cursor: pointer;
    height: 100%;
    transition: border-color .15s, background .15s;
}
.modo-envio-card:hover { border-color: #fdba74; }
.modo-envio-card input[type="radio"] { margin-top: .2rem; accent-color: #f97316; flex-shrink: 0; }
.modo-envio-card.is-active { border-color: #f97316; background: #fff7ed; }
.modo-envio-icon { font-size: 1.1rem; color: #f97316; flex-shrink: 0; margin-top: .1rem; }
</style>

<script>
// ── Tab switching ────────────────────────────────────────────────────────────
function switchTab(btn) {
    document.querySelectorAll('.cfg-tab').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.cfg-pane').forEach(p => p.classList.add('d-none'));
    btn.classList.add('active');
    document.querySelector(btn.dataset.target).classList.remove('d-none');
}

// ── Ticket preview ───────────────────────────────────────────────────────────
document.getElementById('input_ticket_footer')?.addEventListener('input', function() {
    const p = document.getElementById('preview_footer');
    if (p) p.textContent = this.value || '¡Gracias por su visita!';
});

// ── URL preset ───────────────────────────────────────────────────────────────
function selectPreset(btn) {
    document.querySelectorAll('.preset-btn').forEach(b => { b.classList.remove('btn-success'); b.classList.add('btn-outline-secondary'); });
    btn.classList.remove('btn-outline-secondary'); btn.classList.add('btn-success');
    const inp = document.getElementById('input_api_url');
    if (btn.dataset.url === 'custom') { inp.value=''; inp.removeAttribute('readonly'); inp.focus(); }
    else { inp.value = btn.dataset.url; inp.setAttribute('readonly',true); }
}

// ── Toggle consulta interna ──────────────────────────────────────────────────
function toggleConsultaInterna(on) {
    const b = document.getElementById('bloque_url');
    b.style.opacity = on ? '0.35' : '1';
    b.style.pointerEvents = on ? 'none' : 'auto';
}

// ── Ver/ocultar token ────────────────────────────────────────────────────────
function toggleTokenVis(inputId, iconId) {
    const inp = document.getElementById(inputId);
    const ico = document.getElementById(iconId);
    if (!inp || !ico) return;
    if (inp.type === 'password') { inp.type='text'; ico.classList.replace('bi-eye','bi-eye-slash'); }
    else { inp.type='password'; ico.classList.replace('bi-eye-slash','bi-eye'); }
}

// ── Probar API Perú ──────────────────────────────────────────────────────────
async function probarApi() {
    const el = document.getElementById('test_result');
    el.innerHTML = '<span class="text-secondary">Consultando...</span>';
    try {
        const r = await fetch('{{ route("document.search") }}?type=dni&number=00000000');
        const d = await r.json();
        el.innerHTML = (d.error && d.error.includes('token'))
            ? '<span class="text-danger"><i class="bi bi-x-circle me-1"></i>Token inválido</span>'
            : '<span class="text-success"><i class="bi bi-check-circle me-1"></i>Conexión OK</span>';
    } catch { el.innerHTML = '<span class="text-danger"><i class="bi bi-x-circle me-1"></i>Sin conexión</span>'; }
}

// ── Reinicio ─────────────────────────────────────────────────────────────────
function ejecutarReinicio(tipo) {
    const clave    = document.getElementById('input_clave').value.trim();
    const confirma = document.getElementById('input_confirmacion').value.trim();
    if (clave !== '{{ $claveSeguridad }}') { mostrarAlerta('Clave de seguridad incorrecta.', 'error'); return; }
    if (confirma !== 'CONFIRMAR')          { mostrarAlerta('Escribe exactamente: CONFIRMAR', 'error'); return; }
    const msg = tipo==='total' ? 'Se borrarán TODOS los datos incluyendo productos. Esta acción es irreversible.' : 'Se borrarán ventas, cajas y stock. Los productos se conservan. Esta acción es irreversible.';
    confirmarAccion(msg, {peligroso:true, titulo:'⚠️ Última confirmación', confirmText:'Sí, borrar todo'}).then(ok => {
        if (!ok) return;
        document.getElementById('hidden_reset_type').value = tipo;
        document.getElementById('hidden_password').value   = clave;
        document.getElementById('form_reinicio').submit();
    });
}

// ── Init ─────────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
    const toggle = document.querySelector('[name="api_consulta_interna"]');
    if (toggle?.checked) toggleConsultaInterna(true);
});
</script>
@endsection