@component('v2-cms::components.box', ['title' => 'Tema do CMS — White Label'])
    <p class="text-muted mb-4">
        Configure a identidade visual do <strong>painel administrativo (CMS)</strong> separadamente do portal público.
        As alterações refletem imediatamente após o salvamento.
    </p>

    {{-- ═══════════════════════════════════════════════════════════════════════
         SEÇÃO A — Identidade da Marca (CMS)
         ═══════════════════════════════════════════════════════════════════════ --}}
    <fieldset class="mb-4 pb-3 border-bottom">
        <legend class="h5 fw-bold text-dark mb-3 w-100 d-flex align-items-center gap-2">
            <i class="bi bi-building" aria-hidden="true"></i> Identidade da Marca
        </legend>

        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label fw-bold">Nome da Empresa / Marca</label>
                <input type="text" name="cms_brand_name" class="form-control"
                       value="{{ $configs['cms_brand_name'] ?? 'Maxima' }}"
                       placeholder="Ex: Maxima">
                <div class="form-text mt-1">Exibido na barra lateral e na tela de login do CMS.</div>
            </div>
            <div class="col-md-6">
                @php
                    $currentLogo = $configs['cms_brand_logo'] ?? null;
                    $currentLogoId = $currentLogo ? \Illuminate\Support\Facades\DB::table('v2_gallery_media')->where('file_path', $currentLogo)->value('id') : '';
                @endphp
                @include('v2-service-media::components.media-input', [
                    'name' => 'cms_brand_logo',
                    'label' => 'Logo da Empresa (CMS)',
                    'accept' => 'image/*',
                    'help' => 'Recomendado: PNG com fundo transparente. Altura ideal: 60px.',
                    'currentUrl' => $currentLogo ? v2_storage_url($currentLogo) : '',
                    'currentAlt' => '',
                    'currentId' => $currentLogoId,
                    'ownerModule' => 'support_configs'
                ])
            </div>
        </div>
    </fieldset>

    {{-- ═══════════════════════════════════════════════════════════════════════
         SEÇÃO B — Favicon do CMS (upload direto de .ico, SEM galeria)
         ═══════════════════════════════════════════════════════════════════════ --}}
    <fieldset class="mb-4 pb-3 border-bottom">
        <legend class="h5 fw-bold text-dark mb-3 w-100 d-flex align-items-center gap-2">
            <i class="bi bi-browser-chrome" aria-hidden="true"></i> Favicon do CMS
        </legend>

        <div class="row g-3">
            <div class="col-md-7">
                @php
                    $currentFavicon = $configs['cms_favicon'] ?? null;
                    $faviconUrl = $currentFavicon ? v2_storage_url($currentFavicon) : '';
                @endphp
                <div class="mb-3">
                    <label for="cms_favicon" class="form-label fw-bold">Ícone de Aba (Favicon)</label>
                    <input type="file"
                           name="cms_favicon"
                           id="cms_favicon"
                           class="form-control"
                           accept=".ico,image/x-icon,image/vnd.microsoft.icon"
                           aria-describedby="cms-favicon-help">
                    @if($faviconUrl)
                        <div class="mt-2 d-flex align-items-center gap-3">
<img src="{{ $faviconUrl }}"
                                  alt="Favicon atual"
                                  loading="lazy"
                                  class="border rounded shadow-sm"
                                  style="width:32px; height:32px; object-fit:contain; image-rendering:pixelated;">
                            <span class="small text-muted">
                                <i class="bi bi-check-circle-fill text-success me-1"></i>
                                Favicon atual (32×32)
                            </span>
                        </div>
                    @else
                        <div class="mt-2 small text-muted">
                            <i class="bi bi-info-circle me-1"></i>
                            Nenhum favicon personalizado. Será usado o fallback <code>favicon.ico</code> padrão.
                        </div>
                    @endif
                    <div id="cms-favicon-help" class="form-text mt-2">
                        <i class="bi bi-info-circle-fill me-1"></i>
                        <strong>Formato obrigatório:</strong> ICO (<code>.ico</code>).
                        O arquivo é salvo diretamente no storage, sem passar pela galeria de mídias.
                    </div>
                </div>
            </div>
            <div class="col-md-5 d-flex align-items-start pt-4">
                <div class="bg-light border rounded p-3 w-100">
                    <div class="small fw-bold text-dark mb-2">
                        <i class="bi bi-info-circle me-1"></i> Especificações Técnicas do ICO
                    </div>
                    <ul class="small text-secondary ps-3 mb-0" style="line-height: 1.8;">
                        <li><strong class="text-dark">Formato obrigatório:</strong> ICO (<code>.ico</code>)</li>
                        <li><strong class="text-dark">Dimensão exata:</strong> 32×32 pixels (máxima compatibilidade)</li>
                        <li><strong class="text-dark">Profundidade de cor:</strong> 32 bits (True Color com alpha) ou 24 bits</li>
                        <li>Incluir resolução <strong class="text-dark">16×16</strong> como fallback (mesmo arquivo .ico pode conter múltiplos sizes)</li>
                        <li>Não usar PNG ou JPEG — a extensão deve ser <code>.ico</code></li>
                        <li>Tamanho máximo recomendado: <strong class="text-dark">100 KB</strong></li>
                        <li>Ferramentas sugeridas: RealWorld Icon Editor, GIMP (com plugin .ico), ImageMagick, favicon.io</li>
                    </ul>
                </div>
            </div>
        </div>
    </fieldset>

    {{-- ═══════════════════════════════════════════════════════════════════════
         SEÇÃO C — Cores do Tema CMS
         ═══════════════════════════════════════════════════════════════════════ --}}
    <fieldset class="mb-4">
        <legend class="h5 fw-bold text-dark mb-3 w-100 d-flex align-items-center gap-2">
            <i class="bi bi-palette" aria-hidden="true"></i> Cores do Tema CMS
        </legend>

        <div class="row g-3">
            <div class="col-md-4">
                <label class="form-label fw-bold">Barra Lateral (Fundo)</label>
                <div class="d-flex align-items-center gap-2">
                    <input type="color" name="cms_sidebar_bg" class="form-control form-control-color"
                           value="{{ $configs['cms_sidebar_bg'] ?? '#222d32' }}"
                           class="cursor-pointer" style="width: 60px; height: 40px; padding: 2px;">
                    <code class="small text-muted">{{ $configs['cms_sidebar_bg'] ?? '#222d32' }}</code>
                </div>
                <div class="form-text mt-1">Cor de fundo da navegação lateral. Padrão: <code>#222d32</code></div>
            </div>
            <div class="col-md-4">
                <label class="form-label fw-bold">Destaque (Brand Primary)</label>
                <div class="d-flex align-items-center gap-2">
                    <input type="color" name="cms_brand_primary" class="form-control form-control-color"
                           value="{{ $configs['cms_brand_primary'] ?? '#3c8dbc' }}"
                           class="cursor-pointer" style="width: 60px; height: 40px; padding: 2px;">
                    <code class="small text-muted">{{ $configs['cms_brand_primary'] ?? '#3c8dbc' }}</code>
                </div>
                <div class="form-text mt-1">Header, botões e links do CMS. Padrão: <code>#3c8dbc</code></div>
            </div>
            <div class="col-md-4">
                <label class="form-label fw-bold">Fundo da Tela (Body)</label>
                <div class="d-flex align-items-center gap-2">
                    <input type="color" name="cms_body_bg" class="form-control form-control-color"
                           value="{{ $configs['cms_body_bg'] ?? '#ecf0f5' }}"
                           class="cursor-pointer" style="width: 60px; height: 40px; padding: 2px;">
                    <code class="small text-muted">{{ $configs['cms_body_bg'] ?? '#ecf0f5' }}</code>
                </div>
                <div class="form-text mt-1">Área de conteúdo principal. Padrão: <code>#ecf0f5</code></div>
            </div>
        </div>
    </fieldset>

    {{-- ═══════════════════════════════════════════════════════════════════════
         AÇÕES: Salvar + Restaurar Padrões do CMS
         ═══════════════════════════════════════════════════════════════════════ --}}
    <div class="d-flex justify-content-between align-items-center pt-3 border-top">
        <button type="submit" class="btn btn-primary fw-bold d-inline-flex align-items-center gap-1">
            <i class="bi bi-save"></i> Salvar Tema do CMS
        </button>
        <button type="button" class="btn btn-outline-secondary fw-bold d-inline-flex align-items-center gap-1"
                onclick="document.getElementById('reset-cms-form').requestSubmit()"
                title="Restaura apenas as configurações do CMS para os valores padrão">
            <i class="bi bi-arrow-counterclockwise"></i> Restaurar Padrões do CMS
        </button>
    </div>

    <div class="alert alert-info d-flex gap-2 p-3 mt-4 mb-0" role="alert">
        <i class="bi bi-info-circle-fill fs-5 flex-shrink-0 mt-1"></i>
        <div>
            <h4 class="alert-heading h6 fw-bold mb-1">Integração</h4>
            <p class="mb-0 small text-secondary">
                As cores do <strong>Tema do CMS</strong> vêm da tabela <code>v2_cms_theme_configs</code> e são aplicadas
                ao painel administrativo via View Composer. A identidade visual (nome, logo, favicon) é lida pelo
                <code>SidebarComposer</code> e pelo layout <code>app.blade.php</code>.
            </p>
        </div>
    </div>
@endcomponent