<x-app-layout-sideblock title="Starter Sideblock" is-sidebar-open="true" is-header-blur="true">
    <main class="main-content w-full px-[var(--margin-x)] pb-8">
        <div class="flex items-center space-x-4 py-5 lg:py-6">
            <ul class="hidden flex-wrap items-center space-x-2 sm:flex">
                <li class="flex items-center space-x-2">
                    <a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
                        href="/">Home</a>
                    <svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </li>
                <li> Configuration </li>
                <svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
                <li class="flex items-center space-x-2">
                    <a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
                        href="{{ route($route) }}">Consignee List</a>
                </li>
            </ul>
        </div>
        <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
            <div class="card pb-4">
                <div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
                    <h3 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
                    Consignee List
                    </h3>
                    {{-- <a href="{{ $url }}/create"
                        class="btn min-w-[7rem] mx-4 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                        New
                        <i></i>
                    </a> --}}
                </div>
                @include('components/search-by' ,  ['searchBy' => $searchBy??[]])

                <div class="mx-3 mt-3 px-4">
                    <div class="is-scrollbar-hidden min-w-full overflow-x-auto" x-data="pages.tables.initExample1">
                        <table class="is-hoverable w-full text-left">
                            <thead>
                                <tr>
                                    <th
                                        class="whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                        #
                                    </th>
                                    <th
                                        class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                        Consignee Code
                                    </th>
                                    <th
                                        class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                        Consignee Name
                                    </th>
                                    <th
                                        class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                        Contact Name
                                    </th>
                                    <th
                                        class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                        Contact Tax No
                                    </th>
                                    <th
                                        class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                        Branch
                                    </th>
                                    <th
                                        class="whitespace-nowrap rounded-tr-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                        Action
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($consignee as $consigneedata)
                                    <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">  
                                            <label class="inline-flex items-center space-x-2">
                                                <input
                                                  class="form-checkbox is-basic h-4 w-4 rounded bg-slate-100 border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
                                                  type="checkbox" value="{{ $consigneedata['id'] }}"
                                                />
                                              </label>
                                        </td>
                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $consigneedata['CSN_CODE'] }}</td>
                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $consigneedata['CSN_NAME'] }}</td>
                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $consigneedata['CSN_EMAIL'] }}</td>
                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $consigneedata['CSN_TAXID'] }}</td>
                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $consigneedata['CSN_BRANCH'] }}</td>
                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                                            <div class="flex justify-center space-x-2">
                                                <a href="{{ $url.'/'.$consigneedata['id'].'/edit' }}" @click="editItem"
                                                    class="btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
                                                    <i class="fa fa-edit"></i>
                                                </a>
                                                <div x-data="{ showModal: false }">
                                                    <a @click="showModal = true"
                                                        class="btn h-8 w-8 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
                                                        <i class="fa fa-trash-alt"></i>
                                                    </a>

                                                    <template x-teleport="#x-teleport-target">
                                                        <div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
                                                            x-show="showModal" role="dialog"
                                                            @keydown.window.escape="showModal = false">
                                                            <div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
                                                                @click="showModal = false" x-show="showModal"
                                                                x-transition:enter="ease-out"
                                                                x-transition:enter-start="opacity-0"
                                                                x-transition:enter-end="opacity-100"
                                                                x-transition:leave="ease-in"
                                                                x-transition:leave-start="opacity-100"
                                                                x-transition:leave-end="opacity-0"></div>
                                                            <div class="relative p-4 max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5"
                                                                x-show="showModal" x-transition:enter="ease-out"
                                                                x-transition:enter-start="opacity-0"
                                                                x-transition:enter-end="opacity-100"
                                                                x-transition:leave="ease-in"
                                                                x-transition:leave-start="opacity-100"
                                                                x-transition:leave-end="opacity-0">
                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                    class="inline h-28 w-28 text-error" fill="none"
                                                                    viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                                        stroke-width="2"
                                                                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z">
                                                                    </path>
                                                                </svg>
                                                                <div class="mt-4 mx-5">
                                                                    <h2
                                                                        class="text-2xl text-slate-700 dark:text-navy-100">
                                                                        Are you sure <br> you want to delete this item ?
                                                                    </h2>
                                                                    <p class="mt-2"></p>
                                                                    <button @click="showModal = false"
                                                                        class="btn mt-6 bg-[#6a6e69] font-medium text-white hover:bg-[#313430] focus:bg-[#313430]-focus active:bg-[#313430]-focus/90">Close</button>
                                                                    <a href="deleteurl"
                                                                        @click.prevent="showModal = false"
                                                                        class="btn mt-6 bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90">confirm</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </template>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    {{ $consignee->links('paginate-custom') }}
                </div>
            </div>


            {{-- <div class="px-4">
                    <div x-data="pages.basicTable.initGridTable({{ $json_columns }}, {{ $users }}, {{ $paginate }}, '{{ $url }}', {{ json_encode($permission) }})"></div>
                </div> --}}
        </div>
    </main>

</x-app-layout-sideblock>
