{{--
    @intent Submódulo 2 — Tema Visual Global
    @description Abas: Tema CMS | Tema Portal Público (+ Logos) | Banner Global
    @vars $layoutConfigs (Collection), $userConfigs (array)
--}}
@extends('v2-cms::layouts.app', [
    'title'    => 'Tema Visual Global',
    'subtitle' => 'Editor Estrutural'
])

@section('page-breadcrumbs')
    <nav aria-label="Breadcrumb">
        <ol class="breadcrumb bg-transparent p-0 mb-0 small">
            <li class="breadcrumb-item"><a href="{{ route('v2.cms.dashboard') }}" class="text-decoration-none">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('v2.supportconfigs.index') }}" class="text-decoration-none">Suporte</a></li>
            <li class="breadcrumb-item"><a href="{{ route('v2.structural-editor.theme') }}" class="text-decoration-none">Landing Page</a></li>
            <li class="breadcrumb-item active" aria-current="page">Tema</li>
        </ol>
    </nav>
@endsection

@section('content')
    <section class="v2-cms-module-container" aria-label="Tema visual global">

        <header class="v2-page-header mb-4">
            <div class="row">
                <div class="col-12">
                    <p class="text-muted">
                        Configure separadamente a identidade visual do <strong>CMS</strong> e do
                        <strong>portal público</strong> (cores, tipografia, logotipos) e o banner de comunicado global.
                    </p>
                </div>
            </div>
        </header>

        <section class="v2-main-content" aria-label="Painel de tema visual">
            @include('flash::message')

            <div class="card shadow-sm border-0">
                <div class="card-header bg-light p-0 border-bottom-0">
                    <ul class="nav nav-tabs" id="themeTabs" role="tablist">
                        {{-- Tab 1: Tema CMS --}}
                        <li class="nav-item" role="presentation">
                            <button class="nav-link px-4 py-3 fw-bold active"
                                    id="theme-cms-tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#tab_theme_cms"
                                    type="button" role="tab"
                                    aria-controls="tab_theme_cms"
                                    aria-selected="true">
                                <i class="bi bi-gear-wide-connected me-1"></i> Tema CMS
                            </button>
                        </li>
                        {{-- Tab 2: Tema Portal Público (com Logos) --}}
                        <li class="nav-item" role="presentation">
                            <button class="nav-link px-4 py-3 fw-bold"
                                    id="theme-portal-tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#tab_theme_portal"
                                    type="button" role="tab"
                                    aria-controls="tab_theme_portal"
                                    aria-selected="false">
                                <i class="bi bi-globe2 me-1"></i> Tema Portal Público
                            </button>
                        </li>
                        {{-- Tab 3: Banner Global --}}
                        <li class="nav-item" role="presentation">
                            <button class="nav-link px-4 py-3 fw-bold"
                                    id="theme-banner-tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#tab_theme_banner"
                                    type="button" role="tab"
                                    aria-controls="tab_theme_banner"
                                    aria-selected="false">
                                <i class="bi bi-megaphone me-1"></i> Banner Global
                            </button>
                        </li>
                    </ul>
                </div>

                <div class="card-body p-4">
                    <div class="tab-content" id="themeTabsContent">

                        {{-- Tab 1: Tema CMS --}}
                        <div class="tab-pane fade show active"
                             id="tab_theme_cms"
                             role="tabpanel"
                             aria-labelledby="theme-cms-tab">
                            <form action="{{ route('v2.structural-editor.theme.save') }}" method="POST" enctype="multipart/form-data">
                                {{ csrf_field() }}
                                <input type="hidden" name="tab" value="cms_theme">
                                @php $configs = $userConfigs; @endphp
                                @include('v2-structurallandingeditor::cms.tabs.userconfigs.tema-cms')
                            </form>
                            {{-- Formulário oculto para reset do Tema CMS --}}
                            <form id="reset-cms-form"
                                  action="{{ route('v2.supportconfigs.cms_theme.reset') }}"
                                  method="POST" class="d-none">
                                {{ csrf_field() }}
                            </form>
                        </div>

                        {{-- Tab 2: Tema Portal Público + Logos --}}
                        <div class="tab-pane fade"
                             id="tab_theme_portal"
                             role="tabpanel"
                             aria-labelledby="theme-portal-tab">
                            {{-- Formulário do Tema do Portal --}}
                            <form action="{{ route('v2.structural-editor.theme.save') }}" method="POST" enctype="multipart/form-data">
                                {{ csrf_field() }}
                                <input type="hidden" name="tab" value="portal_theme">
                                @php $configs = $userConfigs; @endphp
                                @include('v2-structurallandingeditor::cms.tabs.userconfigs.tema-portal')
                            </form>

                            <hr class="my-4">

                            {{-- Logos e Identidade Visual (layoutbase) --}}
                            @php $configs = $layoutConfigs; @endphp
                            @include('v2-structurallandingeditor::cms.tabs.layoutbase.logos')
                        </div>

                        {{-- Tab 3: Banner Global --}}
                        <div class="tab-pane fade"
                             id="tab_theme_banner"
                             role="tabpanel"
                             aria-labelledby="theme-banner-tab">
                            @php $configs = $layoutConfigs; @endphp
                            @include('v2-structurallandingeditor::cms.tabs.layoutbase.comunicado-global')
                        </div>

                    </div>
                </div>
            </div>

            @include('v2-cms::partials.activity-footer', [
                'model' => new \V2\Modules\Support\StructuralLandingEditor\Models\StructuralPortalContent()
            ])

        </section>

    </section>
@endsection