<div class="bg-main-container">
    <div class="max-w-full mx-auto px-5 ">
        <div class="flex flex-wrap items-center">
        </div>
        @if (session()->has('message'))
            <div class="alert alert-success">
                {{ session('message') }}
            </div>
        @endif
        <div class="flex flex-wrap -mx-3 w-full  items-center justify-center ">
            <div class="w-3/5 p-5 mb-6 shadow-md bg-white rounded-lg">
                <form>
                    <!-- Server Key -->
                    <div class=" flex items-center">
                        <label for="serverKey" class="w-1/4 text-gray-700">Server Key</label>
                        <div class="flex flex-col w-3/4">
                            <input type="text" id="serverKey" class=" p-2 border border-gray-300 rounded-md"
                                wire:model.defer="serverKey">
                            @error('serverKey')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>

                    </div>

                    <!-- Team -->
                    <div class="mt-3 flex items-center">
                        <label for="teamId" class="w-1/4 text-gray-700">Team</label>
                        <div class="flex flex-col w-3/4">
                            <select id="teamId" wire:model.defer="teamId"
                                class=" p-2 border border-gray-300 rounded-md">
                                @foreach ($teams as $team)
                                    <option value="{{ $team->id }}">{{ $team->teamName }}</option>
                                @endforeach
                            </select>
                            @error('teamId')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

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

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

                    <!-- Company -->
                    <div class="mt-3 flex items-center">
                        <label for="company" class="w-1/4 text-gray-700">Company</label>
                        <div class="flex flex-col w-3/4">
                            <input type="text" id="company" class=" p-2 border border-gray-300 rounded-md"
                                wire:model.defer="company">
                            @error('company')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Branch -->
                    <div class="mt-3 flex items-center">
                        <label for="branch" class="w-1/4 text-gray-700">Branch</label>
                        <div class="flex flex-col w-3/4">
                            <input type="text" id="branch" class=" p-2 border border-gray-300 rounded-md"
                                wire:model.defer="branch">
                            @error('branch')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="mt-3 flex items-center">
                        <label class="w-1/4 text-gray-700">Status</label>
                        <div class="flex flex-col w-3/4">
                            <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>
                            @error('status')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Licensedate -->
                    <div class="mt-3 flex items-center">
                        <label for="licenseDate" class="w-1/4 text-gray-700">License Date</label>
                        <div class="flex flex-col w-3/4">
                            <input type="date" id="licenseDate" class=" p-2 border border-gray-300 rounded-md"
                                wire:model.defer="licenseDate">
                            @error('licenseDate')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- PHP Version -->
                    <div class="mt-3 flex items-center">
                        <label for="phpVersionId" class="w-1/4 text-gray-700">PHP Version</label>
                        <div class="flex flex-col w-3/4">
                            <select id="phpVersionId" wire:model.defer="phpVersionId"
                                class=" p-2 border border-gray-300 rounded-md">
                                @foreach ($phpVersions as $version)
                                    <option value="{{ $version->id }}">{{ $version->version }}</option>
                                @endforeach
                            </select>
                            @error('phpVersionId')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Version ปัจจุบัน -->
                    <div class="mt-3 flex items-center">
                        <label for="currentVersion" class="w-1/4 text-gray-700">Version ปัจจุบัน</label>
                        <div class="flex flex-col w-3/4">
                            <input type="text" id="currentVersion" class=" p-2 border border-gray-300 rounded-md"
                                wire:model.defer="currentVersion">
                            @error('currentVersion')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- วันที่ไป Install -->
                    <div class="mt-3 flex items-center">
                        <label for="installDate" class="w-1/4 text-gray-700">วันที่ไป Install</label>
                        <div class="flex flex-col w-3/4">
                            <input type="date" id="installDate" class=" p-2 border border-gray-300 rounded-md"
                                wire:model.defer="installDate">
                            @error('installDate')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Version ที่ลงครั้งแรก -->
                    <div class="mt-3 flex items-center">
                        <label for="installVersion" class="w-1/4 text-gray-700">Version ที่ลงครั้งแรก</label>
                        <div class="flex flex-col w-3/4">
                            <input type="text" id="installVersion" class=" p-2 border border-gray-300 rounded-md"
                                wire:model.defer="installVersion">
                            @error('installVersion')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Database Type -->
                    <div class="mt-3 flex items-center">
                        <label for="databaseType" class="w-1/4 text-gray-700">Database Type</label>
                        <div class="flex flex-col w-3/4">
                            <select id="databaseType" wire:model.defer="databaseType"
                                class=" p-2 border border-gray-300 rounded-md">
                                @foreach ($dbTypes as $db)
                                    <option value="{{ $db->id }}">{{ $db->dbName }}</option>
                                @endforeach
                            </select>
                            @error('databaseType')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Server of -->
                    <div class="mt-3 flex items-center">
                        <label for="ownerType" class="w-1/4 text-gray-700">Server of</label>
                        <div class="flex flex-col w-3/4">
                            <select id="ownerType" wire:model.defer="ownerType"
                                class=" p-2 border border-gray-300 rounded-md">
                                @foreach ($ownerTypes as $owner)
                                    <option value="{{ $owner->owntype_code }}">{{ $owner->owntype_description }}
                                    </option>
                                @endforeach
                            </select>
                            @error('ownerType')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- HSCODE 2017 Method -->
                    <div class="mt-3 flex items-center">
                        <label for="hscodeMethod" class="w-1/4 text-gray-700">HSCODE 2017 Method</label>
                        <div class="flex flex-col w-3/4">
                            <select id="hscodeMethod" wire:model.defer="hscodeMethod"
                                class=" 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>
                            @error('hscodeMethod')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- URL / IP Address -->
                    <div class="mt-3 flex items-center">
                        <label for="customerUrl" class="w-1/4 text-gray-700">URL / IP Address</label>
                        <div class="flex flex-col w-3/4">
                            <input type="text" id="customerUrl" class=" p-2 border border-gray-300 rounded-md"
                                wire:model.defer="customerUrl">
                            @error('customerUrl')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Contact -->
                    <div class="mt-3 flex items-center">
                        <label for="contact" class="w-1/4 text-gray-700">Contact</label>
                        <div class="flex flex-col w-3/4">
                            <input type="text" id="contact" class=" p-2 border border-gray-300 rounded-md"
                                wire:model.defer="contact">
                            @error('contact')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Contact Customer Name -->
                    <div class="mt-3 flex items-center">
                        <label for="contactCustomerName" class="w-1/4 text-gray-700">Contact Customer Name</label>
                        <div class="flex flex-col w-3/4">
                            <input type="text" id="contactCustomerName"
                                class=" p-2 border border-gray-300 rounded-md" wire:model.defer="contactCustomerName">
                            @error('contactCustomerName')
                                <div class="text-red-500 text-sm ">
                                    {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Save and Reset Buttons -->
                    <div class="mt-3 flex justify-center space-x-2">
                        <a type="button" href="/server-license"
                            class="bg-slate-300 text-black px-4 py-2 rounded-md hover:bg-slate-900 hover:text-white">Back</a>
                        <button type="button" wire:click="save"
                            class="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary-focus">Save</button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
