<div class="bg-main-container" x-data="{ notLimit: false }">
    <div class="max-w-full mx-auto p-6">
        <div class="mt-5  mb-2 flex h-8 place-content-center px-4 ">
            <h2 class="text-xl  text-slate-800">
                Patch Exchange Rate
            </h2>
            <h2 class="ml-3 text-xl text-slate-800 font-semibold underline  underline-offset-4">
                Create
            </h2>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-md">

            <div class="mb-4">
                <div class="flex items-center mt-2">
                    <label for="upload_file" class="block text-gray-700 font-medium mr-5">Upload File Data</label>

                    @if ($file)
                        <div class="text-sm text-gray-600 dark:text-gray-300 mr-4">
                            Uploaded File: {{ $file->getClientOriginalName() }}
                        </div>
                    @endif

                    <span wire:loading>
                        <svg class="animate-spin h-5 w-5 text-primary m-3" 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>

                    <label for="file-upload"
                        class="btn bg-gray-200 text-gray-800 hover:bg-gray-300 focus:bg-gray-300 active:bg-gray-300 dark:bg-gray-500 dark:text-gray-50 dark:hover:bg-gray-450 dark:focus:bg-gray-450 dark:active:bg-gray-450/90">
                        <input tabindex="-1" id="file-upload" type="file" wire:model="file"
                            class="pointer-events-none absolute inset-0 h-full w-full opacity-0" />
                        <div class="flex items-center space-x-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                            </svg>
                            <span>Choose File</span>
                        </div>

                    </label>
                </div>

                @error('file')
                    <span class="text-red-600 text-sm mt-2">{{ $message }}</span>
                @enderror
            </div>


            <div class="mb-4 flex items-center space-x-4">
                <label class="inline-flex items-center">
                    <input wire:model.defer="createPatch"
                        class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked: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="">
                    <span class="ml-2">Create Patch</span>
                </label>
                <label class="inline-flex items-center">
                    <input wire:model.defer="updatePatch"
                        class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked: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="">
                    <span class="ml-2">Update Patch</span>
                </label>
                <label class="inline-flex items-center">
                    <input wire:model.defer="sendToEec"
                        class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked: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="">
                    <span class="ml-2">Send To EEC</span>
                </label>
            </div>

            <div class="text-right">
                <button
                    class="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary-focus focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50"
                    wire:click="upload">
                    Upload
                </button>
            </div>
        </div>
    </div>
</div>
