@include('admin.header')
<style>
.ck-editor__editable {
    min-height: 300px;
}
label{
    font-weight: 600;
}
</style>
<!-- MAIN-CONTENT -->
<div class="main-content app-content">
    <div class="main-container container-fluid">
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">{{$page_title}} </h4>
                {{-- <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Pages</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Profile</li>
                </ol> --}}
            </div>
            <div class="d-flex my-xl-auto right-content align-items-center">
                <div class="pe-1 mb-xl-0">

                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                    <!-- form start -->
                    <form action="/admin/pages/{{$page->id}}" method="post" autocomplete="off" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="row">
                            <div class="mb-6 col-md-6">
                                <label class="form-label">Page Type </label>
                                <select class="form-control" id="page_type" name="page_type" required>
                                    <option value="cnt1" >One Content </option>
                                    <option value="img1" >One Image </option>
                                    <option value="cnt1img1" >One Content One Image</option>
                                    <option value="cnt2img2" >Two Contents Two Images</option>
                                    <option value="cnt3img3" >Three Contents Three Images</option>
                                </select>
                            </div>
                            <div class="mb-6 col-md-6">
                                <label class="form-label">Page Name </label>
                                <input type="text" class="form-control" id="page_name" name="page_name" value="{{$page->page_name}}" readonly>
                            </div>
                            <div class="mb-6 col-md-12">
                                <label class="form-label">Title </label>
                                <input type="text" class="form-control" id="page_title" name="page_title" value="{{$page->page_title}}" required>
                            </div>
                            <div class="mb-6 col-md-12">
                                <label class="form-label">Content 1 </label>
                                <textarea class="form-control editor" id="content1" name="content1">{{$page->content1}}</textarea>
                            </div>
                            <div class="mb-6 col-md-12">
                                <label class="form-label">Content 2 </label>
                                <textarea class="form-control editor" id="content2" name="content2">{{$page->content2}}</textarea>
                            </div>
                            <div class="mb-6 col-md-12">
                                <label class="form-label">Content 3 </label>
                                <textarea class="form-control editor" id="content3" name="content3">{{$page->content3}}</textarea>
                            </div>
                            <div class="mb-6 col-md-6">
                                <label class="form-label">Image 1</label>
                                <input type="file" class="form-control" id="image1" name="image1" accept="image/*">
                            </div>
                            <div class="mb-6 col-md-6">
                                <label class="form-label">Image 2</label>
                                <input type="file" class="form-control" id="image2" name="image2" accept="image/*">
                            </div>
                            <div class="mb-6 col-md-6">
                                <label class="form-label">Image 3</label>
                                <input type="file" class="form-control" id="image3" name="image3" accept="image/*">
                            </div>
                            <div class="mb-6 col-md-6">
                                <label class="form-label">Status </label>
                                <select name="status" id="status" class="form-control">
                                    <option value="1" >Active</option>
                                    <option value="0" selected>Inactive</option>
                                </select>
                            </div>
                            <div class="mb-6 col-md-12">
                                <label class="form-label">Url Slug </label>
                                <input type="text" class="form-control" id="url_slug" name="url_slug" value="{{$page->url_slug}}">
                            </div>
                            <div class="mb-6 col-md-12">
                                <label class="form-label">Meta Title </label>
                                <input type="text" class="form-control" id="meta_title" name="meta_title" value="{{$page->meta_title}}">
                            </div>
                            <div class="mb-6 col-md-12">
                                <label class="form-label">Meta Description </label>
                                <input type="text" class="form-control" id="meta_description" name="meta_description" value="{{$page->meta_description}}">
                            </div>
                            <div class="mb-6 col-md-12">
                                <label class="form-label">Tags </label>
                                <input type="text" class="form-control" id="meta_tags" name="meta_tags" value="{{$page->meta_tags}}">
                            </div>
                        </div>
                        <div class="mb-6 col-md-12 text-center">
                            <p>&nbsp;</p>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
                <!-- /.card -->
            </div>
            <!--/.col (left) -->
            <!-- right column -->
            <div class="col-md-6">
                <!-- Form Element sizes -->

                <!-- /.card -->
            </div>
            <!--/.col (right) -->
        </div>
        <!-- /.row -->
    </div>
</section>
@include('admin.footer')
<script src="{{ asset('node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>
{{-- <script>
    ClassicEditor
        .create(document.querySelector('#content1'))
        .then(content1 => {
            console.log(content1);
        })
        .catch(error => {
            console.error(content1);
        });

    ClassicEditor
        .create(document.querySelector('#content2'))
        .then(content2 => {
            console.log(content2);
        })
        .catch(error => {
            console.error(content2);
        });

    ClassicEditor
        .create(document.querySelector('#content3'))
        .then(content3 => {
            console.log(content3);
        })
        .catch(error => {
            console.error(content3);
        });
</script> --}}
<script>
    // Initialize the editors
    let editors = {};
    ClassicEditor.create(document.querySelector('#content1'))
        .then(editor => { editors['content1'] = editor; })
        .catch(error => { console.error(error); });

    ClassicEditor.create(document.querySelector('#content2'))
        .then(editor => { editors['content2'] = editor; })
        .catch(error => { console.error(error); });

    ClassicEditor.create(document.querySelector('#content3'))
        .then(editor => { editors['content3'] = editor; })
        .catch(error => { console.error(error); });

    // Validate form submission
    document.querySelector('form').addEventListener('submit', function(e) {
        let isValid = true;

        if (editors['content1'].getData().trim() === '') {
            alert('Content 1 is required.');
            isValid = false;
        }

        if (!isValid) e.preventDefault(); // Prevent submission if invalid
    });
</script>