<x-Deshboard-layout>

    <!-- Table Section -->
    <div class=" py-10 ">
        <!-- Card -->
        <div class="flex flex-col">
            <div class="-m-1.5 overflow-x-auto">
                <div class="p-1.5 min-w-full inline-block align-middle">
                    <div
                        class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden dark:bg-slate-900 dark:border-gray-700">
                        <!-- Header -->
                        <div
                            class="px-6 py-4 grid gap-3 md:flex md:justify-between md:items-center border-b border-gray-200 dark:border-gray-700">
                            <div>
                                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
                                    Pages
                                </h2>
                                <p class="text-sm text-gray-600 dark:text-gray-400">
                                    Create pages and more.
                                </p>
                            </div>


                        </div>
                        <form id='pages-create' action="{{ route('pages.store') }}" method="post"
                            enctype="multipart/form-data">
                            @csrf
                            <!-- End Header -->
                            <div class="overflow-y-auto grid grid-cols-12  gap-4">
                                <div class="space-y-2  col-span-8 p-4 sm:p-10  bg-[#fbfbfb]">

                                    <div>
                                        <x-backend.input-label :value="'Name'" for="name" />
                                        <x-backend.input-field type="text" name="name" id='name'
                                            :value="old('name')" placeholder="Enter name" />

                                    </div>
                                    <div>
                                        <x-backend.input-label :value="'Permalink'" for="permalink " />
                                        <div tabindex="0"
                                            class="url bg-white flex items-center border rounded-lg focus:border-none focus:outline-none   focus:ring-2 focus:ring-blue-500 ">
                                            <span
                                                class="text-sm url  text-gray-400 pl-4  whitespace-nowrap ">{{ Request::root() }}/</span>
                                            <x-backend.input-field type="text" name="permalink" id='permalink'
                                                :value="old('permalink')" placeholder="Enter permalink"
                                                class="perma-link clas outline-none border-none focus:outline-none focus:border-none focus:ring-transparent !pl-0 " />
                                        </div>
                                    </div>
                                    <div>
                                        <x-backend.button type="button" :value="'Add UI Block'"
                                            class=" bg-blue-100 text-blue-800 !text-[12px] !py-2 !px-3  "
                                            data-hs-overlay="#ui-model" />
                                    </div>

                                    <div id='sortable' class="ui space-y-2">

                                    </div>
                                    <div>
                                        <x-backend.input-label :value="'Description'" for="description" />
                                        <x-backend.input-textarea name="description" :text="''"
                                            placeholder='Enter Description' required />
                                    </div>

                                </div>
                                <div class="space-y-6  col-span-4  p-2 sm:p-4  bg-[#fbfbfb]">
                                    <div
                                        class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-slate-900 dark:border-gray-700 dark:shadow-slate-700/[.7]">
                                        <div
                                            class="border-b rounded-t-xl py-3 px-4 md:py-4 md:px-5 dark:border-gray-700">
                                            <p class="mt-1  text-gray-700 text-md">
                                                Publish
                                            </p>
                                        </div>
                                        <div class="flex gap-3 p-5">
                                            <button type="submit"
                                                class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
                                                <i class="fa-solid fa-floppy-disk"></i>
                                                Save

                                            </button>
                                            <button type="button"
                                                class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
                                                <i class="fa-solid fa-arrow-right-from-bracket"></i>
                                                Save & Exit
                                            </button>
                                        </div>
                                    </div>
                                    <div
                                        class=" bg-white border shadow-sm rounded-xl dark:bg-slate-900 dark:border-gray-700 dark:shadow-slate-700/[.7]">
                                        <div
                                            class="border-b rounded-t-xl py-3 px-4 md:py-4 md:px-5 dark:border-gray-700">
                                            <p class="mt-1  text-gray-700 text-md">
                                                Status
                                            </p>
                                            <div class="pt-4">
                                                <x-backend.input-select name='status' id="component" :values="['0' => 'Pending', '1' => 'Published']"
                                                    :placeholder="'Select one'" selected='' required />
                                            </div>
                                        </div>

                                    </div>
                                    <div
                                        class=" bg-white border shadow-sm rounded-xl dark:bg-slate-900 dark:border-gray-700 dark:shadow-slate-700/[.7]">
                                        <div
                                            class="border-b rounded-t-xl py-3 px-4 md:py-4 md:px-5 dark:border-gray-700">
                                            <p class="mt-1  text-gray-700 text-md">
                                                Image
                                            </p>

                                        </div>
                                        <!-- Body -->
                                        <div class="p-5 space-y-4"> <!-- Drag 'n Drop -->
                                            <div
                                                class="p-12 hv4ig flex pdrgo f0dty l66z3 i1v1o dmrud k3u76 dark:bg-neutral-800 dark:border-neutral-600">
                                                <div class="text-center">
                                                    <i class="fa-regular fa-image text-5xl"></i>
                                                    <div class="mt-4 flex flex-wrap pdrgo dtjcu m11p8 text-stone-600">
                                                        <span class="pe-1 eass7 j4ei7 dark:text-neutral-200"> Drop your
                                                            files
                                                            here or </span> <label for="hs-pro-deuuf"
                                                            class="relative cursor-pointer f0dty kxhcs mq8xz w25pk nq4w8 cmffi cdcib pgmdi pi3re b9h40 q8e5i dark:bg-neutral-800">
                                                            <span class="text-green-500">browse</span> <input
                                                                id="hs-pro-deuuf" type="file" class="sr-only"
                                                                name="image"> </label>
                                                    </div>
                                                    <p class="mt-1 rvi38 qv2j8 dark:text-neutral-400"> JPG, PNG, JPEG
                                                    </p>
                                                </div>
                                            </div> <!-- End Drag 'n Drop -->

                                        </div> <!-- End Body -->
                                    </div>

                                </div>

                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- End Card -->
    </div>
    <!-- End Table Section -->
    {{-- Model --}}
    @include('backend.pages.pages.model.ui-model')
    @include('backend.pages.pages.model.field-data-model')
    {{-- Message --}}
    @if ($message = Session::get('success'))
        <x-backend.flash-error :message="$message" :type="'success'" />
    @endif

</x-Deshboard-layout>
{{-- servier error --}}
<x-backend.server-error :form_id="'pages-create'" :request_form="'Pages\PagesCreateRequest'" />

<script>
    $(function() {
        $("#sortable").sortable();
    });
    $(document).on('click', '.removeComonent', function() {
        $(this).parents('.component-parent').remove();
    })
    $(document).on('click', '.componet-edit', function() {
        let target = $(this).attr('target');
        $('.' + target).trigger('click');

    })
</script>
