@extends('selva.layout')

@section('title', 'Role')

@section('content')
  <div class="min-h-screen pb-[200px]">
    <div class="p-6">
      <div class="overflow-hidden rounded-2xl border border-default bg-surface shadow-sm" :class="{ 'dark': darkMode }">
        <div class="border-b border-default bg-surface p-8" :class="{ 'dark': darkMode }">
          <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
            <div class="min-w-0 flex-1">
              <div class="flex items-center">
                <div class="flex-shrink-0">
                  <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gray-900 text-white">
                    <i class="fa-regular fa-shield-halved text-lg"></i>
                  </div>
                </div>
                <div class="ml-4">
                  <h1 class="text-lg font-bold text-primary" :class="{ 'dark': darkMode }">Manajemen Role</h1>
                  <p class="text-md mt-1 text-base text-muted" :class="{ 'dark': darkMode }">Kelola dan atur role pengguna dengan
                    mudah untuk sistem Anda</p>
                </div>
              </div>
            </div>

            <div
              class="mt-6 flex flex-col-reverse justify-stretch space-y-4 space-y-reverse sm:flex-row-reverse sm:justify-end sm:space-x-3 sm:space-y-0 sm:space-x-reverse md:mt-0 md:flex-row md:space-x-3"
            >
              <button
                class="inline-flex items-center justify-center rounded-xl bg-gray-900 px-6 py-3 text-sm font-semibold text-white shadow-lg transition-all duration-200 hover:bg-gray-800 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2"
                @click="$dispatch('open-modal', { type: 'create' })"
              >
                <i class="fa-regular fa-plus mr-2"></i>
                Tambah Role
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- <div class="px-6 pb-6">
      <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
        <div class="mb-6 flex items-center justify-between">
          <h3 class="text-lg font-semibold text-gray-900">Statistik Overview</h3>
          <span class="text-sm text-gray-500">Data terkini</span>
        </div>

        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">

          <div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
            <div class="p-6">
              <div class="flex items-center">
                <div class="flex-shrink-0">
                  <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100">
                    <i class="fa-regular fa-shield-halved text-blue-600"></i>
                  </div>
                </div>
                <div class="ml-4 w-0 flex-1">
                  <dl>
                    <dt class="truncate text-sm font-medium text-gray-500">Total Role</dt>
                    <dd class="text-sm font-semibold text-gray-900">
                      1 (Static)</dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
            <div class="p-6">
              <div class="flex items-center">
                <div class="flex-shrink-0">
                  <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-green-100">
                    <i class="fa-regular fa-users text-green-600"></i>
                  </div>
                </div>
                <div class="ml-4 w-0 flex-1">
                  <dl>
                    <dt class="truncate text-sm font-medium text-gray-500">Total Users</dt>
                    <dd class="text-sm font-semibold text-gray-900">
                      200 (Static)</dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
            <div class="p-6">
              <div class="flex items-center">
                <div class="flex-shrink-0">
                  <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-purple-100">
                    <i class="fa-regular fa-crown text-purple-600"></i>
                  </div>
                </div>
                <div class="ml-4 w-0 flex-1">
                  <dl>
                    <dt class="truncate text-sm font-medium text-gray-500">Role Aktif</dt>
                    <dd class="text-sm font-semibold text-gray-900">5 (Static)</dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
            <div class="p-6">
              <div class="flex items-center">
                <div class="flex-shrink-0">
                  <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-orange-100">
                    <i class="fa-regular fa-clock text-orange-600"></i>
                  </div>
                </div>
                <div class="ml-4 w-0 flex-1">
                  <dl>
                    <dt class="truncate text-sm font-medium text-gray-500">Data Dimuat</dt>
                    <dd class="text-sm font-semibold text-gray-900">Baru saja</dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div> --}}

    <div class="px-6 pb-6">
      <div
        class="rounded-2xl border border-default bg-surface p-6 shadow-sm"
        :class="{ 'dark': darkMode }"
        x-data="{ viewMode: 'grid' }"
      >
        <div
          x-data="roleList"
          @fetch-data.window="fetchData()"
        >

          <div class="mb-6 flex items-center justify-between">
            <div>
              <h2 class="text-xl font-bold text-primary" :class="{ 'dark': darkMode }">Daftar Role</h2>
              <p class="mt-1 text-sm text-muted" :class="{ 'dark': darkMode }">Pilih role untuk mengelola permission dan user di dalamnya
              </p>
            </div>

            <div class="flex items-center space-x-2 rounded-xl border border-default bg-gray-50 p-1" :class="{ 'dark border-gray-600 bg-gray-700': darkMode }">
              <button
                class="rounded-lg p-2 transition-colors duration-200"
                :class="viewMode === 'grid' ? 'bg-toggle-active' : 'bg-toggle-inactive'"
                @click="viewMode = 'grid'"
              >
                <i class="fa-regular fa-grid-2"></i>
              </button>
              <button
                class="rounded-lg p-2 transition-colors duration-200"
                :class="viewMode === 'list' ? 'bg-toggle-active' : 'bg-toggle-inactive'"
                @click="viewMode = 'list'"
              >
                <i class="fa-regular fa-list"></i>
              </button>
            </div>
          </div>

          <div
            class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
            x-show="viewMode === 'grid'"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 transform scale-95"
            x-transition:enter-end="opacity-100 transform scale-100"
          >

            <template
              x-for="role in roles"
              :key="role.id"
            >
              <div
                class="animate__animated animate__fadeIn group relative overflow-hidden rounded-xl border border-default bg-surface shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-gray-300 hover:shadow-lg"
                :class="{ 'dark hover:border-gray-600': darkMode }"
              >

                <div class="h-1 bg-gradient-to-r from-gray-600 via-gray-700 to-gray-900"></div>

                <div class="flex h-full flex-col justify-between p-6">

                  <div class="flex-1">
                    <div class="flex items-start justify-between">
                      <div class="flex-1 pr-4">
                        <div class="space-y-2">
                          <h4
                            class="text-xl font-bold text-primary transition-colors duration-200"
                            :class="{ 'dark': darkMode }"
                            x-text="role.name"
                          ></h4>
                          <p
                            class="text-sm leading-relaxed text-secondary"
                            :class="{ 'dark': darkMode }"
                            x-text="role.description"
                          ></p>
                        </div>
                      </div>

                      <div
                        class="relative"
                        x-data="{ open: false }"
                      >
                        <button
                          class="bg-toggle-inactive flex h-10 w-10 items-center justify-center rounded-xl text-muted transition-all duration-200 hover:text-primary focus:outline-none focus:ring-2 focus:ring-gray-200"
                          :class="{ 'dark': darkMode }"
                          @click="open = !open"
                          @click.outside="open = false"
                        >
                          <i class="fa-regular fa-ellipsis-vertical"></i>
                        </button>

                        <div
                          class="absolute right-0 z-20 mt-2 w-40 overflow-hidden rounded-xl border border-default bg-surface shadow-xl"
                          :class="{ 'dark': darkMode }"
                          x-show="open"
                          x-transition:enter="transition ease-out duration-200"
                          x-transition:enter-start="transform opacity-0 scale-95"
                          x-transition:enter-end="transform opacity-100 scale-100"
                          x-transition:leave="transition ease-in duration-150"
                          x-transition:leave-start="transform opacity-100 scale-100"
                          x-transition:leave-end="transform opacity-0 scale-95"
                        >
                          <div class="py-2">
                            <button
                              class="bg-toggle-inactive flex w-full items-center px-4 py-3 text-left text-sm font-medium text-primary transition-all duration-200"
                              :class="{ 'dark': darkMode }"
                              @click="edit(role); open = false"
                            >
                              <div class="mr-3 flex h-6 w-6 items-center justify-center rounded-md bg-blue-100 text-blue-600" :class="{ 'dark bg-blue-800 text-blue-300': darkMode }">
                                <i class="fa-regular fa-pen text-xs"></i>
                              </div>
                              Edit Role
                            </button>
                            <button
                              class="bg-toggle-inactive flex w-full items-center px-4 py-3 text-left text-sm font-medium text-red-600 transition-all duration-200"
                              :class="{ 'dark': darkMode }"
                              @click="destroy(role); open = false"
                            >
                              <div class="mr-3 flex h-6 w-6 items-center justify-center rounded-md bg-red-100 text-red-600" :class="{ 'dark bg-red-800 text-red-300': darkMode }">
                                <i class="fa-regular fa-trash text-xs"></i>
                              </div>
                              Hapus Role
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="mt-6 space-y-4">
                    <div class="h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent" :class="{ 'dark via-gray-600': darkMode }">
                    </div>

                    <div class="flex items-center justify-between">
                      <span class="flex items-center text-sm font-medium text-muted" :class="{ 'dark': darkMode }">
                        <i class="fa-regular fa-users mr-2 text-xs icon-muted" :class="{ 'dark': darkMode }"></i>
                        <p
                          class="text-sm text-muted"
                          :class="{ 'dark': darkMode }"
                          x-text="`${role.users_count || 0} user`"
                        >
                        </p>
                      </span>
                      <div class="flex -space-x-3">
                        <template
                          x-for="(user, index) in (role.users || []).slice(0, 4)"
                          :key="index"
                        >
                          <img
                            class="size-6 rounded-full border-2 border-white shadow-sm transition-all duration-200 hover:z-10 hover:scale-110"
                            :class="{ 'dark border-gray-600': darkMode }"
                            :src="user.avatar"
                            :alt="user.full_name"
                            :title="user.full_name"
                          >
                        </template>
                        <template x-if="(role.users_count || 0) > 4">
                          <div
                            class="flex size-6 items-center justify-center rounded-full border-2 border-white bg-gray-200 text-xs font-medium text-gray-600 shadow-sm transition-all duration-200 hover:z-10 hover:scale-110"
                            :class="{ 'dark border-gray-600 bg-gray-700 text-gray-300': darkMode }"
                            x-text="`+${(role.users_count || 0) - 4}`"
                          >
                          </div>
                        </template>
                      </div>
                    </div>
                  </div>

                  <a
                    class="mt-6 flex w-full items-center justify-center rounded-lg bg-gray-900 py-2 text-sm font-medium text-white shadow-sm transition-all duration-200 hover:bg-gray-800 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 group-hover:shadow-lg"
                    :href="route('selva.permission.index', role.code)"
                  >
                    <i class="fa-solid fa-shield-halved mr-2 text-xs transition-transform duration-200 group-hover:scale-110"></i>
                    Kelola Permission
                  </a>
                </div>

                <div
                  class="pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
                >
                </div>
              </div>
            </template>
          </div>

          <div
            class="relative space-y-4"
            x-show="viewMode === 'list'"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 transform scale-95"
            x-transition:enter-end="opacity-100 transform scale-100"
          >

            <template
              x-for="(role, index) in roles"
              :key="role.id"
            >
              <div
                class="animate__animated animate__fadeIn group relative overflow-visible rounded-xl border border-default bg-surface shadow-sm transition-all duration-200 hover:border-gray-300 hover:shadow-md"
                :class="{ 'dark hover:border-gray-600': darkMode }"
                :style="`z-index: ${roles.length - index}`"
              >

                <div class="p-6">
                  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <div class="flex flex-1 items-center space-x-4">
                      <div class="flex-1">
                        <h4
                          class="text-lg font-bold text-primary"
                          :class="{ 'dark': darkMode }"
                          x-text="role.name"
                        ></h4>
                        <p
                          class="text-sm text-secondary"
                          :class="{ 'dark': darkMode }"
                          x-text="role.description"
                        ></p>
                        <div class="mt-2 flex items-center space-x-4 text-sm text-muted" :class="{ 'dark': darkMode }">
                          <span class="flex items-center">
                            <i class="fa-regular fa-users mr-1 text-xs"></i>
                            <span x-text="`${role.users_count || 0} user`"></span>
                          </span>
                          <span class="flex items-center">
                            <i class="fa-regular fa-hashtag mr-1 text-xs"></i>
                            <span x-text="role.code"></span>
                          </span>
                        </div>
                      </div>
                      <div class="flex -space-x-3">
                        <template
                          x-for="(user, index) in (role.users || []).slice(0, 4)"
                          :key="index"
                        >
                          <img
                            class="size-8 rounded-full border-2 border-white shadow-sm transition-all duration-200 hover:z-10 hover:scale-110"
                            :class="{ 'dark border-gray-600': darkMode }"
                            :src="user.avatar"
                            :alt="user.full_name"
                            :title="user.full_name"
                          >
                        </template>
                        <template x-if="(role.users_count || 0) > 4">
                          <div
                            class="flex size-8 items-center justify-center rounded-full border-2 border-white bg-gray-200 text-xs font-medium text-gray-600 shadow-sm transition-all duration-200 hover:z-10 hover:scale-110"
                            :class="{ 'dark border-gray-600 bg-gray-700 text-gray-300': darkMode }"
                            x-text="`+${(role.users_count || 0) - 4}`"
                          >
                          </div>
                        </template>
                      </div>
                    </div>

                    <div class="flex items-center gap-2">
                      <a
                        class="inline-flex items-center justify-center rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-gray-800"
                        :href="route('selva.permission.index', role.code)"
                      >
                        <i class="fa-solid fa-shield-halved mr-2 text-xs"></i>
                        Kelola Permission
                      </a>

                      <div
                        class="relative"
                        style="z-index: 999;"
                        x-data="{ dropdownOpen: false }"
                      >
                        <button
                          class="bg-toggle-inactive flex h-9 w-9 items-center justify-center rounded-lg text-muted transition-colors duration-200 hover:text-primary"
                          :class="{ 'dark': darkMode }"
                          @click="dropdownOpen = !dropdownOpen"
                          @click.outside="dropdownOpen = false"
                        >
                          <i class="fa-regular fa-ellipsis-vertical text-sm"></i>
                        </button>

                        <div
                          class="absolute right-0 w-40 rounded-xl border border-default bg-surface shadow-xl sm:w-44"
                          :class="{ 'dark': darkMode }"
                          style="top: calc(100% + 4px); z-index: 9999;"
                          x-show="dropdownOpen"
                          x-transition:enter="transition ease-out duration-200"
                          x-transition:enter-start="transform opacity-0 scale-95"
                          x-transition:enter-end="transform opacity-100 scale-100"
                          x-transition:leave="transition ease-in duration-75"
                          x-transition:leave-start="transform opacity-100 scale-100"
                          x-transition:leave-end="transform opacity-0 scale-95"
                        >

                          <div class="py-2">
                            <button
                              class="bg-toggle-inactive flex w-full items-center px-3 py-2.5 text-left text-sm font-medium text-primary transition-all duration-200 sm:px-4 sm:py-3"
                              :class="{ 'dark': darkMode }"
                              @click="edit(role); dropdownOpen = false"
                            >
                              <div class="mr-2 flex h-5 w-5 items-center justify-center rounded-md bg-blue-100 text-blue-600 sm:mr-3 sm:h-6 sm:w-6" :class="{ 'dark bg-blue-800 text-blue-300': darkMode }">
                                <i class="fa-regular fa-pen text-xs"></i>
                              </div>
                              Edit Role
                            </button>

                            <button
                              class="bg-toggle-inactive flex w-full items-center px-3 py-2.5 text-left text-sm font-medium text-red-600 transition-all duration-200 sm:px-4 sm:py-3"
                              :class="{ 'dark': darkMode }"
                              @click="destroy(role); dropdownOpen = false"
                            >
                              <div class="mr-2 flex h-5 w-5 items-center justify-center rounded-md bg-red-100 text-red-600 sm:mr-3 sm:h-6 sm:w-6" :class="{ 'dark bg-red-800 text-red-300': darkMode }">
                                <i class="fa-regular fa-trash text-xs"></i>
                              </div>
                              Hapus Role
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>

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

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

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