@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">
    @php
        $tabs = [
            ['id'=>'empresa',  'icon'=>'bi-building',          'label'=>'Empresa'],
            ['id'=>'sunat',    'icon'=>'bi-receipt-cutoff',     'label'=>'SUNAT'],
            ['id'=>'pse',      'icon'=>'bi-plug-fill',            'label'=>'PSE'],
            ['id'=>'ticket',   'icon'=>'bi-printer',            'label'=>'Ticket'],
            ['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>

<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 p-3">
                <div class="row g-2 mb-2">
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold mb-1">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 mb-1">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 mb-1">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 mb-1">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 mb-1">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 mb-1">Logo</label>
                        <input type="file" name="company_logo" class="form-control form-control-sm" accept="image/*">
                    </div>
                </div>

                <hr class="my-3">
                <h6 class="fw-bold mb-2"><i class="bi bi-image me-1"></i> Pantalla de Inicio de Sesión</h6>
                <p class="text-muted small mb-2">La imagen y el texto que ven tus usuarios al entrar al sistema.</p>
                <div class="row g-2 mb-2">
                    <div class="col-md-4">
                        <label class="form-label small fw-semibold mb-1">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:70px;">
                        @endif
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small fw-semibold mb-1">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 mb-1">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 mb-1">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. Todo tu negocio en un solo lugar.">
                    </div>
                </div>
                <div class="d-flex justify-content-end mt-2">
                    <button type="submit" class="btn btn-sm btn-primary fw-semibold px-4"><i class="bi bi-save me-1"></i>Guardar SUNAT</button>
                </div>
            </div>
        </form>
    </div>

    {{-- ══════════════════════ SUNAT ══════════════════════ --}}
    <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 p-3">
                @php $ambiente = $settings['sunat_environment'] ?? 'beta'; $tieneCert = !empty($settings['sunat_cert_path']); @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="row g-2 mb-2">
                    <div class="col-md-4"><label class="form-label small fw-semibold mb-1">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 mb-1">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 mb-1">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 mb-1">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 mb-1">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 mb-1">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 mb-1">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 mb-1">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 mb-1">Urbanización</label><input type="text" name="sunat_urbanizacion" class="form-control form-control-sm" value="{{ $settings['sunat_urbanizacion']??'-' }}"></div>
                </div>
                <div class="row g-2 mb-2">
                    <div class="col-md-3"><label class="form-label small fw-semibold mb-1">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 mb-1">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 class="col-md-3"><label class="form-label small fw-semibold mb-1">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-4"><label class="form-label small fw-semibold mb-1">Clave SOL</label><input type="password" name="sunat_sol_pass" class="form-control form-control-sm" value="{{ $settings['sunat_sol_pass']??'' }}" placeholder="••••••••"></div>
                </div>
                <div class="row g-2 mb-2">
                    <div class="col-12">
                        <div class="border rounded-3 p-2 px-3 d-flex align-items-center justify-content-between" style="background:#f8f9fa;">
                            <div>
                                <label class="form-label small fw-bold mb-0" for="regimenSelva"><i class="bi bi-tree-fill text-success"></i> Régimen de Selva (exonerado de IGV)</label>
                                <div class="small text-muted" 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). No depende de dónde sea el cliente. Al activarlo, todas las ventas
                                    (Boleta, Factura y Nota de Venta) se calculan sin IGV. Verifica con tu contador antes de activarlo.
                                </div>
                            </div>
                            <div class="form-check form-switch fs-4 mb-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>
                </div>
                <div class="row g-2 mb-2">
                    <div class="col-md-8">
                        <label class="form-label small fw-semibold mb-1"><i class="bi bi-shield-lock"></i> 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 mb-1">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 class="d-flex justify-content-end mt-2">
                    <button type="submit" class="btn btn-sm btn-primary fw-semibold px-4"><i class="bi bi-save me-1"></i>Guardar SUNAT</button>
                </div>
            </div>
        </form>
    </div>

    {{-- ══════════════════════ PSE ══════════════════════ --}}
    <div id="pane-pse" class="cfg-pane d-none">
        <form action="{{ route('settings.update') }}" method="POST">
            @csrf
            @php
                $pseProveedor = $settings['sunat_pse_proveedor'] ?? '';
                $pseEntorno   = $settings['sunat_pse_entorno'] ?? 'test';
            @endphp
            <div class="card border-0 shadow-sm rounded-4 p-3">

                {{-- Banner informativo --}}
                <div class="alert py-2 px-3 small mb-3 border-0 rounded-3 d-flex align-items-center gap-2" style="background:#f0fdf4;">
                    <i class="bi bi-plug-fill text-success fs-5"></i>
                    <div><strong>Modo PSE</strong> — El proveedor de servicios electrónicos firma y envía tus comprobantes a SUNAT. No necesitas certificado digital propio.</div>
                </div>

                {{-- Selector de proveedor --}}
                <div class="mb-3">
                    <label class="form-label small fw-semibold mb-2">Proveedor PSE</label>
                    <div class="row g-2">
                        <div class="col-6 col-md-3">
                            <div class="pse-provider-card p-3 text-center rounded-3 {{ $pseProveedor==='nubefact'?'border-success':'border' }}"
                                 onclick="selectPSE('nubefact',this)"
                                 style="cursor:pointer;border:2px solid {{ $pseProveedor==='nubefact'?'#22c55e':'#dee2e6' }};background:{{ $pseProveedor==='nubefact'?'#f0fdf4':'#fff' }};transition:all .2s;">
                                <div style="font-size:1.5rem;">🟢</div>
                                <div class="fw-bold mt-1" style="font-size:.8rem;">Nubefact</div>
                                <small class="text-muted" style="font-size:.7rem;">Token API</small>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="pse-provider-card p-3 text-center rounded-3 {{ $pseProveedor==='qpse'?'border-success':'' }}"
                                 onclick="selectPSE('qpse',this)"
                                 style="cursor:pointer;border:2px solid {{ $pseProveedor==='qpse'?'#22c55e':'#dee2e6' }};background:{{ $pseProveedor==='qpse'?'#f0fdf4':'#fff' }};transition:all .2s;">
                                <div style="font-size:1.5rem;">🟢</div>
                                <div class="fw-bold mt-1" style="font-size:.8rem;">QPSE</div>
                                <small class="text-muted" style="font-size:.7rem;">Usuario + Clave</small>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="p-3 text-center rounded-3" style="border:2px dashed #dee2e6;background:#f8f9fa;">
                                <div style="font-size:1.5rem;">⏳</div>
                                <div class="fw-semibold mt-1 text-muted" style="font-size:.8rem;">Gior Technology</div>
                                <small class="text-muted" style="font-size:.7rem;">Próximamente</small>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="p-3 text-center rounded-3" style="border:2px dashed #dee2e6;background:#f8f9fa;">
                                <div style="font-size:1.5rem;">⏳</div>
                                <div class="fw-semibold mt-1 text-muted" style="font-size:.8rem;">SendFact</div>
                                <small class="text-muted" style="font-size:.7rem;">Próximamente</small>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="sunat_pse_proveedor" id="pse_proveedor_input" value="{{ $pseProveedor }}">
                </div>

                {{-- Info del proveedor seleccionado --}}
                <div id="pse_info_box" class="alert py-2 px-3 small mb-3 border-0 rounded-3 {{ empty($pseProveedor)?'d-none':'' }}" style="background:#eff6ff;">
                    @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>
                    @endif
                </div>

                {{-- Campos según proveedor --}}
                <div class="row g-2 mb-2">
                    <div class="col-md-8">
                        <label class="form-label small fw-semibold mb-1">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-md-4">
                        <label class="form-label small fw-semibold mb-1">Entorno</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>

                {{-- Campos QPSE --}}
                <div id="campos_qpse" class="row g-2 mb-2 {{ $pseProveedor==='qpse'?'':'d-none' }}">
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold mb-1">Usuario QPSE</label>
                        <input type="text" name="sunat_pse_usuario" class="form-control form-control-sm"
                               value="{{ $settings['sunat_pse_usuario']??'' }}" placeholder="usuario@empresa">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold mb-1">Clave QPSE</label>
                        <input type="password" name="sunat_pse_clave" class="form-control form-control-sm"
                               value="{{ $settings['sunat_pse_clave']??'' }}" placeholder="••••••••">
                    </div>
                </div>

                <div class="alert py-2 px-3 small border-0 rounded-3 mb-3" style="background:#fffbeb;">
                    <i class="bi bi-info-circle me-1"></i>
                    <strong>Importante:</strong> Configura primero tu RUC, Razón Social y datos fiscales en la pestaña <strong>SUNAT</strong> antes de activar el PSE.
                </div>

                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-sm fw-semibold px-4 text-white" style="background:#f97316;">
                        <i class="bi bi-save me-1"></i> Guardar PSE
                    </button>
                </div>
            </div>
        </form>
    </div>

    <script>
    function selectPSE(proveedor, card) {
        document.getElementById('pse_proveedor_input').value = proveedor;
        document.querySelectorAll('.pse-provider-card').forEach(c => {
            c.style.borderColor = '#dee2e6';
            c.style.background  = '#fff';
        });
        card.style.borderColor = '#22c55e';
        card.style.background  = '#f0fdf4';
        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>'
        };
        const box = document.getElementById('pse_info_box');
        box.innerHTML = infos[proveedor] || '';
        box.classList.toggle('d-none', !infos[proveedor]);
        document.getElementById('campos_qpse').classList.toggle('d-none', proveedor !== 'qpse');
    }
    </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>

    {{-- ══════════════════════ 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; }
</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