<?php $__env->startSection('main'); ?>

    
    <?php if(session('success')): ?>
        <div class="bg-green-200 my-2 p-3 rounded-md">
            <div class="w-full flex gap-3">
            <span class="rounded-full bg-green-500 w-6 h-6 text-white flex items-center justify-center">
                <i class="fa fa-check text-sm"></i>
            </span>
                <div class="flex flex-col gap-1">
                    <h1 class="font-semibold text-sm text-green-500">Success</h1>
                    <p class="text-green-400"><?php echo e(session('success')); ?></p>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <div class="h-16 flex items-center justify-between gap-2">
        <h1 class="font-semibold text-xl dark:text-white">Staffs</h1>
        <span class="text-gray-400">Manage Your Staffs</span>
    </div>

    <div class="overflow-x-scroll h-fit w-full">
        <table class="md:w-full lg:min-w-full min-w-[800px]  ">
            <thead>
            <tr class="border-b dark:text-white">
                <th>id</th>
                <th>name</th>
                <th>active</th>
                <th>image</th>
                <th>order</th>
                <th>slug</th>
                <th>created_at</th>
                <th>actions</th>
            </tr>
            </thead>

            <tbody>
            <?php $__empty_1 = true; $__currentLoopData = $staffs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $staff): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <tr>
                    <th class="dark:text-white"><?php echo e($staff->id); ?></th>
                    <td class="dark:text-gray-400">
                        <div class="">
                            <?php echo e($staff->name); ?>

                        </div>
                    </td>
                    <td>
                        <div class="flex items-center justify-center">
                            <input readonly disabled id="active" class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300
                        focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600
                         rounded-md shadow-sm" type="checkbox" <?php echo e($staff->active == 1 ? 'checked' : ''); ?>

                            />

                        </div>
                    </td>
                    <td>
                        <div class="p-3 flex flex-col items-center justify-center gap-2">
                            <img title="<?php echo e($staff->slug); ?>" src="<?php echo e(asset('uploads/'.$staff->image)); ?>" alt="<?php echo e($staff->slug); ?>"
                                 class="rounded-md h-20 w-full md:h-32 max-w-[200px] object-cover">
                        </div>
                    </td>
                    <th class="dark:text-white"><?php echo e($staff->order); ?></th>
                    <td class="dark:text-gray-400">
                        <div class="text-center">
                            <?php echo e($staff->slug); ?>

                        </div>
                    </td>
                    <td class="dark:text-gray-400">
                        <div class="text-center">
                            <?php echo e($staff->created_at); ?>

                        </div>
                    </td>
                    <td>
                        <div class="relative ">
                            <div class="w-full flex items-center justify-end">
                                <?php if (isset($component)) { $__componentOriginal71c6471fa76ce19017edc287b6f4508c = $component; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.secondary-button','data' => ['class' => 'table-dropdown-menu-trigger']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? (array) $attributes->getIterator() : [])); ?>
<?php $component->withName('secondary-button'); ?>
<?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(['class' => 'table-dropdown-menu-trigger']); ?>
                                    <i class="fa fa-ellipsis"></i>
                                 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal71c6471fa76ce19017edc287b6f4508c)): ?>
<?php $component = $__componentOriginal71c6471fa76ce19017edc287b6f4508c; ?>
<?php unset($__componentOriginal71c6471fa76ce19017edc287b6f4508c); ?>
<?php endif; ?>
                            </div>


                            <ul  class="table-dropdown-menu invisible absolute w-40 right-0 rounded-md border shadow bg-white">
                                <li class="w-full">
                                    <a href="<?php echo e(route('edit-staff', $staff->id)); ?>" class="px-5 py-2 flex items-center gap-2 hover:bg-slate-100 rounded-md">
                                        <i class="fa fa-pen text-green-400"></i>
                                        Edit
                                    </a>
                                </li>
                                <li class="w-full">
                                    <a href="#" data-route="<?php echo e(route('delete-staff', $staff->id)); ?>" onclick="confirmDelete(event)" class="px-5 py-2 flex items-center gap-2 hover:bg-slate-100 rounded-md">
                                        <i class="fa fa-trash text-red-500"></i>
                                        Delete
                                    </a>
                                </li>
                            </ul>

                            <script>
                                function confirmDelete(event) {
                                    event.preventDefault(); // Prevent the default action of the anchor tag

                                    const route = event.target.dataset.route; // Get the route from the data attribute
                                    const confirmation = confirm('Are you sure you want to delete?'); // Display a confirmation dialog

                                    if (confirmation) {
                                        window.location.href = route; // If confirmed, proceed with the deletion by redirecting to the delete route
                                    }
                                }
                            </script>
                        </div>

                    </td>
                </tr>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <tr>
                    <td colspan="9">
                        <div class="flex p-3 items-center justify-center flex-col gap-3">
                            <img src="<?php echo e(asset('empty.png')); ?>" alt="Empty" class="">
                            <div class="flex items-center gap-2">
                                <h1 class="text-xl font-semibold dark:text-gray-400">No staffs present</h1>
                                <?php if (isset($component)) { $__componentOriginal71c6471fa76ce19017edc287b6f4508c = $component; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.primary-button','data' => []] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? (array) $attributes->getIterator() : [])); ?>
<?php $component->withName('primary-button'); ?>
<?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([]); ?>
                                    <a href="<?php echo e(route('add-staff')); ?>" class="">Add A Staff</a>
                                 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal71c6471fa76ce19017edc287b6f4508c)): ?>
<?php $component = $__componentOriginal71c6471fa76ce19017edc287b6f4508c; ?>
<?php unset($__componentOriginal71c6471fa76ce19017edc287b6f4508c); ?>
<?php endif; ?>
                            </div>
                        </div>
                    </td>
                </tr>
            <?php endif; ?>
            </tbody>
        </table>

    </div>

    <script>
            const tableDropdownMenuTriggers = document.querySelectorAll('.table-dropdown-menu-trigger');

            tableDropdownMenuTriggers.forEach(trigger => {
                trigger.addEventListener('click', function (event) {
                    event.stopPropagation(); // Prevent the default click behavior from propagating

                    const dropdownMenu = this.parentElement.parentElement.children[1];

                    // console.log(this.parentElement.parentElement.children[1])

                    // Toggle the 'invisible' class on the dropdown menu
                    dropdownMenu.classList.toggle('invisible');

                    // Close all other dropdown menus
                    const allDropdownMenus = document.querySelectorAll('.table-dropdown-menu');

                    allDropdownMenus.forEach(menu => {
                        if (menu !== dropdownMenu) {
                            menu.classList.add('invisible');
                        }
                    });
                });
            });

            // Close the dropdown menu when clicking outside of it
            document.addEventListener('click', function (event) {
                const dropdownMenus = document.querySelectorAll('.table-dropdown-menu');

                dropdownMenus.forEach(menu => {
                    if (!menu.contains(event.target)) {
                        menu.classList.add('invisible');
                    }
                });
            });
    </script><?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layouts.template', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH I:\Laravel\mec\resources\views/admin/list-staffs.blade.php ENDPATH**/ ?>