@extends('layouts.admin') {{-- Usa o layout admin --}}

{{-- Define o cabeçalho da página --}}
<x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
        {{ __('Criar Nova Página de Conteúdo') }}
    </h2>
</x-slot>

@section('content')
<div class="py-1">
    <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 text-gray-900 dark:text-gray-100">
                {{-- Formulário de Criação --}}
                <form method="POST" action="{{ route('admin.pages.store') }}">
                    @csrf {{-- Token CSRF --}}

                    {{-- Campo Título --}}
                    <div class="mb-4">
                        <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Título da
                            Página <span class="text-red-500">*</span></label>
                        <input type="text" name="title" id="title" value="{{ old('title') }}"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 @error('title') border-red-500 @enderror"
                            required>
                        @error('title')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Campo Slug --}}
                    <div class="mb-4">
                        <label for="slug" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Slug
                            (URL)</label>
                        <input type="text" name="slug" id="slug" value="{{ old('slug') }}"
                            placeholder="Deixe em branco para gerar do título"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 @error('slug') border-red-500 @enderror">
                        @error('slug')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Identificador na URL (letras, números,
                            traços). Será gerado do título se vazio.</p>
                    </div>

                    {{-- Campo Conteúdo (com Editor WYSIWYG) --}}
                    <div class="mb-4">
                        <label for="page-content-editor"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300">Conteúdo <span
                                class="text-red-500">*</span></label>
                        {{-- O ID 'page-content-editor' é usado pelo Javascript do TinyMCE --}}
                        <textarea name="content" id="page-content-editor" rows="15"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 @error('content') border-red-500 @enderror">{{ old('content') }}</textarea>
                        @error('content')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Campo Status (Publicado/Rascunho) --}}
                    <div class="mb-4">
                        <label for="is_published" class="flex items-center">
                            <input type="checkbox" name="is_published" id="is_published" value="1"
                                class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:bg-gray-900 dark:border-gray-700"
                                {{ old('is_published', false) ? 'checked' : '' }}>
                            {{-- Padrão é não marcado (Rascunho) --}}
                            <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">Publicar página</span>
                        </label>
                        @error('is_published')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Botões de Ação --}}
                    <div class="flex items-center justify-end mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
                        {{-- Botão Cancelar --}}
                        <a href="{{ route('admin.pages.index') }}"
                            class="inline-flex items-center px-4 py-2 bg-gray-400 dark:bg-gray-600 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-200 uppercase tracking-widest hover:bg-gray-500 dark:hover:bg-gray-500 active:bg-gray-600 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150 mr-4">
                            Cancelar
                        </a>
                        {{-- Botão Salvar --}}
                        <button type="submit"
                            class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 active:bg-blue-800 focus:outline-none focus:border-blue-900 focus:ring ring-blue-300 disabled:opacity-25 transition ease-in-out duration-150">
                            Salvar Página
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
@endsection

{{-- Adiciona os scripts do TinyMCE ao stack 'scripts' definido no layout --}}
@push('scripts')
{{-- Substitua 'YOUR_API_KEY' pela sua chave da API Tiny Cloud ou use o modo gratuito sem chave --}}
<script src="https://cdn.tiny.cloud/1/6mgcn7wxiltbuov2jrsrkplvkdxwjlxs18u2d2k3zpxm9iaf/tinymce/6/tinymce.min.js"
    referrerpolicy="origin"></script>
{{-- CDN Gratuito --}}
{{-- <script src="https://cdn.tiny.cloud/1/6mgcn7wxiltbuov2jrsrkplvkdxwjlxs18u2d2k3zpxm9iaf/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script> --}}

<script>
// Inicializa o TinyMCE no textarea com ID 'page-content-editor'
tinymce.init({
    selector: 'textarea#page-content-editor',
    plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons accordion',
    menubar: 'file edit view insert format tools table help',
    toolbar: 'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl',
    autosave_ask_before_unload: true,
    autosave_interval: '30s',
    autosave_prefix: '{path}{query}-{id}-',
    autosave_restore_when_empty: false,
    autosave_retention: '2m',
    image_advtab: true,
    height: 400, // Ajuste a altura conforme necessário
    // Opções adicionais de configuração podem ser adicionadas aqui
    // Ex: skin, content_css, etc. Ver documentação do TinyMCE.
    // skin: (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'oxide-dark' : 'oxide'),
    // content_css: (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default')
});
</script>
@endpush