@php
    $formatFiles = App\Models\ConfFormatFile::all();
@endphp
<div class="bg-main-container" x-data="{ notLimit: false }">
    <div class="max-w-full mx-auto p-6">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-3xl font-semibold text-gray-800">Patch Master File</h2>
            <a href="/patch" class="btn text-white bg-primary px-4 py-2 rounded hover:bg-primary-focus">
                Back
            </a>
        </div>
        <form action="{{ route('patch.master-file.create') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="bg-white p-6 rounded-lg shadow-md">
                <div class="mb-4">
                    <label for="format_file_id" class="block text-gray-700 font-medium">Choose Format File</label>
                    <select id="format_file_id" name="format_file_id"
                        class="w-full mt-2 p-3 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary">
                        @foreach ($formatFiles as $format)
                            <option value="{{ $format->formatservice_ID }}">{{ $format->name }}</option>
                        @endforeach

                    </select>
                </div>

                <div class="mb-4">
                    <label for="upload_file" class="block text-gray-700 font-medium">Upload File Data</label>
                    <div class="flex items-center mt-2">
                        <!-- Loading Spinner -->
                        <span id="loading-spinner" class="hidden">
                            <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 relative">
                            <input tabindex="-1" id="file-upload" type="file" name="file"
                                class="absolute inset-0 h-full w-full opacity-0 cursor-pointer"
                                onchange="handleFileUpload(event)" />
                            <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>
                        <span id="file-name" class="ml-4 text-gray-600"></span>

                        <button id="remove-file" type="button" class="ml-4 text-red-500 hover:text-red-700 hidden"
                            onclick="removeFile()">
                            <i class="fa fa-remove"></i> Remove File
                        </button>
                    </div>

                    @error('file')
                        <span class="text-red-600 text-sm mt-2">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-4">
                    <label for="limit_data" class="block text-gray-700 font-medium">Limit Data per Patch</label>
                    <select id="limit_data"
                        class="w-full mt-2 p-3 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"
                        :disabled="notLimit" name="limit">
                        <option value="10000">10,000</option>
                        <option value="5000">5,000</option>
                        <option value="3000">3,000</option>
                        <option value="1000">1,000</option>
                    </select>
                    <div class="mt-3">
                        <label class="inline-flex items-center">
                            <input
                                class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary  focus:bordark: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" name="noLimit" />
                            <span class="ml-2">Not Limit</span>
                        </label>
                    </div>
                </div>

                <div class="mb-4">
                    <label class="inline-flex items-center">
                        <input name="genWithSmartUpdate"
                            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="checked">
                        <span class="ml-2">Gen patch ด้วย function spnsmartupdatedecode</span>
                    </label>
                </div>

                <div class="mb-4 flex items-center space-x-4">
                    <label class="inline-flex items-center">
                        <input name="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="checked">
                        <span class="ml-2">Create Patch</span>
                    </label>
                    <label class="inline-flex items-center">
                        <input name="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="checked">
                        <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"
                        type="submit">
                        Create Patch
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    function handleFileUpload(event) {
        const fileInput = event.target;
        const fileNameDisplay = document.getElementById('file-name');
        const removeButton = document.getElementById('remove-file');
        const loadingSpinner = document.getElementById('loading-spinner');
        loadingSpinner.classList.remove('hidden');
        if (fileInput.files.length > 0) {
            const fileName = fileInput.files[0].name;
            fileNameDisplay.textContent = `Selected File: ${fileName}`;
            removeButton.classList.remove('hidden');
        } else {
            fileNameDisplay.textContent = '';
            removeButton.classList.add('hidden');
        }

        setTimeout(() => {
            loadingSpinner.classList.add('hidden');
        }, 1000);
    }

    function removeFile() {
        const fileInput = document.getElementById('file-upload');
        const fileNameDisplay = document.getElementById('file-name');
        const removeButton = document.getElementById('remove-file');
        fileInput.value = '';
        fileNameDisplay.textContent = '';
        removeButton.classList.add('hidden');
    }
</script>