<div class="border-0 shadow-none">
    <div wire:loading.class="" wire:loading.class.remove="hidden" wire:target="save"
        class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
        <div class="flex justify-center items-center ">
            <div class="items-center h-100vh" style="align-content: center;">
                <div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
            </div>

        </div>
    </div>
    <div class="m-2">
        @if ($action === 'list')
            @if ($message)
                <div class="alert alert-success">
                    <div wire:ignore x-data="{ show: true }" x-init="setTimeout(() => show = false, 3000)"
                        x-show.transition.duration.500ms="show"
                        class="fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg">
                        {{ $message }}
                    </div>
                </div>
            @endif
            <div class="my-5 flex h-8 place-content-center px-4 ">
                <h2 class="text-xl  text-slate-800">
                    Send Patch to Customer
                </h2>
            </div>
            <div class="pb-4 card shadow-lg p-4">
                <div class="flex justify-between">
                    <div class="px-2 ml-4">
                    </div>
                    <div class="inline-flex flex-initial">
                        <div x-data="{ isInputActive: true }">
                            <div class="flex flex-wrap gap-4 px-5 items-center">
                                <button @click="isInputActive = !isInputActive"
                                    class="btn  h-8 w-14 rounded-full p-0  hover:bg-primary-focus hover:text-main-container active:text-main-container focus:text-main-container  dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
                                        viewBox="0 0 24 24" stroke="black">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                    </svg>
                                </button>
                                <span class="w-64" x-show="isInputActive === true">
                                    <input
                                        class="form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2  placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                        placeholder="Search Keyword" type="text" wire:model.defer="keyword" />
                                </span>
                                <span class="w-52" x-show="isInputActive === true">
                                    <select wire:model.defer="searchSelected"
                                        class="form-select h-9  w-full rounded-lg border border-slate-300 bg-main-container  px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
                                        @foreach ($searchBy as $key => $by)
                                            <option value="{{ $key }}">{{ $by }}</option>
                                        @endforeach
                                    </select>
                                </span>
                                <button type="button"
                                    class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus"
                                    wire:click="search">Search</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mx-3 mt-3 px-4">
                    <div class="is-scrollbar-hidden min-w-full table-responsive" x-data="pages.tables.initExample1">
                       <table aria-describedby="mydesc"  class="is-hoverable table w-full text-left text-black">
                            <thead>
                                <tr>
                                    <th scope="col" 
                                        class="whitespace-nowrap text-center rounded-tl-lg bg-slate-300 px-4 py-3 font-semibold uppercase text-black  dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                        Patch ID
                                    </th>
                                    <th scope="col" 
                                        class="whitespace-nowrap bg-slate-300  text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                        Patch Name
                                    </th>
                                    <th scope="col" 
                                        class="whitespace-nowrap bg-slate-300  text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                        Description
                                    </th>
                                    <th scope="col" 
                                        class="whitespace-nowrap bg-slate-300  text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                        Server
                                    </th>
                                    <th scope="col" 
                                        class="whitespace-nowrap bg-slate-300  text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                        Date
                                    </th>
                                    <th scope="col" 
                                        class="whitespace-nowrap bg-slate-300  text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                        Level
                                    </th>
                                    <th scope="col" 
                                        class="whitespace-nowrap bg-slate-300  text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                        Remark
                                    </th>
                                    <th scope="col" 
                                        class="whitespace-nowrap rounded-tr-lg bg-slate-300  text-black px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                        Action
                                    </th>
                                </tr>
                            </thead>
                            <tbody>

                                @foreach ($results as $patch)
                                    <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
                                        <td class="whitespace-nowrap px-1 py-3 sm:px-2  text-center">{{ $patch->PID }}
                                        </td>
                                        <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PATCHNAME }}</td> 
                                        <td class="whitespace-nowrap px-1 py-3 sm:px-2">
                                            {{ \Illuminate\Support\Str::limit($patch->PDESC, 40) }}</td>
                                        <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->NUMSERVER }}</td>
                                        <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PDATE }}</td>
                                        <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PLEVEL }}</td>
                                        <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->Remark }}</td>
                                        <td class="whitespace-nowrap px-1 py-3 sm:px-2">
                                            <div class="flex justify-center space-x-2">
                                                <a wire:click="showpatchEditForm({{ $patch->PID }})"
                                                    class="btn h-8 w-8 p-0 hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus  active:bg-info/25">
                                                    <i aria-hidden="true" class="fa fa-edit"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    {{-- <livewire:delete-modal /> --}}
                    {{ $results->links('livewire.paginate-custom') }}

                </div>
            </div>
        @elseif($action === 'edit')
            <livewire:pages.send-patch.send-patch-edit :editPid="$editPid">
        @endif
    </main>
</div>
