{{--
    @intent Submódulo 5 — Editor Estrutural (conteúdo único por área)
    @description Editor direto de HTML, CSS e JS para header, barras laterais, footer, CSS e JS.
    @vars $contents (array) — StructuralPortalContent indexado por área
--}}
@extends('v2-cms::layouts.app', [
    'title'    => 'Editor Estrutural',
    '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">Editor</li>
        </ol>
    </nav>
@endsection

@section('content')
    <main role="main" class="v2-cms-module-container">

        <header class="v2-page-header mb-4">
            <div class="row">
                <div class="col-12">
                    <p class="text-muted">
                        Modifique o <strong>header, footer, barras laterais, CSS e JavaScript</strong> do portal
                        com editores de código diretos. Cada área possui um único editor.
                    </p>
                    <button type="button" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1"
                            data-bs-toggle="modal" data-bs-target="#sleHelpModal"
                            title="Abrir manual completo do editor">
                        <i class="bi bi-question-circle"></i> Manual
                    </button>
                </div>
            </div>
        </header>

        <section class="v2-main-content" aria-label="Painel de edição estrutural">
            @include('flash::message')

            <div class="row g-3">
                {{-- ── Coluna principal: editor de áreas ─────────── --}}
                <div class="col-lg-9 sle-editor-main">

                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-light p-0 border-bottom-0">
                            <ul class="nav nav-tabs" id="sleEditorTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link px-4 py-3 fw-bold active"
                                            id="sle-header-tab"
                                            data-bs-toggle="tab"
                                            data-bs-target="#tab_sle_header"
                                            type="button" role="tab">
                                        <i class="bi bi-layout-sidebar me-1"></i> Header
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link px-4 py-3 fw-bold"
                                            id="sle-main-tab"
                                            data-bs-toggle="tab"
                                            data-bs-target="#tab_sle_main"
                                            type="button" role="tab">
                                        <i class="bi bi-layout-three-columns me-1"></i> Barras Laterais
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link px-4 py-3 fw-bold"
                                            id="sle-footer-tab"
                                            data-bs-toggle="tab"
                                            data-bs-target="#tab_sle_footer"
                                            type="button" role="tab">
                                        <i class="bi bi-layout-sidebar-reverse me-1"></i> Footer
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link px-4 py-3 fw-bold"
                                            id="sle-css-tab"
                                            data-bs-toggle="tab"
                                            data-bs-target="#tab_sle_css"
                                            type="button" role="tab">
                                        <i class="bi bi-filetype-css me-1"></i> CSS
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link px-4 py-3 fw-bold"
                                            id="sle-js-tab"
                                            data-bs-toggle="tab"
                                            data-bs-target="#tab_sle_js"
                                            type="button" role="tab">
                                        <i class="bi bi-filetype-js me-1"></i> JS
                                    </button>
                                </li>
                            </ul>
                        </div>

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

                                <div class="tab-pane fade show active"
                                     id="tab_sle_header" role="tabpanel"
                                     aria-labelledby="sle-header-tab">
                                    @include('v2-structurallandingeditor::cms.tabs.header')
                                </div>

                                <div class="tab-pane fade"
                                     id="tab_sle_main" role="tabpanel"
                                     aria-labelledby="sle-main-tab">
                                    @include('v2-structurallandingeditor::cms.tabs.main')
                                </div>

                                <div class="tab-pane fade"
                                     id="tab_sle_footer" role="tabpanel"
                                     aria-labelledby="sle-footer-tab">
                                    @include('v2-structurallandingeditor::cms.tabs.footer')
                                </div>

                                <div class="tab-pane fade"
                                     id="tab_sle_css" role="tabpanel"
                                     aria-labelledby="sle-css-tab">
                                    @include('v2-structurallandingeditor::cms.tabs.css-head')
                                </div>

                                <div class="tab-pane fade"
                                     id="tab_sle_js" role="tabpanel"
                                     aria-labelledby="sle-js-tab">
                                    @include('v2-structurallandingeditor::cms.tabs.js-foot')
                                </div>

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

                </div>

                {{-- ── Coluna lateral: File Library ──────────────── --}}
                <div class="col-lg-3 sle-editor-side">
                    @include('v2-structurallandingeditor::cms.components.asset-sidebar')
                </div>
            </div>

        </section>

    </main>

    {{-- Modal de Ajuda (Manual) — reutilizado do original --}}
    @include('v2-structurallandingeditor::cms.components.help-manual')

    {{-- Modal de Alterações Não Salvas ─────────────────────── --}}
<div class="modal fade" id="sleUnsavedModal" tabindex="-1" role="dialog"
     aria-labelledby="sleUnsavedModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-body text-center py-4">
                    <i class="bi bi-exclamation-triangle-fill text-warning modal-confirm-icon mb-3 d-block"></i>
                    <h5 class="fw-bold" id="sleUnsavedModalLabel">Alterações não salvas</h5>
                    <p class="text-muted mb-0">
                        Existem modificações no editor que ainda não foram salvas.
                    </p>
                </div>
                <div class="modal-footer justify-content-center border-top-0 pt-0 pb-3">
                    <button type="button" class="btn btn-outline-secondary px-4"
                            data-bs-dismiss="modal">
                        <i class="bi bi-x-lg me-1"></i> Cancelar
                    </button>
                    <button type="button" class="btn btn-outline-danger px-4"
                            id="sleUnsavedDiscardBtn">
                        <i class="bi bi-trash3 me-1"></i> Descartar e Sair
                    </button>
                    <button type="button" class="btn btn-primary px-4"
                            id="sleUnsavedSaveBtn">
                        <i class="bi bi-save me-1"></i> Salvar e Sair
                    </button>
                </div>
            </div>
        </div>
    </div>

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

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {

        // ── Monitor de alterações não salvas ──────────────────
        var sleepUnsavedFlag = false;

        // Cada CodeMirror dispara 'sle:editor-change' quando fica pronto
        document.addEventListener('sle:editor-change', function (e) {
            var editor = e.detail.editor;
            if (editor) {
                editor.on('change', function () {
                    sleepUnsavedFlag = true;
                });
            }
        });

        // Limpa a flag ao submeter qualquer formulário
        document.querySelectorAll('.tab-pane form').forEach(function (form) {
            form.addEventListener('submit', function () {
                sleepUnsavedFlag = false;
            });
        });

        // beforeunload — segurança para navegação externa (F5, fechar aba)
        window.addEventListener('beforeunload', function (e) {
            if (sleepUnsavedFlag) {
                e.preventDefault();
                e.returnValue = '';
            }
        });

        // ── Modal de confirmação para navegação interna ───────
        var unsavedModal = null;

        function showUnsavedModal(targetUrl) {
            if (!unsavedModal) {
                var modalEl = document.getElementById('sleUnsavedModal');
                if (!modalEl) { return; }

                unsavedModal = new bootstrap.Modal(modalEl, { backdrop: 'static' });

                var saveBtn = document.getElementById('sleUnsavedSaveBtn');
                if (saveBtn) {
                    saveBtn.addEventListener('click', function () {
                        // Salva o formulário visível e depois navega
                        var activeForm = document.querySelector('.tab-pane.active.show form');
                        if (activeForm) {
                            activeForm.submit();
                        }
                        unsavedModal.hide();
                    });
                }

                var discardBtn = document.getElementById('sleUnsavedDiscardBtn');
                if (discardBtn) {
                    discardBtn.addEventListener('click', function () {
                        sleepUnsavedFlag = false;
                        unsavedModal.hide();
                        if (targetUrl) {
                            window.location.href = targetUrl;
                        }
                    });
                }
            }

            // Atualiza o destino do botão "Sair sem Salvar"
            var discardBtn = document.getElementById('sleUnsavedDiscardBtn');
            if (discardBtn) {
                discardBtn.setAttribute('data-url', targetUrl || '');
                // Substitui o handler para usar o targetUrl correto
                discardBtn.onclick = function () {
                    sleepUnsavedFlag = false;
                    unsavedModal.hide();
                    if (targetUrl) {
                        window.location.href = targetUrl;
                    }
                };
            }

            if (unsavedModal) {
                unsavedModal.show();
            }
        }

        // Intercepta links de navegação que saem da página
        document.querySelectorAll('a:not([data-bs-toggle="tab"])').forEach(function (link) {
            link.addEventListener('click', function (e) {
                var href = this.getAttribute('href');
                // Ignora âncoras (#), javascript:, e mailto:
                if (!href || href === '#' || href.startsWith('javascript:') || href.startsWith('mailto:')) {
                    return;
                }
                if (sleepUnsavedFlag) {
                    e.preventDefault();
                    showUnsavedModal(this.href);
                }
            });
        });

        // Intercepta troca de abas (usa evento nativo do Bootstrap)
        document.querySelectorAll('.nav-tabs button[data-bs-toggle="tab"]').forEach(function (tab) {
            tab.addEventListener('show.bs.tab', function (e) {
                if (sleepUnsavedFlag) {
                    if (!confirm('Você tem alterações não salvas. Deseja realmente trocar de aba? As alterações serão perdidas.')) {
                        e.preventDefault();
                    } else {
                        sleepUnsavedFlag = false;
                    }
                }
            });
        });

    });
</script>
@endpush

@push('styles')
<style>
    .tab-pane form .CodeMirror {
        border-radius: 4px;
    }
    .modal-confirm-icon {
        font-size: 2.5rem;
    }
</style>
@endpush