<x-admin-layout>
@section('title', $page . ' | ' . get_setting('site_name'))
  <div class="mt-4 grid grid-cols-12 gap-4 sm:mt-5 sm:gap-5 lg:mt-6 lg:gap-6">
    <div class="col-span-12">
      <div x-data="{activeTab:'WD'}" class="tabs flex flex-col">
        <div
          class="is-scrollbar-hidden overflow-x-auto rounded-lg bg-slate-200 text-slate-600 dark:bg-navy-800 dark:text-navy-200"
        >
          <div class="tabs-list flex px-1.5 py-1">
              <div
                x-data="usePopper({placement:'bottom-start',offset:4})"
                @click.outside="isShowPopper && (isShowPopper = false)"
                class="inline-flex ml-4"
              >
                <button
                  class="btn space-x-2 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"
                  x-ref="popperRef"
                  @click="isShowPopper = !isShowPopper"
                ><i class="fas fa-window-maximize"></i>
                  <span>Status</span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="size-4 transition-transform duration-200"
                    :class="isShowPopper && 'rotate-180'"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M19 9l-7 7-7-7"
                    />
                  </svg>
                </button>
                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
                  <div
                    class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
                  >
                    <ul>
                      <li>
                        <a
                          @click="activeTab = 'WD'"
                          id="pending"
                          href="javascript:void(0);"
                          class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
                          >Pending</a
                        >
                      </li>
                      <li>
                        <a
                          @click="activeTab = 'WD'"
                          id="approved"
                          href="javascript:void(0);"
                          class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
                          >Completed</a
                        >
                      </li>
                      <li>
                        <a
                          @click="activeTab = 'WD'"
                          id="rejected"
                          href="javascript:void(0);"
                          class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
                          >Failed</a
                        >
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
          </div>
        </div>
        <div class="tab-content pt-4">
          <div
            x-show="activeTab === 'WD'"
            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 class="overflow-x-auto">
              <table class="is-hoverable w-full text-left">
                <thead>
                  <tr>
                    <th class="whitespace-nowrap 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">
                         Username </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"> Method </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"> Status </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"> Transaction </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"> Amount </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">Date</th>
                  </tr>
                </thead>
                <tbody id="deposits">
                  <tr>
                    <td colspan="6" class="text-center py-4"><div class="w-full px-6 py-4"><div class="skeleton animate-wave h-3 w-full rounded bg-slate-150 dark:bg-navy-500"></div><div class="skeleton animate-wave mt-4 h-3 w-8/12 rounded bg-slate-150 dark:bg-navy-500"></div></div></td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <!-- Pagination -->
            <div id="pagination" class="mt-4 flex justify-center"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
@push('scripts')
<script>
$(document).ready(function() {
    let curStatus = 'completed';
    function loadDP(page = 1, status = 'completed') {
      curStatus = status;
      $.ajax({
        url: "/admin/deposits/load/"+status,
        type: "GET",
        data: { page: page },
        dataType: "json",
        beforeSend: function () {
            $("#deposits").html('<tr><td colspan="6" class="text-center py-4"><div class="w-full px-6 py-4"><div class="skeleton animate-wave h-3 w-full rounded bg-slate-150 dark:bg-navy-500"></div><div class="skeleton animate-wave mt-4 h-3 w-8/12 rounded bg-slate-150 dark:bg-navy-500"></div></div></td></tr>');
        },
        success: function (data) {
            var html = "";
            if (data.records.length > 0) {
                data.records.forEach(function (item) {
                  html += `
                    <tr id="wdid${item.id}" class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
                    <td class="whitespace-nowrap px-4 py-3 sm:px-5"><a href="/admin/user/${item.user_id}" target="_blank" class="text-primary">${item.username}</a></td>
                      <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                          ${item.method}
                      </td>
                      <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                          <span class="badge bg-${item.status.color} text-white">
                            ${item.status.text}
                          </span>
                      </td>
                      <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.txn_id}</td>
                      <td class="whitespace-nowrap px-4 py-3 sm:px-5">$${item.amount}</td>
                      <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.date}</td>
                    </tr>`;
                });
          } else {
            html = '<tr><td colspan="6" class="text-center py-4">No data available</td></tr>';
          }
          $("#deposits").html(html);

        var paginationHtml = `
            <ol class="pagination">
                <li class="rounded-l-full bg-slate-150 dark:bg-navy-500">
                    <a href="#" class="pagination-btn flex size-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90" data-page="${data.prev_page}" ${data.prev_page ? "" : "disabled"}>
                        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                        </svg>
                    </a>
                </li>`;
        
        var startPage = Math.max(1, data.current_page - 2);
        var endPage = Math.min(data.total_pages, startPage + 4);
        
        if (startPage > 1) {
            paginationHtml += `<li class="bg-slate-150 dark:bg-navy-500">
                <a href="#" class="pagination-btn flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90" data-page="1">1</a>
            </li>`;
            if (startPage > 2) {
                paginationHtml += `<li class="bg-slate-150 dark:bg-navy-500">...</li>`;
            }
        }
        
        for (var i = startPage; i <= endPage; i++) {
            paginationHtml += `<li class="bg-slate-150 dark:bg-navy-500">
                <a href="#" class="pagination-btn flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 ${i === data.current_page ? 'bg-primary px-3 leading-tight text-white transition-colors 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' : 'leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90'}" data-page="${i}">${i}</a>
            </li>`;
        }
        
        if (endPage < data.total_pages) {
            if (endPage < data.total_pages - 1) {
                paginationHtml += `<li class="bg-slate-150 dark:bg-navy-500">...</li>`;
            }
            paginationHtml += `<li class="bg-slate-150 dark:bg-navy-500">
                <a href="#" class="pagination-btn flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90" data-page="${data.total_pages}">${data.total_pages}</a>
            </li>`;
        }
        
        paginationHtml += `
            <li class="rounded-r-full bg-slate-150 dark:bg-navy-500">
                <a href="#" class="pagination-btn flex size-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90" data-page="${data.next_page}" ${data.next_page ? "" : "disabled"}>
                    <svg xmlns="http://www.w3.org/2000/svg" class="size-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>
                </a>
            </li>
        </ol>`;
        
        $("#pagination").html(paginationHtml);

        },
      });
    }

    $("#pending").click(function() {
        loadDP(1, 'pending');
    });

    $("#approved").click(function() {
        loadDP(1, 'completed');
    });
    
    $("#rejected").click(function() {
        loadDP(1, 'failed');
    });
    loadDP(1, 'completed');
    $(document).on("click", ".pagination-btn", function (e) {
      e.preventDefault();
      var page = $(this).data("page");
      if (page) loadDP(page, curStatus);
    });
});
</script>

@endpush
</x-admin-layout>
