<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="bg-main-container rounded-md">
            <div class="max-w-full mx-auto px-5 text-left flex flex-col items-start">
                <h2 class="text-2xl  text-black ">
                    Send Patch to Customer
                </h2>
                <a href="/send-patch" type="button" class="btn  m-3 text-white bg-primary px-3 py-2">Back</a>
            </div>
            <div class="" x-data="{ tomGReady: false }" x-show="tomGReady">
                <div class="mb-4">
                    <div class="grid grid-cols-4 gap-2 ">
                        <div class="bg-white col-span-1 p-6 rounded-lg shadow-md">
                            <!-- Server Information Group -->
                            <div class="mb-6">
                                <h3 class="text-lg font-medium text-gray-900 mb-2">Server Information</h3>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label for="server_of" class="block text-sm font-medium text-gray-700">Server of</label>
                                        <select id="server_of" name="server_of" wire:model="selectedOwnerType"
                                            class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                            <option value="">Please Select</option>
                                            @foreach ($ownerType as $type)
                                                <option value="{{ $type->owntype_code }}">{{ $type->owntype_description }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                   
                                </div>
                            </div>
                        
                            <!-- Company & Database Information Group -->
                            <div class="mb-6">
                                <h3 class="text-lg font-medium text-gray-900 mb-2">Company & Database Information</h3>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label for="company" class="block text-sm font-medium text-gray-700">Company</label>
                                        <input type="text" id="company" name="company"
                                            class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    </div>
                                    <div>
                                        <label for="db_type" class="block text-sm font-medium text-gray-700">DB Type</label>
                                        <input type="text" id="db_type" name="db_type"
                                            class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    </div>
                                </div>
                            </div>
                        
                            <!-- Additional Information Group -->
                            <div class="mb-6">
                                <h3 class="text-lg font-medium text-gray-900 mb-2">Additional Information</h3>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label for="cur_ver" class="block text-sm font-medium text-gray-700">Cur. Ver.</label>
                                        <input type="text" id="cur_ver" name="cur_ver"
                                            class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    </div>
                                    <div>
                                        <label for="hscode_method" class="block text-sm font-medium text-gray-700">HSCODE 2017 Method</label>
                                        <select id="hscode_method" name="hscode_method"
                                            class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                            <option>Please Select</option>
                                            <!-- Options -->
                                        </select>
                                    </div>
                                </div>
                            </div>
                        
                            <!-- Company Select Group -->
                            <div>
                                <h3 class="text-lg font-medium text-gray-900 mb-2">Company Selection</h3>
                                <div>
                                    <label for="company_select" class="block text-sm font-medium text-gray-700">Company</label>
                                    <select id="company_select" name="company_select"
                                        class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                        <option>Please select company</option>
                                        <!-- Options -->
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div wire:ignore class="col-span-3">
                            <label for="server_key" class="block text-sm font-medium text-gray-700">Server Key</label>
                            <input id="server_key" class="mt-1.5 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                x-data="{
                                    serverKeyLists: @entangle('server_lists'),
                                    serverKeyOption: @entangle('serverKeyOption')
                                }"
                                x-init="serverKeyLists = [];
                                const tempLicense = pages.serverLicenseSelect;
                                tempLicense.serverkey.options = serverKeyOption;
                                
                                $el._x_tom = new Tom($el, {
                                    ...tempLicense.serverkey,
                                    onChange: (value) => {
                                        serverKeyLists = value;
                                    }
                                });
                                
                                $el._x_tom.setValue(serverKeyLists);
                                tomGReady = true;"
                                type="text" placeholder="Search Server Key">
                        </div>
                    </div>
                   
                </div>
           
                <div class="flex justify-end mb-4 space-x-2">
                    <button type="button" wire:click="sendPatch"
                    class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus">Send</button>
                   
                    {{-- <button class="btn bg-stone-600 text-white px-4 py-2 rounded hover:bg-stone-700">Resend</button> --}}

                </div>
                <div class="mb-4">
                    <h3 class="text-xl font-medium leading-6 text-black">Server list</h3>
                </div>
                <div class="flex px-5 items-center justify-end mb-3" x-data="{ isInputActive: false }">
                    <button @click="isInputActive = !isInputActive"
                        class="btn  h-8 w-14 rounded-full p-0  hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 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="keyword" />
                    </span>
                    <span class="w-52" x-show="isInputActive === true">
                        <select wire:model="searchSelected"
                            class="form-select h-9  w-full rounded-lg border border-slate-300 bg-white 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">
                            <option value="SNKEY">Server Key</option>
                            <option value="COMPANY">Company</option>
                        </select>
                    </span>
                </div>
                <div class="is-scrollbar-hidden min-w-full table-responsive">
                   <table aria-describedby="mydesc"  class="min-w-full is-hoverable table w-full divide-y divide-gray-200">
                        <thead>
                            <tr>
                                <th scope="col" 
                                    class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                    Choose</th>
                                <th scope="col" 
                                    class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                    Server ID</th>
                                <th scope="col" 
                                    class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                    Company</th>
                                <th scope="col" 
                                    class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                    Serverkey</th>
                                <th scope="col" 
                                    class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                    Status</th>
                                <th scope="col" 
                                    class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                    Task Date</th>
                                <th scope="col" 
                                    class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                    Action</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach ($results as $server)
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox"
                                            class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ $server->ServerID }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ $server->COMPANY }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->SNKEY }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->STATUS }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ $server->TaskDate }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        @if ($server->TaskStatus == '999')
                                            <button type="button" wire:click="resendPatch({{ $server->ServerID }})"
                                                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
                                                    class="fa fa-repeat" aria-hidden="true"></i></button>
                                        @else
                                            <button type="button" wire:click="deletePatch({{ $server->ServerID }})"
                                                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
                                                    class="fa fa-trash" aria-hidden="true"></i></button>
                                        @endif

                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="mt-4">
                    {{ $results->links('livewire.paginate-custom') }}
                </div>
            </div>
        </div>
</div>
