@extends('layouts.app')

@section('content')
<style>
/* 🔹 Fade-in Animation */
.fade-section {
  opacity: 0;
  transform: translateY(15px);
  filter: blur(8px);
  transition: all .6s ease-out;
}
.fade-section.show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* 🔹 Card Styling */
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 1.5rem;
  transition: all .25s ease;
}
.card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
</style>

<div class="p-6 md:p-10 bg-gray-50 min-h-screen flex items-center justify-center fade-section">
  <div class="max-w-3xl w-full bg-white rounded-2xl shadow-lg p-8 md:p-10 fade-section card">
    <h2 class="text-xl font-bold mb-5 flex items-center gap-2 text-gray-800">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
              d="M5.121 17.804A9 9 0 1118.364 4.56a9 9 0 01-13.243 13.243z" />
      </svg>
      PROFILE
    </h2>

    <form method="POST" action="{{ route('profile.update') }}" class="space-y-5">
      @csrf

      <div class="fade-section">
        <label class="text-sm font-semibold text-gray-700">Nama Lengkap</label>
        <input type="text" name="name" value="{{ Auth::user()->name }}" 
               class="w-full border border-gray-300 rounded-lg p-2 bg-gray-100" readonly>
      </div>

      <div class="fade-section">
        <label class="text-sm font-semibold text-gray-700">Email</label>
        <input type="email" value="{{ Auth::user()->email }}" 
               class="w-full border border-gray-300 rounded-lg p-2 bg-gray-100" readonly>
      </div>
<div class="fade-section">
  <label class="text-sm font-semibold text-gray-700">API Key</label>

  <div class="relative">
    <input 
      type="password" 
      id="apiKeyInput"
      value="{{ Auth::user()->api_key }}" 
      readonly
      class="w-full border border-gray-300 rounded-lg p-2 pr-12 bg-gray-100 font-mono text-sm"
    >

    <!-- Button -->
    <button 
      type="button"
      id="toggleApiKey"
      class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 transition"
    >
      <!-- Eye Icon -->
      <svg id="iconEye" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
      </svg>

      <!-- Copy Icon (hidden dulu) -->
      <svg id="iconCopy" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
          d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2M8 16h8a2 2 0 002-2v-2M8 16v2a2 2 0 002 2h8a2 2 0 002-2v-8a2 2 0 00-2-2h-2"/>
      </svg>
    </button>
  </div>
</div>
      <div class="fade-section">
        <label class="text-sm font-semibold text-gray-700">Saldo</label>
        <input type="text" value="Rp {{ number_format(Auth::user()->balance ?? 0, 0, ',', '.') }}" 
               class="w-full border border-gray-300 rounded-lg p-2 bg-gray-100" readonly>
      </div>

      <div class="fade-section">
        <label class="text-sm font-semibold text-gray-700">Password Saat Ini</label>
        <input type="password" name="current_password" class="w-full border border-gray-300 rounded-lg p-2" placeholder="••••••••">
      </div>

      <div class="fade-section">
        <label class="text-sm font-semibold text-gray-700">Password Baru</label>
        <input type="password" name="new_password" class="w-full border border-gray-300 rounded-lg p-2" placeholder="••••••••">
      </div>

      <div class="fade-section">
        <label class="text-sm font-semibold text-gray-700">Konfirmasi Password Baru</label>
        <input type="password" name="new_password_confirmation" class="w-full border border-gray-300 rounded-lg p-2" placeholder="••••••••">
      </div>

      <div class="fade-section">
        <button type="submit" 
                class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2.5 rounded-lg font-semibold transition">
          Ubah
        </button>
      </div>
    </form>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

  const apiInput = document.getElementById('apiKeyInput');

  const toggleBtn = document.getElementById('toggleApiKey');

  const iconEye = document.getElementById('iconEye');

  const iconCopy = document.getElementById('iconCopy');

  let revealed = false;

  toggleBtn.addEventListener('click', () => {

    if (!revealed) {

      // tampilkan API key

      apiInput.type = 'text';

      iconEye.classList.add('hidden');

      iconCopy.classList.remove('hidden');

      revealed = true;

    } else {

      // copy ke clipboard

      navigator.clipboard.writeText(apiInput.value)

        .then(() => {

          Swal.fire({

            icon: 'success',

            title: 'Copied!',

            text: 'API key berhasil disalin',

            timer: 1500,

            showConfirmButton: false

          });

        });

    }

  });

});
// ✨ Fade-in Scroll Observer
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) entry.target.classList.add('show');
  });
}, { threshold: 0.2 });

document.querySelectorAll('.fade-section').forEach(el => observer.observe(el));
</script>
@endsection
