<x-app-layout-sideblock title="Starter Sideblock" is-sidebar-open="true" is-header-blur="true">
    <main class="main-content w-full px-[var(--margin-x)] pb-8">
        <div class="flex items-center space-x-4 py-5 lg:py-6">
            <ul class="hidden flex-wrap items-center space-x-2 sm:flex">
                <li class="flex items-center space-x-2">
                    <a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
                        href="/">Home</a>
                    <svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </li>
                <li> Configuration </li>
                <svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
                <li class="flex items-center space-x-2">
                    <a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
                        href="{{ route($route) }}">Company Profile</a>
                    <svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </li>
            </ul>
        </div>
        <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
            <form action="{{ route($route . '.store') }}" method="POST">
                @method('POST')
                @csrf
                <div class="card pb-4">
                    <div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
                        <h2
                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
                            <i class="fa-solid fa-edit text-primary"></i> Create
                        </h2>
                    </div>
                    <div class="space-y-4 p-4 sm:p-2">
                        <div class="flex flex-col justify-between border-4 border-transparent border-l-info px-4 !mt-1">
                            <div>
                                <p class="text-base font-medium text-primary dark:text-navy-100 pl-2">
                                    Information
                                </p>
                                <div class="space-y-4 p-4 sm:p-2">
                                    <div class="grid grid-cols-8 gap-1 items-center">
                                        <span class="col-span-1 text-sm ">Title </span>
                                        <input
                                            class="form-input col-span-2  h-6 w-full rounded-lg border border-slate-300 bg-transparent 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"
                                            placeholder="" type="text">

                                        <span class="col-start-1 col-span-1 text-sm">Description </span>
                                        <input
                                            class="form-input col-span-2  h-6 w-full rounded-lg border border-slate-300 bg-transparent 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"
                                            placeholder="" type="text">

                                        <span class="col-start-1 col-span-1 text-sm ">Customs Profile</span>
                                        <input
                                            class="form-input col-span-2  h-6 w-full rounded-lg border border-slate-300 bg-transparent 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"
                                            placeholder="" type="text">

                                        <label class="col-span-4 text-sm grid grid-cols-5 items-center">
                                            <input
                                                class="form-checkbox is-basic h-4 w-4 justify-self-end rounded  border-slate-400/70 checked:bg-primary checked:border-primary hover: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" />

                                            <p class="ml-2">ใช้ข้อมูล Broker</p>
                                            <input
                                                class="form-input h-6 w-full  text-xm col-span-2  rounded-lg border  border-slate-300 bg-transparent 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"
                                                placeholder="" type="text" />
                                        </label>

                                        <span class="col-start-1 col-span-1 text-sm ">XML User Id</span>
                                        <input
                                            class="form-input col-span-2  h-6 w-full rounded-lg border border-slate-300 bg-transparent 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"
                                            placeholder="" type="text">
                                        <label class="col-span-4 text-sm grid grid-cols-5 items-center">
                                            <input
                                                class="form-checkbox is-basic h-4 w-4 justify-self-end rounded  border-slate-400/70 checked:bg-primary checked:border-primary hover: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" />

                                            <p class="ml-2"> เลือก Partner Profile จาก Comcode</p>
                                            <input
                                                class="form-input h-6 w-full  text-xm col-span-2  rounded-lg border  border-slate-300 bg-transparent 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"
                                                placeholder="" type="text" />
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-col justify-between border-4 border-transparent border-l-info px-4 !mt-1">
                            <div class="space-y-4 p-4 sm:p-2">
                                <span x-data="{ showModal: false }">
                                    <div class="grid grid-cols-12 w-1/4  items-center">
                                        <p
                                            class="col-span-1 text-base font-medium text-primary dark:text-navy-100">
                                            CA
                                        </p>
                                        <span @click="showModal = true" @click.prevent class="cursor-pointer"
                                            title="ตรวจสอบวันหมดอายุของ CA">
                                            <svg class="hover:stroke-cyan-500" xmlns="http://www.w3.org/2000/svg"
                                                fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                                stroke="currentColor" class="w-6 h-6">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
                                            </svg>
                                        </span>
                                        {{-- <button @click="showModal = true" @click.prevent
                                        class="cols-span-3 py-1 px-2 text-xs float-right mr-4 btn space-x-2 bg-cyan-700 font-medium text-white hover:bg-cyan-900 focus:bg-cyan-900 active:bg-cyan-900">
                                        <span class="text-sm">ตรวจสอบวันหมดอายุของ CA</span></button> --}}
                                    </div>
                                    <template x-teleport="#x-teleport-target">
                                        <div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
                                            x-show="showModal" role="dialog"
                                            @keydown.window.escape="showModal = false">
                                            <div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
                                                @click="showModal = false" x-show="showModal"
                                                x-transition:enter="ease-out" x-transition:enter-start="opacity-0"
                                                x-transition:enter-end="opacity-100" x-transition:leave="ease-in"
                                                x-transition:leave-start="opacity-100"
                                                x-transition:leave-end="opacity-0">
                                            </div>
                                            <div class="relative w-full max-w-lg origin-top rounded-lg bg-white transition-all duration-300 dark:bg-navy-700"
                                                x-show="showModal" x-transition:enter="easy-out"
                                                x-transition:enter-start="opacity-0 scale-95"
                                                x-transition:enter-end="opacity-100 scale-100"
                                                x-transition:leave="easy-in"
                                                x-transition:leave-start="opacity-100 scale-100"
                                                x-transition:leave-end="opacity-0 scale-95">
                                                <div
                                                    class="flex justify-between rounded-t-lg bg-slate-200 px-4 py-3 dark:bg-navy-800 sm:px-5">
                                                    <h3
                                                        class="text-base font-medium  text-slate-700 dark:text-navy-100">
                                                        Status: INACTIVATED
                                                    </h3>
                                                    <button @click="showModal = !showModal"
                                                        class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
                                                            fill="none" viewBox="0 0 24 24" stroke="currentColor"
                                                            stroke-width="2">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                d="M6 18L18 6M6 6l12 12"></path>
                                                        </svg>
                                                    </button>
                                                </div>
                                                <div class="px-4 py-4 sm:px-5">
                                                    <p>
                                                        Active Date: <br>
                                                        Expired Date: <br>
                                                        Infomation Certificate file not found! <br>
                                                    </p>

                                                    <div class="space-x-2 text-right">

                                                        <button @click="showModal = false"
                                                            class="btn min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                                            OK
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                    <div class="grid grid-cols-8 gap-1 items-center">
                                        <span class="col-span-1 text-sm ">Path (file.p12) </span>
                                        <input
                                            class="block col-span-2 text-xm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
                                            placeholder="" type="file">

                                        <span class="col-start-1 col-span-1 text-sm">PIN Code</span>
                                        <input
                                            class="form-input col-span-2  h-6  rounded-lg border border-slate-300 bg-transparent 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"
                                            placeholder="" type="text">
                                    </div>
                                </span>
                            </div>
                        </div>

                        <div
                            class="flex flex-col justify-between border-4 border-transparent border-l-info px-4 !mt-1">
                            <div>
                                <p class="text-base font-medium text-primary dark:text-navy-100 pl-2">
                                    Gateway
                                </p>
                                <div class="space-y-4 p-4 sm:p-2">
                                    <div class="grid grid-cols-8 gap-1 items-center">
                                        <span class="col-span-1 text-sm ">Organize </span>
                                        <input
                                            class="form-input col-span-2  h-6 w-full rounded-lg border border-slate-300 bg-transparent 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"
                                            placeholder="" type="text">

                                        <span class="col-start-1 col-span-1 text-sm">Username </span>
                                        <input
                                            class="form-input col-span-2  h-6 w-full rounded-lg border border-slate-300 bg-transparent 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"
                                            placeholder="" type="text">
                                        <span class="col-start-1 col-span-1 text-sm">Password </span>
                                        <input
                                            class="form-input col-span-2  h-6 w-full rounded-lg border border-slate-300 bg-transparent 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"
                                            placeholder="" type="password">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="flex flex-col justify-between border-4 border-transparent border-l-info px-4 !mt-1">
                            <div>
                                <p class="text-base font-medium text-primary dark:text-navy-100 pl-2">
                                    Gateway
                                </p>
                                <div class="space-y-4 p-4 sm:p-2">
                                    <div class="grid grid-cols-8 gap-1 items-center">
                                        <span class="col-span-1 text-sm ">Proxy </span>
                                        <input
                                            class="form-input col-span-2  h-6 w-full rounded-lg border border-slate-300 bg-transparent 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"
                                            placeholder="" type="text">

                                        <span class="col-start-1 col-span-1 text-sm">Hostname or IP </span>
                                        <input
                                            class="form-input col-span-2  h-6 w-full rounded-lg border border-slate-300 bg-transparent 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"
                                            placeholder="" type="text">
                                        <span class="col-start-1 col-span-1 text-sm">Port </span>
                                        <input
                                            class="form-input col-span-2  h-6 w-full rounded-lg border border-slate-300 bg-transparent 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"
                                            placeholder="" type="password">
                                        <span class="col-start-1 col-span-1 text-sm">Username </span>
                                        <input
                                            class="form-input col-span-2  h-6 w-full rounded-lg border border-slate-300 bg-transparent 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"
                                            placeholder="" type="text">
                                        <span class="col-start-1 col-span-1 text-sm">Password </span>
                                        <input
                                            class="form-input col-span-2  h-6 w-full rounded-lg border border-slate-300 bg-transparent 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"
                                            placeholder="" type="password">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="grid grid-cols-8 justify-center space-x-2 pt-4">
                            <a href="{{ route($route) }}"
                                class="col-start-3 btn  border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
                                Cancel
                            </a>
                            <button type="submit"
                                class="btn ml-3 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                Save
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </main>

</x-app-layout-sideblock>
