@extends('selva.layout')

@section('title', 'Page')

@section('content')
  <div class="p-6 py-8">
    <div
      x-data="pageList"
      @fetch-data.window="fetchData()"
    >
      <div class="mb-6 rounded-xl bg-white p-6 shadow-sm">
        <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <div class="flex flex-wrap gap-2 sm:gap-3">
            <a
              class="btn bg-gray-900"
              :href="route('selva.page.create')"
            >
              <i class="fas fa-plus mr-1 transition-transform group-hover:scale-110 sm:mr-2"></i>
              <span class="sm:inline">Tambah</span>
            </a>
            <button
              class="btn-delete"
              @click="deleteSelected"
            >
              <i class="fas fa-trash mr-1 transition-transform group-hover:scale-110 sm:mr-2"></i>
              <span class="hidden sm:inline">Hapus Terpilih</span>
              <span class="sm:hidden">Hapus</span>
            </button>

            <div
              class="relative"
              x-data="{ open: false }"
            >
              <button
                class="btn-light group"
                @click="open = !open"
              >
                <i class="fas fa-download mr-1 transition-transform group-hover:scale-110 sm:mr-2"></i>
                <span class="hidden sm:inline">Export</span>
                <span class="sm:hidden">Export</span>
                <i
                  class="fas fa-chevron-down ml-1 text-xs transition-transform duration-200 sm:ml-2"
                  :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-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="exportMatPel('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="exportMatPel('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="exportMatPel('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="printMatPel(); 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="copyMatPel(); 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"
              @click="refreshData"
            >
              <i class="fas fa-sync-alt mr-1 transition-transform group-hover:rotate-180 sm:mr-2"></i>
              <span class="sm:hidden">Refresh</span>
              <span class="hidden sm:inline">Refresh</span>
            </button>
          </div>

          <div class="relative w-full max-w-md lg:w-auto lg:min-w-[280px]">
            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
              <i class="fas fa-search text-gray-400"></i>
            </div>
            <input
              class="bg-input text-input block w-full rounded-xl py-2.5 pl-10 pr-4 text-sm shadow-sm transition-all duration-200 hover:shadow-md focus:shadow-lg focus:ring-2 focus:ring-blue-500 focus:ring-offset-0"
              type="text"
              :class="{ 'dark': darkMode }"
              placeholder="Cari halaman..."
              @input="updateQuickFilter"
            />
          </div>
        </div>

        <div
          class="fixed inset-0 left-0 top-0 z-[99999] flex items-center justify-center bg-white/80 backdrop-blur-sm"
          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"></div>
            <p class="text-sm text-gray-600">Memuat data...</p>
          </div>
        </div>

        <div class="overflow-hidden rounded-xl bg-white shadow-lg">
          <div
            class="ag-theme-alpine-custom"
            style="height: 500px; width: 100%"
            x-ref="ag_grid"
          ></div>
        </div>
      </div>
    </div>
  </div>
@endsection

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