@extends('selva.layout')

@section('title', 'Permission')

@section('content')
  <div class="mb-[50px] min-h-screen bg-gradient-background p-6" :class="{ 'dark': darkMode }">
    <div class="mx-auto max-w-7xl">
      <div class="relative mb-8 overflow-hidden rounded-2xl border border-default bg-surface/80 p-8 shadow-sm backdrop-blur-sm" :class="{ 'dark': darkMode }">

        <div class="absolute inset-0 bg-gradient-overlay opacity-60" :class="{ 'dark': darkMode }">
        </div>
        <div class="absolute -right-24 -top-24 h-48 w-48 rounded-full bg-slate-900/5 blur-3xl" :class="{ 'dark bg-gray-100/5': darkMode }"></div>
        <div class="absolute -bottom-12 -left-12 h-32 w-32 rounded-full bg-blue-500/5 blur-2xl"></div>

        <div
          class="relative flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between"
          x-data
        >

            <div class="space-y-3">
            <div class="inline-flex items-center gap-2 rounded-full bg-slate-900/10 px-3 py-1 text-xs font-medium text-secondary backdrop-blur-sm" :class="{ 'dark bg-gray-100/10': darkMode }">
              <div class="h-1.5 w-1.5 rounded-full bg-slate-600" :class="{ 'dark bg-gray-300': darkMode }"></div>
              Admin Panel
            </div>

            <h1 class="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-700 bg-clip-text text-3xl font-bold text-transparent" :class="{ 'dark from-gray-100 via-gray-200 to-gray-300': darkMode }">
              Manajemen Permission
            </h1>

            <div class="flex items-start gap-2">
              <p class="max-w-md leading-relaxed text-secondary" :class="{ 'dark': darkMode }">
                Kelola dan atur permission pengguna dengan mudah dan efisien.
                <span class="text-muted" :class="{ 'dark': darkMode }">Pastikan setiap role memiliki akses yang tepat.</span>
              </p>
            </div>

            <div class="flex items-center gap-4 pt-2">
              <div class="flex items-center gap-2 text-sm text-muted" :class="{ 'dark': darkMode }">
                <i class="fa-regular fa-users text-xs"></i>
                <span>Role: <strong class="text-primary" :class="{ 'dark': darkMode }">{{ $role->name ?? 'Tidak diketahui' }}</strong></span>
              </div>
              {{-- <div class="h-1 w-1 rounded-full bg-slate-300"></div>
              <div class="flex items-center gap-2 text-sm text-slate-500">
                <i class="fa-regular fa-clock text-xs"></i>
                <span>Terakhir update: <strong class="text-slate-700">2 hari lalu</strong></span>
              </div> --}}
            </div>
          </div>          <div class="flex flex-col gap-3 sm:items-end">

            <button
              class="group relative flex items-center gap-3 overflow-hidden rounded-xl bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-8 py-3.5 text-sm font-semibold text-white shadow-lg transition-all duration-300 hover:scale-[1.02] hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-slate-900/30 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100"
              @click="$dispatch('save-permission')"
            >

              <div
                class="absolute inset-0 translate-x-[-100%] bg-gradient-to-r from-white/0 via-white/10 to-white/0 transition-transform duration-700 group-hover:translate-x-[100%]"
              >
              </div>

              <div class="relative">
                <i
                  class="fa-duotone fa-solid fa-spinner-third animate-spin text-sm"
                  x-show="$store.permissionState.isSubmitting"
                ></i>
              </div>

              <span
                class="relative"
                x-text="$store.permissionState.isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'"
              ></span>

              <i
                class="fa-regular fa-arrow-right -translate-x-2 text-xs opacity-0 transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100"
                x-show="!$store.permissionState.isSubmitting"
              ></i>
            </button>

          </div>
        </div>
      </div>

      <div
        x-data="permissionList({ roleId: {{ $role->id }} })"
        @fetch-data.window="fetchData()"
        @save-permission.window="savePermission()"
      >

        <div class="mb-6 rounded-2xl border border-default bg-surface/80 p-6 shadow-sm backdrop-blur-sm" :class="{ 'dark': darkMode }">
          <label class="group flex cursor-pointer items-center gap-3">
            <div class="relative">
              <input
                class="bg-input h-5 w-5 rounded-lg border-2 text-gray-900 shadow-sm transition-all duration-200 focus:ring-2 focus:ring-gray-900/20 focus:ring-offset-0"
                :class="{ 'dark': darkMode }"
                type="checkbox"
                @change="toggleAllPermissions($event.target.checked)"
                :checked="isAllChecked()"
              >
              <div class="pointer-events-none absolute inset-0 rounded-lg bg-gray-900/10 opacity-0 transition-opacity duration-200 peer-checked:opacity-100" :class="{ 'dark bg-gray-100/10': darkMode }">
              </div>
            </div>
            <div class="flex-1">
              <span class="font-semibold text-primary transition-colors group-hover:text-gray-700" :class="{ 'dark': darkMode }">Pilih
                Semua Permission</span>
              <p class="mt-0.5 text-sm text-secondary" :class="{ 'dark': darkMode }">Aktifkan semua permission yang tersedia</p>
            </div>
            <div class="rounded-md bg-toggle-inactive p-2 transition-colors group-hover:bg-gray-200" :class="{ 'dark hover:bg-gray-600': darkMode }">
              <i class="fa-regular fa-list-check text-primary" :class="{ 'dark': darkMode }"></i>
            </div>
          </label>
        </div>

        <div class="grid gap-6">
          <template
            x-for="[group, items] of Object.entries(permissions)"
            :key="group"
          >
            <div class="overflow-hidden rounded-2xl border border-default bg-surface/80 shadow-sm backdrop-blur-sm transition-all duration-300 hover:shadow-md" :class="{ 'dark': darkMode }">

              <div class="border-b border-default bg-gradient-overlay px-6 py-4" :class="{ 'dark': darkMode }">
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-3">
                    <div class="flex h-8 w-8 items-center justify-center rounded-md bg-gradient-to-br from-gray-800 to-gray-900 p-2">
                      <i class="fa-regular fa-shield-check text-sm text-white"></i>
                    </div>
                    <div>
                      <h2
                        class="font-bold capitalize text-primary"
                        :class="{ 'dark': darkMode }"
                        x-text="group.replace('_', ' ')"
                      >
                      </h2>
                      <p
                        class="text-xs text-muted"
                        :class="{ 'dark': darkMode }"
                        x-text="`${items.length} permission tersedia`"
                      >
                      </p>
                    </div>
                  </div>
                  <label
                    class="flex cursor-pointer items-center gap-2 rounded-md bg-toggle-inactive px-3 py-1.5 text-xs font-medium text-primary transition-colors"
                    :class="{ 'dark': darkMode }"
                  >
                    <input
                      class="bg-input h-3.5 w-3.5 rounded text-gray-900 shadow-sm focus:ring-gray-900"
                      :class="{ 'dark': darkMode }"
                      type="checkbox"
                      @change="toggleGroupPermissions(group, $event.target.checked)"
                      :checked="isGroupChecked(group)"
                    >
                    <span>Pilih Semua</span>
                  </label>
                </div>
              </div>

              <div class="p-6">
                <div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
                  <template
                    x-for="permission in items"
                    :key="permission.id"
                  >
                    <label
                      class="group flex cursor-pointer items-center gap-3 rounded-xl border border-default bg-surface/60 p-3 transition-all duration-200 hover:border-gray-300 hover:shadow-sm"
                      :class="{ 'dark hover:border-gray-600': darkMode }"
                    >
                      <div class="relative">
                        <input
                          class="bg-input h-4 w-4 rounded text-gray-900 shadow-sm transition-all duration-200 focus:ring-2 focus:ring-gray-900/20"
                          :class="{ 'dark': darkMode }"
                          type="checkbox"
                          :value="permission.id"
                          x-model="selectedPermissions"
                        >
                        <div class="pointer-events-none absolute inset-0 rounded bg-gray-900/10 opacity-0 transition-opacity duration-200 peer-checked:opacity-100" :class="{ 'dark bg-gray-100/10': darkMode }">
                        </div>
                      </div>
                      <div class="min-w-0 flex-1">
                        <span
                          class="block truncate text-sm font-medium text-primary transition-colors"
                          :class="{ 'dark': darkMode }"
                          x-text="permission.alias ?? permission.name"
                        ></span>
                        <span
                          class="block truncate text-xs text-muted"
                          :class="{ 'dark': darkMode }"
                          x-text="permission.name"
                          x-show="permission.alias"
                        ></span>
                      </div>
                      <div class="flex-shrink-0 opacity-0 transition-opacity group-hover:opacity-100">
                        <div class="h-2 w-2 rounded-full bg-gray-600" :class="{ 'dark bg-gray-400': darkMode }"></div>
                      </div>
                    </label>
                  </template>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
@endsection

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