@extends('selva.layout')

@section('title', 'Akun Pengguna')

@section('content')
  <div class="p-6 py-8">
    <div
      x-data="userList"
      @fetch-data.window="fetchData()"
    >

      {{-- <div class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
        <div
          class="group transform rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 p-6 text-white shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
        >
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-blue-100">Total Users</p>
              <p class="mt-2 text-3xl font-bold">2,847</p>
              <div class="mt-2 flex items-center">
                <i class="fas fa-arrow-up text-xs text-green-300"></i>
                <span class="ml-1 text-xs text-blue-100">+12% dari bulan lalu</span>
              </div>
            </div>
            <div class="rounded-xl bg-white/20 p-4 transition-colors group-hover:bg-white/30">
              <i class="fas fa-users text-2xl"></i>
            </div>
          </div>
        </div>

        <div
          class="group transform rounded-2xl bg-gradient-to-br from-green-500 to-green-600 p-6 text-white shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
        >
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-green-100">Active Users</p>
              <p class="mt-2 text-3xl font-bold">2,234</p>
              <div class="mt-2 flex items-center">
                <i class="fas fa-arrow-up text-xs text-emerald-300"></i>
                <span class="ml-1 text-xs text-green-100">+8% dari bulan lalu</span>
              </div>
            </div>
            <div class="rounded-xl bg-white/20 p-4 transition-colors group-hover:bg-white/30">
              <i class="fas fa-user-check text-2xl"></i>
            </div>
          </div>
        </div>

        <div
          class="group transform rounded-2xl bg-gradient-to-br from-purple-500 to-purple-600 p-6 text-white shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
        >
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-purple-100">Premium Users</p>
              <p class="mt-2 text-3xl font-bold">834</p>
              <div class="mt-2 flex items-center">
                <i class="fas fa-arrow-up text-xs text-pink-300"></i>
                <span class="ml-1 text-xs text-purple-100">+15% dari bulan lalu</span>
              </div>
            </div>
            <div class="rounded-xl bg-white/20 p-4 transition-colors group-hover:bg-white/30">
              <i class="fas fa-crown text-2xl"></i>
            </div>
          </div>
        </div>

        <div
          class="group transform rounded-2xl bg-gradient-to-br from-orange-500 to-orange-600 p-6 text-white shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
        >
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-orange-100">New Today</p>
              <p class="mt-2 text-3xl font-bold">47</p>
              <div class="mt-2 flex items-center">
                <i class="fas fa-arrow-down text-xs text-red-300"></i>
                <span class="ml-1 text-xs text-orange-100">-3% dari kemarin</span>
              </div>
            </div>
            <div class="rounded-xl bg-white/20 p-4 transition-colors group-hover:bg-white/30">
              <i class="fas fa-user-plus text-2xl"></i>
            </div>
          </div>
        </div>
      </div> --}}

      <div
        class="bg-surface mb-6 rounded-xl p-6 shadow-sm"
        :class="{ 'dark': darkMode }"
      >
        <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div class="flex gap-3">
            <button
              class="btn bg-gray-900"
              @click="$dispatch('open-modal', { type: 'create' })"
            >
              <i class="fas fa-plus mr-2 text-xs"></i>
              Tambah Pengguna
            </button>
            <button
              class="btn-delete"
              :class="{ 'dark': darkMode }"
              @click="deleteSelected"
            >
              <i class="fas fa-trash mr-2 text-xs"></i>
              Hapus Terpilih
            </button>

            {{-- <div
              class="relative"
              x-data="{ open: false }"
            >
              <button
                class="btn-light group"
                @click="open = !open"
              >
                <i class="fas fa-download mr-2 transition-transform group-hover:scale-110"></i>
                Export
                <i
                  class="fas fa-chevron-down ml-2 text-xs transition-transform duration-200"
                  :class="{ 'rotate-180': open }"
                ></i>
              </button>

              <div
                class="absolute left-0 z-50 mt-3 w-56 rounded-xl border border-gray-100 bg-white shadow-xl ring-1 ring-black/5"
                x-show="open"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-100"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
                @click.away="open = false"
              >
                <div class="p-2">
                  <button
                    class="group flex w-full items-center rounded-lg px-4 py-3 text-sm text-gray-700 transition-colors hover:bg-green-50 hover:text-green-700"
                    @click="exportUsers('csv'); open = false"
                  >
                    <div class="mr-3 rounded-lg bg-green-100 p-2 transition-colors group-hover:bg-green-200">
                      <i class="fas fa-file-csv text-green-600"></i>
                    </div>
                    <div class="text-left">
                      <div class="font-medium">Export CSV</div>
                      <div class="text-xs text-gray-500">Format spreadsheet</div>
                    </div>
                  </button>
                  <button
                    class="group flex w-full items-center rounded-lg px-4 py-3 text-sm text-gray-700 transition-colors hover:bg-emerald-50 hover:text-emerald-700"
                    @click="exportUsers('excel'); open = false"
                  >
                    <div class="mr-3 rounded-lg bg-emerald-100 p-2 transition-colors group-hover:bg-emerald-200">
                      <i class="fas fa-file-excel text-emerald-600"></i>
                    </div>
                    <div class="text-left">
                      <div class="font-medium">Export Excel</div>
                      <div class="text-xs text-gray-500">Format .xlsx</div>
                    </div>
                  </button>
                  <button
                    class="group flex w-full items-center rounded-lg px-4 py-3 text-sm text-gray-700 transition-colors hover:bg-red-50 hover:text-red-700"
                    @click="exportUsers('pdf'); open = false"
                  >
                    <div class="mr-3 rounded-lg bg-red-100 p-2 transition-colors group-hover:bg-red-200">
                      <i class="fas fa-file-pdf text-red-600"></i>
                    </div>
                    <div class="text-left">
                      <div class="font-medium">Export PDF</div>
                      <div class="text-xs text-gray-500">Format dokumen</div>
                    </div>
                  </button>
                  <div class="my-1 border-t border-gray-100"></div>
                  <button
                    class="group flex w-full items-center rounded-lg px-4 py-3 text-sm text-gray-700 transition-colors hover:bg-blue-50 hover:text-blue-700"
                    @click="printUsers(); open = false"
                  >
                    <div class="mr-3 rounded-lg bg-blue-100 p-2 transition-colors group-hover:bg-blue-200">
                      <i class="fas fa-print text-blue-600"></i>
                    </div>
                    <div class="text-left">
                      <div class="font-medium">Print Data</div>
                      <div class="text-xs text-gray-500">Cetak ke printer</div>
                    </div>
                  </button>
                  <button
                    class="group flex w-full items-center rounded-lg px-4 py-3 text-sm text-gray-700 transition-colors hover:bg-purple-50 hover:text-purple-700"
                    @click="copyUsers(); open = false"
                  >
                    <div class="mr-3 rounded-lg bg-purple-100 p-2 transition-colors group-hover:bg-purple-200">
                      <i class="fas fa-copy text-purple-600"></i>
                    </div>
                    <div class="text-left">
                      <div class="font-medium">Copy Data</div>
                      <div class="text-xs text-gray-500">Salin ke clipboard</div>
                    </div>
                  </button>
                </div>
              </div>
            </div> --}}

            <button
              class="btn-light group"
              :class="{ 'dark': darkMode }"
              @click="refreshData"
            >
              <i class="fas fa-sync-alt mr-2 transition-transform group-hover:rotate-180"></i>
              Refresh
            </button>
          </div>

          <!-- Search Input - Updated -->
          <div class="relative max-w-md">
            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
              <i
                class="fas fa-search icon-muted"
                :class="{ 'dark': darkMode }"
              ></i>
            </div>
            <input
              class="bg-input text-input block w-full rounded-xl border-0 py-2.5 pl-10 pr-10 text-sm shadow-sm ring-1 transition-all duration-200 placeholder:text-gray-400 hover:ring-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-0"
              type="text"
              :class="{ 'dark placeholder:text-gray-500': darkMode }"
              placeholder="Cari pengguna..."
              :value="searchQuery"
              @input="handleSearchInput"
            />

            <!-- Clear search button -->
            <button
              class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600"
              title="Clear search"
              x-show="searchQuery.length > 0"
              @click="clearSearch()"
              :class="{ 'dark text-gray-500 hover:text-gray-300': darkMode }"
            >
              <i class="fas fa-times text-sm"></i>
            </button>
          </div>
        </div>

        <div
          class="bg-gradient-card fixed inset-0 left-0 top-0 z-[99999] flex items-center justify-center backdrop-blur-sm"
          :class="{ 'dark': darkMode }"
          x-show="isLoading"
          x-transition.opacity
        >
          <div class="flex flex-col items-center gap-3">
            <div
              class="h-8 w-8 animate-spin rounded-full border-2 border-gray-200 border-t-blue-600"
              :class="{ 'dark border-gray-600 border-t-blue-400': darkMode }"
            ></div>
            <p
              class="text-secondary text-sm"
              :class="{ 'dark': darkMode }"
            >Memuat data...</p>
          </div>
        </div>

        <!-- AG Grid Container -->
        <div
          class="bg-surface overflow-hidden rounded-xl shadow-lg ring-1 ring-gray-200"
          :class="{ 'dark ring-gray-700': darkMode }"
        >
          <div
            class="ag-theme-alpine-custom"
            style="height: 500px; width: 100%"
            x-ref="ag_grid"
          ></div>
        </div>

        <!-- Custom Pagination Controls -->
        <div
          class="mt-4 flex flex-col gap-4 rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-200 sm:flex-row sm:items-center sm:justify-between"
          :class="{ 'dark bg-gray-800 ring-gray-700': darkMode }"
        >
          <!-- Results Info -->
          <div
            class="text-sm text-gray-700"
            :class="{ 'dark text-gray-300': darkMode }"
          >
            <span>Showing </span>
            <span
              class="font-semibold"
              x-text="totalRecords > 0 ? ((currentPage - 1) * pageSize + 1) : 0"
            ></span>
            <span> to </span>
            <span
              class="font-semibold"
              x-text="Math.min(currentPage * pageSize, totalRecords)"
            ></span>
            <span> of </span>
            <span
              class="font-semibold"
              x-text="totalRecords"
            ></span>
            <span> results</span>
          </div>

          <!-- Pagination Controls -->
          <div
            class="flex items-center justify-center gap-1"
            x-show="totalPages > 1"
          >
            <!-- First Page -->
            <button
              class="flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 bg-white text-sm text-gray-700 transition-colors"
              title="First Page"
              @click="goToPage(1)"
              :disabled="currentPage <= 1"
              :class="currentPage <= 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 hover:text-gray-900'"
              :class="{ 'dark border-gray-600 bg-gray-800 text-gray-300 hover:bg-gray-700': darkMode }"
            >
              <i class="fas fa-angle-double-left text-xs"></i>
            </button>

            <!-- Previous Button -->
            <button
              class="flex h-9 items-center justify-center rounded-lg border border-gray-300 bg-white px-3 text-sm text-gray-700 transition-colors"
              @click="prevPage()"
              :disabled="currentPage <= 1"
              :class="currentPage <= 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 hover:text-gray-900'"
              :class="{ 'dark border-gray-600 bg-gray-800 text-gray-300 hover:bg-gray-700': darkMode }"
            >
              <i class="fas fa-chevron-left mr-1 text-xs"></i>
              <span class="hidden sm:inline">Previous</span>
            </button>

            <!-- Page Numbers -->
            <template
              x-for="page in Array.from({length: Math.min(5, totalPages)}, (_, i) => {
              let start = Math.max(1, currentPage - 2);
              let end = Math.min(totalPages, start + 4);
              start = Math.max(1, end - 4);
              return start + i;
            }).filter(p => p <= totalPages)"
              :key="page"
            >
              <button
                class="flex h-9 w-9 items-center justify-center rounded-lg border text-sm font-medium transition-all duration-200"
                @click="goToPage(page)"
                :class="page === currentPage ? 'bg-blue-500 text-white border-blue-500 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-100 hover:text-gray-900'"
                :class="{ 'dark': darkMode, 'dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700': darkMode && page !== currentPage }"
                x-text="page"
              ></button>
            </template>

            <!-- Next Button -->
            <button
              class="flex h-9 items-center justify-center rounded-lg border border-gray-300 bg-white px-3 text-sm text-gray-700 transition-colors"
              @click="nextPage()"
              :disabled="currentPage >= totalPages"
              :class="currentPage >= totalPages ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 hover:text-gray-900'"
              :class="{ 'dark border-gray-600 bg-gray-800 text-gray-300 hover:bg-gray-700': darkMode }"
            >
              <span class="hidden sm:inline">Next</span>
              <i class="fas fa-chevron-right ml-1 text-xs"></i>
            </button>

            <!-- Last Page -->
            <button
              class="flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 bg-white text-sm text-gray-700 transition-colors"
              title="Last Page"
              @click="goToPage(totalPages)"
              :disabled="currentPage >= totalPages"
              :class="currentPage >= totalPages ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 hover:text-gray-900'"
              :class="{ 'dark border-gray-600 bg-gray-800 text-gray-300 hover:bg-gray-700': darkMode }"
            >
              <i class="fas fa-angle-double-right text-xs"></i>
            </button>
          </div>

          <!-- Mobile Pagination (shown only on small screens) -->
          <div
            class="flex items-center justify-between sm:hidden"
            x-show="totalPages > 1"
          >
            <button
              class="flex items-center rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 transition-colors"
              @click="prevPage()"
              :disabled="currentPage <= 1"
              :class="currentPage <= 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100'"
              :class="{ 'dark border-gray-600 bg-gray-800 text-gray-300 hover:bg-gray-700': darkMode }"
            >
              <i class="fas fa-chevron-left mr-2 text-xs"></i>
              Previous
            </button>

            <span
              class="text-sm text-gray-700"
              :class="{ 'dark text-gray-300': darkMode }"
            >
              Page <span x-text="currentPage"></span> of <span x-text="totalPages"></span>
            </span>

            <button
              class="flex items-center rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 transition-colors"
              @click="nextPage()"
              :disabled="currentPage >= totalPages"
              :class="currentPage >= totalPages ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100'"
              :class="{ 'dark border-gray-600 bg-gray-800 text-gray-300 hover:bg-gray-700': darkMode }"
            >
              Next
              <i class="fas fa-chevron-right ml-2 text-xs"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div
    x-data="userForm"
    @open-modal.window="openModal($event.detail.type, $event.detail.editData)"
  >
    @include('selva.user.modal')
  </div>

@endsection

@push('style')
  @vite(['resources/js/selva/user/import.js'])
@endpush