<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">
            <h2 class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl">
                Blank Template
            </h2>
        </div>
    </main> -->
  <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>Config Option</li>
      </ul>
    </div>




    <div class="grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
      <div class="col-span-12 ">
        <div class="card p-4 sm:p-5">
        <div x-data="{activeTab:'tabTransport'}" class="tabs flex flex-col">
    <div class="is-scrollbar-hidden overflow-x-auto">
      <div class="border-b-2 border-slate-150 dark:border-navy-500">
        <div class="tabs-list -mb-0.5 flex">
          <button
            @click="activeTab = 'tabTransport'"
            :class="activeTab === 'tabTransport' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
            class="btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium"
          >
            <!-- <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="1.5"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
              />
            </svg> -->
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />

</svg>

          
            <span>Transport Mode</span>
          </button>
          <button
            @click="activeTab = 'tabPage'"
            :class="activeTab === 'tabPage' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
            class="btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium"
          >
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
  <path stroke-linecap="round" stroke-linejoin="round" d="M3 8.25V18a2.25 2.25 0 002.25 2.25h13.5A2.25 2.25 0 0021 18V8.25m-18 0V6a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 6v2.25m-18 0h18M5.25 6h.008v.008H5.25V6zM7.5 6h.008v.008H7.5V6zm2.25 0h.008v.008H9.75V6z" />
</svg>

            <span>Page</span>
          </button>
          <button
            @click="activeTab = 'tabFields'"
            :class="activeTab === 'tabFields' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
            class="btn shrink-0 space-x-2 rounded-none border-b-2 px-3 py-2 font-medium"
          >
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z" />
</svg>

            <span> Fields Mandatory </span>
          </button>
        </div>
      </div>
    </div>
    <div class="tab-content pt-4">
      <div
        x-show="activeTab === 'tabTransport'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
        <fieldset class="border border-solid border-gray-300 p-3">
              <legend class="text-sm">Transport Mode Configuration</legend>
              <label class="inline-flex items-center space-x-2">
                <input checked class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 checked:border-slate-500 checked:bg-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-500 dark:bg-navy-900 dark:checked:border-navy-400 dark:checked:bg-navy-400" name="transportMode" type="radio" />
                <p class="text-sm">ทางเครื่องบิน</p>
              </label><br>
              <label class="inline-flex items-center space-x-2">
                <input checked class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 checked:border-slate-500 checked:bg-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-500 dark:bg-navy-900 dark:checked:border-navy-400 dark:checked:bg-navy-400" name="transportMode" type="radio" />
                <p class="text-sm">ทางรถยนต์</p>
              </label>
              <br><br>
            <button class="btn h-8 w-1/12 ml-auto rounded space-x-1 bg-primary px-3  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 class="grid grid-cols-1 gap-4 sm:grid-cols-12">
              <label class="block sm:col-span-11">

              </label>
              <label class="block sm:col-span-1">
                <div class="flex justify-start space-x-1 pt-3 ">
                 
                  <button class="btn h-8  w-full  rounded-md space-x-2 bg-primary px-3  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">
                    
                    <span>Save</span>
                  </button>
                </div>
              </label>
            </div> -->
            </fieldset>
        </div>
      </div>
      <div
        x-show="activeTab === 'tabPage'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
        <fieldset class="border border-solid border-gray-300 p-3">
              <legend class="text-sm">Page Configuration</legend>
              <div class="grid grid-cols-1 gap-4 sm:grid-cols-12">
                <label class="block sm:col-span-3 pt-2">
                  <p class="text-sm text-right">Show list Pre-Arrival (IMPORT) &emsp;: </p>
                </label>
                <label class="block sm:col-span-2">
                  <select class="form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 top-0 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
                    @for ($i = 0; $i < count($defaultPagination); $i++) <option value="{{$defaultPagination[$i]}}"><span class="text-xs">{{$defaultPagination[$i]}}</span></option>
                      @endfor
                  </select>
                  </select>
                </label>
                <label class="block sm:col-span-7">

                </label>

              </div>
              <br>
              <button class="btn h-8 w-1/12 ml-auto rounded space-x-1 bg-primary px-3  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>

            </fieldset>
        </div>
      </div>
      <div
        x-show="activeTab === 'tabFields'"
        x-transition:enter="transition-all duration-500 easy-in-out"
        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
      >
        <div>
        <fieldset class="border border-solid border-gray-300 p-3">
              <legend class="text-sm">Check Invalid Fields Mandatory Configuration</legend>
              <label class="inline-flex items-center space-x-2">
                <input checked class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 checked:border-slate-500 checked:bg-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-500 dark:bg-navy-900 dark:checked:border-navy-400 dark:checked:bg-navy-400" name="checkmandatory" type="radio" />
                <p class="text-sm">ตรวจสอบค่าว่างฟิลด์ Mandatory</p>
              </label><br>
              <label class="inline-flex items-center space-x-2">
                <input checked class="form-radio is-basic h-5 w-5 rounded-full border-slate-400/70 bg-slate-100 checked:border-slate-500 checked:bg-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-500 dark:bg-navy-900 dark:checked:border-navy-400 dark:checked:bg-navy-400" name="checkmandatory" type="radio" />
                <p class="text-sm">ไม่ตรวจสอบค่าว่างฟิลด์ Mandatory</p>
              </label>
              <div x-data="{expandedItem:null}" class="flex flex-col">
                <div x-data="accordionItem('item-1')">
                  <div @click="expanded = !expanded" class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100">
                    <p class="text-sm text-gray-500 "> -- Show Fields Mandatory --</p>
                    <div :class="expanded && '-rotate-180'" class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300">
                      <i class="fas fa-chevron-down"></i>
                    </div>
                  </div>
                  <div x-collapse x-show="expanded">
                    <div>
                      <div id="bl-mandatory" style="display: block;">
                        <hr>
                        <table width="90%" style="color: #908f8fee;">
                          <tbody>
                            <tr>
                              <td>Vessel No.</td>
                              <td>Arrival Date - Time</td>
                              <td>Discharge Port</td>
                              <td>Mode of Transport</td>
                              <td>MAWB</td>
                            </tr>
                            <tr>

                              <td>Category</td>
                              <td>Gross Weight</td>
                              <td>Gross Weight Unit</td>
                              <td>HAWB</td>
                              <td>Package</td>

                            </tr>
                            <tr>

                              <td>Package Unit</td>
                              <td>Shipper Name</td>
                              <td>Shipper Street and Address</td>
                              <td>Shipper Post Code</td>
                              <td>Shipper Country</td>

                            </tr>
                            <tr>

                              <td>Consignee Name</td>
                              <td>Consignee Street and Address</td>
                              <td>Consignee Post Code</td>
                              <td>Consignee Country</td>
                              <td>English Description of Goods</td>


                            </tr>
                            <tr>

                              <td>Shipping Mark</td>
                              <td>CIF</td>
                              <td>Exchange Rate</td>
                              <td>FOB Currency Code</td>
                              <td>FOB Value Foreign</td>
                            </tr>
                            <tr>
                              <td>Freight</td>
                              <td>Freight Currency Code</td>
                              <td>Insurance</td>
                              <td>Insurance Currency Code</td>
                              <td>Consignment country</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <br>
              <button class="btn h-8 w-1/12 ml-auto rounded space-x-1 bg-primary px-3  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>
            </fieldset>
        </div>
      </div>
    </div>
  </div>
          <!-- <div class=" font-medium text-slate-800 dark:text-navy-50 ">
           <br>
            
          </div><br>
          <div class="font-medium text-slate-800 dark:text-navy-50 ">
            
          </div><br>
          <div class="font-medium text-slate-800 dark:text-navy-50 ">
            
          </div> -->
        </div>
      </div>
    </div>
  </main>
</x-app-layout-sideblock>