<div class="bg-main-container">
    <div class="max-w-full mx-auto p-5 ">
        

        <div x-data="{ messages: @entangle('messages') }">
            <template x-for="(message, index) in messages" :key="index">
                <div x-data="{ show: true }" x-init="setTimeout(() => {
                    show = false;
                    setTimeout(() => { messages.splice(index, 1); }, 500);
                }, 3000)" x-show="show" x-transition
                    class="fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg mt-2">
                    <span x-text="message"></span>
                </div>
            </template>
        </div>
        <div class="flex flex-wrap -mx-3 w-full bg-main-container items-center justify-center " x-data="{ activeTab: 'form' }">
            <div class="w-11/12 p-5 mb-6 shadow-md rounded-lg bg-white">
                <div class="mb-4 border-b border-gray-200">
                    <ul class="flex flex-wrap -mb-px">
                        <li class="mr-2">
                            <a href="#" @click.prevent="activeTab = 'form'"
                                :class="{ 'border-b-2 border-blue-600 text-blue-600': activeTab === 'form' }"
                                class="inline-block py-2 px-4">Form</a>
                        </li>
                        <li class="mr-2">
                            <a href="#" @click.prevent="activeTab = 'organize'" wire:click="loadOrganize"
                                :class="{ 'border-b-2 border-blue-600 text-blue-600': activeTab === 'organize' }"
                                class="inline-block py-2 px-4">Organize</a>
                        </li>
                        <li class="mr-2">
                            <a href="#" @click.prevent="activeTab = 'csvMapping'" wire:click="loadMapping"
                                :class="{ 'border-b-2 border-blue-600 text-blue-600': activeTab === 'csvMapping' }"
                                class="inline-block py-2 px-4">CSV Mapping</a>
                        </li>
                        <li class="mr-2">
                            <a href="#" @click.prevent="activeTab = 'printForm'" wire:click="loadPrintForm"
                                :class="{ 'border-b-2 border-blue-600 text-blue-600': activeTab === 'printForm' }"
                                class="inline-block py-2 px-4">Print Form</a>
                        </li>
                        <li class="mr-2">
                            <a href="#" @click.prevent="activeTab = 'userInterface'"
                                wire:click="loadUserInterface"
                                :class="{ 'border-b-2 border-blue-600 text-blue-600': activeTab === 'userInterface' }"
                                class="inline-block py-2 px-4">User Interface</a>
                        </li>
                        <li class="mr-2">
                            <a href="#" @click.prevent="activeTab = 'global'" wire:click="loadGlobal"
                                :class="{ 'border-b-2 border-blue-600 text-blue-600': activeTab === 'global' }"
                                class="inline-block py-2 px-4">Global</a>
                        </li>
                        <li class="mr-2">
                            <a href="#" @click.prevent="activeTab = 'parameter'" wire:click="loadParameter"
                                :class="{ 'border-b-2 border-blue-600 text-blue-600': activeTab === 'parameter' }"
                                class="inline-block py-2 px-4">Parameter</a>
                        </li>
                        <li class="mr-2">
                            <a href="#" @click.prevent="activeTab = 'onload'" wire:click="loadOnload"
                                :class="{ 'border-b-2 border-blue-600 text-blue-600': activeTab === 'onload' }"
                                class="inline-block py-2 px-4">Onload</a>
                        </li>
                        <li class="mr-2">
                            <a href="#" @click.prevent="activeTab = 'validate'" wire:click="loadValidate"
                                :class="{ 'border-b-2 border-blue-600 text-blue-600': activeTab === 'validate' }"
                                class="inline-block py-2 px-4">Validate</a>
                        </li>
                        <li class="mr-2">
                            <a href="#" @click.prevent="activeTab = 'mapTo'" wire:click="loadMapTo"
                                :class="{ 'border-b-2 border-blue-600 text-blue-600': activeTab === 'mapTo' }"
                                class="inline-block py-2 px-4">Map To</a>
                        </li>
                        <li class="mr-2">
                            <a href="#" @click.prevent="activeTab = 'mainVar'" wire:click="loadMainVar"
                                :class="{ 'border-b-2 border-blue-600 text-blue-600': activeTab === 'mainVar' }"
                                class="inline-block py-2 px-4">MainVar</a>
                        </li>
                        <li class="mr-2">
                            <a href="#" @click.prevent="activeTab = 'fileDownload'" wire:click="loadFileDownload"
                                :class="{ 'border-b-2 border-blue-600 text-blue-600': activeTab === 'fileDownload' }"
                                class="inline-block py-2 px-4">File Download</a>
                        </li>
                        <li class="mr-2">
                            <a href="#"  @click.prevent="activeTab = 'historyPatch'" wire:click="loadHistoryPatch"
                                :class="{ 'border-b-2 border-blue-600 text-blue-600': activeTab === 'historyPatch' }"
                                class="inline-block py-2 px-4">History Patch</a>
                        </li>
                    </ul>
                </div>
                <div class="flex flex-wrap  items-center justify-center ">
                    <div x-show="activeTab === 'form'" class="w-4/5 ">
                        <form>
                            <!-- Server Key -->
                            <div class="mb-4 flex items-center">
                                <label for="serverKey" class="w-1/4 text-gray-700">Server Key</label>
                                <input type="text" id="serverKey"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md" wire:model.defer="serverKey">
                            </div>

                            <!-- Team -->
                            <div class="mb-4 flex items-center">
                                <label for="teamId" class="w-1/4 text-gray-700">Team</label>
                                <select id="teamId" wire:model.defer="teamId"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md">
                                    @foreach ($teams as $team)
                                        <option value="{{ is_object($team) ? $team->id : $team['id'] }}">
                                            {{ is_object($team) ? $team->teamName : $team['teamName'] }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Customer Sizing -->
                            <div class="mb-4 flex items-center">
                                <label for="customerSize" class="w-1/4 text-gray-700">Customer Sizing</label>
                                <select id="customerSize" wire:model.defer="customerSize"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md">
                                    @foreach ($sizings as $size)
                                        <option value="{{ is_object($size) ? $size->id : $size['id'] }}">
                                            {{ is_object($size) ? $size->sizeName : $size['sizeName'] }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Customer Type -->
                            <div class="mb-4 flex items-center">
                                <label for="customerType" class="w-1/4 text-gray-700">Customer Type</label>
                                <select id="customerType" wire:model.defer="customerType"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md">
                                    @foreach ($customerTypes as $type)
                                        <option value="{{ is_object($type) ? $type->id : $type['id'] }}">
                                            {{ is_object($type) ? $type->sizeTypeName : $type['sizeTypeName'] }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Company -->
                            <div class="mb-4 flex items-center">
                                <label for="company" class="w-1/4 text-gray-700">Company</label>
                                <input type="text" id="company"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md" wire:model.defer="company">
                            </div>

                            <!-- Branch -->
                            <div class="mb-4 flex items-center">
                                <label for="branch" class="w-1/4 text-gray-700">Branch</label>
                                <input type="text" id="branch"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md" wire:model.defer="branch">
                            </div>

                            <!-- Status -->
                            <div class="mb-4 flex items-center">
                                <label class="w-1/4 text-gray-700">Status</label>
                                <div class="flex items-center w-3/4">
                                    <label class="mr-4">
                                        <input type="radio" name="status" value="Y"
                                            wire:model.defer="status">
                                        Yes
                                    </label>
                                    <label>
                                        <input type="radio" name="status" value="N"
                                            wire:model.defer="status">
                                        No
                                    </label>
                                </div>
                            </div>

                            <div class="mb-4 flex items-center">
                                <label for="licenseDate" class="w-1/4 text-gray-700">License Date</label>
                                <input type="date" id="licenseDate"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md"
                                    wire:model.defer="licenseDate">
                            </div>

                            <div class="mb-4 flex items-center">
                                <label for="phpVersionId" class="w-1/4 text-gray-700">PHP Version</label>
                                <select id="phpVersionId" wire:model.defer="phpVersionId"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md">
                                    @foreach ($phpVersions as $version)
                                        <option value="{{ is_object($version) ? $version->id : $version['id'] }}">
                                            {{ is_object($version) ? $version->version : $version['version'] }}</option>
                                    @endforeach

                                </select>
                            </div>

                            <div class="mb-4 flex items-center">
                                <label for="currentVersion" class="w-1/4 text-gray-700">Version ปัจจุบัน</label>
                                <input type="text" id="currentVersion"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md"
                                    wire:model.defer="currentVersion">
                            </div>

                            <div class="mb-4 flex items-center">
                                <label for="installDate" class="w-1/4 text-gray-700">วันที่ไป Install</label>
                                <input type="date" id="installDate"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md"
                                    wire:model.defer="installDate">
                            </div>

                            <div class="mb-4 flex items-center">
                                <label for="installVersion" class="w-1/4 text-gray-700">Version ที่ลงครั้งแรก</label>
                                <input type="text" id="installVersion"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md"
                                    wire:model.defer="installVersion">
                            </div>

                            <div class="mb-4 flex items-center">
                                <label for="databaseType" class="w-1/4 text-gray-700">Database Type</label>
                                <select id="databaseType" wire:model.defer="databaseType"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md">
                                    @foreach ($dbTypes as $db)
                                        <option value="{{ is_object($db) ? $db->id : $db['id'] }}">
                                            {{ is_object($db) ? $db->dbName : $db['dbName'] }}</option>
                                    @endforeach

                                </select>
                            </div>

                            <div class="mb-4 flex items-center">
                                <label for="ownerType" class="w-1/4 text-gray-700">Server of</label>
                                <select id="ownerType" wire:model.defer="ownerType"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md">
                                    @foreach ($ownerTypes as $owner)
                                        <option
                                            value="{{ is_object($owner) ? $owner->owntype_code : $owner['owntype_code'] }}">
                                            {{ is_object($owner) ? $owner->owntype_description : $owner['owntype_description'] }}
                                        </option>
                                    @endforeach

                                </select>
                            </div>
                            <div class="mb-4 flex items-center">
                                <label for="hscodeMethod" class="w-1/4 text-gray-700">HSCODE 2017 Method</label>
                                <select id="hscodeMethod" wire:model.defer="hscodeMethod"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md">
                                    <option value="1" {{ $hscodeMethod == '1' ? 'selected' : '' }}>Patch</option>
                                    <option value="2" {{ $hscodeMethod == '2' ? 'selected' : '' }}>Run script
                                    </option>
                                </select>
                            </div>
                            <div class="mb-4 flex items-center">
                                <label for="customerUrl" class="w-1/4 text-gray-700">URL / IP Address</label>
                                <input type="text" id="customerUrl"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md"
                                    wire:model.defer="customerUrl">
                            </div>
                            <div class="mb-4 flex items-center">
                                <label for="contact" class="w-1/4 text-gray-700">Contact</label>
                                <input type="text" id="contact"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md" wire:model.defer="contact">
                            </div>
                            <div class="mb-4 flex items-center">
                                <label for="contactCustomerName" class="w-1/4 text-gray-700">Contact Customer
                                    Name</label>
                                <input type="text" id="contactCustomerName"
                                    class="w-3/4 p-2 border border-gray-300 rounded-md"
                                    wire:model.defer="contactCustomerName">
                            </div>
                            <div class="flex justify-center space-x-2">
                                <a type="button" href="/server-license"
                                class="bg-slate-700 text-white px-4 py-2 rounded-md hover:bg-slate-900">Back</a>
                                <button type="button" wire:click="updateLicense"
                                    class="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary-focus">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div x-show="activeTab === 'organize'">
                    @if ($tab == 'organize')
                        @include('livewire.pages.server-license.organize')
                    @endif
                </div>
                <div x-show="activeTab === 'csvMapping'">
                    @if ($tab == 'csvMapping')
                        @include('livewire.pages.server-license.csv-mapping')
                    @endif
                </div>
                <div x-show="activeTab === 'printForm'">
                    @if ($tab == 'printForm')
                        @include('livewire.pages.server-license.print-form')
                    @endif
                </div>
                <div x-show="activeTab === 'userInterface'">
                    @if ($tab == 'userInterface')
                        @include('livewire.pages.server-license.user-interface')
                    @endif
                </div>
                <div x-show="activeTab === 'global'">
                    @if ($tab == 'global')
                        @include('livewire.pages.server-license.global')
                    @endif
                </div>
                <div x-show="activeTab === 'parameter'">
                    @if ($tab == 'parameter')
                        @include('livewire.pages.server-license.parameter')
                    @endif
                </div>
                <div x-show="activeTab === 'onload'">
                    @if ($tab == 'onload')
                        @include('livewire.pages.server-license.onload')
                    @endif
                </div>
                <div x-show="activeTab === 'validate'">
                    @if ($tab == 'validate')
                        @include('livewire.pages.server-license.validate')
                    @endif
                </div>
                <div x-show="activeTab === 'mapTo'">
                    @if ($tab == 'mapTo')
                        @include('livewire.pages.server-license.map-to')
                    @endif
                </div>
                <div x-show="activeTab === 'mainVar'">
                    @if ($tab == 'mainVar')
                        @include('livewire.pages.server-license.main-var')
                    @endif
                </div>
                <div x-show="activeTab === 'fileDownload'">
                    @if ($tab == 'fileDownload')
                        @include('livewire.pages.server-license.file-download')
                    @endif
                </div>
                <div x-show="activeTab === 'historyPatch'">
                    @if ($tab === 'historyPatch')
                        @include('livewire.pages.server-license.history-patch', ['historyPatchList' => $historyPatchList])
                    @endif
                </div>
            </div>
        </div>

    </div>
</div>
