@inject('activityLogger', 'V2\Services\ActivityLogger\ActivityLoggerService')
<form action="{{ route('v2.structural-editor.theme.save') }}" method="POST" enctype="multipart/form-data">
    {{ csrf_field() }}
    <input type="hidden" name="tab" value="logos">

    @php
        $configModel = $configs->has('logos') ? $configs['logos'] : null;
        $payload = $configModel ? $configModel->payload : [];

        $img = function ($key) use ($payload) {
            $raw = $payload[$key] ?? null;
            return is_array($raw) ? ($raw['path'] ?? '') : $raw;
        };
        $imgId = function ($path) {
            return $path ? \Illuminate\Support\Facades\DB::table('v2_gallery_media')->where('file_path', $path)->value('id') : '';
        };
    @endphp

    {{-- ═══════════════════════════════════════════════════════════
         ÁREA 1 — IDENTIDADE VISUAL (Favicon + Logo Header)
         ═══════════════════════════════════════════════════════════ --}}
    <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-eye text-primary" aria-hidden="true"></i> Identidade Visual
        </legend>
        <div class="row g-3">
            <div class="col-md-6">
                @php
                    $faviconCurrent = $img('favicon');
                    $faviconUrl = $faviconCurrent ? v2_storage_url($faviconCurrent) : '';
                @endphp
                <div class="mb-3">
                    <label for="favicon" class="form-label fw-bold">Favicon (32×32)</label>
                    <input type="file"
                           name="favicon"
                           id="favicon"
                           class="form-control"
                           accept=".ico,image/x-icon,image/vnd.microsoft.icon"
                           aria-describedby="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="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>).
                        Dimensão: 32×32px. Salvo diretamente no storage, sem galeria.
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                @include('v2-service-media::components.media-input', [
                    'name' => 'logo_header',
                    'label' => 'Logo Principal (Header)',
                    'accept' => 'image/*',
                    'help' => 'SVG ou PNG colorido, fundo transparente. 60px altura.',
                    'currentUrl' => $img('logo_header') ? v2_storage_url($img('logo_header')) : '',
                    'currentAlt' => $payload['logo_header_alt'] ?? '',
                    'currentId' => $imgId($img('logo_header')),
                    'ownerModule' => 'layout_base'
                ])
            </div>
        </div>
    </fieldset>

    {{-- ═══════════════════════════════════════════════════════════
         ÁREA 2 — HEADER & RODAPÉ (Contraste + Rodapé)
         ═══════════════════════════════════════════════════════════ --}}
    <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-layout-three-columns text-info" aria-hidden="true"></i> Header &amp; Rodapé
        </legend>
        <div class="row g-3">
            <div class="col-md-6">
                @include('v2-service-media::components.media-input', [
                    'name' => 'logo_header_contraste',
                    'label' => 'Logo Header (Alto Contraste)',
                    'accept' => 'image/*',
                    'help' => 'Modo e-MAG Alto Contraste. Cor branca, fundo transparente.',
                    'currentUrl' => $img('logo_header_contraste') ? v2_storage_url($img('logo_header_contraste')) : '',
                    'currentAlt' => $payload['logo_header_contraste_alt'] ?? '',
                    'currentId' => $imgId($img('logo_header_contraste')),
                    'ownerModule' => 'layout_base'
                ])
            </div>
            <div class="col-md-6">
                @include('v2-service-media::components.media-input', [
                    'name' => 'logo_principal',
                    'label' => 'Logo Secundária (Rodapé)',
                    'accept' => 'image/*',
                    'help' => 'Monocromático (branco). 60px altura.',
                    'currentUrl' => $img('logo_principal') ? v2_storage_url($img('logo_principal')) : '',
                    'currentAlt' => $payload['logo_principal_alt'] ?? '',
                    'currentId' => $imgId($img('logo_principal')),
                    'ownerModule' => 'layout_base'
                ])
            </div>
        </div>
    </fieldset>

    {{-- ═══════════════════════════════════════════════════════════
         ÁREA 3 — INSTITUCIONAIS (Sefaz + Governo)
         ═══════════════════════════════════════════════════════════ --}}
    <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-bank text-success" aria-hidden="true"></i> Institucionais
        </legend>
        <div class="row g-3">
            <div class="col-md-6">
                @include('v2-service-media::components.media-input', [
                    'name' => 'sefaz',
                    'label' => 'Sefaz-PB',
                    'accept' => 'image/*',
                    'help' => '40px altura.',
                    'currentUrl' => $img('sefaz') ? v2_storage_url($img('sefaz')) : '',
                    'currentAlt' => $payload['sefaz_alt'] ?? '',
                    'currentId' => $imgId($img('sefaz')),
                    'ownerModule' => 'layout_base'
                ])
            </div>
            <div class="col-md-6">
                @include('v2-service-media::components.media-input', [
                    'name' => 'governo',
                    'label' => 'Governo da Paraíba',
                    'accept' => 'image/*',
                    'help' => '40px altura.',
                    'currentUrl' => $img('governo') ? v2_storage_url($img('governo')) : '',
                    'currentAlt' => $payload['governo_alt'] ?? '',
                    'currentId' => $imgId($img('governo')),
                    'ownerModule' => 'layout_base'
                ])
            </div>
        </div>
    </fieldset>

    {{-- ═══════════════════════════════════════════════════════════
         ÁREA 4 — MEMBROS ASSOCIADOS
         ═══════════════════════════════════════════════════════════ --}}
    <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-people text-warning" aria-hidden="true"></i> Membros Associados
        </legend>
        <div class="row g-3">
            <div class="col-md-6">
                @include('v2-service-media::components.media-input', [
                    'name' => 'membro_1',
                    'label' => 'Membro Associado 1',
                    'accept' => 'image/*',
                    'help' => 'Opcional. 40px altura.',
                    'currentUrl' => $img('membro_1') ? v2_storage_url($img('membro_1')) : '',
                    'currentAlt' => $payload['membro_1_alt'] ?? '',
                    'currentId' => $imgId($img('membro_1')),
                    'ownerModule' => 'layout_base'
                ])
            </div>
            <div class="col-md-6">
                @include('v2-service-media::components.media-input', [
                    'name' => 'membro_2',
                    'label' => 'Membro Associado 2',
                    'accept' => 'image/*',
                    'help' => 'Opcional. 40px altura.',
                    'currentUrl' => $img('membro_2') ? v2_storage_url($img('membro_2')) : '',
                    'currentAlt' => $payload['membro_2_alt'] ?? '',
                    'currentId' => $imgId($img('membro_2')),
                    'ownerModule' => 'layout_base'
                ])
            </div>
        </div>
    </fieldset>

    @v2can('LayoutBase', 'write')
    <button type="submit" class="btn btn-primary fw-bold px-3 d-inline-flex align-items-center gap-1 mt-3"><i class="bi bi-save" aria-hidden="true"></i> Salvar Logos</button>
    @endv2can
</form>

@include('v2-structurallandingeditor::cms.tabs.layoutbase.components.history-table', ['configModel' => $configModel, 'showMediaColumn' => true, 'logSuffix' => 'Atualizou as Logos.'])