<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">
                                    Widget
                                </h2>
                                <p class="text-sm text-gray-600 dark:text-gray-400">
                                    Add widget, edit and more.
                                </p>
                            </div>

                            <div>

                            </div>
                        </div>
                        <!-- End Header -->
                    </div>
                </div>
            </div>
        </div>
        <form action="{{ route('widget.store') }}" method="post">
            @csrf
            <div class=" flex  gap-4">
                <div class="p-4  w-60">
                    <p class="text-lg text-bold">Pages</p>
                    <div id='draggable' class="h-[33rem] space-y-2  border">
                        @foreach ($pages as $page)
                            <div data-id="{{ $page->id }}" class="bg-slate-200 p-3 cursor-pointer draggable-item">
                                <p>{{ $page->name }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="p-4  w-60">
                    <p class="text-lg text-bold">Header</p>
                    <div id='droppable' class="h-[33rem] space-y-2  border">
                        @foreach ($header as $page)
                            <div class="header{{ $page->id }} bg-slate-200 p-3 cursor-pointer relative">
                                <button type="button"
                                    class="absolute setremove right-1 text-red-600 top-0 cursor-pointer"><i
                                        class="fa-solid fa-trash"></i></button>
                                <input type="hidden" name='header[]' value="{{ $page->id }}">

                                <p>{{ $page->name }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="p-4  w-60">
                    <p class="text-lg text-bold">Footer</p>
                    <div id='footer' class="h-[33rem] space-y-2  border">
                        @foreach ($footer as $page)
                            <div class="footer{{ $page->id }} bg-slate-200 p-3 cursor-pointer relative">
                                <button type="button"
                                    class="absolute setremove right-1 text-red-600 top-0 cursor-pointer"><i
                                        class="fa-solid fa-trash"></i></button>
                                <input type="hidden" name='footer[]' value="{{ $page->id }}">

                                <p>{{ $page->name }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="p-4  w-60">
                    <p class="text-lg text-bold">Action</p>
                    <button type="submit"
                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold text-sm py-2 px-4 rounded">
                        Update
                    </button>
                </div>

            </div>
        </form>


        <!-- End Card -->
    </div>
    <!-- End Table Section -->
    {{-- Model --}}
    {{-- @include('Backend.pages.faq.model.create-model')
    @include('Backend.pages.faq.model.edit-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="'faq-create'" :request_form="'Faq\faqRequest'" />
<x-backend.server-error :form_id="'faq-edit'" :request_form="'Faq\faqRequest'" /> --}}

{{-- Delete Element Confermation  --}}
<script>
    $(function() {
        // Make draggable element draggable and clone when dragged
        $("#draggable .draggable-item").draggable({
            helper: "clone",
            start: function(event, ui) {
                // Retrieve the data attribute value of the dragged item
                var dataAttributeValue = $(this).text().trim();
                var id = $(this).attr('data-id');

                // Apply the data attribute value to the cloned helper element
                ui.helper.data('name', dataAttributeValue);
                ui.helper.data('id', id);
            }
        });
        // Make droppable element droppable
        $("#droppable").droppable({
            drop: function(event, ui) {
                // Retrieve the data attribute value from the dropped item
                let dataAttributeValue = ui.helper.data('name');
                let id = ui.helper.data('id');

                if (dataAttributeValue) {

                    if ($(".header" + id)[0]) {} else {
                        var element =
                            ` <div class="header${id} bg-slate-200 p-3 cursor-pointer relative">
                                <button type="button" class="absolute setremove right-1 text-red-600 top-0 cursor-pointer"><i class="fa-solid fa-trash"></i></button>
                                    <input type="hidden" name='header[]' value="${id}" >
                            
                                <p>${dataAttributeValue}</p> </div>`

                        $(this).append(element);
                    }
                }

            }
        });
        // Make droppable element droppable
        $("#footer").droppable({
            drop: function(event, ui) {
                // Retrieve the data attribute value from the dropped item
                let dataAttributeValue = ui.helper.data('name');
                if (dataAttributeValue) {

                    let id = ui.helper.data('id');
                    if ($(".footer" + id)[0]) {} else {
                        var element =
                            ` <div class="footer${id} bg-slate-200 p-3 cursor-pointer relative">
                                <button type="button" class="absolute setremove right-1 text-red-600 top-0 cursor-pointer"><i class="fa-solid fa-trash"></i></button>
                                <input type="hidden" name='footer[]' value="${id}" >
                                
                                <p>${dataAttributeValue}</p> </div>`

                        $(this).append(element);
                    }
                }



            }
        });
    });
    $("#droppable").sortable();
    $("#footer").sortable();

    $(document).on('click', '.setremove', function() {
        $(this).parent().remove();
    })

    $(document).on('submit', '#delete', function() {
        let con = confirm('Are you sure to Delete it')
        if (con) {

            return true;

        } else {
            return false;
        }

    })
</script>
