<div>
    <div id="backgroundDiv" class="w-11/12 mx-auto mt-5 mb-5 pb-5 bg-white/20 rounded-lg shadow-lg backdrop-blur-sm border border-white/30">
        <div class="w-10/12 mx-auto pt-5" id="filterDiv">
            @if ($errors->any())
                {{ $displayCustomizeDiv = false }}
            @endif
            <h1 class="text-2xl font-bold tracking-tight text-gray-900">Manual Response: Standard Template</h1>
            <hr class="my-5">
            <div
                class="badge space-x-2.5 rounded-full bg-primary text-white shadow-soft shadow-lg shadow-[#1f863680]/50 p-2.5 mb-2">
                <div class="size-2 rounded-full bg-current mr-1"></div>
                Step 1: Config
            </div>
            <div class="mx-auto">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 pb-1">
                    <label class="block">
                        <span class="block text-sm font-medium text-slate-700">Message</span>
                        <span class="relative mt-1.5 mb-0.1 flex">
                            <select
                                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"
                                wire:model="messageId">
                                <option value="">Select an option</option>
                                @foreach ($messageTypes as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </span>
                        @error('messageId')
                            <span class="text-tiny+ text-error">{{ $message }}</span>
                        @enderror
                    </label>
                    <label class="block">
                        <span class="block text-sm font-medium text-slate-700">Template</span>
                        <span class="relative mt-1.5 mb-0.1 flex">
                            <select
                                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"
                                wire:model.defer="templateId">
                                <option value="">Select an option</option>
                                @foreach ($responseTemplates as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </span>
                        @error('templateId')
                            <span class="text-tiny+ text-error">{{ $message }}</span>
                        @enderror
                    </label>
                    <label class="block">
                        <span class="block text-sm font-medium text-slate-700">Document Type</span>
                        <span class="relative mt-1.5 mb-0.1 flex">
                            <select
                                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"
                                wire:model.defer="docType" {{ $disableDocType ? 'disabled' : '' }}>
                                <option value="">Select an option</option>
                                @foreach ($docTypes as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </span>
                        @error('docType')
                            <span class="text-tiny+ text-error">{{ $message }}</span>
                        @enderror
                    </label>
                </div>
                <div class="flex justify-center items-center py-1">
                    <button class="bg-primary text-white hover:bg-primary-focus py-2 px-4 rounded-md mr-1" wire:click="gotoCustomize">
                        <i class="fa-solid fa-arrow-right mr-1"></i>Customize</button>
                    <label class="inline-flex items-center space-x-2">
                        <input
                            class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
                            type="checkbox" wire:model.defer="lockData" @if ($disableLockData) disabled @endif />
                        <p>Lock Data</p>
                    </label>
                </div>
            </div>
        </div>

        @if ($displayCustomizeDiv)
            <div class="w-10/12 mx-auto" id="customizeResponseDiv">
                <hr class="my-5">
                {{-- <h1 class="text-2xl font-bold tracking-tight text-gray-900">1. Customize Template</h1> --}}
                <div
                    class="badge space-x-2.5 rounded-full bg-primary text-white shadow-soft shadow-lg shadow-[#1f863680]/50 p-2.5 mb-2">
                    <div class="size-2 rounded-full bg-current mr-1"></div>
                    Step 2: Customize
                </div>
                @if (session()->has('error'))
                    <div x-data="{ show: {{ session()->has('error') ? 'true' : 'false' }} }" x-init="setTimeout(() => show = false, 2000)" x-show="show"
                        x-transition:leave="transition ease-in duration-1000" x-transition:leave-start="opacity-100"
                        x-transition:leave-end="opacity-0"
                        class="alert flex rounded-lg bg-error px-4 py-4 text-white sm:px-5">
                        {{ session('error') }}
                    </div>
                @endif
                <div class="flex">
                    <div class="w-4/12">
                        <div class="w-12/12 py-1">
                            @foreach ($xmlData as $key => $value)
                            {{-- Change $key to Message to use autocomplete message --}}
                            @if ($key == 'UNUSED')
                                <label class="block">
                                    <span class="text-sm font-medium text-slate-700">{{ $key }}</span>
                                    <span class="relative mt-1.5 mb-1.5 flex">
                                        <input
                                            class="form-input peer w-full rounded-lg border border-slate-300 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"
                                            type="text" id="{{ $key }}" wire:model="xmlData.{{ $key }}" value="{{ $value }}"
                                            autocomplete="off" />
                        
                                        @if (!empty($masterMsg) &&  $showSearch)
                                            <ul
                                                class="z-50 border border-gray-200 top-8 rounded-md max-h-64 w-full overflow-auto absolute bg-white mt-1">
                                                @forelse ($masterMsg as $m)
                                                    <li class="p-2 hover:bg-gray-100 cursor-pointer"
                                                        wire:click="selectMessage('{{ $m->id }}')"> {{ $m->message }}
                                                    </li>
                                                @empty
                                                    <li class="p-2 text-gray-500">No results found</li>
                                                @endforelse
                                            </ul>
                                        @endif
                                    </span>
                                </label>
                            @else
                                <label class="block">
                                    <span class="text-sm font-medium text-slate-700">{{ $key }}</span>
                                    <span class="relative mt-1.5 mb-1.5 flex">
                                        <input
                                            class="form-input peer w-full rounded-lg border border-slate-300 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"
                                            type="text" id="{{ $key }}" wire:model="xmlData.{{ $key }}" value="{{ $value }}"
                                            autocomplete="off" />
                                    </span>
                                </label>
                            @endif
                        @endforeach
                        </div>
                    </div>
                    <div class="w-8/12 pl-5">
                        <div>
                            <span class="block text-sm font-medium text-slate-700 mb-1.5">Preview XML</span>
                        </div>
                        <div class="bg-white p-2 rounded-lg">
                            <!-- Highlight.js Code Block -->
                            <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg p-2" x-data x-init="hljs.highlightElement($el);"><code class="xml">{{ $xmlContent }}</code></pre>
                        </div>
                        <div class="flex justify-center items-center pt-1">
                            <button
                                class="bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 rounded-md border border-[#e5e7eb] py-2 px-4 mr-1"
                                wire:click="reGenerateXML">
                                <i class="fa-solid fa-rotate mr-1"></i>Reload XML</button>
                                {{-- <button class="bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 rounded-md border border-[#e5e7eb] py-2 px-4 mr-1" wire:click="downloadXML" ><i class="fa fa-download mr-1" aria-hidden="true"></i>Download File</button> --}}
                        </div>
                    </div>
                </div>
                <div class="flex justify-center items-center py-1">
                    <button class="bg-primary text-white hover:bg-primary-focus font-bold py-2 px-4 rounded-md mr-1"
                        wire:click="generateAndUploadXml"></i>Submit</button>
                </div>
            </div>
        @endif
        @include('livewire.loading-component', ['action' => 'generateAndUploadXml, messageId'])
    </div>
    <script>
        document.addEventListener('livewire:load', () => {
            Livewire.on('fileManualDownload', (url) => {
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', '');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        });
    </script>
</div>
