<?php
require_once 'api_helper.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['save_profile'])) {
    apiPut('/user', ['name'=>$_POST['name'], 'email'=>$_POST['email'], 'phone'=>$_POST['phone']]);
    echo '<script>alert("প্রোফাইল সফলভাবে সংরক্ষণ করা হয়েছে!");window.location.href="profile.php";</script>';
}
?>
<?php include 'partials/header.php'; ?>

<div class="space-y-6 pb-28">
  <div class="flex items-center gap-3 border-b border-slate-800 pb-3">
    <button onclick="window.history.back()" class="p-1 px-2.5 rounded-lg bg-slate-800/100 hover:bg-slate-700 text-slate-100">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;margin-right:4px"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
      Back
    </button>
    <div>
      <h2 class="text-[#f8fafc] text-lg font-black tracking-tight leading-none">Edit Profile</h2>
      <span class="text-xs text-slate-400 font-bold uppercase font-mono">Customize Credentials</span>
    </div>
  </div>

  <form method="POST" action="" class="space-y-5">

    <div class="flex flex-col items-center justify-center py-4 space-y-2">
      <div class="w-20 h-20 bg-slate-800 border-2 border-slate-700 rounded-full flex items-center justify-center text-slate-450 relative shadow-inner">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        <span class="absolute bottom-0 right-0 bg-[#facc15] text-[#0a0f1d] p-1 text-[8px] font-black leading-none rounded-full border border-[#0a0f1d]">EDIT</span>
      </div>
      <span class="text-slate-500 text-[10px] font-bold uppercase tracking-wider block">Avatar selected: Default</span>
    </div>

    <div class="space-y-4 text-xs font-semibold text-slate-400">

      <div class="space-y-1 bg-slate-900 border border-slate-850 rounded-xl px-4 py-2">
        <label class="text-[10px] text-yellow-400 font-black block tracking-wider uppercase font-mono">Display Name</label>
        <input type="text" name="name" value="<?= htmlspecialchars($user['name']) ?>" class="w-full bg-transparent text-white font-bold py-1.5 focus:outline-none placeholder-slate-600 text-sm" placeholder="e.g. Rahul" required />
      </div>

      <div class="space-y-1 bg-slate-900 border border-slate-850 rounded-xl px-4 py-2">
        <label class="text-[10px] text-yellow-400 font-black block tracking-wider uppercase font-mono">Email Address</label>
        <input type="email" name="email" value="<?= htmlspecialchars($user['email']) ?>" class="w-full bg-transparent text-white font-bold py-1.5 focus:outline-none placeholder-slate-600 text-sm" placeholder="e.g. example@gmail.com" required />
      </div>

      <div class="space-y-1 bg-slate-900 border border-slate-850 rounded-xl px-4 py-2">
        <label class="text-[10px] text-yellow-400 font-black block tracking-wider uppercase font-mono">Phone Number</label>
        <input type="tel" name="phone" value="<?= htmlspecialchars($user['phone']) ?>" class="w-full bg-transparent text-white font-bold py-1.5 focus:outline-none placeholder-slate-600 text-sm" placeholder="e.g. 01XXXXXXXXX" required />
      </div>

    </div>

    <?php if (isset($_GET['saved'])): ?>
    <div class="bg-emerald-500/15 border border-emerald-550/20 text-emerald-400 rounded-xl p-3.5 flex items-center justify-center gap-2 text-xs font-black">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
      ✓ প্রোফাইল পরিবর্তনসমূহ সফলভাবে সংরক্ষণ করা হয়েছে!
    </div>
    <?php endif; ?>

    <button type="submit" name="save_profile" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-black tracking-widest uppercase text-xs py-4 rounded-xl shadow-lg active:scale-95 transition-all text-center">SAVE CHANGES</button>

  </form>
</div>

<?php include 'partials/footer.php'; ?>
