<div wire:loading.remove>
    <style>
        table {
            width: 100%;
            table-layout: auto;
        }

        .table-responsive {
            overflow-x: auto;
        }

        .form-upload {
            display: inline-block;
            margin-left: 1rem;
        }

        .form-upload input[type="file"] {
            display: inline-block;
            margin-right: 0.5rem;
            padding: 0.5rem;
            border-radius: 0.25rem;
        }

        .form-upload label {
            margin-left: 0.5rem;
            margin-right: 1rem;
        }

        .form-upload button {
            margin-top: 0.5rem;
        }
    </style>
    <main 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="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
                <div class="pb-4">
                    <div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
                        <h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
                            NEW UPDATE EXCHANGERATE MASTERFILE
                        </h2>
                    </div>
                    <div class="flex justify-between">
                        <div class="px-2 ml-4">
                            <button type="button" class="py-2 px-3 bg-stone-700 rounded-lg text-white"
                                wire:click="showexchangerateAddForm">Add</button>
                            <button type="button" class="py-2 px-3 bg-stone-700 rounded-lg text-white"
                                onclick="confirmDeleteSelected()">Delete</button>
                            <!-- File Upload Form -->
                            @livewire('pages.exchangerate.exchangerate-upload')
                        </div>
                        <div class="inline-flex flex-initial">
                            <div x-data="{ isInputActive: true }">
                                <div class="flex gap-4 px-5 items-center">
                                    <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="currentColor">
                                            <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-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">
                                            @foreach ($searchBy as $key => $by)
                                                <option value="{{ $key }}">{{ $by }}</option>
                                            @endforeach
                                        </select>
                                    </span>
                                    <button type="button" class="bg-stone-700 text-white px-4 py-2 rounded"
                                        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 class="is-hoverable table 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-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                            Currency
                                        </th>
                                        <th
                                            class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                            Expired date
                                        </th>
                                        <th
                                            class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                            Finish date
                                        </th>
                                        <th
                                            class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                            Rate
                                        </th>
                                        <th
                                            class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                            Baht
                                        </th>
                                        <th
                                            class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                            Export Baht
                                        </th>
                                        <th
                                            class="whitespace-nowrap rounded-tr-lg bg-slate-200 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 $exc)
                                        <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 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" wire:model.defer="selectedExchangerates"
                                                        value="{{ $exc->currency }},{{ $exc->exdate }}" />
                                                </label>
                                            </td>
                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $exc->currency }}</td>
                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $exc->exdate }}</td>
                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $exc->finishdate }}</td>
                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $exc->rate }}</td>
                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $exc->baht }}</td>
                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $exc->exbaht }}</td>
                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">
                                                <div class="flex justify-center space-x-2">
                                                    <a wire:click="showexchangerateEditForm('{{ $exc->currency }}', '{{ $exc->exdate }}')"
                                                        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>
                                                    <a onclick="confirmDelete2('{{ $exc->currency }}', '{{ $exc->exdate }}')"
                                                        class="btn h-8 w-8 p-0 text-danger hover:bg-danger/20 focus:bg-danger/20 active:bg-danger/25">
                                                        <i class="fa fa-trash"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <livewire:delete-modal />
                        {{ $results->links('livewire.paginate-custom') }}
                    </div>
                </div>
            </div>
        @elseif($action === 'add')
            <livewire:pages.exchangerate.exchangerate-create />
            @elseif($action === 'edit')
                @livewire('pages.exchangerate.exchangerate-edit', ['currency' => $editCurrency, 'exdate' => $editExdate])
            @endif
    </main>
    @vite(['resources/js/app.js', 'resources/js/sweetalert.js'])
    <script src="{{ asset('js/confirmDelete.js') }}"></script>
</div>
