{% extends 'admin_frontend/base.html' %}
{% load crispy_forms_tags %}
{% block title %}My Profile{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-4">
  <h1 class="text-xl font-semibold">My Profile</h1>
  <a href="/webadmin/" class="btn-outline">Back</a>
  <style>.btn-outline{border:1px solid #cbd5e1;padding:.375rem .5rem;border-radius:.375rem}</style>
</div>

<form method="post" enctype="multipart/form-data" class="bg-white rounded shadow p-4">
  {% csrf_token %}
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="md:col-span-2">
      <h2 class="text-base font-semibold mb-2">Account</h2>
      {{ form_user|crispy }}
    </div>
    {% if has_profile %}
    <div class="md:col-span-2">
      <h2 class="text-base font-semibold mb-2">Profile Photo</h2>
      <div class="flex items-start gap-4">
        <div>
          <img id="my-photo-preview" src="{% if request.user.recycle_profile.my_photo %}{{ request.user.recycle_profile.my_photo.url }}{% else %}#{% endif %}" alt="Current photo" class="w-24 h-24 rounded object-cover border {% if not request.user.recycle_profile.my_photo %}hidden{% endif %}" />
          {% if not request.user.recycle_profile.my_photo %}
            <div id="my-photo-placeholder" class="w-24 h-24 rounded bg-gray-100 flex items-center justify-center text-gray-400 border">No photo</div>
          {% endif %}
        </div>
        <div class="flex-1">
          {{ form_photo.my_photo }}
          <div class="flex items-center gap-3">
            <button type="button" id="btn-pick-photo" class="btn-outline">Change photo</button>
            {% if form_photo.remove_photo %}
              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
                {{ form_photo.remove_photo }} Remove current photo
              </label>
            {% endif %}
          </div>
          <p class="text-xs text-gray-500 mt-1">JPG/PNG, up to 5MB.</p>
          <style>.btn-outline{border:1px solid #cbd5e1;padding:.375rem .5rem;border-radius:.375rem}</style>
        </div>
      </div>
    </div>
    {% endif %}
  </div>
  <div class="mt-4">
    <button class="btn-primary" type="submit">Save Changes</button>
    <style>.btn-primary{background:#1d4ed8;color:#fff;padding:.5rem .75rem;border-radius:.375rem}</style>
  </div>
</form>
<script>
  (function(){
    const input = document.getElementById('id_my_photo');
    const btn = document.getElementById('btn-pick-photo');
    const preview = document.getElementById('my-photo-preview');
    const placeholder = document.getElementById('my-photo-placeholder');
    const removeCb = document.getElementById('id_remove_photo');
    if (btn && input) {
      btn.addEventListener('click', function(){ input.click(); });
    }
    if (input) {
      input.addEventListener('change', function(){
        if (input.files && input.files[0]) {
          const file = input.files[0];
          const url = URL.createObjectURL(file);
          if (preview) { preview.src = url; preview.classList.remove('hidden'); }
          if (placeholder) { placeholder.classList.add('hidden'); }
          if (removeCb) { removeCb.checked = false; }
        }
      });
    }
    if (removeCb) {
      removeCb.addEventListener('change', function(){
        if (removeCb.checked) {
          if (preview) { preview.classList.add('hidden'); }
          if (placeholder) { placeholder.classList.remove('hidden'); }
          if (input) { input.value = ''; }
        }
      });
    }
  })();
</script>
{% endblock %}
