{% extends 'master.html' %}
{% load static %}
{% block content %}
  <div class="container" style="margin-top: 120px; margin-bottom: 60px;">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <div class="card shadow-lg border-0 rounded-4 bg-light">
          <div class="card-body p-5">
            <div class="text-center mb-4">
              <h2 class="fw-bold text-uppercase text-dark">My Profile</h2>
            </div>
            <hr class="mb-4" />
            {% if messages %}
              {% for message in messages %}
                <div class="alert alert-{{ message.tags }} text-center" role="alert">{{ message }}</div>
              {% endfor %}
            {% endif %}
            <div class="row g-4">
              <!-- Profile Card -->
              <div class="col-lg-4">
                <div class="profile-card p-4 text-center shadow-lg rounded-4 bg-white">
                  <img src="{{ user.profile_image.url|default:'/static/img/profile.jpg' }}" alt="Profile Picture" class="img-fluid rounded-circle mb-3 profile-img" style="width: 120px; height: 120px; object-fit: cover; border: 4px solid #f0f0f0;" />
                  <hr />
                  <p class="text-muted"><strong>Username:</strong> {{ user.username }}</p>
                  <p class="text-muted"><strong>Full Name:</strong> {{ user.get_full_name|default:user.full_name }}</p>
                  <p class="text-muted"><strong>Email:</strong> {{ user.email }}</p>
                  <p class="text-muted"><strong>Phone:</strong> {{ user.phone|default:'Not provided' }}</p>
                  <div class="mt-4 d-grid gap-2">
                    <a href="{% url 'update_profile' %}" class="btn btn-primary rounded-pill px-4 py-2 btn-interactive">Edit Profile</a>
                    <a href="{% url 'change_password' %}" class="btn btn-outline-secondary rounded-pill px-4 py-2 btn-interactive">Change Password</a>
                  </div>
                </div>
              </div>

              <!-- Orders History -->
              <div class="col-lg-8">
                <h4 class="fw-bold text-dark text-center">My Ad Orders History</h4>
                <hr />
                {% if user_orders %}
                  <div class="order-history">
                    {% for order in user_orders %}
                      <div class="order-card shadow-lg p-4 rounded-4 mb-3 bg-white">
                        <div class="row align-items-center">
                          <div class="col-md-3 text-center">
                            <img src="{{ order.ad.image.url }}" alt="Template Image" class="img-fluid rounded-3 order-img" style="width: 120px; height: 80px; object-fit: cover;" />
                          </div>
                          <div class="col-md-6">
                            <h5 class="fw-bold mb-1">{{ order.ad.name }}</h5>
                            <p class="mb-0"><strong>Ordered On:</strong> {{ order.created_at|date:'M d, Y' }}</p>
                            <p class="mb-1"><strong>Total Price:</strong> Rs.{{ order.total_price }}</p>
                          </div>
                          <div class="col-md-3 text-center">
                            <span class="badge" 
                            style="background-color: {% if order.status == 'pending' %}#f7c600{% elif order.status == 'processing' %}rgb(220, 122, 23){% elif order.status == 'completed' %}#22bb33{% elif order.status == 'cancelled' %}#bb2124{% else %}#17a2b8{% endif %}; 
                                   color: white; 
                                   font-weight: 600; 
                                   padding: 8px 16px; 
                                   border-radius: 20px; 
                                   text-transform: capitalize; 
                                   transition: all 0.3s ease;">
                                   <i class="fas fa-fa-info"></i>
                        {{ order.get_status_display }}
                      </span>
                      {% if order.status|lower == 'completed' %}
                      <a href="{% url 'generate_invoice' order.id %}" class="btn btn-sm btn-outline-success mt-2">
                          <i class="fas fa-file-pdf"></i> Invoice
                      </a>
                  {% endif %}
                  
                            <button class="btn btn-sm btn-outline-primary mt-2 details-btn" data-order-id="{{ order.id }}">View Details</button>
                            {% comment %} {% if order.status|lower == 'completed' %}
                              <a href="{% url 'download_invoice' order.id %}" class="btn btn-sm btn-outline-success mt-2"><i class="fas fa-file-pdf"></i> Invoice</a>
                            {% endif %} {% endcomment %}
                          </div>
                        </div>

                        <!-- Order Details Toggle -->
                        <div class="order-details p-3 rounded-3 bg-light" id="details-{{ order.id }}" style="display: none;">
                          <h6 class="fw-bold">Customization Details:</h6>
                          {% if order.ad %}
                            <ul>
                              <li><strong>Ad Title:</strong> {{ order.ad.title }}</li>
                              <li><strong>Ad Description:</strong> {{ order.ad.description }}</li>
                              <li><strong>Font Style:</strong> {{ order.ad.style }}</li>
                              <li><strong>Color:</strong> <span style="color:{{ order.ad.color }}; background: {{ order.ad.color }}; padding: 2px 6px; border-radius: 4px;">{{ order.ad.color }}</span></li>
                              <li><strong>Completion Date:</strong> {{ order.ad_completion_date|date:'M d, Y' }}</li>
                            </ul>
                          {% else %}
                            <p class="text-muted">No customization details available.</p>
                          {% endif %}
                          <h6 class="fw-bold">Additional Info:</h6>
                          <p>Order ID: {{ order.id }}</p>
                          {% if order.status|lower == 'pending' %}
                            <form method="POST" action="{% url 'cancel_order' order.id %}" class="mt-2">
                              {% csrf_token %}
                              <button type="submit" class="btn btn-sm btn-danger">Cancel Order</button>
                            </form>
                          {% endif %}
                        </div>
                      </div>
                    {% endfor %}
                  </div>
                {% else %}
                  <img src="{% static 'img/no_order.jpg' %}" alt="No Orders" class="img-fluid d-block mx-auto" style="max-width: 250px; height: auto;" />
                  <p class="text-muted text-center fs-5">You have not placed any ad orders yet.</p>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelectorAll('.details-btn').forEach(button => {
        button.addEventListener('click', function () {
          const orderId = this.getAttribute('data-order-id');
          const detailsDiv = document.getElementById(`details-${orderId}`);
          const isActive = detailsDiv.style.display === 'block';
          
          // Toggle visibility of the details section
          detailsDiv.style.display = isActive ? 'none' : 'block';
          
          // Update button text
          this.textContent = isActive ? 'View Details' : 'Hide Details';
        });
      });
    });
  </script>

  <style>
    .order-card { 
      border: 1px solid #ddd; 
      border-radius: 12px; 
      padding: 20px; 
      transition: all 0.3s ease-in-out; 
      background-color: #f9f9f9;
    }
    .order-card:hover { 
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); 
      transform: translateY(-5px);
    }
    .order-details { 
      display: none; 
      transition: all 0.3s ease-in-out; 
    }
    .profile-card {
      background: #ffffff; 
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
      border-radius: 10px;
    }
    .profile-card img {
      border: 4px solid #f0f0f0;
    }
    .btn {
      font-weight: 600;
      padding: 10px 20px;
      transition: all 0.3s ease;
    }
    .btn:hover {
      transform: translateY(-3px);
    }
    .btn-outline-secondary {
      border-color: #ccc;
    }
    .btn-outline-secondary:hover {
      background-color: #f1f1f1;
    }
    .badge {
      padding: 8px 16px;
      font-size: 14px;
      border-radius: 20px;
    }
    .profile-img:hover {
      transform: scale(1.05);
      transition: transform 0.3s ease;
    }
    .btn-interactive:hover {
      background-color: #0056b3;
      color: white;
      transition: background-color 0.3s ease;
    }
  </style>
{% endblock %}