<div class="w-full md:w-1/3 px-3 mb-6" x-cloak x-data="{ showProgressModal: @entangle('showProgressModal') }">

    <div class="p-6 bg-white shadow-md rounded-lg">
        <h2 class="text-2xl font-bold mb-4">Selected Patches</h2>
        <div class="bg-gray m-3">
            @foreach ($selectedPatchName as $key => $patch)
                <button class="bg-lime-800 text-white px-4 py-2 rounded m-1">{{ $selectedPatches[$key]." : ".$patch }}</button>
            @endforeach
        </div>
        <div class="flex flex-col items-center">
            {{-- <input type="text"
                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"
                name="serverkey" id="serverkey"> --}}
            <div>
                <input type="text"
                    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"
                    wire:model.debounce.500ms="serverkey" placeholder="Search for a server key">

                @if (!empty($serverkey) && $showSearch)
                    <ul class="border border-gray-200 rounded-md max-h-64 overflow-auto">
                        @forelse($results as $result)
                            <li class="p-2 hover:bg-gray-100 cursor-pointer"
                                wire:click="selectResult('{{ $result->SNKEY }}')">
                                {{ $result->SNKEY }}
                            </li>
                        @empty
                            <li class="p-2 text-gray-500">No results found</li>
                        @endforelse
                    </ul>
                @endif
            </div>
            <button type="button" class="bg-primary text-white px-4 py-2 rounded max-w-xs mt-4"
                wire:click="sendSelectedPatches" @click="showProgressModal = true" wire:loading.attr="disabled"
                type="button" class="bg-primary text-white px-4 py-2 rounded relative">
                <span wire:loading.remove>Send Patch</span>
                <span wire:loading>
                    <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                            stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                        </path>
                    </svg>
                </span>
            </button>
        </div>
    </div>

    <div x-show="showProgressModal" x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-90" class="fixed z-10 inset-0 overflow-y-auto">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div x-show="showProgressModal" class="fixed inset-0 transition-opacity" aria-hidden="true">
                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div x-show="showProgressModal"
                class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                <div>
                    <div class="mt-3 text-center sm:mt-5">
                        <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                            Inserted Patch IDs
                        </h3>
                        <div class="mt-2">
                            <ul>
                                @if (count($reponseMessages) > 0)
                                    @foreach ($reponseMessages as $message)
                                        <li>{!! $message !!}</li>
                                    @endforeach
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="mt-5 sm:mt-6">
                    <button @click="showProgressModal = false" type="button"
                        class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:text-sm">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
    
</div>
