{% extends 'public_frontend/base.html' %}
{% load crispy_forms_tags i18n %}
{% block title %}{% trans "My Profile" %}{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto" x-data="{ section: 'profile' }" x-init="section = (location.hash==='\#history' ? 'history' : 'profile')">
  <h1 class="text-2xl font-semibold mb-4">{% trans "My Profile" %}</h1>
  <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
    <aside class="md:col-span-3">
      <nav class="bg-white rounded shadow p-4">
        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{% trans "Navigation" %}</div>
        <ul class="space-y-1">
          <li>
            <a href="#profile" @click.prevent="section='profile'" :class="section==='profile' ? 'bg-blue-50 text-blue-700' : 'text-gray-700'" class="block rounded px-3 py-2 hover:bg-gray-50">{% trans "Profile" %}</a>
          </li>
          <li>
            <a href="#history" @click.prevent="section='history'" :class="section==='history' ? 'bg-blue-50 text-blue-700' : 'text-gray-700'" class="block rounded px-3 py-2 hover:bg-gray-50">{% trans "Request History" %}</a>
          </li>
        </ul>
      </nav>
    </aside>
    <section class="md:col-span-9 space-y-6">
      <div x-show="section==='profile'" x-cloak>
        {% if carbon %}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
          <div class="bg-white rounded shadow p-4">
            <div class="text-gray-500 text-xs">Pending Carbon Events</div>
            <div class="text-2xl font-semibold">{{ carbon.pending_events }}</div>
          </div>
          <div class="bg-white rounded shadow p-4">
            <div class="text-gray-500 text-xs">Approved kgCO2e (MTD)</div>
            <div class="text-2xl font-semibold">{{ carbon.approved_mtd }}</div>
          </div>
        </div>
        {% endif %}
        <form method="post" enctype="multipart/form-data" class="bg-white rounded shadow p-4">
          {% csrf_token %}
          <div class="grid grid-cols-1 gap-6">
            <div>
              <h2 class="text-base font-semibold mb-2">{% trans "Account" %}</h2>
              <div class="grid md:grid-cols-2 gap-4 mb-2">
                <div>
                  <label class="block text-sm font-medium mb-1">{% trans "Username" %}</label>
                  <input type="text" value="{{ username_value }}" class="w-full border rounded px-3 py-2 bg-gray-50" disabled>
                </div>
                <div>
                  <label class="block text-sm font-medium mb-1">{% trans "Role" %}</label>
                  <input type="text" value="{{ role_label }}" class="w-full border rounded px-3 py-2 bg-gray-50" disabled>
                </div>
              </div>
              {{ form_user|crispy }}
            </div>
            {% if has_profile %}
            <div>
              <h2 class="text-base font-semibold mb-2">{% trans "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>
            <div>
              <h2 class="text-base font-semibold mb-2">{% trans "Contact & Address" %}</h2>
              {{ form_extras|crispy }}
            </div>
            {% endif %}
          </div>
          <div class="mt-4">
            <button class="btn-primary" type="submit">{% trans "Save Changes" %}</button>
            <style>.btn-primary{background:#1d4ed8;color:#fff;padding:.5rem .75rem;border-radius:.375rem}</style>
          </div>
        </form>
      </div>
      <div x-show="section==='history'" x-cloak>
        <div class="bg-white rounded shadow p-4">
          <h2 class="text-base font-semibold mb-3">{% trans "Request History" %}</h2>
          {% if request_history %}
          <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
              <thead>
                <tr class="text-left text-gray-600">
                  <th class="px-3 py-2">{% trans "Date" %}</th>
                  <th class="px-3 py-2">{% trans "Subject" %}</th>
                  <th class="px-3 py-2">{% trans "Organization" %}</th>
                </tr>
              </thead>
              <tbody class="bg-white">
                {% for it in request_history %}
                <tr class="border-t">
                  <td class="px-3 py-2 whitespace-nowrap">{{ it.created_at|date:"Y-m-d H:i" }}</td>
                  <td class="px-3 py-2">{{ it.subject|default:"Pickup Request" }}</td>
                  <td class="px-3 py-2">{{ it.organization.name }}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% else %}
            <div class="text-sm text-gray-600">{% trans "No requests found for your account email." %}</div>
          {% endif %}
        </div>
      </div>
    </section>
  </div>
</div>
<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 %}
