{% extends "admin_frontend/base.html" %}
{% load crispy_forms_tags %}
{% block title %}{% if creating %}Create User{% else %}Edit User{% endif %}{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-4">
  <h1 class="text-xl font-semibold">{% if creating %}Create User{% else %}Edit User{% endif %}</h1>
  <a href="{{ cancel_url }}" class="btn-outline">Back</a>
  <style>.btn-outline{border:1px solid #cbd5e1;padding:0.375rem 0.5rem;border-radius:0.375rem}</style>
</div>
<form method="post" enctype="multipart/form-data" class="bg-white rounded shadow p-4 space-y-4">
  {% csrf_token %}
  <input type="hidden" name="next" value="{{ request.get_full_path }}">
  {% if creating %}
    {% if form.username %}{{ form.username|as_crispy_field }}{% endif %}
    {% if form.email %}{{ form.email|as_crispy_field }}{% endif %}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>{% if form.first_name %}{{ form.first_name|as_crispy_field }}{% endif %}</div>
      <div>{% if form.last_name %}{{ form.last_name|as_crispy_field }}{% endif %}</div>
    </div>
    {% if form.role %}{{ form.role|as_crispy_field }}{% endif %}
    {% if form.is_active %}
      <div class="mt-2">
        <div class="flex items-center gap-2">
          {{ form.is_active }}
          <label for="{{ form.is_active.id_for_label }}" class="text-sm font-medium">Active</label>
        </div>
        {% if form.is_active.errors %}
          <div class="text-sm text-rose-700 mt-1">{{ form.is_active.errors|join:", " }}</div>
        {% endif %}
      </div>
    {% endif %}
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>{% if form.password1 %}{{ form.password1|as_crispy_field }}{% endif %}</div>
      <div>{% if form.password2 %}{{ form.password2|as_crispy_field }}{% endif %}</div>
    </div>
  {% else %}
    <div>
      <label class="block text-sm font-medium mb-1">Username</label>
      <input type="text" value="{{ item.username }}" class="w-full border rounded px-3 py-2 bg-gray-50" disabled>
    </div>
    {% if form.email %}{{ form.email|as_crispy_field }}{% endif %}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>{% if form.first_name %}{{ form.first_name|as_crispy_field }}{% endif %}</div>
      <div>{% if form.last_name %}{{ form.last_name|as_crispy_field }}{% endif %}</div>
    </div>
    {% if form.role %}{{ form.role|as_crispy_field }}{% endif %}
    {% if form.is_active %}
      <div class="mt-2">
        <div class="flex items-center gap-2">
          {{ form.is_active }}
          <label for="{{ form.is_active.id_for_label }}" class="text-sm font-medium">Active</label>
        </div>
        {% if form.is_active.errors %}
          <div class="text-sm text-rose-700 mt-1">{{ form.is_active.errors|join:", " }}</div>
        {% endif %}
      </div>
    {% endif %}
    {% if form_extras %}
    <div class="mt-4">
      <h3 class="text-sm font-semibold mb-2">Contact & Address</h3>
      {{ form_extras|crispy }}
    </div>
    {% endif %}
    {% if form_photo %}
    <div class="mt-4">
      <h3 class="text-sm font-semibold mb-2">Profile Photo</h3>
      <div class="flex items-start gap-4">
        <div>
          {% with photo=item.recycle_profile.my_photo %}
            <img id="my-photo-preview" src="{% if photo %}{{ photo.url }}{% else %}#{% endif %}" alt="Current photo" class="w-24 h-24 rounded object-cover border {% if not photo %}hidden{% endif %}" />
            {% if not 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 %}
          {% endwith %}
        </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 class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>{% if form.password1 %}{{ form.password1|as_crispy_field }}{% endif %}</div>
      <div>{% if form.password2 %}{{ form.password2|as_crispy_field }}{% endif %}</div>
    </div>
  {% endif %}

  <div class="pt-2">
    <button class="btn" type="submit">Save</button>
    <style>.btn{background:#1d4ed8;color:#fff;padding:0.5rem 0.75rem;border-radius:0.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 %}
