@extends('v2-cms::layouts.app', [
    'title'    => 'Editor: ' . $page->title,
])

@section('page-breadcrumbs')
    <span class="current">Layouts</span>
    <span class="separator">›</span>
    <a href="{{ route('v2.basicpage.index') }}">Páginas Básicas</a>
    <span class="separator">›</span>
    <span class="current">{{ $page->title }}</span>
@endsection

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

        <div class="d-flex align-items-center gap-2 mb-3">
            <span class="text-muted small">
                Slug: <code>{{ $page->slug }}</code>
                @if($page->is_runtime)
                    <span class="badge bg-info ms-2">Runtime</span>
                @else
                    <span class="badge bg-secondary ms-2">Fixa</span>
                @endif
                @if(!empty($page->content))
                    <span class="badge bg-success ms-1">Conteúdo runtime ativo</span>
                @else
                    <span class="badge bg-warning text-dark ms-1">Usando fallback (Blade fixo)</span>
                @endif
            </span>
        </div>

        <div class="d-flex gap-2 mb-4">
            <a href="{{ route('v2.basicpage.index') }}"
               class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1">
                <i class="bi bi-arrow-left"></i> Voltar
            </a>
            <a href="@php
                try {
                    if ($page->slug === 'homepage') {
                        echo route('v2.portal.home');
                    } elseif ($page->is_runtime) {
                        echo route('v2.portal.runtime', ['slug' => $page->slug]);
                    } else {
                        $routeName = 'v2.portal.' . str_replace('-', '_', $page->slug);
                        echo \Route::has($routeName) ? route($routeName) : '#';
                    }
                } catch (\Exception $e) {
                    echo '#';
                }
            @endphp"
               target="_blank"
               class="btn btn-outline-primary btn-sm d-inline-flex align-items-center gap-1">
                <i class="bi bi-box-arrow-up-right"></i> Ver no portal
            </a>
        </div>

        <section class="v2-main-content" aria-label="Editor runtime da página">
            @include('flash::message')

            <div class="row g-3">
                <div class="col-lg-9 bp-editor-main">
                    <form action="{{ route('v2.basicpage.editor.save') }}" method="POST">
                        {{ csrf_field() }}
                        <input type="hidden" name="slug" value="{{ $page->slug }}">

                        <div class="card shadow-sm border-0">
                            <div class="card-header bg-light d-flex align-items-center justify-content-between py-3">
                                <h5 class="mb-0 fw-bold">
                                    <i class="bi bi-code-slash me-1"></i> Conteúdo Runtime
                                </h5>
                                <button type="submit" class="btn btn-primary fw-bold px-4 d-inline-flex align-items-center gap-1">
                                    <i class="bi bi-save"></i> Salvar
                                </button>
                            </div>
                            <div class="card-body p-3">
                                @include('v2-cms::partials.code-editor', [
                                    'id'     => 'bp-editor-' . $page->slug,
                                    'name'   => 'content',
                                    'value'  => $page->content ?? '',
                                    'mode'   => $page->content_type ?? 'htmlmixed',
                                    'height' => '500px',
                                    'label'  => false,
                                ])

                                <hr class="my-4">

                                <h5 class="fw-bold mb-1"><i class="bi bi-layout-sidebar me-1"></i> Opções de Layout</h5>
                                <p class="text-muted small mb-3">Ative ou desative os elementos estruturais exibidos nesta página.</p>

                                @php $layout = $page->getLayoutConfig(); @endphp

                                <h6 class="fw-semibold text-secondary small text-uppercase mb-2 pb-1 border-bottom">Conteúdo Principal</h6>
                                <div class="row g-2 mb-4">
                                    @foreach([
                                        'fullWidthMain'    => ['label' => 'Largura Total',       'desc' => 'Remove as bordas laterais e o conteúdo ocupa 100% da largura disponível.'],
                                        'showMainHeader'   => ['label' => 'Título da Página',   'desc' => 'Exibe o título da página no topo do bloco de conteúdo principal.'],
                                        'showMainFooter'   => ['label' => 'Rodapé do Conteúdo', 'desc' => 'Exibe informações complementares no final do conteúdo principal.'],
                                        'showMainLeftArea' => ['label' => 'Sidebar Esquerda',   'desc' => 'Ativa a barra lateral esquerda com widgets de navegação ou apoio.'],
                                        'showMainRightArea'=> ['label' => 'Sidebar Direita',    'desc' => 'Ativa a barra lateral direita com widgets de navegação ou apoio.'],
                                    ] as $key => $opt)
                                    <div class="col-md-6">
                                        <div class="d-flex align-items-start gap-3 p-3 border rounded bg-white">
                                            <div class="form-check form-switch mb-0 pt-1">
                                                <input type="hidden" name="layout[{{ $key }}]" value="0">
                                                <input class="form-check-input" type="checkbox"
                                                       name="layout[{{ $key }}]" value="1"
                                                       id="layout_{{ $key }}" role="switch"
                                                       {{ ($layout[$key] ?? false) ? 'checked' : '' }}>
                                            </div>
                                            <div>
                                                <label for="layout_{{ $key }}" class="fw-semibold d-block">{{ $opt['label'] }}</label>
                                                <small class="text-muted d-block">{{ $opt['desc'] }}</small>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>

                                <h6 class="fw-semibold text-secondary small text-uppercase mb-2 pb-1 border-bottom">Elementos do Portal</h6>
                                <div class="row g-2">
                                    @foreach([
                                        'showHeader'             => ['label' => 'Cabeçalho',             'desc' => 'Exibe o topo do portal com logotipo, menu principal e busca.'],
                                        'showFooter'             => ['label' => 'Rodapé Principal',      'desc' => 'Exibe o rodapé institucional com links e informações legais.'],
                                        'showAccessibilityBar'   => ['label' => 'Barra de Acessibilidade','desc' => 'Exibe atalhos de acessibilidade como pular para conteúdo, contraste e ajuste de fonte.'],
                                        'stickyAccessibilityBar' => ['label' => 'Acessibilidade Fixa',   'desc' => 'Mantém a barra de acessibilidade visível no topo ao rolar a página. Requer "Barra de Acessibilidade" ativa.'],
                                    ] as $key => $opt)
                                    <div class="col-md-6">
                                        <div class="d-flex align-items-start gap-3 p-3 border rounded bg-white">
                                            <div class="form-check form-switch mb-0 pt-1">
                                                <input type="hidden" name="layout[{{ $key }}]" value="0">
                                                <input class="form-check-input" type="checkbox"
                                                       name="layout[{{ $key }}]" value="1"
                                                       id="layout_{{ $key }}" role="switch"
                                                       {{ ($layout[$key] ?? false) ? 'checked' : '' }}>
                                            </div>
                                            <div>
                                                <label for="layout_{{ $key }}" class="fw-semibold d-block">{{ $opt['label'] }}</label>
                                                <small class="text-muted d-block">{{ $opt['desc'] }}</small>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="col-lg-3 bp-editor-side">
                    @include('v2-basicpage::cms.components.asset-sidebar')
                </div>
            </div>
        </section>

    </main>

    @include('v2-cms::partials.activity-footer', ['model' => $page])

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var hasUnsavedChanges = false;

        document.addEventListener('sle:editor-change', function (e) {
            var editor = e.detail.editor;
            if (editor) {
                editor.on('change', function () {
                    hasUnsavedChanges = true;
                });
            }
        });

        document.querySelector('form').addEventListener('submit', function () {
            hasUnsavedChanges = false;
        });

        window.addEventListener('beforeunload', function (e) {
            if (hasUnsavedChanges) {
                e.preventDefault();
                e.returnValue = '';
            }
        });
    });
</script>
@endpush