<?php if (isset($component)) { $__componentOriginal3f3781c4a8379d81811d15e49692f257 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal3f3781c4a8379d81811d15e49692f257 = $attributes; } ?>
<?php $component = App\View\Components\DeshboardLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? (array) $attributes->getIterator() : [])); ?>
<?php $component->withName('Deshboard-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag && $constructor = (new ReflectionClass(App\View\Components\DeshboardLayout::class))->getConstructor()): ?>
<?php $attributes = $attributes->except(collect($constructor->getParameters())->map->getName()->all()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>

    <!-- 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="<?php echo e(route('widget.store')); ?>" method="post">
            <?php echo csrf_field(); ?>
            <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">
                        <?php $__currentLoopData = $pages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div data-id="<?php echo e($page->id); ?>" class="bg-slate-200 p-3 cursor-pointer draggable-item">
                                <p><?php echo e($page->name); ?></p>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </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">
                        <?php $__currentLoopData = $header; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="header<?php echo e($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="<?php echo e($page->id); ?>">

                                <p><?php echo e($page->name); ?></p>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </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">
                        <?php $__currentLoopData = $footer; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="footer<?php echo e($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="<?php echo e($page->id); ?>">

                                <p><?php echo e($page->name); ?></p>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </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 -->
    
    
    
    <?php if($message = Session::get('success')): ?>
        <?php if (isset($component)) { $__componentOriginalc7ecd09853420589bd35ad19c48b8af4 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalc7ecd09853420589bd35ad19c48b8af4 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.backend.flash-error','data' => ['message' => $message,'type' => 'success']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? (array) $attributes->getIterator() : [])); ?>
<?php $component->withName('backend.flash-error'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag && $constructor = (new ReflectionClass(Illuminate\View\AnonymousComponent::class))->getConstructor()): ?>
<?php $attributes = $attributes->except(collect($constructor->getParameters())->map->getName()->all()); ?>
<?php endif; ?>
<?php $component->withAttributes(['message' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($message),'type' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute('success')]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginalc7ecd09853420589bd35ad19c48b8af4)): ?>
<?php $attributes = $__attributesOriginalc7ecd09853420589bd35ad19c48b8af4; ?>
<?php unset($__attributesOriginalc7ecd09853420589bd35ad19c48b8af4); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc7ecd09853420589bd35ad19c48b8af4)): ?>
<?php $component = $__componentOriginalc7ecd09853420589bd35ad19c48b8af4; ?>
<?php unset($__componentOriginalc7ecd09853420589bd35ad19c48b8af4); ?>
<?php endif; ?>
    <?php endif; ?>

 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal3f3781c4a8379d81811d15e49692f257)): ?>
<?php $attributes = $__attributesOriginal3f3781c4a8379d81811d15e49692f257; ?>
<?php unset($__attributesOriginal3f3781c4a8379d81811d15e49692f257); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal3f3781c4a8379d81811d15e49692f257)): ?>
<?php $component = $__componentOriginal3f3781c4a8379d81811d15e49692f257; ?>
<?php unset($__componentOriginal3f3781c4a8379d81811d15e49692f257); ?>
<?php endif; ?>




<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>
<?php /**PATH /home/khawajashipping/mrglogisticsbd.com/resources/views/backend/pages/widget/index.blade.php ENDPATH**/ ?>