@extends('admin.layouts.template')

@section('main')

    {{--        Message--}}
    @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">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    @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>
            @forelse($staffs as $staff)
                <tr>
                    <th class="dark:text-white">{{$staff->id}}</th>
                    <td class="dark:text-gray-400">
                        <div class="">
                            {{$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" {{$staff->active == 1 ? 'checked' : '' }}
                            />

                        </div>
                    </td>
                    <td>
                        <div class="p-3 flex flex-col items-center justify-center gap-2">
                            <img title="{{$staff->slug}}" src="{{asset('uploads/'.$staff->image)}}" alt="{{$staff->slug}}"
                                 class="rounded-md h-20 w-full md:h-32 max-w-[200px] object-cover">
                        </div>
                    </td>
                    <th class="dark:text-white">{{$staff->order}}</th>
                    <td class="dark:text-gray-400">
                        <div class="text-center">
                            {{$staff->slug}}
                        </div>
                    </td>
                    <td class="dark:text-gray-400">
                        <div class="text-center">
                            {{$staff->created_at}}
                        </div>
                    </td>
                    <td>
                        <div class="relative ">
                            <div class="w-full flex items-center justify-end">
                                <x-secondary-button class="table-dropdown-menu-trigger">
                                    <i class="fa fa-ellipsis"></i>
                                </x-secondary-button>
                            </div>


                            <ul  class="table-dropdown-menu invisible absolute w-40 right-0 rounded-md border shadow bg-white">
                                <li class="w-full">
                                    <a href="{{ 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="{{ 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>
            @empty
                <tr>
                    <td colspan="9">
                        <div class="flex p-3 items-center justify-center flex-col gap-3">
                            <img src="{{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>
                                <x-primary-button>
                                    <a href="{{route('add-staff')}}" class="">Add A Staff</a>
                                </x-primary-button>
                            </div>
                        </div>
                    </td>
                </tr>
            @endforelse
            </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>@endsection