@extends('selva.layout')

@section('title', 'Menu')

@section('content')
  <div
    class="min-h-screen overflow-visible pb-[200px]"
    x-data="{ ...menuList2({{ $menuType->id }}), allExpand: true }"
    @fetch-data.window="fetchData()"
  >
    <div class="overflow-visible p-6">
      <div
        class="border-default bg-surface overflow-hidden rounded-2xl border shadow-sm"
        :class="{ 'dark': darkMode }"
      >
        <div
          class="border-default bg-surface border-b 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-bars text-lg"></i>
                  </div>
                </div>
                <div class="ml-4">
                  <h1
                    class="text-primary text-lg font-bold"
                    :class="{ 'dark': darkMode }"
                  >Manajemen Menu</h1>
                  <p
                    class="text-md text-muted mt-1 text-base"
                    :class="{ 'dark': darkMode }"
                  >Kelola struktur navigasi website dengan drag & drop yang mudah</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="btn-light"
                :class="{ 'dark': darkMode }"
                @click="allExpand = !allExpand; $dispatch('toggle-all', { expand: allExpand })"
              >
                <i
                  class="fa-regular mr-2"
                  :class="allExpand ? 'fa-chevron-up' : 'fa-chevron-down'"
                ></i>
                <span x-text="allExpand ? 'Collapse All' : 'Expand All'"></span>
              </button>

              <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 Menu
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="overflow-visible px-6 pb-6">
      <div
        class="border-default bg-surface overflow-visible rounded-2xl border p-6 shadow-sm"
        :class="{ 'dark': darkMode }"
      >
        <div class="mb-6 flex items-center justify-between overflow-visible">
          <div>
            <h2
              class="text-primary text-xl font-bold"
              :class="{ 'dark': darkMode }"
            >Daftar Menu</h2>
            <p
              class="text-muted mt-1 text-sm"
              :class="{ 'dark': darkMode }"
            >Drag & drop untuk mengatur urutan menu dengan mudah</p>
          </div>
        </div>

        {{-- Parent menu --}}
        <ul
          class="space-y-4 overflow-visible"
          x-ref="menuList"
        >
          <template
            x-for="(menu, index) in menus"
            :key="menu.id"
          >
            <li
              class="animate__animated animate__fadeIn border-default bg-surface group relative overflow-visible rounded-xl border p-6 shadow-sm transition-all duration-300 hover:border-gray-300 hover:shadow-lg"
              :class="{ 'dark': darkMode }"
              :data-id="menu.id"
              :style="`z-index: ${menus.length - index}`"
              x-data="{ expand: true }"
              @toggle-all.window="expand = $event.detail.expand"
            >
              <div class="-mx-6 -mt-6 mb-4 h-1 rounded-t-xl bg-gradient-to-r from-gray-600 via-gray-700 to-gray-900"></div>

              <div class="flex items-center justify-between gap-4">
                <div class="flex flex-1 items-center gap-4">
                  <div
                    class="main-drag-handle flex h-10 w-10 cursor-move items-center justify-center rounded-lg bg-gray-100"
                    :class="{ 'dark bg-gray-700': darkMode }"
                  >
                    <i
                      class="fa-regular fa-bars text-muted text-sm"
                      :class="{ 'dark': darkMode }"
                    ></i>
                  </div>
                  <div class="flex-1">
                    <div class="flex items-center gap-3">
                      <h4
                        class="text-primary text-lg font-semibold"
                        :class="{ 'dark': darkMode }"
                        x-text="menu.name"
                      ></h4>
                      <span
                        class="text-muted rounded-md bg-gray-100 px-2 py-1 text-xs"
                        :class="{ 'dark bg-gray-700': darkMode }"
                        x-text="menu.url"
                      ></span>
                    </div>
                    <div class="mt-2 flex gap-2">
                      <span
                        class="inline-flex items-center rounded-md border border-green-300 bg-green-100 px-2 py-1 text-xs text-green-600"
                        :class="{ 'dark border-green-600 bg-green-800 text-green-300': darkMode }"
                        x-show="menu.can_create"
                      >
                        <i class="fa-regular fa-plus mr-1 text-xs"></i>
                        Create
                      </span>
                      <span
                        class="inline-flex items-center rounded-md border border-blue-300 bg-blue-100 px-2 py-1 text-xs text-blue-600"
                        :class="{ 'dark border-blue-600 bg-blue-800 text-blue-300': darkMode }"
                        x-show="menu.can_read"
                      >
                        <i class="fa-regular fa-eye mr-1 text-xs"></i>
                        Read
                      </span>
                      <span
                        class="inline-flex items-center rounded-md border border-yellow-300 bg-yellow-100 px-2 py-1 text-xs text-yellow-600"
                        :class="{ 'dark border-yellow-600 bg-yellow-800 text-yellow-300': darkMode }"
                        x-show="menu.can_update"
                      >
                        <i class="fa-regular fa-pen mr-1 text-xs"></i>
                        Update
                      </span>
                      <span
                        class="inline-flex items-center rounded-md border border-red-300 bg-red-100 px-2 py-1 text-xs text-red-600"
                        :class="{ 'dark border-red-600 bg-red-800 text-red-300': darkMode }"
                        x-show="menu.can_delete"
                      >
                        <i class="fa-regular fa-trash mr-1 text-xs"></i>
                        Delete
                      </span>
                    </div>
                  </div>
                </div>

                <div class="flex items-center gap-2">
                  <template x-if="menu.children">
                    <button
                      class="bg-toggle-inactive border-default bg-surface text-primary inline-flex items-center justify-center rounded-lg border px-3 py-2 text-sm font-medium transition-colors duration-200"
                      :class="{ 'dark': darkMode }"
                      @click="expand = !expand"
                    >
                      <i
                        class="fa-regular mr-1 text-xs"
                        :class="expand ? 'fa-chevron-up' : 'fa-chevron-down'"
                      ></i>
                      <span x-text="expand ? 'Hide' : 'Show'"></span>
                    </button>
                  </template>

                  <div
                    class="relative"
                    style="z-index: 999;"
                    x-data="{ open: false }"
                  >
                    <button
                      class="bg-toggle-inactive text-muted hover:text-primary flex h-10 w-10 items-center justify-center rounded-lg transition-all duration-200 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="border-default bg-surface absolute right-0 w-48 overflow-hidden rounded-xl border shadow-xl"
                      style="top: calc(100% + 4px); z-index: 9999;"
                      :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">
                        <template x-if="menu.can_read">
                          <button
                            class="bg-toggle-inactive text-primary flex w-full items-center px-4 py-3 text-left text-sm font-medium transition-all duration-200"
                            :class="{ 'dark': darkMode }"
                            @click="$dispatch('open-modal', { type: 'create', editData: menu, parentId: menu.id }); 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-plus text-xs"></i>
                            </div>
                            Tambah Submenu
                          </button>
                        </template>
                        <button
                          class="bg-toggle-inactive text-primary flex w-full items-center px-4 py-3 text-left text-sm font-medium transition-all duration-200"
                          :class="{ 'dark': darkMode }"
                          @click="edit(menu); open = false"
                        >
                          <div
                            class="mr-3 flex h-6 w-6 items-center justify-center rounded-md bg-purple-100 text-purple-600"
                            :class="{ 'dark bg-purple-800 text-purple-300': darkMode }"
                          >
                            <i class="fa-regular fa-pencil text-xs"></i>
                          </div>
                          Edit Menu
                        </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(menu); 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 Menu
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {{-- Submenu 1 --}}
              <div
                class="overflow-visible"
                x-show="expand"
                x-transition
              >
                <template x-if="menu.children">
                  <ul
                    class="submenu-container mt-6 space-y-3 overflow-visible px-3 pb-3"
                    data-depth="1"
                    :data-submenu-id="menu.id"
                  >
                    <template x-for="child in menu.children">
                      <li
                        class="border-default bg-surface overflow-visible rounded-lg border-l-4 py-4 pl-6"
                        :class="{ 'dark': darkMode }"
                        :data-id="child.id"
                        x-data="{ expand: true }"
                        @toggle-all.window="expand = $event.detail.expand"
                      >
                        <div class="flex items-center justify-between gap-4">
                          <div class="flex flex-1 items-center gap-4">
                            <div
                              class="sub-drag-handle flex h-8 w-8 cursor-move items-center justify-center rounded-lg bg-gray-100"
                              :class="{ 'dark bg-gray-700': darkMode }"
                            >
                              <i
                                class="fa-regular fa-bars text-muted text-sm"
                                :class="{ 'dark': darkMode }"
                              ></i>
                            </div>
                            <div class="flex flex-1 items-center gap-3">
                              <div class="flex flex-col">
                                <span
                                  class="text-primary text-sm font-semibold"
                                  :class="{ 'dark': darkMode }"
                                  x-text="child.name"
                                ></span>
                                <span
                                  class="text-muted text-xs"
                                  :class="{ 'dark': darkMode }"
                                  x-text="child.url"
                                ></span>
                              </div>
                              <div class="ml-4 flex gap-2">
                                <span
                                  class="rounded-md border border-green-300 bg-green-100 px-2 py-1 text-xs text-green-600"
                                  :class="{ 'dark border-green-600 bg-green-800 text-green-300': darkMode }"
                                  x-show="child.can_create"
                                >
                                  <i class="fa-regular fa-plus mr-1 text-xs"></i>
                                  Create
                                </span>
                                <span
                                  class="rounded-md border border-blue-300 bg-blue-100 px-2 py-1 text-xs text-blue-600"
                                  :class="{ 'dark border-blue-600 bg-blue-800 text-blue-300': darkMode }"
                                  x-show="child.can_read"
                                >
                                  <i class="fa-regular fa-eye mr-1 text-xs"></i>
                                  Read
                                </span>
                                <span
                                  class="rounded-md border border-yellow-300 bg-yellow-100 px-2 py-1 text-xs text-yellow-600"
                                  :class="{ 'dark border-yellow-600 bg-yellow-800 text-yellow-300': darkMode }"
                                  x-show="child.can_update"
                                >
                                  <i class="fa-regular fa-pen mr-1 text-xs"></i>
                                  Update
                                </span>
                                <span
                                  class="rounded-md border border-red-300 bg-red-100 px-2 py-1 text-xs text-red-600"
                                  :class="{ 'dark border-red-600 bg-red-800 text-red-300': darkMode }"
                                  x-show="child.can_delete"
                                >
                                  <i class="fa-regular fa-trash mr-1 text-xs"></i>
                                  Delete
                                </span>
                              </div>
                            </div>
                          </div>

                          <div class="flex items-center gap-2">
                            <template x-if="child.children">
                              <button
                                class="bg-toggle-inactive border-default bg-surface text-primary inline-flex items-center justify-center rounded-lg border px-2 py-1 text-xs font-medium transition-colors duration-200"
                                :class="{ 'dark': darkMode }"
                                @click="expand = !expand"
                              >
                                <i
                                  class="fa-regular mr-1 text-xs"
                                  :class="expand ? 'fa-chevron-up' : 'fa-chevron-down'"
                                ></i>
                                <span x-text="expand ? 'Hide' : 'Show'"></span>
                              </button>
                            </template>

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

                              <div
                                class="border-default bg-surface absolute right-0 z-[9999] mt-2 w-44 overflow-hidden rounded-xl border shadow-xl"
                                :class="{ 'dark': darkMode }"
                                x-show="childOpen"
                                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 text-primary flex w-full items-center px-3 py-2 text-left text-xs font-medium transition-all duration-200"
                                    :class="{ 'dark': darkMode }"
                                    @click="$dispatch('open-modal', { type: 'create', editData: child, parentId: child.id }); childOpen = false"
                                  >
                                    <div
                                      class="mr-2 flex h-5 w-5 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-plus text-xs"></i>
                                    </div>
                                    Tambah Submenu
                                  </button>

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

                                  <button
                                    class="bg-toggle-inactive flex w-full items-center px-3 py-2 text-left text-xs font-medium text-red-600 transition-all duration-200"
                                    :class="{ 'dark': darkMode }"
                                    @click="destroy(child); childOpen = false"
                                  >
                                    <div
                                      class="mr-2 flex h-5 w-5 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
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        {{-- Submenu 2 --}}
                        <div
                          class="overflow-visible"
                          x-show="expand"
                          x-transition
                        >
                          <template x-if="child.children">
                            <ul
                              class="submenu-container mt-4 space-y-3 overflow-visible"
                              data-depth="2"
                              :data-submenu-id="child.id"
                            >
                              <template x-for="nestchild in child.children">
                                <li
                                  class="border-default bg-surface ml-3 rounded-lg border-l-4 py-3 pl-6"
                                  :class="{ 'dark': darkMode }"
                                  :data-id="nestchild.id"
                                >
                                  <div class="flex items-center justify-between gap-4">
                                    <div class="flex flex-1 items-center gap-4">
                                      <div
                                        class="sub-drag-handle flex h-6 w-6 cursor-move items-center justify-center rounded-lg bg-gray-100"
                                        :class="{ 'dark bg-gray-700': darkMode }"
                                      >
                                        <i
                                          class="fa-regular fa-bars text-muted text-xs"
                                          :class="{ 'dark': darkMode }"
                                        ></i>
                                      </div>
                                      <div class="flex flex-1 items-center gap-3">
                                        <div class="flex flex-col">
                                          <span
                                            class="text-primary text-sm font-semibold"
                                            :class="{ 'dark': darkMode }"
                                            x-text="nestchild.name"
                                          ></span>
                                          <span
                                            class="text-muted text-xs"
                                            :class="{ 'dark': darkMode }"
                                            x-text="nestchild.url"
                                          ></span>
                                        </div>
                                        <div class="ml-4 flex gap-2">
                                          <span
                                            class="rounded-md border border-green-300 bg-green-100 px-2 py-1 text-xs text-green-600"
                                            :class="{ 'dark border-green-600 bg-green-800 text-green-300': darkMode }"
                                            x-show="nestchild.can_create"
                                          >
                                            <i class="fa-regular fa-plus mr-1 text-xs"></i>
                                            Create
                                          </span>
                                          <span
                                            class="rounded-md border border-blue-300 bg-blue-100 px-2 py-1 text-xs text-blue-600"
                                            :class="{ 'dark border-blue-600 bg-blue-800 text-blue-300': darkMode }"
                                            x-show="nestchild.can_read"
                                          >
                                            <i class="fa-regular fa-eye mr-1 text-xs"></i>
                                            Read
                                          </span>
                                          <span
                                            class="rounded-md border border-yellow-300 bg-yellow-100 px-2 py-1 text-xs text-yellow-600"
                                            :class="{ 'dark border-yellow-600 bg-yellow-800 text-yellow-300': darkMode }"
                                            x-show="nestchild.can_update"
                                          >
                                            <i class="fa-regular fa-pen mr-1 text-xs"></i>
                                            Update
                                          </span>
                                          <span
                                            class="rounded-md border border-red-300 bg-red-100 px-2 py-1 text-xs text-red-600"
                                            :class="{ 'dark border-red-600 bg-red-800 text-red-300': darkMode }"
                                            x-show="nestchild.can_delete"
                                          >
                                            <i class="fa-regular fa-trash mr-1 text-xs"></i>
                                            Delete
                                          </span>
                                        </div>
                                      </div>
                                    </div>

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

                                      <div
                                        class="border-default bg-surface absolute right-0 z-[9999] mt-2 w-36 overflow-hidden rounded-xl border shadow-xl"
                                        :class="{ 'dark': darkMode }"
                                        x-show="nestedOpen"
                                        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 text-primary flex w-full items-center px-3 py-2 text-left text-xs font-medium transition-all duration-200"
                                            :class="{ 'dark': darkMode }"
                                            @click="edit(nestchild); nestedOpen = false"
                                          >
                                            <div
                                              class="mr-2 flex h-4 w-4 items-center justify-center rounded-md bg-purple-100 text-purple-600"
                                              :class="{ 'dark bg-purple-800 text-purple-300': darkMode }"
                                            >
                                              <i class="fa-regular fa-pencil text-xs"></i>
                                            </div>
                                            Edit
                                          </button>

                                          <button
                                            class="bg-toggle-inactive flex w-full items-center px-3 py-2 text-left text-xs font-medium text-red-600 transition-all duration-200"
                                            :class="{ 'dark': darkMode }"
                                            @click="destroy(nestchild); nestedOpen = false"
                                          >
                                            <div
                                              class="mr-2 flex h-4 w-4 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
                                          </button>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </li>
                              </template>
                            </ul>
                          </template>
                        </div>

                      </li>
                    </template>
                  </ul>
                </template>
              </div>
            </li>
          </template>
        </ul>
      </div>
    </div>
  </div>

  <div
    x-data="menuForm({ menuTypeId: {{ $menuType->id }} })"
    @open-modal.window="openModal($event.detail.type, $event.detail.editData, $event.detail.parentId)"
  >
    @include('selva.menu.modal')
  </div>
@endsection

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

@push('script')
  <script src="{{ url('assets/libs/universal-icon-picker/js/universal-icon-picker.js') }}"></script>
@endpush