<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="{showModal:false}">
        <button
          @click="showModal = true"
          class="btn 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"
        >
          Add User
        </button>
        <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">
                  Add User
                </h3>
                <button
                  @click="showModal = !showModal"
                  class="btn -mr-1.5 size-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="size-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">
                <div class="mt-4 space-y-4">
                  <div id="message"></div>
                  <form id="add-form">
                    <label class="block">
                        <span>Role :</span>
                        <select id="add-role" name="role" 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 value="Superadmin">Superadmin</option>
                            <option value="Admin">Admin</option>
                            <option value="Member" selected>Member</option>
                        </select>
                    </label>
                    <label class="block mt-2">
                        <span>Name:</span>
                        <input id="add-name" name="name"
                            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"
                            type="text" required autocomplete="new-password" />
                    </label>
                    <label class="block mt-2">
                        <span>Email:</span>
                        <input id="add-email" name="email"
                            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"
                            type="email" required autocomplete="new-password" />
                    </label>
                    <label class="block mt-2">
                        <span>Password:</span>
                        <input id="add-password" name="password"
                            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"
                            type="password" required autocomplete="new-password" />
                    </label>
                  </form>
                  <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
                      class="add-btn 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"
                    >
                      Add
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
        <div class="flex items-center justify-between overflow-x-auto mt-3">
            <div>
                <select id="orderby" class="form-select 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="id">ID</option>
                    <option value="highest_earned">Highest Earned</option>
                    <option value="highest_withdraw_sum">Highest Withdraw Sum</option>
                    <option value="highest_withdraw_count">Highest Withdraw Count</option>
                    <option value="highest_referral">Highest Referral</option>
                </select>
            </div>
            <div class="flex items-center space-x-2" x-data="{ isInputActive: false, searchText: '' }">
                <!-- Search Input with Toggle -->
                <div class="flex items-center">
                    <label class="block">
                        <input x-model="searchText" x-transition x-effect="isInputActive === true &amp;&amp; $nextTick(() => { $el.focus()});" :class="isInputActive ? 'w-32 lg:w-48' : 'w-0'" class="form-input bg-transparent px-1 text-right transition-all duration-100 placeholder:text-slate-500 dark:placeholder:text-navy-200 w-0" placeholder="Search here..." type="text" id="search" autocomplete="new-password">
                    </label>
                    <button @click="isInputActive = !isInputActive" class="btn size-8 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="size-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                      </button>
                </div>
            
                <!-- Quick Search Buttons -->
                <button @click="searchText = '[banned]'; isInputActive = true" 
                        class="btn px-3 py-1 rounded-md">
                    Banned
                </button>
                <button @click="searchText = '[suspect]'; isInputActive = true" 
                        class="btn px-3 py-1 rounded-md">
                    Suspected
                </button>
            </div>
        </div>
        <div class="overflow-x-auto mt-2">
          <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"> Name </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"> Role </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"> IP Addresses </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"> Suspected </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"> Banned </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"> Action </th>
              </tr>
            </thead>
            <tbody id="users-table">
              <tr>
                <td colspan="8" 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>
@push('scripts')
<script>
let currentpage = 1;
let theme = localStorage.getItem("_x_darkMode_on") === "true" ? "dark" : "light";
let orderBy = 'id';
$(document).ready(function() {
    let ajaxRequest;
    let debounceTimer;
    let currentpage = 1;
    window.edituser = function (id) {
            $.ajax({
                url: "/admin/users/edit",
                type: "PUT",
                data: {
                    _token: $('meta[name="csrf-token"]').attr("content"), 
                    id: id,
                    role: $("#edit-role-" + id).val(),
                    name: $("#edit-name-" + id).val(),
                    email: $("#edit-email-" + id).val(),
                    password: $("#edit-password-" + id).val()
                },
                dataType: "json",
                success: function(response) {
                    loadUsers(currentpage);
                    $("#message-" + id).html(`<div class="alert flex rounded-lg border border-success px-4 py-4 text-success sm:px-5">${response.message}</div>`);
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessage = "<div class='alert flex rounded-lg border border-error px-4 py-4 text-error sm:px-5'><ul>";
                        $.each(errors, function(key, value) {
                            errorMessage += `<li>${value[0]}</li>`;
                        });
                        errorMessage += "</ul></div>";
                        $("#message-" + id).html(errorMessage);
                    }
                }
            });
    }
    function loadUsers(page = 1, search = '') {
        if (ajaxRequest) {
            ajaxRequest.abort();
        }
        currentpage = page;
        ajaxRequest = $.ajax({
            url: "/admin/users/load",
            type: "GET",
            data: { page: page, search: search, orderby: orderBy},
            dataType: "json",
            beforeSend: function () {
                $("#users-table").html('<tr><td colspan="8" 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 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.id}" target="_blank" class="text-primary">${item.name}</a>
                          </td>
                          <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.email_verified_at}</td>
                          <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.role}</td>
                          <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                            <b>Registered:</b> ${item.ip_address}<br>
                            <b>Last Login:</b> ${item.last_login_ip}<br>
                            <b>Last Activity:</b> ${item.last_activity_ip}<br>
                          </td>
                          <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.suspected}</td>
                          <td class="whitespace-nowrap px-4 py-3 sm:px-5">${item.banned}</td>
                          <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                            <button
                                onclick="toggleBan(${item.id})" 
                                class="${item.banned_state == 1 ? "btn bg-success font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90" : "btn bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"}">
                                ${item.banned_state == 1 ? "Unban" : "Banned"}
                            </button>
                              <div x-data="{showModal:false}">
                                <button
                                  @click="showModal = true"
                                  class="btn 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"
                                >
                                  Edit
                                </button>
                                <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">
                                          Edit: ${item.name}
                                        </h3>
                                        <button
                                          @click="showModal = !showModal"
                                          class="btn -mr-1.5 size-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="size-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">
                                        <div class="mt-4 space-y-4">
                                          <div id="message-${item.id}"></div>
                                            <label class="block">
                                                <span>Role :</span>
                                                <select id="edit-role-${item.id}" name="role" 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 value="Superadmin" ${item.role === "Superadmin" ? "selected" : ""}>Superadmin</option>
                                                    <option value="Admin" ${item.role === "Admin" ? "selected" : ""}>Admin</option>
                                                    <option value="Member" ${item.role === "Member" ? "selected" : ""}>Member</option>
                                                </select>
                                            </label>
                                            <label class="block mt-2">
                                                <span>Name:</span>
                                                <input id="edit-name-${item.id}" name="name" value="${item.name}"
                                                    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"
                                                    type="text" required autocomplete="new-password" />
                                            </label>
                                            <label class="block mt-2">
                                                <span>Email:</span>
                                                <input id="edit-email-${item.id}" name="email" value="${item.email}"
                                                    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"
                                                    type="email" required autocomplete="new-password" />
                                            </label>
                                            <label class="block mt-2">
                                                <span>Password:</span>
                                                <input id="edit-password-${item.id}" name="password"
                                                    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"
                                                    type="password" required autocomplete="new-password" />
                                            </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
                                              onclick="edituser(${item.id})" 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"
                                            >
                                              Save
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </template>
                              </div>
                          </td>
                        </tr>`;
                    });
              } else {
                html = '<tr><td colspan="8" class="text-center py-4">No data available</td></tr>';
              }
              $("#users-table").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);
    
            },
          });
        }

    loadUsers();

    $(document).on("click", ".pagination-btn", function (e) {
      e.preventDefault();
      var page = $(this).data("page");
      if (page) loadUsers(page);
    });

    $("#search").on("keyup", function() {
        $("#users-table").html('<tr><td colspan="8" 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>');
        clearTimeout(debounceTimer);
        let query = $(this).val();
        debounceTimer = setTimeout(() => {
            loadUsers(1, query);
        }, 1000);
    });
    $(document).on("click", ".add-btn", function (e) {
      e.preventDefault();
            $.ajax({
                url: "/admin/users/add",
                type: "POST",
                data: {
                    _token: $('meta[name="csrf-token"]').attr("content"), 
                    role: $("#add-role").val(),
                    name: $("#add-name").val(),
                    email: $("#add-email").val(),
                    password: $("#add-password").val()
                },
                dataType: "json",
                success: function(response) {
                    loadUsers();
                    $("#message").html(`<div class="alert flex rounded-lg border border-success px-4 py-4 text-success sm:px-5">${response.message}</div>`);
                    $("#add-form")[0].reset();
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessage = "<div class='alert flex rounded-lg border border-error px-4 py-4 text-error sm:px-5'><ul>";
                        $.each(errors, function(key, value) {
                            errorMessage += `<li>${value[0]}</li>`;
                        });
                        errorMessage += "</ul></div>";
                        $("#message").html(errorMessage);
                    }
                }
            });
    });
    window.toggleBan = function (id) {
        $.ajax({
            url: "/admin/users/toggle-ban",
            type: "PUT",
            data: {
                _token: $('meta[name="csrf-token"]').attr("content"), 
                id: id
            },
            dataType: "json",
            success: function(response) {
                        let swalOptions = {
                            icon: "success",
                            title: "Success!",
                            html: `<p>${response.message}</p>`,
                            toast: true,
                            position: "bottom-end",
                            showConfirmButton: false,
                            customClass: {
                                popup: "toast-popup",
                                title: "toast-title",
                                content: "toast-content"
                            },
                            showCloseButton: true,
                            closeButtonHtml: "<i class='fas fa-times'></i>"
                        };
                        
                        if (theme === "dark") {
                            swalOptions.background = "#1E293B";
                            swalOptions.color = "#F8FAFC";
                            swalOptions.confirmButtonColor = "#4F46E5";
                        }

                        Swal.fire(swalOptions);
                        loadUsers(currentpage);
            },
            error: function(xhr) {
                alert("Something went wrong!");
            }
        });
    }
    $('#orderby').on('change', function() {
        let order = $(this).val();
        orderBy = order;
        loadUsers(1);
    });
});
</script>
@endpush
</x-admin-layout>