<div
            class="flex w-full justify-between rounded-t-lg bg-slate-100 px-4 py-3 dark:bg-navy-800 sm:px-5"
          >
            <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
                Country Code
            </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="grid grid-cols-1 gap-4 sm:grid-cols-12">
          <!-- <label class=" sm:col-span-2">

          </label> -->
          <label class="text-right sm:col-span-3 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="CODE">CODE</option>
                  <option value="NAME">NAME</option>
                </select>
              </label>
              <label class="block sm:col-span-3">
                <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>
              <label class=" sm:col-span-2"></label>
          </div>
          <div class="px-3 py-2">
          <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 text-center rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
                      >
                      
                      Country Code
                        
                      </th>
                      <th
                        class="whitespace-nowrap  bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
                      >
                      Rate
                      </th>
                      <th
                        class="whitespace-nowrap text-center rounded-tr-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
                      >
                      Name
                      </th>
                    </tr>
                    
                  </thead>
                  <tbody>
                    <!-- <template > -->
                    @foreach ($countryCode as $country)
                    <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"
                        >
                        {{$country['code']}}
                        </td>
                        <td class="whitespace-nowrap  px-4 py-3 sm:px-5">
                        {{$country['rate']}}
                        </td>
                        <td
                          class="whitespace-nowrap text-center rounded-r-lg px-4 py-3 sm:px-5"
                        >
                        {{$country['name']}}
                        </td>
                      </tr>
                    @endforeach
                    <!-- </template> -->
                  </tbody>
                </table>
              </div>

              {{ $countryCode->links('paginate-custom') }}
            </div>
          </div>
          <!-- <div class="px-4 py-4 sm:px-5">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Assumenda incidunt
            </p>
            <div class="mt-4 space-y-4">
              <label class="block">
                <span>Choose category :</span>
                <select
                  class="form-select 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>Laravel</option>
                  <option>Node JS</option>
                  <option>Django</option>
                  <option>Other</option>
                </select>
              </label>
              <label class="block">
                <span>Description:</span>
                <textarea
                  rows="4"
                  placeholder=" Enter Text"
                  class="form-textarea mt-1.5 w-full resize-none rounded-lg border border-slate-300 bg-transparent p-2.5 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"
                ></textarea>
              </label>
              <label class="block">
                <span>Website Address:</span>
                <input
                  class="form-input mt-1.5 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="URL Address"
                  type="text"
                />
              </label>
              <label class="inline-flex items-center space-x-2">
                <input
                  class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:border-primary checked:before:bg-primary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-accent dark:checked:before:bg-accent"
                  type="checkbox"
                />
                <span>Public pin</span>
              </label>
              <div class="space-x-2 text-right">
                <button
                  @click="showModal = false"
                  class="btn min-w-[7rem] rounded-full 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
                </button>
                <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"
                >
                  Apply
                </button>
              </div>
            </div>
          </div> -->