<x-admin-layout>
@section('title', $page . ' | ' . get_setting('site_name'))
  <div class="mt-4 grid grid-cols-12 gap-4 sm:mt-5 sm:gap-5 lg:mt-6 lg:gap-6">
    <div class="col-span-12">
      <div class="space-y-4">
        <div> 
          <label class="block text-sm font-medium py-3">Title:</label>
          <input id="title" name="title" type="text" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
        </div>
        <div> 
          <label class="block text-sm font-medium py-3">Slug:</label>
          <input id="slug" name="slug" type="text" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
        </div>
        <div> 
          <label class="block text-sm font-medium py-3">Meta Title:</label>
          <input id="meta_title" name="meta_title" type="text" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent" />
        </div>
        <div> 
          <label class="block text-sm font-medium py-3">Meta Description:</label>
          <textarea id="meta_description" name="meta_description" class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"></textarea>
        </div>
        <div>
            <div
                class="h-80"
                x-init="$el._x_quill = new Quill($el, {
                    modules: {
                        toolbar: {
                            container: [
                                ['bold', 'italic', 'underline', 'strike'],
                                ['blockquote', 'code-block'],
                                [{ header: 1 }, { header: 2 }, { header: 3 }, { header: 4 }, { header: 5 }, { header: 6 }],
                                [{ list: 'ordered' }, { list: 'bullet' }],
                                [{ script: 'sub' }, { script: 'super' }],
                                [{ indent: '-1' }, { indent: '+1' }],
                                [{ direction: 'rtl' }],
                                [{ size: ['small', false, 'large', 'huge'] }],
                                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                                [{ color: [] }, { background: [] }],
                                [{ font: [] }],
                                [{ align: [] }],
                                ['image'],
                                ['clean']
                            ],
                            handlers: {
                                image: function () {
                                    let input = document.createElement('input');
                                    input.setAttribute('type', 'file');
                                    input.setAttribute('accept', 'image/*');
                                    input.click();
                                    
                                    input.onchange = async () => {
                                        let file = input.files[0];
                                        if (file) {
                                            let formData = new FormData();
                                            formData.append('image', file);
                                            
                                            try {
                                                let response = await fetch('/admin/page/upload-image', {
                                                    method: 'POST',
                                                    headers: {
                                                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                                    },
                                                    body: formData
                                                });
                                                let result = await response.json();
                                                
                                                let range = this.quill.getSelection();
                                                this.quill.insertEmbed(range.index, 'image', result.url);
                                            } catch (error) {
                                                console.error('Upload failed', error);
                                            }
                                        }
                                    };
            
                                }
                            }
                        }
                    },
                    placeholder: 'Enter your content...',
                    theme: 'snow'
                })"
            ></div>
        </div>
        <div>
            <button id="savePage" class="btn space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">Save</button>
        </div>
      </div>
    </div>
  </div>
@push('scripts')
<script>
    document.getElementById("savePage").addEventListener("click", async function () {
        let title = document.getElementById("title").value;
        let slug = document.getElementById("slug").value;
        let metaTitle = document.getElementById("meta_title").value;
        let metaDescription = document.getElementById("meta_description").value;
        let content = document.querySelector(".ql-editor").innerHTML;

        let formData = new FormData();
        formData.append("title", title);
        formData.append("slug", slug);
        formData.append("meta_title", metaTitle);
        formData.append("meta_description", metaDescription);
        formData.append("content", content);

        try {
            let response = await fetch("/admin/page/store", {
                method: "POST",
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                },
                body: formData
            });

            let result = await response.json();
            window.location.href = '/admin/pages';
        } catch (error) {
            alert("Error saving blog", error);
        }
    });
</script>

@endpush
</x-admin-layout>