<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>Exchange Rate</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-6">
          <div class=" space-y-1">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-12">
              <!-- <span>From</span> -->
              <label class="text-right sm:col-span-1 pt-3">
                <span>From</span>
              </label>
              <label class=" sm:col-span-2">
                <!-- <span>From</span> -->
                <span class="relative mt-1.5 flex">
                  <input x-init="$el._x_flatpickr = flatpickr($el)" class="form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 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="Choose date From..." type="text" />
                  <span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                  </span>
                </span>
              </label>
              <label class="text-right sm:col-span-1 pt-3">
                <span>To</span>
              </label>
              <label class="  sm:col-span-2">
                <!-- <span>To</span> -->
                <span class="relative mt-1.5 flex">
                  <input x-init="$el._x_flatpickr = flatpickr($el)" class="form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 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="Choose date To..." type="text" />
                  <span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                  </span>
                </span>
              </label>
              <label class="text-right sm:col-span-1 pt-3">
                <span>Search By</span>
              </label>
              <label class="block sm:col-span-2">
                <select class="form-select h-9 mt-1.5 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">
                  <option value="currency">Currency code</option>
                </select>
              </label>
              <label class="block sm:col-span-2">
                <span></span>
                <span class="relative mt-1.5   flex">
                  <input class="form-input h-9 peer 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="Search Keyword" type="text" />
                </span>
              </label>
              <label class="block sm:col-span-1">
                <div class="flex justify-start space-x-1 pt-2 ">
                  <button class="btn h-8 rounded-md space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                    <span>Search</span>
                  </button>

                </div>
              </label>

              
            </div>
          </div>
          <br>
          <div>
            
            <div class="card mt-3">
              <div
                class="is-scrollbar-hidden min-w-full overflow-x-auto"
                x-data="pages.tables.initExample1"
              > 
                <table class="is-hoverable w-full text-left">
                  <thead>
                    <tr>
                      <th
                        class="whitespace-nowrap rounded-tl-lg text-center bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
                      >
                      
Currency Code
                        
                      </th>
                      <th
                        class="whitespace-nowrap bg-slate-200 text-center px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
                      >
                      Exchange Rate
                      </th>
                      <th
                        class="whitespace-nowrap bg-slate-200 text-center px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
                      >
                      Per unit
                      </th>
                      <th
                        class="whitespace-nowrap bg-slate-200 text-center px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
                      >
                      Start date
                      </th>
                      <th
                        class="whitespace-nowrap rounded-tr-lg bg-slate-200  text-center px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
                      >
                      Finish date
                      </th>
                    </tr>
                    
                  </thead>
                  <tbody>
                    <!-- <template > -->
                    @foreach ($exchangerate as $exchange)
                    <tr
                        class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
                      >
                        <td
                          class="whitespace-nowrap  text-center rounded-l-lg px-4 py-3 sm:px-5"
                        >
                        {{$exchange['currency']}}
                        </td>
                        <td class="whitespace-nowrap text-center px-4 py-3 sm:px-5">
                        {{$exchange['baht']}}
                        </td>
                        <td class="whitespace-nowrap text-center px-4 py-3 sm:px-5">
                        {{$exchange['rate']}}
                        </td>
                        <td class="whitespace-nowrap text-center px-4 py-3 sm:px-5">
                        {{date('d-m-Y', strtotime($exchange['exdate']))}}
                        </td>
                        <td
                          class="whitespace-nowrap text-center rounded-r-lg px-4 py-3 sm:px-5"
                        >
                        {{date('d-m-Y', strtotime($exchange['finishdate']))}}
                        </td>
                      </tr>
                    @endforeach
                    <!-- </template> -->
                  </tbody>
                </table>
              </div>
              {{ $exchangerate->links('paginate-custom') }}

            </div>
          </div>
        </div>
        <br>

      </div>
      
    </div>
  </main>
</x-app-layout-sideblock>