@extends('admin.layout')
@section('content')
<style>
/* 🌈 Animasi Fade In */
.fade-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.fade-section.show {
  opacity: 1;
  transform: translateY(0);
}
.value-anim { transition: all .4s ease-out; }

/* ✏️ Modal animasi */
#editModal.show .transform {
  transform: scale(1);
  opacity: 1;
}
#editModal .transform {
  transform: scale(0.9);
  opacity: 0;
  transition: all .25s ease-out;
}
</style>

<div class="p-6 fade-section max-w-screen-xl mx-auto">
  <div class="flex items-center gap-3 mb-6">
   <svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path fill="#eabfff" d="M12 17.74a6.217 6.217 0 1 0 0-12.436a6.217 6.217 0 0 0 0 12.435"/><path fill="#ffdda1" stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M12 5.304A2.152 2.152 0 1 0 12 1a2.152 2.152 0 0 0 0 4.304"/><path fill="#66e1ff" stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M16.305 9.609a4.443 4.443 0 0 0-8.61 0z"/><path fill="#ffdda1" stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M5.305 18.696a2.152 2.152 0 1 0 0-4.304a2.152 2.152 0 0 0 0 4.304"/><path fill="#66e1ff" stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M9.61 23A4.442 4.442 0 0 0 1 23z"/><path fill="#ffdda1" stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M18.696 18.696a2.152 2.152 0 1 0 0-4.304a2.152 2.152 0 0 0 0 4.304"/><path fill="#66e1ff" stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M23 23a4.442 4.442 0 0 0-8.609 0z"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M14.87 18.617a7.67 7.67 0 0 1-5.74 0m7.175-13.422a7.66 7.66 0 0 1 3.288 7.283M7.695 5.195a7.66 7.66 0 0 0-3.288 7.283"/></g></svg>
    <h2 class="text-2xl font-bold text-gray-800">Kelola User</h2>
  </div>

  {{-- 📊 Statistik User --}}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 fade-section">
    <div class="bg-white border border-gray-200 rounded-xl p-4 flex items-center gap-4 shadow-sm hover:shadow-md transition">

      <div class="p-3 bg-white rounded-lg">
       <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 32 32"><g fill="none"><path fill="url(#fluentColorPeopleTeam320)" d="M24.623 26.997H25a5 5 0 0 0 5-5v-6.5a2.5 2.5 0 0 0-2.5-2.5h-5.377a2.5 2.5 0 0 0-2.5 2.5v6.5a5 5 0 0 0 5 5"/><path fill="url(#fluentColorPeopleTeam327)" fill-opacity=".5" d="M24.623 26.997H25a5 5 0 0 0 5-5v-6.5a2.5 2.5 0 0 0-2.5-2.5h-5.377a2.5 2.5 0 0 0-2.5 2.5v6.5a5 5 0 0 0 5 5"/><path fill="url(#fluentColorPeopleTeam321)" d="M7 27h.377a5 5 0 0 0 5-5v-6.5a2.5 2.5 0 0 0-2.5-2.5H4.5A2.5 2.5 0 0 0 2 15.5V22a5 5 0 0 0 5 5"/><path fill="url(#fluentColorPeopleTeam328)" fill-opacity=".5" d="M7 27h.377a5 5 0 0 0 5-5v-6.5a2.5 2.5 0 0 0-2.5-2.5H4.5A2.5 2.5 0 0 0 2 15.5V22a5 5 0 0 0 5 5"/><path fill="url(#fluentColorPeopleTeam322)" d="M12.5 13a2.5 2.5 0 0 0-2.5 2.5V23a6 6 0 0 0 12 0v-7.5a2.5 2.5 0 0 0-2.5-2.5z"/><path fill="url(#fluentColorPeopleTeam323)" d="M12.5 13a2.5 2.5 0 0 0-2.5 2.5V23a6 6 0 0 0 12 0v-7.5a2.5 2.5 0 0 0-2.5-2.5z"/><path fill="url(#fluentColorPeopleTeam324)" d="M29 7.5a3.5 3.5 0 1 1-7 0a3.5 3.5 0 0 1 7 0"/><path fill="url(#fluentColorPeopleTeam325)" d="M10 7.5a3.5 3.5 0 1 1-7 0a3.5 3.5 0 0 1 7 0"/><path fill="url(#fluentColorPeopleTeam326)" d="M16 11a4 4 0 1 0 0-8a4 4 0 0 0 0 8"/><defs><linearGradient id="fluentColorPeopleTeam320" x1="22.091" x2="29.91" y1="14.858" y2="24.112" gradientUnits="userSpaceOnUse"><stop offset=".125" stop-color="#7A41DC"/><stop offset="1" stop-color="#5B2AB5"/></linearGradient><linearGradient id="fluentColorPeopleTeam321" x1="4.468" x2="12.287" y1="14.861" y2="24.116" gradientUnits="userSpaceOnUse"><stop offset=".125" stop-color="#9C6CFE"/><stop offset="1" stop-color="#7A41DC"/></linearGradient><linearGradient id="fluentColorPeopleTeam322" x1="12.854" x2="21.772" y1="15.127" y2="25.807" gradientUnits="userSpaceOnUse"><stop offset=".125" stop-color="#BD96FF"/><stop offset="1" stop-color="#9C6CFE"/></linearGradient><linearGradient id="fluentColorPeopleTeam323" x1="16" x2="29.705" y1="11.095" y2="30.3" gradientUnits="userSpaceOnUse"><stop stop-color="#885EDB" stop-opacity="0"/><stop offset="1" stop-color="#E362F8"/></linearGradient><linearGradient id="fluentColorPeopleTeam324" x1="23.665" x2="27.232" y1="4.931" y2="10.627" gradientUnits="userSpaceOnUse"><stop offset=".125" stop-color="#7A41DC"/><stop offset="1" stop-color="#5B2AB5"/></linearGradient><linearGradient id="fluentColorPeopleTeam325" x1="4.665" x2="8.232" y1="4.931" y2="10.627" gradientUnits="userSpaceOnUse"><stop offset=".125" stop-color="#9C6CFE"/><stop offset="1" stop-color="#7A41DC"/></linearGradient><linearGradient id="fluentColorPeopleTeam326" x1="13.902" x2="17.98" y1="4.063" y2="10.574" gradientUnits="userSpaceOnUse"><stop offset=".125" stop-color="#BD96FF"/><stop offset="1" stop-color="#9C6CFE"/></linearGradient><radialGradient id="fluentColorPeopleTeam327" cx="0" cy="0" r="1" gradientTransform="matrix(8.3508 0 0 19.1127 17.992 19.669)" gradientUnits="userSpaceOnUse"><stop offset=".433" stop-color="#3B148A"/><stop offset="1" stop-color="#3B148A" stop-opacity="0"/></radialGradient><radialGradient id="fluentColorPeopleTeam328" cx="0" cy="0" r="1" gradientTransform="matrix(-9.24155 0 0 -21.1514 15.739 19.672)" gradientUnits="userSpaceOnUse"><stop offset=".433" stop-color="#3B148A"/><stop offset="1" stop-color="#3B148A" stop-opacity="0"/></radialGradient></defs></g></svg>
      </div>
      <div>
        <div class="text-xs text-gray-500">Total User</div>
        <div class="text-2xl font-bold text-gray-800">{{ number_format($totalUser) }}</div>
      </div>
    </div>

    <div class="bg-white border border-gray-200 rounded-xl p-4 flex items-center gap-4 shadow-sm hover:shadow-md transition">

      <div class="p-3 bg-white rounded-lg">
       <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><g fill="none"><path fill="#d7e0ff" d="M5 5.5a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5"/><path stroke="#4147d5" stroke-linecap="round" stroke-linejoin="round" d="M5 5.5a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5"/><path fill="#d7e0ff" d="M5 7.5A4.5 4.5 0 0 0 .5 12v.5h8.472c.285 0 .528-.215.528-.5A4.5 4.5 0 0 0 5 7.5"/><path stroke="#4147d5" stroke-linecap="round" stroke-linejoin="round" d="M5 12.5H.5v-.542A4.51 4.51 0 0 1 5.204 7.5A4.5 4.5 0 0 1 8.354 9m5.146-.5l-4 5l-2-1.5"/></g></svg>
      </div>
      <div>
        <div class="text-xs text-gray-500">User Baru Hari Ini</div>
        <div class="text-2xl font-bold text-gray-800">{{ number_format($userBaruHariIni) }}</div>
      </div>
    </div>
    <div class="bg-white border border-gray-200 rounded-xl p-4 flex items-center gap-4 shadow-sm hover:shadow-md transition">

  <div class="p-3 bg-white rounded-lg">
    <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path fill="#00c853" d="M12 12a5 5 0 1 0 0-10a5 5 0 0 0 0 10m-7 9a7 7 0 0 1 14 0z"/>
    </svg>
  </div>
  <div>
    <div class="text-xs text-gray-500">User Aktif</div>
    <div class="text-2xl font-bold text-gray-800">{{ number_format($userAktif) }}</div>
  </div>
</div>

  </div>

  {{-- 🔍 Pencarian User --}}
  <form method="get" class="flex flex-col sm:flex-row gap-2 fade-section mt-4">
    <input type="text" name="q" value="{{ $q }}" placeholder="Cari USER ID / Nama / Email..."
           class="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-100 focus:border-blue-500 text-sm">
    <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition">
      Cari
    </button>
  </form>

  {{-- 📋 Tabel User --}}
  <div class="bg-white border border-gray-200 rounded-xl overflow-x-auto shadow-sm fade-section mt-4">
    <table class="w-full min-w-[640px] text-sm">
      <thead class="bg-gray-100 text-gray-700">
        <tr>
          <th class="p-3 text-left font-semibold">ID</th>
          <th class="p-3 text-left font-semibold">NAMA</th>
          <th class="p-3 text-left font-semibold">EMAIL</th>
          <th class="p-3 text-center font-semibold">STATUS</th>
          <th class="p-3 text-left font-semibold">SALDO</th>
          <th class="p-3 text-left font-semibold">DIBUAT</th>
          <th class="p-3 text-center font-semibold">AKSI</th>
        </tr>
      </thead>
      <tbody class="divide-y">
        @forelse($users as $u)
        <tr class="hover:bg-gray-50 transition">
          <td class="p-3 font-mono text-gray-800">{{ $u->id }}</td>
          <td class="p-3 text-gray-800 font-medium">{{ $u->name }}</td>
          <td class="p-3 text-gray-600">{{ $u->email }}</td>
       <td class="p-3 text-center">
    @if($u->is_admin)
        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700 border border-red-200">
            ADMIN
        </span>
    @elseif($u->reseller)
        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-purple-100 text-purple-700 border border-purple-200">
            Reseller
        </span>
    @else
        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 border border-green-200">
            User
        </span>
    @endif
</td>
          <td class="p-3 text-green-700 font-semibold">Rp {{ number_format($u->balance ?? 0,0,',','.') }}</td>
          <td class="p-3 text-gray-600">{{ $u->created_at->timezone('Asia/Jakarta')->format('Y-m-d H:i') }}</td>
           <td class="p-3 text-center flex justify-center gap-2">
  <!-- Tombol Info -->
  <button onclick="openInfoModal(
    {{ $u->id }},
    @js($u->name),
    @js($u->email),
    {{ $u->balance ?? 0 }},
    {{ $u->is_admin ? 1 : ($u->reseller ? 1 : 0) }},
    '{{ $u->created_at->timezone("Asia/Jakarta")->format("Y-m-d H:i") }}',
    @js($u->telegram_id),
    @js($u->telegram_username),
    @js($u->referral_code),
    {{ $u->referrer_id ?? 'null' }},
    @js($u->webhook_url),
    @js($u->ip_address)
  )"
    class="flex items-center gap-1 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white rounded-lg text-xs font-medium shadow-sm transition">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  </button>

  <!-- Tombol Edit -->
  <button onclick="openEditModal(
    {{ $u->id }},
    @js($u->name),
    @js($u->email),
    {{ $u->balance ?? 0 }},
    {{ $u->reseller }}
  )"
    class="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-xs font-medium shadow-sm transition">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="currentColor" viewBox="0 0 16 16">
      <path d="M13.8 2.2a2.51 2.51 0 0 0-3.54 0l-6.9 6.91l-1.76 3.62a1.26 1.26 0 0 0 1.12 1.8a1.2 1.2 0 0 0 .55-.13l3.62-1.76l6-6l.83-.82l.06-.06a2.52 2.52 0 0 0 .02-3.56m-.89.89a1.25 1.25 0 0 1 0 1.77l-1.77-1.77a1.24 1.24 0 0 1 .86-.37a1.22 1.22 0 0 1 .91.37M2.73 13.27L4.29 10L6 11.71zm4.16-2.4L5.13 9.11L10.26 4L12 5.74z"/>
    </svg>
  </button>

  <!-- Tombol Hapus -->
  <button onclick="deleteUser({{ $u->id }})"
    class="flex items-center gap-1 px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white rounded-lg text-xs font-medium shadow-sm transition">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0 1 16.138 21H7.862a2 2 0 0 1-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3M4 7h16"/>
    </svg>
  </button>
</td>

        </tr>
        @empty
        <tr><<td colspan="7" class="p-4 text-center text-gray-500">Belum ada user.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>

  {{-- 📄 Pagination --}}
  <div class="fade-section mt-3">{{ $users->links() }}</div>
</div>

{{-- ✏️ Modal Edit User --}}
<div id="editModal"
     class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity">
  <div class="bg-white rounded-xl shadow-2xl w-[90%] max-w-md p-6 relative transform scale-95 transition-all duration-300">
    <button onclick="closeEditModal()"
            class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>

    <h3 class="text-lg font-semibold text-gray-700 mb-4 flex items-center gap-2">
      <svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path fill="#1d4ed8" fill-rule="evenodd" d="M341.336 117.333c0 41.237-33.43 74.667-74.667 74.667s-74.666-33.43-74.666-74.667s33.429-74.666 74.666-74.666s74.667 33.429 74.667 74.666m-170.667 64c0 29.455-23.878 53.334-53.333 53.334s-53.333-23.879-53.333-53.334S87.88 128 117.336 128s53.333 23.878 53.333 53.333M42.669 320c0-35.346 28.654-64 64-64h21.334c2.578 0 5.122.152 7.621.449c-4.913 12.278-7.624 25.738-7.624 39.852v109.032H42.67zm290.249-64h59.26v22.837a88.8 88.8 0 0 1 28.127 16.267l19.804-11.433l29.629 51.32l-19.793 11.427a89.4 89.4 0 0 1 1.482 16.247a89.4 89.4 0 0 1-1.482 16.247l19.794 11.428l-29.63 51.32l-19.804-11.434a88.8 88.8 0 0 1-28.127 16.266v22.841h-59.26v-22.834a88.8 88.8 0 0 1-28.141-16.268l-19.791 11.426l-29.629-51.32l19.775-11.417a89.4 89.4 0 0 1-1.483-16.255c0-5.552.509-10.985 1.483-16.255l-19.775-11.417l29.63-51.32l19.789 11.426a88.8 88.8 0 0 1 28.142-16.269zm65.175 106.667c0 19.637-15.918 35.556-35.555 35.556s-35.556-15.919-35.556-35.556s15.919-35.555 35.556-35.555s35.555 15.918 35.555 35.555m-248.76-64.001c0-47.128 38.205-85.333 85.334-85.333h64c21.753 0 41.605 8.14 56.677 21.54c-67.284 3.796-120.675 59.56-120.675 127.793c0 14.961 2.567 29.322 7.284 42.667h-92.62z" clip-rule="evenodd"/>
</svg>

      Edit Data User
    </h3>

    <form id="editForm" method="POST" action="{{ route('admin.users.update') }}">
      @csrf
      <input type="hidden" name="id" id="user_id">

      <div class="space-y-3">
        <div>
          <label class="font-semibold text-gray-700 text-sm">Nama</label>
          <input type="text" name="name" id="user_name"
                 class="w-full border border-gray-300 rounded-lg p-2 mt-1 text-sm focus:ring focus:ring-blue-200 focus:outline-none"
                 required>
        </div>

        <div>
          <label class="font-semibold text-gray-700 text-sm">Email</label>
          <input type="email" name="email" id="user_email"
                 class="w-full border border-gray-300 rounded-lg p-2 mt-1 text-sm focus:ring focus:ring-blue-200 focus:outline-none"
                 required>
        </div>

        <div>
          <label class="font-semibold text-gray-700 text-sm">Password <span class="text-gray-500 text-xs">(kosongkan jika tidak diubah)</span></label>
          <input type="password" name="password"
                 class="w-full border border-gray-300 rounded-lg p-2 mt-1 text-sm focus:ring focus:ring-blue-200 focus:outline-none"
                 placeholder="********">
        </div>

        <div>
          <label class="font-semibold text-gray-700 text-sm">Saldo</label>
          <input type="number" name="balance" id="user_balance"
                 class="w-full border border-gray-300 rounded-lg p-2 mt-1 text-sm focus:ring focus:ring-blue-200 focus:outline-none">
        </div>
        <div>
    <label class="font-semibold text-gray-700 text-sm">Status Akun</label>

    <select
        name="reseller"
        id="user_reseller"
        class="w-full border border-gray-300 rounded-lg p-2 mt-1 text-sm focus:ring focus:ring-blue-200 focus:outline-none">

        <option value="0">👤 User Biasa</option>
        <option value="1">👑 Reseller</option>

    </select>
</div>
      </div><br>

      <div class="flex justify-end gap-2 mt-5">
        <button type="button" onclick="closeEditModal()"
                class="px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
          Batal
        </button>
        <button type="submit"
                class="bg-blue-600 hover:bg-blue-700 text-white font-medium text-sm px-4 py-2 rounded-lg transition">
          Simpan Perubahan
        </button>
      </div>
    </form>
  </div>
</div>

{{-- 📋 Modal Info User --}}
<div id="infoModal"
     class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity">
  <div class="bg-white rounded-xl shadow-2xl w-[90%] max-w-md p-6 relative transform scale-95 transition-all duration-300">
    <button onclick="closeInfoModal()"
            class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>

    <h3 class="text-lg font-semibold text-gray-700 mb-4 flex items-center gap-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M12 16v-4"></path>
        <path d="M12 8h.01"></path>
      </svg>
      Info User
    </h3>

    <div class="space-y-3">
      <div class="grid grid-cols-2 gap-2">
        <div>
          <label class="font-semibold text-gray-700 text-xs">ID</label>
          <div id="info_user_id" class="text-gray-800 text-sm p-2 bg-gray-50 rounded-lg border border-gray-200"></div>
        </div>
        <div>
          <label class="font-semibold text-gray-700 text-xs">Nama</label>
          <div id="info_user_name" class="text-gray-800 text-sm p-2 bg-gray-50 rounded-lg border border-gray-200"></div>
        </div>
      </div>

      <div>
        <label class="font-semibold text-gray-700 text-xs">Email</label>
        <div id="info_user_email" class="text-gray-800 text-sm p-2 bg-gray-50 rounded-lg border border-gray-200"></div>
      </div>

      <div class="grid grid-cols-2 gap-2">
        <div>
          <label class="font-semibold text-gray-700 text-xs">Saldo</label>
          <div id="info_user_balance" class="text-green-700 font-semibold text-sm p-2 bg-gray-50 rounded-lg border border-gray-200"></div>
        </div>
        <div>
          <label class="font-semibold text-gray-700 text-xs">Status</label>
          <div id="info_user_status" class="text-gray-800 text-sm p-2 bg-gray-50 rounded-lg border border-gray-200"></div>
        </div>
      </div>

      <div>
        <label class="font-semibold text-gray-700 text-xs">Tanggal Dibuat</label>
        <div id="info_user_created_at" class="text-gray-800 text-sm p-2 bg-gray-50 rounded-lg border border-gray-200"></div>
      </div>

      <div class="grid grid-cols-2 gap-2">
        <div>
          <label class="font-semibold text-gray-700 text-xs">Telegram ID</label>
          <div id="info_user_telegram_id" class="text-gray-800 text-sm p-2 bg-gray-50 rounded-lg border border-gray-200"></div>
        </div>
        <div>
          <label class="font-semibold text-gray-700 text-xs">Telegram Username</label>
          <div id="info_user_telegram_username" class="text-gray-800 text-sm p-2 bg-gray-50 rounded-lg border border-gray-200"></div>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-2">
        <div>
          <label class="font-semibold text-gray-700 text-xs">Referral Code</label>
          <div id="info_user_referral_code" class="text-gray-800 text-sm p-2 bg-gray-50 rounded-lg border border-gray-200"></div>
        </div>
        <div>
          <label class="font-semibold text-gray-700 text-xs">Referrer ID</label>
          <div id="info_user_referrer_id" class="text-gray-800 text-sm p-2 bg-gray-50 rounded-lg border border-gray-200"></div>
        </div>
      </div>

      <div>
        <label class="font-semibold text-gray-700 text-xs">Webhook URL</label>
        <div id="info_user_webhook_url" class="text-gray-800 text-sm p-2 bg-gray-50 rounded-lg border border-gray-200 break-all"></div>
      </div>

      <div>
        <label class="font-semibold text-gray-700 text-xs">IP Address</label>
        <div id="info_user_ip_address" class="text-gray-800 text-sm p-2 bg-gray-50 rounded-lg border border-gray-200"></div>
      </div>
    </div>

    <div class="flex justify-end gap-2 mt-5">
      <button type="button" onclick="closeInfoModal()"
              class="px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
        Tutup
      </button>
    </div>
  </div>
</div>

<script>
// 🎬 Fade in anim
document.querySelectorAll('.fade-section').forEach(el => {
  new IntersectionObserver(entries => {
    entries.forEach(e => e.isIntersecting && e.target.classList.add('show'));
  }, { threshold: 0.15 }).observe(el);
});

// ✏️ Modal
function openEditModal(id, name, email, balance, reseller) {

    document.getElementById('user_id').value = id;
    document.getElementById('user_name').value = name;
    document.getElementById('user_email').value = email;
    document.getElementById('user_balance').value = balance;
    document.getElementById('user_reseller').value = reseller;

    const modal = document.getElementById('editModal');

    modal.classList.remove('hidden');

    setTimeout(() => {
        modal.classList.add('show');
    }, 10);

}
function closeEditModal() {
  const modal = document.getElementById('editModal');
  modal.classList.remove('show');
  setTimeout(() => modal.classList.add('hidden'), 200);
}

// 📋 Modal Info User
function openInfoModal(id, name, email, balance, status, created_at, telegram_id, telegram_username, referral_code, referrer_id, webhook_url, ip_address) {
  document.getElementById('info_user_id').textContent = id;
  document.getElementById('info_user_name').textContent = name;
  document.getElementById('info_user_email').textContent = email;
  document.getElementById('info_user_balance').textContent = 'Rp ' + balance.toLocaleString('id-ID');

  let statusText = 'User';
  if (status === 1) {
    statusText = 'Reseller';
  } else if (status === 2) {
    statusText = 'Admin';
  }
  document.getElementById('info_user_status').textContent = statusText;

  document.getElementById('info_user_created_at').textContent = created_at;
  document.getElementById('info_user_telegram_id').textContent = telegram_id || '-';
  document.getElementById('info_user_telegram_username').textContent = telegram_username || '-';
  document.getElementById('info_user_referral_code').textContent = referral_code || '-';
  document.getElementById('info_user_referrer_id').textContent = referrer_id || '-';
  document.getElementById('info_user_webhook_url').textContent = webhook_url || '-';
  document.getElementById('info_user_ip_address').textContent = ip_address || '-';

  const modal = document.getElementById('infoModal');
  modal.classList.remove('hidden');
  setTimeout(() => {
    modal.classList.add('show');
  }, 10);
}

function closeInfoModal() {
  const modal = document.getElementById('infoModal');
  modal.classList.remove('show');
  setTimeout(() => modal.classList.add('hidden'), 200);
}
// 🗑️ Hapus User
function deleteUser(id) {
  Swal.fire({
    title: "Hapus User?",
    text: "Data user akan dihapus permanen dan tidak dapat dikembalikan.",
    icon: "warning",
    showCancelButton: true,
    confirmButtonColor: "#dc2626",
    cancelButtonColor: "#6b7280",
    confirmButtonText: "Ya, Hapus",
    cancelButtonText: "Batal",
  }).then(async (result) => {
    if (result.isConfirmed) {
      Swal.fire({ title: "Memproses...", allowOutsideClick: false, didOpen: () => Swal.showLoading() });
      try {
        const res = await fetch(`{{ route('admin.users.delete') }}`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": "{{ csrf_token() }}"
          },
          body: JSON.stringify({ id })
        });
        const data = await res.json();
        Swal.close();

        if (data.ok) {
          Swal.fire({
            icon: "success",
            title: "Berhasil!",
            text: "User telah dihapus.",
            timer: 1600,
            showConfirmButton: false
          });
          setTimeout(() => location.reload(), 1200);
        } else {
          Swal.fire({ icon: "error", title: "Gagal", text: data.error || "Tidak dapat menghapus user." });
        }
      } catch (e) {
        Swal.fire({ icon: "error", title: "Gagal", text: "Terjadi kesalahan koneksi." });
      }
    }
  });
}

</script>
@endsection
