@extends('backend.layout-tw')

@section('title', 'Permission')

@section('content')
  <div class="p-6 py-8">
    <div
      class="mb-6 flex items-center justify-between"
      x-data
    >
      <div class="w-lg">
        <h1 class="text-xl font-semibold text-gray-800">Manajemen Permission</h1>
        <p class="text-sm text-gray-500">Kelola dan atur permission pengguna dengan mudah.</p>
      </div>

      <div class="flex gap-3">
        <button
          class="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow transition hover:bg-blue-700 disabled:opacity-50"
          {{-- :disabled="$store.permissionState.isSubmitting || $store.permissionState.selectedPermissions.length === 0" --}}
          @click="$dispatch('submit-permissions')"
        >
          <i
            class="fa-duotone fa-solid fa-spinner-third animate-spin text-xs"
            x-show="$store.permissionState.isSubmitting"
          ></i>
          <span x-text="$store.permissionState.isSubmitting ? 'Menyimpan...' : 'Simpan'"></span>
        </button>

        {{-- <button
          class="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow transition hover:bg-blue-700"
          @click="$dispatch('open-modal', { type: 'add' })"
        >
          <i class="fa-regular fa-plus text-xs"></i>
          Tambah Permission
        </button> --}}
      </div>
    </div>

    <div
      x-data="listPermissionContainer"
      x-init="roleId = {{ $role->id }}"
      @fetch-permissions.window="fetchPermissions()"
      @submit-permissions.window="submitPermissions()"
    >
      <!-- Check All -->
      <label class="mb-4 flex items-center gap-2">
        <input
          class="rounded border-gray-300 text-blue-600 shadow-sm"
          type="checkbox"
          @change="toggleAllPermissions($event.target.checked)"
          :checked="isAllChecked()"
        >
        <span class="text-sm font-medium text-gray-700">Pilih Semua</span>
      </label>


      <template
        x-for="[group, items] of Object.entries(permissions)"
        :key="group"
      >
        <div class="mb-6 rounded border p-4">
          <!-- Check All per Group -->
          <div class="mb-2 flex items-center justify-between">
            <h2
              class="text-sm font-semibold uppercase text-gray-700"
              x-text="group"
            ></h2>
            <label class="flex cursor-pointer items-center gap-1 text-xs text-blue-600">
              <input
                class="rounded border-gray-300 text-blue-600 shadow-sm"
                type="checkbox"
                @change="toggleGroupPermissions(group, $event.target.checked)"
                :checked="isGroupChecked(group)"
              >
              <span>Pilih Semua</span>
            </label>
          </div>

          <!-- List checkbox -->
          <div class="grid grid-cols-2 gap-2">
            <template
              x-for="permission in items"
              :key="permission.id"
            >
              <label class="flex items-center gap-2 text-sm">
                <input
                  class="rounded border-gray-300 text-blue-600 shadow-sm"
                  type="checkbox"
                  :value="permission.id"
                  x-model="selectedPermissions"
                >
                <span x-text="permission.alias ?? permission.name"></span>
              </label>
            </template>
          </div>
        </div>
      </template>
    </div>

  </div>

  {{-- <div
    x-data="formPermissionContainer"
    @open-modal.window="openModal($event.detail.type, $event.detail.permission)"
  >
    @include('backend.permission.modal')
  </div> --}}
@endsection