@component('v2-cms::components.box', ['title' => 'Sistema & Manutenção'])
    <p class="text-muted mb-4">
        Controles de estado global do sistema e debug. Alterações refletem imediatamente.
    </p>

    <form action="{{ route('v2.supportconfigs.system_controls.save') }}" method="POST">
        {{ csrf_field() }}

        <div class="row g-4">
            {{-- ═══════════════════════════════════════════════════════
                 COLUNA A — Modo de Manutenção
                 ═══════════════════════════════════════════════════════ --}}
            <div class="col-md-6 col-12">
                <fieldset class="border rounded-3 p-3 h-100" style="background: #fff9f9;">
                    <legend class="h6 fw-bold text-danger d-flex align-items-center gap-2 w-100 mb-3 pb-2 border-bottom" style="font-size: var(--text-base);">
                        <i class="bi bi-shield-exclamation" aria-hidden="true"></i> Modo de Manutenção
                    </legend>

                    <div class="d-flex align-items-start gap-3">
                        <div class="form-check form-switch mb-0 pt-1">
                            <input type="hidden" name="maintenance_mode" value="0">
                             <input type="checkbox" id="maintenance_mode" name="maintenance_mode"
                                    class="form-check-input cursor-pointer" value="1" role="switch"
                                    style="width: 2.5em; height: 1.5em;"
                                    {{ ($systemControls['maintenance_mode'] ?? false) ? 'checked' : '' }}>
                        </div>
                        <div>
                            <label class="fw-bold text-dark cursor-pointer" for="maintenance_mode">
                                Ativar Banner de Manutenção
                            </label>
                            <div class="form-text mt-1">
                                Ativa o banner vermelho no topo do CMS e exibe a página de manutenção no portal público.
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>

            {{-- ═══════════════════════════════════════════════════════
                 COLUNA B — Depuração e Logs
                 ═══════════════════════════════════════════════════════ --}}
            <div class="col-md-6 col-12">
                <fieldset class="border rounded-3 p-3 h-100">
                    <legend class="h6 fw-bold text-warning d-flex align-items-center gap-2 w-100 mb-3 pb-2 border-bottom" style="font-size: var(--text-base);">
                        <i class="bi bi-bug" aria-hidden="true"></i> Depuração e Logs (Debug)
                    </legend>

                    <div class="d-flex align-items-start gap-3 mb-3">
                        <div class="form-check form-switch mb-0 pt-1">
                            <input type="hidden" name="app_debug" value="0">
                             <input type="checkbox" id="app_debug" name="app_debug"
                                    class="form-check-input cursor-pointer" value="1" role="switch"
                                    style="width: 2.5em; height: 1.5em;"
                                    {{ ($systemControls['app_debug'] ?? false) ? 'checked' : '' }}>
                        </div>
                        <div>
                            <label class="fw-bold text-dark cursor-pointer" for="app_debug">
                                Exibir Todos os Erros (APP_DEBUG)
                            </label>
                            <div class="form-text mt-1">
                                Quando ativo, erros 500 mostrarão a stack trace completa (Ignition/Whoops).
                            </div>
                        </div>
                    </div>

                    <div class="d-flex align-items-start gap-3">
                        <div class="form-check form-switch mb-0 pt-1">
                            <input type="hidden" name="debugbar_enabled" value="0">
                             <input type="checkbox" id="debugbar_enabled" name="debugbar_enabled"
                                    class="form-check-input cursor-pointer" value="1" role="switch"
                                    style="width: 2.5em; height: 1.5em;"
                                    {{ ($systemControls['debugbar_enabled'] ?? false) ? 'checked' : '' }}>
                        </div>
                        <div>
                            <label class="fw-bold text-dark cursor-pointer" for="debugbar_enabled">
                                Habilitar Laravel Debugbar
                            </label>
                            <div class="form-text mt-1">
                                Exibe a barra inferior de profiling de queries e performance.
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>

        {{-- ═══════════════════════════════════════════════════════
             AÇÕES
             ═══════════════════════════════════════════════════════ --}}
        <div class="d-flex justify-content-end pt-3 mt-4 border-top">
            <button type="submit" class="btn btn-primary fw-bold px-3 d-inline-flex align-items-center gap-1">
                <i class="bi bi-save" aria-hidden="true"></i> Aplicar Controles de Sistema
            </button>
        </div>
    </form>

    {{-- ═══════════════════════════════════════════════════════
         INFORMAÇÕES
         ═══════════════════════════════════════════════════════ --}}
    <div class="alert alert-warning d-flex gap-3 p-3 mt-4 mb-0 border-0 shadow-sm" role="alert">
        <i class="bi bi-exclamation-triangle-fill fs-4 flex-shrink-0" aria-hidden="true"></i>
        <div>
            <h4 class="alert-heading h6 fw-bold mb-1">Atenção</h4>
            <p class="mb-2 small text-secondary">
                <strong>Modo de Manutenção:</strong> Quando ativo, visitantes do portal público verão uma página informando que o site está em manutenção.
                Usuários logados no CMS continuarão acessando normalmente, mas verão um banner de alerta no topo.
            </p>
            <p class="mb-0 small text-secondary">
                <strong>APP_DEBUG:</strong> Apenas ative em ambientes de desenvolvimento ou durante investigação de erros.
                Em produção, manter <strong>desligado</strong> para não expor dados sensíveis do sistema.
            </p>
        </div>
    </div>
@endcomponent