@extends('selva.layout')

@section('title', 'Menu')

@section('content')
  <div class="min-h-screen p-10 py-5 pb-[200px]">
    <div class="mb-8">
      <div class="flex items-center justify-between rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">

        <div class="flex items-center gap-4">
          <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gray-900 text-white">
            <i class="fa-solid fa-sitemap text-lg"></i>
          </div>

          <div>
            <h1 class="text-lg font-bold text-gray-900">Menu Navigasi</h1>
            <p class="text-md mt-1 text-base text-gray-600">Kelola struktur navigasi website dengan drag & drop
              yang mudah</p>
          </div>
        </div>

        <button
          class="group flex items-center gap-3 rounded-xl bg-gray-900 px-5 py-3 text-white shadow-lg shadow-gray-900/20 transition-all duration-300 hover:-translate-y-0.5 hover:bg-gray-800 hover:shadow-xl hover:shadow-gray-900/30"
          @click="$dispatch('open-modal', { type: 'create' })"
        >
          <div class="flex h-5 w-5 items-center justify-center rounded-full bg-white/20 transition-colors duration-200 group-hover:bg-white/30">
            <i class="fa-solid fa-plus text-xs"></i>
          </div>
          <span class="text-sm font-medium">Tambah Menu</span>
        </button>
      </div>
    </div>

    <div
      x-data="menuList"
      @fetch-data.window="fetchData()"
    >
      <ul
        class="main-menu-list min-h-[100px] space-y-2 rounded-lg border-2 border-dashed border-transparent p-2 transition-all duration-200"
        data-main-menu="true"
        role="list"
        aria-label="Daftar Menu Utama"
        x-ref="menuList"
      >
        <template
          x-for="menu in menus"
          :key="menu.id"
        >
          <li
            class="rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md"
            role="listitem"
            :data-id="menu.id"
            x-data="{ expanded: true }"
          >
            <div class="flex items-center justify-between p-4">
              <div class="flex items-center gap-3">
                <span class="main-drag-handle cursor-move text-gray-400 hover:text-gray-600 active:text-blue-600">
                  <i class="fa-regular fa-grip-vertical text-lg"></i>
                </span>

                <i :class="`fa-regular ${menu.icon || 'fa-bars'} text-gray-600`"></i>
                <div>
                  <p
                    class="font-medium text-gray-800"
                    x-text="menu.name"
                  ></p>
                  <p
                    class="text-sm text-gray-500"
                    x-text="menu.url"
                  ></p>
                </div>
              </div>

              <div class="flex items-center gap-3">
                <button
                  class="flex cursor-pointer items-center gap-2 text-sm text-gray-600 transition-colors hover:text-blue-600"
                  x-show="menu.children && menu.children.length"
                  @click="expanded = !expanded"
                >
                  <i :class="`text-xs ${expanded ? 'fa-regular fa-chevron-up' : 'fa-regular fa-chevron-down'}`"></i>
                  <span x-text="expanded ? 'Tutup' : 'Buka'"></span>
                </button>

                <button
                  class="flex cursor-pointer items-center gap-2 text-sm text-gray-600 transition-colors hover:text-blue-600"
                  @click="edit(menu)"
                >
                  <i class="fa-regular fa-pen text-xs"></i> Edit
                </button>

                <button
                  class="flex cursor-pointer items-center gap-2 text-sm text-gray-600 transition-colors hover:text-red-600"
                  @click="destroy(menu)"
                >
                  <i class="fa-regular fa-trash text-xs"></i> Hapus
                </button>
              </div>
            </div>

            <div
              class="border-t border-gray-100 bg-gray-50 p-4"
              x-show="expanded"
              x-transition
            >
              <div class="mb-3 flex items-center justify-between">
                <h3 class="flex items-center gap-2 text-sm font-medium text-gray-700">
                  <i class="fa-regular fa-list text-xs"></i> Submenu
                </h3>
                <button
                  class="flex cursor-pointer items-center gap-2 text-sm text-gray-600 transition-colors hover:text-blue-700"
                  @click="$dispatch('open-modal', { type: 'create', parentId: menu.id })"
                >
                  <i class="fa-regular fa-plus text-xs"></i> Tambah Submenu
                </button>
              </div>

              <ul
                class="submenu-container min-h-[40px] space-y-2 rounded-md border-2 border-dashed border-transparent transition-all duration-200"
                data-depth="1"
                :data-submenu-id="menu.id"
                :key="`submenu-${menu.id}`"
              >
                <template x-if="menu.children && menu.children.length">
                  <template
                    x-for="child in menu.children"
                    :key="child.id"
                  >
                    <li :data-id="child.id">
                      <div class="submenu-item flex items-center justify-between rounded-md border border-gray-200 bg-white p-3 transition-shadow hover:shadow-sm">
                        <div class="flex items-center gap-3">
                          <span class="sub-drag-handle cursor-move text-gray-400 hover:text-gray-600 active:text-blue-600">
                            <i class="fa-solid fa-grip-lines"></i>
                          </span>
                          <i class="fa-solid fa-circle text-xs text-gray-400"></i>
                          <div>
                            <p
                              class="text-sm font-medium text-gray-700"
                              x-text="child.name"
                            >
                            </p>
                            <p
                              class="text-xs text-gray-500"
                              x-text="child.url"
                            ></p>
                          </div>
                        </div>

                        <div class="flex items-center gap-3">
                          <template x-if="child.children && child.children.length">
                            <span class="rounded bg-blue-100 px-2 py-1 text-xs text-blue-600">
                              <i class="fa-solid fa-layer-group mr-1"></i>
                              <span x-text="child.children.length"></span>
                            </span>
                          </template>

                          <button
                            class="flex cursor-pointer items-center gap-2 text-sm text-gray-600 transition-colors hover:text-purple-700"
                            @click="$dispatch('open-modal', { type: 'create', parentId: child.id })"
                          >
                            <i class="fa-regular fa-plus text-xs"></i> Tambah Submenu
                          </button>

                          <button
                            class="flex cursor-pointer items-center gap-2 text-sm text-gray-600 transition-colors hover:text-blue-600"
                            @click="edit(child)"
                          >
                            <i class="fa-regular fa-pen text-xs"></i> Edit
                          </button>

                          <button
                            class="flex cursor-pointer items-center gap-2 text-sm text-gray-600 transition-colors hover:text-red-600"
                            @click="destroy(child)"
                          >
                            <i class="fa-regular fa-trash text-xs"></i> Hapus
                          </button>
                        </div>
                      </div>

                      <!-- Nested submenu level 2 - Hanya tampil jika ada children -->
                      <template x-if="child.children && child.children.length">
                        <div class="ml-6 mt-2 border-l-2 border-gray-200 pl-4">
                          <ul
                            class="submenu-container min-h-[30px] space-y-1 rounded-md border-2 border-dashed border-transparent transition-all duration-200"
                            data-depth="2"
                            :data-submenu-id="child.id"
                            :key="`nested-${child.id}`"
                          >
                            <template
                              x-for="nestedChild in child.children"
                              :key="nestedChild.id"
                            >
                              <li :data-id="nestedChild.id">
                                <div
                                  class="submenu-item flex items-center justify-between rounded-md border border-gray-100 bg-gray-50 p-2 transition-shadow hover:shadow-sm"
                                >
                                  <div class="flex items-center gap-2">
                                    <span class="sub-drag-handle cursor-move text-gray-400 hover:text-gray-600 active:text-blue-600">
                                      <i class="fa-solid fa-grip-lines text-xs"></i>
                                    </span>
                                    <i class="fa-solid fa-minus text-xs text-gray-400"></i>
                                    <div>
                                      <p
                                        class="text-sm font-medium text-gray-700"
                                        x-text="nestedChild.name"
                                      ></p>
                                      <p
                                        class="text-xs text-gray-500"
                                        x-text="nestedChild.url"
                                      ></p>
                                    </div>
                                  </div>

                                  <div class="flex items-center gap-2">
                                    <button
                                      class="flex cursor-pointer items-center gap-1 text-xs text-gray-600 transition-colors hover:text-blue-600"
                                      @click="edit(nestedChild)"
                                    >
                                      <i class="fa-regular fa-pen text-xs"></i>
                                    </button>
                                    <button
                                      class="flex cursor-pointer items-center gap-1 text-xs text-gray-600 transition-colors hover:text-red-600"
                                      @click="destroy(nestedChild)"
                                    >
                                      <i class="fa-regular fa-trash text-xs"></i>
                                    </button>
                                  </div>
                                </div>
                              </li>
                            </template>

                            <!-- Empty state untuk level 2 - hanya tampil dalam container level 2 yang ada -->
                            <template x-if="child.children && child.children.length === 0">
                              <div
                                class="submenu-empty flex min-h-[60px] items-center justify-center rounded-md border-2 border-dashed border-gray-300 bg-gray-100 transition-all duration-200"
                              >
                                <span class="text-sm italic text-gray-500">
                                  <i class="fa-solid fa-arrow-down mr-2"></i>
                                  Tarik menu atau submenu ke sini
                                </span>
                              </div>
                            </template>

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

                <!-- Empty state untuk level 1 -->
                <template x-if="!menu.children || !menu.children.length">
                  <div
                    class="submenu-empty flex min-h-[60px] items-center justify-center rounded-md border-2 border-dashed border-gray-300 bg-gray-100 transition-all duration-200"
                  >
                    <span class="text-sm italic text-gray-500">
                      <i class="fa-solid fa-arrow-down mr-2"></i>
                      Tarik menu atau submenu ke sini
                    </span>
                  </div>
                </template>

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

        <li class="drop-hint hidden rounded-lg border-2 border-dashed border-blue-300 bg-blue-50 p-4 text-center text-sm text-blue-600">
          <i class="fa-solid fa-arrow-down mr-2"></i>
          Lepas di sini untuk jadikan menu utama
        </li>
      </ul>
    </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'])

  <style>
    .submenu-container[data-submenu-id] {
      transition: all 0.3s ease;
    }

    .submenu-container[data-submenu-id] .submenu-item:hover {
      border-left-color: #3b82f6;
    }

    .submenu-container[data-submenu-id] .submenu-container[data-submenu-id] .submenu-item {
      border-left: 2px solid transparent;
      background-color: #f9fafb;
    }

    .submenu-container[data-submenu-id] .submenu-container[data-submenu-id] .submenu-item:hover {
      border-left-color: #10b981;
    }

    .submenu-container.sortable-chosen {
      background-color: #eff6ff;
      border-color: #3b82f6;
    }

    .submenu-container.sortable-ghost {
      opacity: 0.5;
      background-color: #f3f4f6;
      border-style: dashed;
    }

    .depth-limit-warning {
      border-color: #ef4444 !important;
      background-color: #fee2e2 !important;
    }

    .depth-limit-warning::after {
      content: "Max 3 level";
      position: absolute;
      top: -20px;
      right: 0;
      background: #ef4444;
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      z-index: 10;
    }

    .submenu-container.drag-over-level-1 {
      border-color: #3b82f6;
      background-color: #eff6ff;
    }

    .submenu-container.drag-over-level-2 {
      border-color: #10b981;
      background-color: #ecfdf5;
    }

    .level-indicator {
      display: inline-block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      margin-right: 4px;
    }

    .level-indicator.level-1 {
      background-color: #3b82f6;
    }

    .level-indicator.level-2 {
      background-color: #10b981;
    }

    .submenu-nested {
      transition: all 0.3s ease;
      overflow: hidden;
    }

    .submenu-nested.collapsed {
      max-height: 0;
      opacity: 0;
    }

    .dragging {
      opacity: 0.5;
      transform: rotate(5deg);
    }

    .submenu-container {
      transition: border-color 0.2s ease;
    }
  </style>
@endpush