@extends('layouts.vertical', ['title' => 'Create Content Page'])

@section('css')
    @vite(['node_modules/quill/dist/quill.core.css', 'node_modules/quill/dist/quill.snow.css'])
@endsection

@section('content')

<!-- Start Content-->
<div class="container-fluid">

<div class="py-3 d-flex align-items-sm-center flex-sm-row flex-column">
    <div class="flex-grow-1">
        <h4 class="fs-18 fw-semibold m-0">Create Content Page</h4>
    </div>

    <div class="text-end">
        <ol class="breadcrumb m-0 py-0">
            <li class="breadcrumb-item"><a href="/dashboard/index">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('pages.index') }}">Content Pages</a></li>
            <li class="breadcrumb-item active">Create</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Page Information</h5>
            </div>

            <div class="card-body">
                <x-form.form id="pageForm" method="POST" action="{{ route('pages.store') }}" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-md-12">
                            <x-form.input 
                                name="title" 
                                label="Title" 
                                :required="true"
                                placeholder="Enter page title"
                            />
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <x-form.input 
                                name="slug" 
                                label="Slug" 
                                placeholder="Leave empty to auto-generate from title"
                                help="URL-friendly version of the title. If slug exists, a suffix will be added automatically."
                            />
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <x-form.textarea 
                                name="excerpt" 
                                label="Excerpt" 
                                rows="3"
                                placeholder="Short summary of the page (optional)"
                                help="This will be displayed in page listings"
                            />
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <label for="content" class="form-label">
                                Content <span class="text-danger">*</span>
                            </label>
                            <div id="quill-editor" style="height: 400px;"></div>
                            <textarea name="content" id="content" style="display: none;"></textarea>
                            @error('content')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-12">
                            <x-form.file 
                                name="featured_image" 
                                label="Featured Image" 
                                accept="image/*"
                                help="Upload a featured/banner image for this page (optional)"
                            />
                        </div>
                    </div>

                    <hr class="my-4">
                    <h5 class="mb-3">SEO Settings</h5>

                    <div class="row">
                        <div class="col-md-12">
                            <x-form.input 
                                name="meta_title" 
                                label="SEO Title" 
                                placeholder="Leave empty to use page title"
                                help="Meta title for search engines (optional)"
                            />
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <x-form.textarea 
                                name="meta_description" 
                                label="SEO Description" 
                                rows="3"
                                placeholder="Meta description for search engines (optional)"
                            />
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <x-form.textarea 
                                name="meta_keywords" 
                                label="SEO Keywords" 
                                rows="2"
                                placeholder="Comma-separated keywords (optional)"
                            />
                        </div>
                    </div>

                    <hr class="my-4">
                    <h5 class="mb-3">Menu Settings</h5>

                    <div class="row">
                        <div class="col-md-6">
                            <x-form.checkbox 
                                name="show_in_top_menu" 
                                label="Show in Top Menu" 
                                help="Display this page in the top navigation menu"
                            />
                        </div>
                        <div class="col-md-6">
                            <x-form.checkbox 
                                name="show_in_footer_menu" 
                                label="Show in Footer Menu" 
                                help="Display this page in the footer menu"
                            />
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <x-form.input 
                                name="order_position" 
                                label="Order Position" 
                                type="number"
                                :value="0"
                                help="Lower numbers appear first in menus"
                            />
                        </div>
                    </div>

                    <hr class="my-4">
                    <h5 class="mb-3">Publishing</h5>

                    <div class="row">
                        <div class="col-md-12">
                            <x-form.checkbox 
                                name="is_published" 
                                label="Published" 
                                help="Published pages are visible on the frontend"
                            />
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">Create Page</button>
                            <a href="{{ route('pages.index') }}" class="btn btn-light">Cancel</a>
                        </div>
                    </div>
                </x-form.form>
            </div>
        </div>
    </div>
</div>

</div> <!-- container-fluid -->

@endsection

@section('script')
    @vite(['resources/js/pages/quilljs.init.js'])
    {{-- Fallback: load Quill from CDN to ensure global Quill is available --}}
    <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize Quill editor
            var quill = new Quill('#quill-editor', {
                theme: 'snow',
                modules: {
                    toolbar: [
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        [{ 'script': 'sub'}, { 'script': 'super' }],
                        [{ 'indent': '-1'}, { 'indent': '+1' }],
                        [{ 'direction': 'rtl' }],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'align': [] }],
                        ['link', 'image', 'video'],
                        ['clean']
                    ]
                }
            });

            // Update hidden textarea before form submission
            var form = document.getElementById('pageForm');
            var contentField = document.getElementById('content');
            
            if (form && contentField) {
                form.addEventListener('submit', function(e) {
                    // Ensure content is set before submission
                    var quillContent = quill.root.innerHTML;
                    
                    // Validate that content is not empty
                    if (!quillContent || quillContent.trim() === '' || quillContent === '<p><br></p>') {
                        e.preventDefault();
                        alert('Please enter some content for the page.');
                        return false;
                    }
                    
                    // Set the content field value
                    contentField.value = quillContent;
                    
                    // Double-check it was set
                    if (contentField.value !== quillContent) {
                        console.error('Failed to set content field!');
                        e.preventDefault();
                        alert('Error: Content field could not be set. Please try again.');
                        return false;
                    }
                    
                    // Log for debugging
                    console.log('Form submitting with content length:', quillContent.length);
                    console.log('Content field value length:', contentField.value.length);
                    console.log('Content preview:', quillContent.substring(0, 100));
                });
            } else {
                console.error('pageForm or content textarea not found; Quill content will not be saved correctly.');
            }
        });
    </script>
@endsection