@extends('layouts.app')
@section('title', 'Configuracoes - ERP-PLUS')
@section('page_title', 'Configuracoes')
@section('page_subtitle', 'Parametros gerais do sistema — acesso restrito ao administrador.')
@push('styles')
<style>
    .settings-group { border-bottom: 1px solid var(--border); padding: 20px 16px; }
    .settings-group:last-child { border-bottom: 0; }
    .settings-group h3 { margin: 0 0 4px; font-size: 15px; }
    .settings-group .group-desc { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
    .inline-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }

    .cfg-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
    .cfg-tab  { padding: 9px 18px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--muted);
                border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-top: 0; border-left: 0; border-right: 0; }
    .cfg-tab:hover { color: var(--text); }
    .cfg-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

    .cfg-pane { display: none; }
    .cfg-pane.active { display: block; }

    .webhook-url { font-family: monospace; font-size: 12px; background: var(--bg); border: 1px solid var(--border);
                   padding: 6px 10px; border-radius: 5px; word-break: break-all; display:block; margin-top:6px; }
    .gateway-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:20px;
                     font-size:12px; font-weight:600; }
    .gateway-badge.active-gw { background:var(--primary); color:#fff; }
    .gateway-badge.inactive-gw { background:var(--bg); color:var(--muted); border:1px solid var(--border); }
</style>
@endpush
@section('content')
<form method="POST" action="{{ route('settings.update') }}" enctype="multipart/form-data">
    @csrf

    @php $activeGateway = setting('payment_gateway', 'asaas'); @endphp

    <div class="cfg-tabs">
        <button type="button" class="cfg-tab active" data-pane="geral">Geral</button>
        <button type="button" class="cfg-tab" data-pane="email">E-mail</button>
        <button type="button" class="cfg-tab" data-pane="gateway">Gateway padrao</button>
        <button type="button" class="cfg-tab" data-pane="asaas">
            Asaas
            @if ($activeGateway === 'asaas')
                <span class="gateway-badge active-gw" style="margin-left:4px">Ativo</span>
            @endif
        </button>
        <button type="button" class="cfg-tab" data-pane="mercadopago">
            Mercado Pago
            @if ($activeGateway === 'mercadopago')
                <span class="gateway-badge active-gw" style="margin-left:4px">Ativo</span>
            @endif
        </button>
        <button type="button" class="cfg-tab" data-pane="nfse">NFS-e</button>
        <button type="button" class="cfg-tab" data-pane="interface">Interface</button>
    </div>

    {{-- ABA: GERAL --}}
    <div class="cfg-pane active" id="pane-geral">
        <div class="panel">
            <div class="panel-header">
                <div>
                    <h2>Parametros de sincronizacao</h2>
                    <span>Prazos e regras para consulta e manifestacao de documentos.</span>
                </div>
            </div>

            <div class="settings-group">
                <h3>Prazo para busca de XML</h3>
                <div class="group-desc">Define em quantos dias antes do vencimento (NT 2020.001) o sistema comeca a alertar sobre documentos sem manifestacao conclusiva.</div>
                <div class="form-field">
                    <select name="xml_deadline_days" required>
                        @foreach ([10, 20, 30, 45, 60, 90] as $opt)
                            <option value="{{ $opt }}" @selected((int) setting('xml_deadline_days', 90) === $opt)>{{ $opt }} dias</option>
                        @endforeach
                    </select>
                    <span class="inline-hint">O valor padrao e 90 dias conforme legislacao.</span>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel-header">
                <div>
                    <h2>Dados da empresa responsavel</h2>
                    <span>Identificacao do responsavel pelo sistema, usada em relatorios e exportacoes.</span>
                </div>
            </div>

            <div class="settings-group">
                <div class="form-grid" style="padding:0">
                    <div class="form-field">
                        <label for="company_name">Razao social</label>
                        <input id="company_name" name="company_name" value="{{ old('company_name', setting('company_name')) }}" maxlength="255">
                    </div>

                    <div class="form-field">
                        <label for="company_cnpj">CNPJ</label>
                        <input id="company_cnpj" name="company_cnpj" value="{{ old('company_cnpj', setting('company_cnpj')) }}" maxlength="20" placeholder="Apenas numeros">
                    </div>

                    <div class="form-field full">
                        <label for="company_address">Endereco</label>
                        <input id="company_address" name="company_address" value="{{ old('company_address', setting('company_address')) }}" maxlength="500" placeholder="Logradouro, numero, bairro, cidade/UF">
                    </div>

                    <div class="form-field">
                        <label for="company_phone">Telefone</label>
                        <input id="company_phone" name="company_phone" value="{{ old('company_phone', setting('company_phone')) }}" maxlength="30" placeholder="(XX) XXXXX-XXXX">
                    </div>

                    <div class="form-field">
                        <label for="company_email">E-mail</label>
                        <input id="company_email" name="company_email" type="email" value="{{ old('company_email', setting('company_email')) }}" maxlength="255" placeholder="email@exemplo.com">
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ABA: EMAIL --}}
    <div class="cfg-pane" id="pane-email">
        <div class="panel">
            <div class="panel-header">
                <div>
                    <h2>Configuracao de E-mail (SMTP)</h2>
                    <span>Defina o servidor de saida para envio de e-mails de verificacao, recuperacao de senha e notificacoes.</span>
                </div>
            </div>

            <div class="settings-group">
                <h3>Servidor SMTP</h3>
                <div class="form-grid" style="padding:0">
                    <div class="form-field">
                        <label for="mail_host">Host SMTP</label>
                        <input id="mail_host" name="mail_host" value="{{ old('mail_host', setting('mail_host')) }}" placeholder="smtp.gmail.com">
                    </div>

                    <div class="form-field">
                        <label for="mail_port">Porta</label>
                        <input id="mail_port" name="mail_port" type="number" value="{{ old('mail_port', setting('mail_port', '587')) }}" placeholder="587">
                    </div>

                    <div class="form-field">
                        <label for="mail_username">Usuario SMTP</label>
                        <input id="mail_username" name="mail_username" value="{{ old('mail_username', setting('mail_username')) }}" placeholder="seu@email.com">
                    </div>

                    <div class="form-field">
                        <label for="mail_password">Senha SMTP</label>
                        <input id="mail_password" name="mail_password" type="password" value="{{ old('mail_password', setting('mail_password')) }}" placeholder="••••••••" autocomplete="new-password">
                        <span class="inline-hint">Deixe em branco para nao alterar a senha salva.</span>
                    </div>

                    <div class="form-field">
                        <label for="mail_encryption">Criptografia</label>
                        <select id="mail_encryption" name="mail_encryption">
                            <option value="tls" @selected(setting('mail_encryption', 'tls') === 'tls')>TLS (porta 587)</option>
                            <option value="ssl" @selected(setting('mail_encryption', 'tls') === 'ssl')>SSL (porta 465)</option>
                            <option value=""    @selected(setting('mail_encryption', 'tls') === '')>Nenhuma</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="settings-group">
                <h3>Remetente</h3>
                <div class="form-grid" style="padding:0">
                    <div class="form-field">
                        <label for="mail_from_address">E-mail de envio</label>
                        <input id="mail_from_address" name="mail_from_address" type="email"
                               value="{{ old('mail_from_address', setting('mail_from_address', 'noreply@manifesto.app')) }}"
                               placeholder="noreply@suaempresa.com">
                    </div>

                    <div class="form-field">
                        <label for="mail_from_name">Nome do remetente</label>
                        <input id="mail_from_name" name="mail_from_name"
                               value="{{ old('mail_from_name', setting('mail_from_name', 'ERP-PLUS')) }}"
                               placeholder="ERP-PLUS">
                    </div>
                </div>
            </div>

            <div class="settings-group">
                <h3>Historico de e-mails</h3>
                <div class="group-desc">Todos os e-mails enviados pelo sistema sao registrados automaticamente.</div>
                <a class="button" href="{{ route('email-logs.index') }}">Ver historico de e-mails enviados</a>
            </div>
        </div>
    </div>

    {{-- ABA: GATEWAY PADRAO --}}
    <div class="cfg-pane" id="pane-gateway">
        <div class="panel">
            <div class="panel-header">
                <div>
                    <h2>Gateway padrao de cobrancas</h2>
                    <span>Selecione qual gateway sera usado para gerar cobranças e assinaturas dos clientes.</span>
                </div>
            </div>

            <div class="settings-group">
                <div class="form-field" style="max-width:340px">
                    <label for="payment_gateway">Gateway ativo</label>
                    <select id="payment_gateway" name="payment_gateway">
                        <option value="asaas"       @selected($activeGateway === 'asaas')>Asaas</option>
                        <option value="mercadopago" @selected($activeGateway === 'mercadopago')>Mercado Pago</option>
                    </select>
                    <span class="inline-hint">Apenas um gateway e utilizado por vez. Configure as credenciais na aba correspondente.</span>
                </div>

                <div style="margin-top:16px;display:flex;gap:12px;flex-wrap:wrap">
                    <div style="padding:12px 16px;border:1px solid var(--border);border-radius:8px;min-width:200px">
                        <div style="font-size:12px;color:var(--muted);margin-bottom:4px">Asaas</div>
                        <span class="gateway-badge {{ $activeGateway === 'asaas' ? 'active-gw' : 'inactive-gw' }}">
                            {{ $activeGateway === 'asaas' ? 'Gateway ativo' : 'Inativo' }}
                        </span>
                    </div>
                    <div style="padding:12px 16px;border:1px solid var(--border);border-radius:8px;min-width:200px">
                        <div style="font-size:12px;color:var(--muted);margin-bottom:4px">Mercado Pago</div>
                        <span class="gateway-badge {{ $activeGateway === 'mercadopago' ? 'active-gw' : 'inactive-gw' }}">
                            {{ $activeGateway === 'mercadopago' ? 'Gateway ativo' : 'Inativo' }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ABA: ASAAS --}}
    <div class="cfg-pane" id="pane-asaas">
        <div class="panel">
            <div class="panel-header">
                <div>
                    <h2>Integracao Asaas</h2>
                    <span>Cobranca recorrente e gerenciamento de assinaturas via Asaas.</span>
                </div>
                @if ($activeGateway === 'asaas')
                    <span class="gateway-badge active-gw">Gateway ativo</span>
                @endif
            </div>

            <div class="settings-group">
                <h3>Credenciais</h3>
                <div class="form-grid" style="padding:0">
                    <div class="form-field">
                        <label for="asaas_environment">Ambiente</label>
                        <select id="asaas_environment" name="asaas_environment">
                            <option value="sandbox"    @selected(setting('asaas_environment', 'sandbox') === 'sandbox')>Sandbox (testes)</option>
                            <option value="production" @selected(setting('asaas_environment', 'sandbox') === 'production')>Producao</option>
                        </select>
                    </div>

                    <div class="form-field full">
                        <label for="asaas_api_key">Token de API</label>
                        <input id="asaas_api_key" name="asaas_api_key" value="{{ setting('asaas_api_key') }}" maxlength="255" placeholder="$aact_...">
                        <span class="inline-hint">
                            Gerado em: Painel Asaas &rarr; Configuracoes &rarr; Integracoes &rarr; API.
                        </span>
                    </div>
                </div>
            </div>

            <div class="settings-group">
                <h3>Webhook</h3>
                <div class="group-desc">Configure esta URL no painel do Asaas para receber notificacoes de pagamento automaticamente.</div>
                <div>
                    <span style="font-size:12px;color:var(--muted)">URL do webhook:</span>
                    <code class="webhook-url">{{ url('api/webhooks/asaas') }}</code>
                </div>
                <span class="inline-hint" style="margin-top:8px">
                    Painel Asaas &rarr; Configuracoes &rarr; Integracoes &rarr; Notificacoes &rarr; Adicionar endpoint.
                </span>
            </div>
        </div>
    </div>

    {{-- ABA: MERCADO PAGO --}}
    <div class="cfg-pane" id="pane-mercadopago">
        <div class="panel">
            <div class="panel-header">
                <div>
                    <h2>Integracao Mercado Pago</h2>
                    <span>Cobranca recorrente via Mercado Pago com aprovacao pelo cliente.</span>
                </div>
                @if ($activeGateway === 'mercadopago')
                    <span class="gateway-badge active-gw">Gateway ativo</span>
                @endif
            </div>

            <div class="settings-group">
                <h3>Credenciais</h3>
                <div class="form-grid" style="padding:0">
                    <div class="form-field">
                        <label for="mercadopago_environment">Ambiente</label>
                        <select id="mercadopago_environment" name="mercadopago_environment">
                            <option value="sandbox"    @selected(setting('mercadopago_environment', 'sandbox') === 'sandbox')>Sandbox (testes)</option>
                            <option value="production" @selected(setting('mercadopago_environment', 'sandbox') === 'production')>Producao</option>
                        </select>
                    </div>

                    <div class="form-field full">
                        <label for="mercadopago_access_token">Access Token</label>
                        <input id="mercadopago_access_token" name="mercadopago_access_token"
                               value="{{ setting('mercadopago_access_token') }}" maxlength="255" placeholder="APP_USR-...">
                        <span class="inline-hint">
                            Painel MP &rarr; Seu negocio &rarr; Configuracoes &rarr; Gestao e administracao &rarr; Credenciais.
                        </span>
                    </div>

                    <div class="form-field full">
                        <label for="mercadopago_public_key">Public Key</label>
                        <input id="mercadopago_public_key" name="mercadopago_public_key"
                               value="{{ setting('mercadopago_public_key') }}" maxlength="255" placeholder="APP_USR-...">
                        <span class="inline-hint">Usada no checkout do cliente. Nao e um segredo.</span>
                    </div>
                </div>
            </div>

            <div class="settings-group">
                <h3>Webhook</h3>
                <div class="group-desc">Configure esta URL no painel do Mercado Pago para receber notificacoes de pagamento automaticamente.</div>
                <div>
                    <span style="font-size:12px;color:var(--muted)">URL do webhook:</span>
                    <code class="webhook-url">{{ url('api/webhooks/mercadopago') }}</code>
                </div>
                <span class="inline-hint" style="margin-top:8px">
                    Painel MP &rarr; Seu negocio &rarr; Webhooks &rarr; Adicionar.
                    Selecione os eventos: <strong>subscription_preapproval</strong> e <strong>subscription_authorized_payment</strong>.
                </span>
            </div>
        </div>
    </div>

    {{-- ABA: NFS-e --}}
    <div class="cfg-pane" id="pane-nfse">

        <div class="panel">
            <div class="panel-header">
                <div>
                    <h2>Portal Nacional da NFS-e</h2>
                    <span>Endpoints e ambiente global de emissao de notas fiscais de servico.</span>
                </div>
            </div>

            <div class="settings-group">
                <h3>Ambiente padrao</h3>
                <div class="group-desc">Define o ambiente que sera pre-selecionado ao criar novas configuracoes fiscais de empresa.</div>
                <div class="form-field" style="max-width:320px">
                    <label for="nfse_default_ambiente">Ambiente padrao</label>
                    <select id="nfse_default_ambiente" name="nfse_default_ambiente">
                        <option value="homologacao" @selected(setting('nfse_default_ambiente', 'homologacao') === 'homologacao')>Homologacao (testes)</option>
                        <option value="producao"    @selected(setting('nfse_default_ambiente', 'homologacao') === 'producao')>Producao</option>
                    </select>
                    <span class="inline-hint">Cada empresa pode sobrescrever esse valor na sua propria configuracao fiscal.</span>
                </div>
            </div>

            <div class="settings-group">
                <h3>URLs do Portal Nacional</h3>
                <div class="group-desc">Endpoints da API REST do Emissor Nacional SEFAZ. Altere apenas se o governo publicar novos enderecos.</div>
                <div class="form-grid" style="padding:0">
                    <div class="form-field full">
                        <label for="nfse_portal_url_producao">URL API — Producao</label>
                        <input id="nfse_portal_url_producao" name="nfse_portal_url_producao"
                               value="{{ old('nfse_portal_url_producao', setting('nfse_portal_url_producao', 'https://www.nfse.gov.br/EmissorNacional/api/v1')) }}"
                               placeholder="https://www.nfse.gov.br/EmissorNacional/api/v1" maxlength="500">
                    </div>
                    <div class="form-field full">
                        <label for="nfse_portal_url_homologacao">URL API — Homologacao</label>
                        <input id="nfse_portal_url_homologacao" name="nfse_portal_url_homologacao"
                               value="{{ old('nfse_portal_url_homologacao', setting('nfse_portal_url_homologacao', 'https://hom.nfse.gov.br/EmissorNacional/api/v1')) }}"
                               placeholder="https://hom.nfse.gov.br/EmissorNacional/api/v1" maxlength="500">
                    </div>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel-header">
                <div>
                    <h2>Emissao automatica global</h2>
                    <span>Controle o comportamento da emissao automatica apos pagamento confirmado.</span>
                </div>
            </div>

            <div class="settings-group">
                <h3>Emissao automatica apos pagamento</h3>
                <div class="group-desc">Quando ativo, o sistema dispara o job de emissao automaticamente ao confirmar um pagamento. Cada plano deve ter <strong>nfse_auto_emit</strong> habilitado para que a empresa seja contemplada.</div>
                <div class="form-field" style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
                    <input type="checkbox" id="nfse_emit_on_payment" name="nfse_emit_on_payment" value="1"
                           @checked(setting('nfse_emit_on_payment') == '1')
                           style="width:auto;min-height:0">
                    <label for="nfse_emit_on_payment" style="margin:0;font-size:14px">Habilitar emissao automatica de NFS-e apos pagamento</label>
                </div>
                <span class="inline-hint">Requer que as filas (queues) estejam ativas. Use <code>php artisan queue:work</code>.</span>
            </div>

            <div class="settings-group">
                <h3>Envio de e-mail com a nota</h3>
                <div class="group-desc">Envia automaticamente o PDF e XML da NFS-e ao tomador por e-mail apos a emissao bem-sucedida.</div>
                <div class="form-field" style="display:flex;align-items:center;gap:8px">
                    <input type="checkbox" id="nfse_email_send" name="nfse_email_send" value="1"
                           @checked(setting('nfse_email_send', '1') == '1')
                           style="width:auto;min-height:0">
                    <label for="nfse_email_send" style="margin:0;font-size:14px">Enviar e-mail ao tomador apos emissao</label>
                </div>
                <span class="inline-hint">O e-mail SMTP deve estar configurado na aba <strong>E-mail</strong>.</span>
            </div>

            <div class="settings-group">
                <h3>Prazo para cancelamento</h3>
                <div class="group-desc">Janela maxima (em horas) que o sistema permite solicitar o cancelamento de uma NFS-e emitida. Apos esse prazo o botao de cancelamento e desabilitado.</div>
                <div class="form-field" style="max-width:200px">
                    <label for="nfse_cancel_hours">Horas apos emissao</label>
                    <input id="nfse_cancel_hours" name="nfse_cancel_hours" type="number" min="1" max="720"
                           value="{{ old('nfse_cancel_hours', setting('nfse_cancel_hours', '24')) }}"
                           placeholder="24">
                    <span class="inline-hint">Padrao: 24 horas. Consulte a legislacao municipal.</span>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel-header">
                <div>
                    <h2>Certificado digital global (A1)</h2>
                    <span>Certificado .pfx usado como fallback quando a empresa nao possui certificado proprio.</span>
                </div>
                @php $certPath = setting('nfse_cert_path'); @endphp
                @if ($certPath && \Illuminate\Support\Facades\Storage::exists($certPath))
                    <span class="pill ok" style="min-width:0;font-size:12px">Certificado carregado</span>
                @else
                    <span class="pill neutral" style="min-width:0;font-size:12px">Sem certificado</span>
                @endif
            </div>

            <div class="settings-group">
                <div class="group-desc">
                    Em arquiteturas onde um unico certificado assina por todas as empresas (procuracao eletronica),
                    faca o upload aqui. Caso contrario, cada empresa configura o seu proprio certificado em
                    <strong>NFS-e &rarr; Configuracao Fiscal</strong>.
                </div>

                {{-- Status do certificado atual --}}
                @if ($certPath && \Illuminate\Support\Facades\Storage::exists($certPath))
                @php
                    $certInfo   = session('nfse_cert_info') ?? [];
                    $certCnpj   = setting('nfse_cert_cnpj', '');
                    $certValid  = setting('nfse_cert_valid_until', '');
                    $certIssuer = setting('nfse_cert_issuer', '');
                    $daysLeft   = $certValid ? \Carbon\Carbon::parse($certValid)->diffInDays(now(), false) * -1 : null;
                @endphp
                <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:14px 16px;margin-bottom:16px;display:grid;gap:8px;font-size:13px">
                    <div style="font-weight:700;color:#166534;margin-bottom:2px">Certificado atual</div>
                    @if ($certIssuer)
                    <div style="display:flex;gap:8px"><span style="color:var(--muted);min-width:120px">Emitente</span><span>{{ $certIssuer }}</span></div>
                    @endif
                    @if ($certCnpj)
                    <div style="display:flex;gap:8px"><span style="color:var(--muted);min-width:120px">CNPJ</span><span style="font-family:monospace">{{ preg_replace('/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/', '$1.$2.$3/$4-$5', $certCnpj) }}</span></div>
                    @endif
                    @if ($certValid)
                    <div style="display:flex;gap:8px;align-items:center">
                        <span style="color:var(--muted);min-width:120px">Validade</span>
                        <span>{{ \Carbon\Carbon::parse($certValid)->format('d/m/Y') }}</span>
                        @if ($daysLeft !== null)
                            @if ($daysLeft < 0)
                                <span class="pill danger" style="min-width:0;font-size:11px">Vencido</span>
                            @elseif ($daysLeft <= 30)
                                <span class="pill" style="min-width:0;font-size:11px;background:#fef9c3;color:#a16207;border-color:#fde68a">{{ $daysLeft }} dias restantes</span>
                            @else
                                <span class="pill ok" style="min-width:0;font-size:11px">{{ $daysLeft }} dias restantes</span>
                            @endif
                        @endif
                    </div>
                    @endif
                    <div style="font-size:12px;color:var(--muted);margin-top:2px">Para substituir, faca um novo upload abaixo.</div>
                </div>
                @endif

                {{-- Upload --}}
                <div class="form-grid" style="padding:0">
                    <div class="form-field full">
                        <label for="nfse_cert_file">
                            {{ $certPath && \Illuminate\Support\Facades\Storage::exists($certPath) ? 'Novo certificado (substituir)' : 'Certificado digital A1' }}
                            <span style="font-weight:400;color:var(--muted)"> — .pfx ou .p12</span>
                        </label>

                        {{-- Drop zone --}}
                        <div id="drop-zone"
                             onclick="document.getElementById('nfse_cert_file').click()"
                             ondragover="event.preventDefault();this.style.borderColor='var(--primary)'"
                             ondragleave="this.style.borderColor='var(--border)'"
                             ondrop="handleDrop(event)"
                             style="border:2px dashed var(--border);border-radius:8px;padding:28px 20px;text-align:center;cursor:pointer;background:var(--surface-2);transition:border-color .15s">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="margin:0 auto 8px;display:block"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                            <div id="drop-label" style="font-size:14px;color:var(--muted)">
                                Arraste o arquivo aqui ou <span style="color:var(--primary);font-weight:600">clique para selecionar</span>
                            </div>
                            <div style="font-size:12px;color:#cbd5e1;margin-top:4px">.pfx ou .p12 — maximo 2 MB</div>
                        </div>
                        <input id="nfse_cert_file" name="nfse_cert_file" type="file"
                               accept=".pfx,.p12" style="display:none"
                               onchange="showFileName(this)">
                        @error('nfse_cert_file') <div class="error" style="margin-top:4px">{{ $message }}</div> @enderror
                    </div>

                    <div class="form-field">
                        <label for="nfse_cert_password">Senha do certificado</label>
                        <div style="position:relative">
                            <input id="nfse_cert_password" name="nfse_cert_password" type="password"
                                   placeholder="{{ setting('nfse_cert_path') ? '••••••• (manter atual)' : 'Digite a senha' }}"
                                   maxlength="255" autocomplete="new-password" style="padding-right:40px">
                            <button type="button" onclick="togglePwd()" tabindex="-1"
                                    style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);padding:0">
                                <svg id="pwd-eye" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            </button>
                        </div>
                        <span class="inline-hint">Armazenada criptografada. Deixe em branco para manter a atual.</span>
                        @error('nfse_cert_password') <div class="error" style="margin-top:4px">{{ $message }}</div> @enderror
                    </div>

                    <div class="form-field">
                        <label for="nfse_cert_alert_days">Alertar antes do vencimento (dias)</label>
                        <input id="nfse_cert_alert_days" name="nfse_cert_alert_days" type="number" min="1" max="90"
                               value="{{ old('nfse_cert_alert_days', setting('nfse_cert_alert_days', '30')) }}"
                               placeholder="30">
                        <span class="inline-hint">Envia notificacao quando restarem X dias para o vencimento.</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel-header">
                <div>
                    <h2>Numeracao de RPS</h2>
                    <span>Controle do contador de Recibo Provisorio de Servicos por empresa.</span>
                </div>
            </div>
            <div class="settings-group">
                <div class="group-desc">
                    A numeracao do RPS e controlada automaticamente por empresa — cada nova nota incrementa o contador.
                    O numero atual pode ser consultado e ajustado diretamente no banco de dados se necessario
                    (campo <code>rps_numero</code> da tabela <code>nfse_invoices</code>).
                </div>
                <div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:8px">
                    <a class="button" href="{{ route('nfse.invoices.index') }}" style="font-size:13px">
                        Ver todas as NFS-e emitidas
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- ABA: INTERFACE --}}
    <div class="cfg-pane" id="pane-interface">
        <div class="panel">
            <div class="panel-header">
                <div>
                    <h2>Comportamento do Menu Lateral</h2>
                    <span>Define como os grupos do menu devem carregar por padrão para todos os usuários.</span>
                </div>
            </div>

            <div class="settings-group">
                <h3>Estado padrão dos grupos do menu</h3>
                <div class="group-desc">
                    Ao entrar no sistema, os grupos do sidebar carregarão expandidos ou retraídos.
                    O usuário pode expandir/retrair manualmente — a preferência individual fica salva no navegador.
                </div>

                <div style="display:flex;flex-direction:column;gap:10px;margin-top:12px;">
                    @php $navState = setting('nav_default_state', 'expanded'); @endphp

                    <label style="display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:14px 16px;border:2px solid {{ $navState === 'expanded' ? 'var(--primary)' : 'var(--border)' }};border-radius:8px;background:{{ $navState === 'expanded' ? '#eff6ff' : '#fff' }}">
                        <input type="radio" name="nav_default_state" value="expanded" @checked($navState === 'expanded') style="margin-top:3px;accent-color:var(--primary)">
                        <div>
                            <div style="font-weight:600;font-size:14px;">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:4px"><polyline points="6 9 12 15 18 9"/></svg>
                                Expandido (padrão)
                            </div>
                            <div style="font-size:12px;color:var(--muted);margin-top:3px">Todos os grupos ficam abertos ao carregar a página. O usuário pode retrair manualmente.</div>
                        </div>
                    </label>

                    <label style="display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:14px 16px;border:2px solid {{ $navState === 'collapsed' ? 'var(--primary)' : 'var(--border)' }};border-radius:8px;background:{{ $navState === 'collapsed' ? '#eff6ff' : '#fff' }}">
                        <input type="radio" name="nav_default_state" value="collapsed" @checked($navState === 'collapsed') style="margin-top:3px;accent-color:var(--primary)">
                        <div>
                            <div style="font-weight:600;font-size:14px;">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:4px"><polyline points="18 15 12 9 6 15"/></svg>
                                Retraído
                            </div>
                            <div style="font-size:12px;color:var(--muted);margin-top:3px">Todos os grupos ficam fechados ao carregar. Apenas o grupo da página atual é aberto automaticamente.</div>
                        </div>
                    </label>
                </div>

                <div style="margin-top:14px;padding:10px 14px;background:#f8fafc;border:1px solid var(--border);border-radius:6px;font-size:12px;color:var(--muted);">
                    <strong>Nota:</strong> A preferência salva pelo usuário no navegador tem prioridade sobre esta configuração. Para redefinir, o usuário pode limpar o armazenamento local do navegador.
                </div>
            </div>
        </div>
    </div>

    <div class="form-actions" style="padding:0;justify-content:flex-start">
        <button class="button primary" type="submit">Salvar configuracoes</button>
    </div>
</form>

@push('scripts')
<script>
(function () {
    const tabs  = document.querySelectorAll('.cfg-tab');
    const panes = document.querySelectorAll('.cfg-pane');

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            tabs.forEach(t  => t.classList.remove('active'));
            panes.forEach(p => p.classList.remove('active'));
            tab.classList.add('active');
            document.getElementById('pane-' + tab.dataset.pane).classList.add('active');
        });
    });

    // Abrir aba NFS-e se houver erro de certificado
    @if ($errors->hasAny(['nfse_cert_file', 'nfse_cert_password']))
    tabs.forEach(t => t.classList.remove('active'));
    panes.forEach(p => p.classList.remove('active'));
    document.querySelector('[data-pane="nfse"]').classList.add('active');
    document.getElementById('pane-nfse').classList.add('active');
    @endif
})();

function showFileName(input) {
    var zone  = document.getElementById('drop-zone');
    var label = document.getElementById('drop-label');
    var file  = input.files[0];
    if (!file) return;
    var size  = (file.size / 1024).toFixed(1) + ' KB';
    label.innerHTML = '<strong style="color:var(--text)">' + file.name + '</strong>'
                    + '<span style="color:var(--muted);margin-left:8px">' + size + '</span>';
    zone.style.borderColor    = 'var(--primary)';
    zone.style.background     = 'var(--primary-light)';
}

function handleDrop(event) {
    event.preventDefault();
    var zone  = document.getElementById('drop-zone');
    zone.style.borderColor = 'var(--border)';
    var file  = event.dataTransfer.files[0];
    if (!file) return;
    var ext   = file.name.split('.').pop().toLowerCase();
    if (!['pfx', 'p12'].includes(ext)) {
        alert('Apenas arquivos .pfx ou .p12 sao aceitos.');
        return;
    }
    var input = document.getElementById('nfse_cert_file');
    var dt    = new DataTransfer();
    dt.items.add(file);
    input.files = dt.files;
    showFileName(input);
}

function togglePwd() {
    var el  = document.getElementById('nfse_cert_password');
    var eye = document.getElementById('pwd-eye');
    if (el.type === 'password') {
        el.type = 'text';
        eye.setAttribute('stroke', 'var(--primary)');
    } else {
        el.type = 'password';
        eye.setAttribute('stroke', 'currentColor');
    }
}
</script>
@endpush
@endsection