<aside 
  x-data="{ 
    open: window.innerWidth >= 768,
    animateMenu: window.innerWidth >= 768,

    toggleSidebar() {
        this.open = !this.open;

        if(this.open){
            this.animateMenu = false;

            setTimeout(() => {
                this.animateMenu = true;
            }, 150);
        } else {
            this.animateMenu = false;
        }
    }
  }" 
  x-init="
    if(open){
        animateMenu = true;
    }
  "
  class="z-50"
>
  <!-- Sidebar Container -->
  <div 
    class="fixed inset-y-0 left-0 w-64 bg-white text-slate-800 border-r border-slate-200 shadow-xl transform transition-transform duration-300 ease-in-out flex flex-col font-['Inter',sans-serif]"
    :class="open ? 'translate-x-0' : '-translate-x-full md:translate-x-0'"
  >
    <!-- Header Logo -->
    <div class="flex items-center justify-between px-5 py-4 border-b border-slate-100">
      <div class="flex items-center gap-3">
        <video
          autoplay
          muted
          loop
          playsinline
          class="h-8 object-contain"
        >
          <source src="<?php echo e(asset('public/assets/logo-nusaotp.webm')); ?>" type="video/webm">
        </video>
      </div>
    </div>

    <!-- NAV Menu -->
    <nav class="flex-1 overflow-y-auto mt-3 px-3 space-y-1">
      <?php $current = request()->route()->getName(); ?>

      <!-- Dashboard -->
      <div
        x-show="animateMenu"
        x-transition:enter="transition-all ease-out duration-500"
        x-transition:enter-start="opacity-0 translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        style="transition-delay: 100ms"
      >
        <a href="<?php echo e(route('dashboard')); ?>" 
           class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-medium transition-all duration-200
                  <?php echo e($current === 'dashboard' ? 'bg-blue-50 text-blue-600 font-semibold shadow-sm' : 'text-slate-700 hover:bg-slate-100 hover:text-blue-600'); ?>">
          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>
		  <span>Dashboard</span>
        </a>
      </div>

      <!-- Isi Saldo -->
      <div
        x-show="animateMenu"
        x-transition:enter="transition-all ease-out duration-500"
        x-transition:enter-start="opacity-0 translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        style="transition-delay: 200ms"
      >
        <a href="<?php echo e(route('deposit')); ?>" 
           class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-medium transition-all duration-200
                  <?php echo e($current === 'deposit' ? 'bg-blue-50 text-blue-600 font-semibold shadow-sm' : 'text-slate-700 hover:bg-slate-100 hover:text-blue-600'); ?>">
          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M240-160q-66 0-113-47T80-320v-320q0-66 47-113t113-47h480q66 0 113 47t47 113v320q0 66-47 113t-113 47H240Zm0-480h480q22 0 42 5t38 16v-21q0-33-23.5-56.5T720-720H240q-33 0-56.5 23.5T160-640v21q18-11 38-16t42-5Zm-74 130 445 108q9 2 18 0t17-8l139-116q-11-15-28-24.5t-37-9.5H240q-26 0-45.5 13.5T166-510Z"/></svg>
		  <span>Isi Saldo</span>
        </a>
      </div>

      <!-- Beli -->
      <div
        x-show="animateMenu"
        x-transition:enter="transition-all ease-out duration-500"
        x-transition:enter-start="opacity-0 translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        style="transition-delay: 300ms"
      >
        <a href="<?php echo e(route('orderv2.index')); ?>" 
           class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-medium transition-all duration-200
                  <?php echo e($current === 'orderv2.index' ? 'bg-blue-50 text-blue-600 font-semibold shadow-sm' : 'text-slate-700 hover:bg-slate-100 hover:text-blue-600'); ?>">
          <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>
          <span>Beli</span>
        </a>
      </div>

      <!-- Riwayat Pembelian -->
      <div
        x-show="animateMenu"
        x-transition:enter="transition-all ease-out duration-500"
        x-transition:enter-start="opacity-0 translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        style="transition-delay: 400ms"
      >
        <a href="<?php echo e(route('riwayat')); ?>" 
           class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-medium transition-all duration-200
                  <?php echo e($current === 'riwayat' ? 'bg-blue-50 text-blue-600 font-semibold shadow-sm' : 'text-slate-700 hover:bg-slate-100 hover:text-blue-600'); ?>">
          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M280-600v-80h560v80H280Zm0 160v-80h560v80H280Zm0 160v-80h560v80H280ZM160-600q-17 0-28.5-11.5T120-640q0-17 11.5-28.5T160-680q17 0 28.5 11.5T200-640q0 17-11.5 28.5T160-600Zm0 160q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440Zm0 160q-17 0-28.5-11.5T120-320q0-17 11.5-28.5T160-360q17 0 28.5 11.5T200-320q0 17-11.5 28.5T160-280Z"/></svg>
		  <span>Riwayat Pembelian</span>
        </a>
      </div>

      <!-- Layanan & Harga -->
      <div
        x-show="animateMenu"
        x-transition:enter="transition-all ease-out duration-500"
        x-transition:enter-start="opacity-0 translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        style="transition-delay: 500ms"
      >
        <a href="<?php echo e(route('daftar-harga.v2')); ?>" 
           class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-medium transition-all duration-200
                  <?php echo e($current === 'daftar-harga.v2' ? 'bg-blue-50 text-blue-600 font-semibold shadow-sm' : 'text-slate-700 hover:bg-slate-100 hover:text-blue-600'); ?>">
          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM513-160l286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm220 160Z"/></svg>
		  <span>Layanan & Harga</span>
        </a>
      </div>

      <!-- Referral -->
      <div
        x-show="animateMenu"
        x-transition:enter="transition-all ease-out duration-500"
        x-transition:enter-start="opacity-0 translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        style="transition-delay: 600ms"
      >
        <a href="<?php echo e(route('referral')); ?>" 
           class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-medium transition-all duration-200
                  <?php echo e($current === 'referral' ? 'bg-blue-50 text-blue-600 font-semibold shadow-sm' : 'text-slate-700 hover:bg-slate-100 hover:text-blue-600'); ?>">
          <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
          <span>Referral</span>
        </a>
      </div>

      <!-- Syarat & Ketentuan -->
      <div
        x-show="animateMenu"
        x-transition:enter="transition-all ease-out duration-500"
        x-transition:enter-start="opacity-0 translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        style="transition-delay: 700ms"
      >
        <a href="<?php echo e(route('syarat')); ?>" 
           class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-medium transition-all duration-200
                  <?php echo e($current === 'syarat' ? 'bg-blue-50 text-blue-600 font-semibold shadow-sm' : 'text-slate-700 hover:bg-slate-100 hover:text-blue-600'); ?>">
          <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
          <span>Syarat & Ketentuan</span>
        </a>
      </div>

      <!-- Informasi -->
      <div
        x-show="animateMenu"
        x-transition:enter="transition-all ease-out duration-500"
        x-transition:enter-start="opacity-0 translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        style="transition-delay: 800ms"
      >
        <a href="<?php echo e(url('/informasi')); ?>" 
           class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-medium transition-all duration-200
                  <?php echo e(request()->is('informasi') ? 'bg-blue-50 text-blue-600 font-semibold shadow-sm' : 'text-slate-700 hover:bg-slate-100 hover:text-blue-600'); ?>">
          <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          <span>Informasi</span>
        </a>
      </div>

      <!-- Pengaturan Akun -->
      <div
        x-show="animateMenu"
        x-transition:enter="transition-all ease-out duration-500"
        x-transition:enter-start="opacity-0 translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        style="transition-delay: 900ms"
      >
        <a href="<?php echo e(route('profile.edit')); ?>" 
           class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-medium transition-all duration-200
                  <?php echo e($current === 'profile.edit' ? 'bg-blue-50 text-blue-600 font-semibold shadow-sm' : 'text-slate-700 hover:bg-slate-100 hover:text-blue-600'); ?>">
				<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M600-120h240v-33q-25-23-56-35t-64-12q-33 0-64 12t-56 35v33Zm162.5-137.5Q780-275 780-300t-17.5-42.5Q745-360 720-360t-42.5 17.5Q660-325 660-300t17.5 42.5Q695-240 720-240t42.5-17.5ZM480-480Zm2-140q-58 0-99 41t-41 99q0 48 27 84t71 50q0-23 .5-44t8.5-38q-14-8-20.5-22t-6.5-30q0-25 17.5-42.5T482-540q15 0 28.5 7.5T533-512q11-5 23-7t24-2h36q-13-43-49.5-71T482-620ZM370-80l-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-85 65H696q-1-5-2-10.5t-3-10.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q24 25 54 42t65 22v184h-70Zm210 40q-25 0-42.5-17.5T520-100v-280q0-25 17.5-42.5T580-440h280q25 0 42.5 17.5T920-380v280q0 25-17.5 42.5T860-40H580Z"/></svg>
				  <span>Pengaturan Akun</span>
        </a>
      </div>

      <!-- Dokumentasi API -->
      <?php
          $saldo = auth()->user()->balance ?? 0;
      ?>
      <div
        x-show="animateMenu"
        x-transition:enter="transition-all ease-out duration-500"
        x-transition:enter-start="opacity-0 translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        style="transition-delay: 1000ms"
      >
        <?php if($saldo > 0): ?>
          <a href="<?php echo e(route('dokumentasi-api.v2')); ?>" 
             class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-medium transition-all duration-200
                    <?php echo e($current === 'dokumentasi-api.v2' ? 'bg-blue-50 text-blue-600 font-semibold shadow-sm' : 'text-slate-700 hover:bg-slate-100 hover:text-blue-600'); ?>">
            <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
            <span>Dokumentasi API</span>
          </a>
        <?php else: ?>
          <button 
            type="button"
            onclick="showSaldoPopup()"
            class="w-full flex items-center justify-between px-3.5 py-2.5 rounded-xl text-sm font-medium text-slate-500 hover:bg-slate-100 hover:text-slate-700 transition-all duration-200 text-left">
            <div class="flex items-center gap-3">
              <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
              <span>Dokumentasi API</span>
            </div>
            <svg class="w-4 h-4 text-amber-500 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/></svg>
          </button>
        <?php endif; ?>
      </div>

      <!-- Layanan Pelanggan -->
      <?php
          $hasPaidDeposit = \App\Models\Deposit::where('user_id', auth()->id())
              ->where('status', 'paid')
              ->exists();
      ?>
      <?php if($hasPaidDeposit): ?>
        <div
          x-show="animateMenu"
          x-transition:enter="transition-all ease-out duration-500"
          x-transition:enter-start="opacity-0 translate-y-4"
          x-transition:enter-end="opacity-100 translate-y-0"
          style="transition-delay: 1100ms"
        >
          <a href="https://telegram.me/alexcazio" target="_blank" rel="noopener noreferrer"
             class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-blue-600 transition-all duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M440-120v-80h320v-284q0-117-81.5-198.5T480-764q-117 0-198.5 81.5T200-484v244h-40q-33 0-56.5-23.5T80-320v-80q0-21 10.5-39.5T120-469l3-53q8-68 39.5-126t79-101q47.5-43 109-67T480-840q68 0 129 24t109 66.5Q766-707 797-649t40 126l3 52q19 9 29.5 27t10.5 38v92q0 20-10.5 38T840-249v49q0 33-23.5 56.5T760-120H440ZM331.5-411.5Q320-423 320-440t11.5-28.5Q343-480 360-480t28.5 11.5Q400-457 400-440t-11.5 28.5Q377-400 360-400t-28.5-11.5Zm240 0Q560-423 560-440t11.5-28.5Q583-480 600-480t28.5 11.5Q640-457 640-440t-11.5 28.5Q617-400 600-400t-28.5-11.5ZM241-462q-7-106 64-182t177-76q89 0 156.5 56.5T720-519q-91-1-167.5-49T435-698q-16 80-67.5 142.5T241-462Z"/></svg>
			<span>Layanan Pelanggan</span>
          </a>
        </div>
      <?php endif; ?>

      <!-- Tutorial YouTube -->
      <div
        x-show="animateMenu"
        x-transition:enter="transition-all ease-out duration-500"
        x-transition:enter-start="opacity-0 translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        style="transition-delay: 1200ms"
      >
        <a href="https://www.youtube.com/@nusa_otp" target="_blank" rel="noopener noreferrer"
           class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-blue-600 transition-all duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-200h640v-360H160v360Z"/></svg>
		  <span>Tutorial</span>
        </a>
      </div>

      <!-- Reseller -->
      <div
        x-show="animateMenu"
        x-transition:enter="transition-all ease-out duration-500"
        x-transition:enter-start="opacity-0 translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        style="transition-delay: 1250ms"
      >
        <a href="https://nokos.site" target="_blank" rel="noopener noreferrer"
           class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-blue-600 transition-all duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M720-40v-120H600v-80h120v-120h80v120h120v80H800v120h-80ZM80-160v-240H40v-80l40-200h600l40 200v80h-40v120h-80v-120H440v240H80Zm80-80h200v-160H160v160Zm-38-240h516-516ZM80-720v-80h600v80H80Zm42 240h516l-24-120H146l-24 120Z"/></svg>
		  <span>Reseller</span>
        </a>
      </div>

      <!-- Logout Button -->
      <div
        x-show="animateMenu"
        x-transition:enter="transform-gpu transition-all duration-700 ease-[cubic-bezier(0.22,1,0.36,1)]"
        x-transition:enter-start="opacity-0 translate-y-5 scale-[0.96]"
        x-transition:enter-end="opacity-100 translate-y-0 scale-100"
        style="transition-delay: 1300ms"
        class="pt-3 pb-6 border-t border-slate-100 mt-2"
      >
        <form method="POST" action="<?php echo e(route('logout')); ?>">
          <?php echo csrf_field(); ?>
          <button type="submit"
                  class="w-full flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-left text-sm font-medium text-rose-600 hover:bg-rose-50 hover:translate-x-1 transition-all duration-200">
            <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
            <span>Logout</span>
          </button>
        </form>
      </div>
    </nav>
  </div>

  <!-- Toggle Mobile Button -->
  <button 
      @click="toggleSidebar()"
      class="fixed top-4 left-4 z-50 md:hidden group"
      :class="{ 'translate-x-64': open }"
  >
      <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-white border border-slate-200 shadow-md transition-all duration-300">
          <template x-if="!open">
              <svg class="w-6 h-6 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
          </template>
          <template x-if="open">
              <svg class="w-6 h-6 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
          </template>
      </div>
  </button>
</aside>

<script>
function showSaldoPopup() {
    Swal.fire({
        icon: 'warning',
        title: 'Akses Ditolak',
        text: 'Saldo anda Rp 0, Silakan isi saldo terlebih dahulu untuk akses Dokumentasi API.',
        confirmButtonColor: '#2563eb',
        confirmButtonText: 'Isi Saldo'
    }).then((result) => {
        if (result.isConfirmed) {
            window.location.href = "<?php echo e(route('deposit')); ?>";
        }
    });
}
</script><?php /**PATH /home/nusaotp/public_html/resources/views/components/sidebar.blade.php ENDPATH**/ ?>