{% extends 'base.html' %}
{% block title %}User Profile{% endblock %}
{% load crispy_forms_tags %}
{% load static %}

{% block content %}

<!-- Profile Picture Update Modal -->
<div class="fixed inset-0 z-50 hidden overflow-y-auto bg-black bg-opacity-60" id="profilePicModal">
  <div class="flex items-center justify-center min-h-screen px-4">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-md">
      <div class="flex justify-between items-center p-6 border-b border-gray-200">
        <h3 class="text-xl font-semibold text-[#1E40AF]">Update Profile Picture</h3>
        <button onclick="document.getElementById('profilePicModal').classList.add('hidden')" class="text-gray-500 hover:text-[#1E40AF] text-2xl transition-colors">&times;</button>
      </div>
      <div class="p-6">
        <form method="POST" action="{% url 'update_profile_picture' %}" enctype="multipart/form-data">
          {% csrf_token %}
          {{ update_profile_photo_form|crispy }}
          <button type="submit" class="mt-4 w-full bg-[#1E40AF] hover:bg-[#1E3A8A] text-white font-semibold py-2.5 px-4 rounded-lg transition-colors duration-200">Save Changes</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Profile Content -->
<div class="max-w-6xl mx-auto px-4 py-12">
  <div class="bg-white rounded-xl shadow-xl overflow-hidden">
    <div class="flex flex-col md:flex-row">
      
      <!-- Left Sidebar -->
      <div class="bg-gray-50 md:w-1/3 flex flex-col items-center justify-center p-8 text-center">
        <img src="{{ user.profile_photo.url }}" alt="Profile Image" class="w-36 h-36 rounded-full object-cover mb-6 shadow-lg border-4 border-white">
        <h2 class="text-2xl font-bold text-[#1E40AF]">{{ user }}</h2>
        <a href="{% url 'update_profile' user.id %}" class="mt-6 w-full bg-[#1E40AF] text-white py-2.5 rounded-lg hover:bg-[#1E3A8A] font-semibold transition-colors duration-200">Update Profile</a>
        <button onclick="document.getElementById('profilePicModal').classList.remove('hidden')" class="mt-3 w-full bg-[#1E40AF] text-white py-2.5 rounded-lg hover:bg-[#1E3A8A] font-semibold transition-colors duration-200">Update Profile Picture</button>
      </div>

      <!-- Right Content -->
      <div class="md:w-2/3 p-8">
        <h3 class="text-xl font-semibold text-[#1E40AF] mb-4 border-b border-gray-200 pb-3">Account Information</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
          <div>
            <p class="text-sm font-semibold text-gray-500">Email</p>
            <p class="text-[#1E3A8A]">{{ user.email }}</p>
          </div>
          <div>
            <p class="text-sm font-semibold text-gray-500">Phone</p>
            <p class="text-[#1E3A8A]">{{ user.get_decrypted_contact_number }}</p>
          </div>
        </div>

        <h3 class="text-xl font-semibold text-[#1E40AF] mb-4 border-b border-gray-200 pb-3">Social Media</h3>
        <div class="flex space-x-6 mt-4">
          <a href="#" class="text-[#1E40AF] hover:text-[#1E3A8A] text-2xl transition-colors"><i class="mdi mdi-facebook"></i></a>
          <a href="#" class="text-[#1E40AF] hover:text-[#1E3A8A] text-2xl transition-colors"><i class="mdi mdi-twitter"></i></a>
          <a href="#" class="text-[#1E40AF] hover:text-[#1E3A8A] text-2xl transition-colors"><i class="mdi mdi-instagram"></i></a>
        </div>
      </div>

    </div>
  </div>
</div>

{% endblock %}