@extends('v2-cms::layouts.app', [
    'title'    => 'Criar Nova Página',
])

@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">Nova Página</span>
@endsection

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

        <p class="text-muted mb-3">
            Crie uma nova página em runtime. O slug deve conter apenas letras minúsculas, números e hífens.
        </p>

        <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>
        </div>

        <section class="v2-main-content">
            @include('flash::message')

            <form action="{{ route('v2.basicpage.editor.store') }}" method="POST">
                {{ csrf_field() }}

                <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-file-earmark-plus me-1"></i> Dados da Página
                        </h5>
                        <button type="submit" class="btn btn-primary fw-bold px-4 d-inline-flex align-items-center gap-1">
                            <i class="bi bi-check-lg"></i> Criar Página
                        </button>
                    </div>
                    <div class="card-body p-4">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="bp-title" class="form-label fw-bold">Título</label>
                                <input type="text"
                                       name="title"
                                       id="bp-title"
                                       class="form-control"
                                       required
                                       maxlength="255"
                                       placeholder="Ex: Nossa Equipe">
                            </div>
                            <div class="col-md-6">
                                <label for="bp-slug" class="form-label fw-bold">Slug</label>
                                <div class="input-group">
                                    <span class="input-group-text">/</span>
                                    <input type="text"
                                           name="slug"
                                           id="bp-slug"
                                           class="form-control"
                                           required
                                           maxlength="100"
                                           pattern="[a-z0-9-]+"
                                           placeholder="Ex: nossa-equipe">
                                </div>
                                <div class="form-text">Apenas letras minúsculas, números e hífens.</div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <label class="form-label fw-bold">Conteúdo Inicial</label>
                        @include('v2-cms::partials.code-editor', [
                            'id'     => 'bp-editor-create',
                            'name'   => 'content',
                            'value'  => '',
                            'mode'   => 'htmlmixed',
                            'height' => '400px',
                            '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
                            $layoutDefaults = [
                                'fullWidthMain'          => false,
                                'showHeader'             => true,
                                'showMainHeader'         => true,
                                'showMainFooter'         => true,
                                'showFooter'             => true,
                                'showAccessibilityBar'   => false,
                                'stickyAccessibilityBar' => false,
                                'showMainLeftArea'       => false,
                                'showMainRightArea'      => false,
                            ];
                        @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="create_layout_{{ $key }}" role="switch"
                                               {{ ($layoutDefaults[$key] ?? false) ? 'checked' : '' }}>
                                    </div>
                                    <div>
                                        <label for="create_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="create_layout_{{ $key }}" role="switch"
                                               {{ ($layoutDefaults[$key] ?? false) ? 'checked' : '' }}>
                                    </div>
                                    <div>
                                        <label for="create_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>
        </section>

    </main>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var titleInput = document.getElementById('bp-title');
        var slugInput = document.getElementById('bp-slug');

        if (titleInput && slugInput) {
            titleInput.addEventListener('input', function () {
                if (!slugInput.dataset.userEdited) {
                    slugInput.value = this.value
                        .toLowerCase()
                        .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
                        .replace(/[^a-z0-9\s-]/g, '')
                        .replace(/\s+/g, '-')
                        .replace(/-+/g, '-')
                        .replace(/^-|-$/g, '');
                }
            });

            slugInput.addEventListener('input', function () {
                this.dataset.userEdited = 'true';
            });
        }
    });
</script>
@endpush