{% extends 'adminapp/master.html' %}
{% load static %}

{% block content %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

<div class="page-content py-4">
  <div class="container-fluid">

    <!-- Page Title -->
    <div class="row">
      <div class="col-12 mb-3">
        <div class="page-title-box">
          <h4 class="mb-0 fw-semibold">Manage Orders</h4>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item">
              <a href="{% url 'index' %}">
                <i class="bi bi-house-door-fill me-1"></i>Dashboard
              </a>
            </li>
            <li class="breadcrumb-item active text-primary">Manage Orders</li>
          </ol>
        </div>
      </div>
    </div>

    <!-- Filter Section -->
    <div class="row mb-3 align-items-center">
      <div class="col-md-4">
        <form method="get">
          <div class="input-group">
            <select name="status" id="status_filter" class="form-select" onchange="this.form.submit()">
              <option value="">All Status</option>
              <option value="pending" {% if request.GET.status == "pending" %}selected{% endif %}>Pending</option>
              <option value="processing" {% if request.GET.status == "processing" %}selected{% endif %}>Processing</option>
              <option value="completed" {% if request.GET.status == "completed" %}selected{% endif %}>Completed</option>
              <option value="cancelled" {% if request.GET.status == "cancelled" %}selected{% endif %}>Cancelled</option>
            </select>
          </div>
        </form>
      </div>
    </div>

    <!-- Orders Table -->
    <div class="row">
      <div class="col-xl-12">
        <div class="card shadow-sm border-0">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h5 class="mb-0">
                <i class="bi bi-cart-check-fill me-2"></i> Order List
              </h5>
            </div>

            <div class="table-responsive">
              <table class="table table-hover table-centered mb-0 align-middle">
                <thead class="table-dark">
                  <tr>
                    <th>#</th>
                    <th>Client</th>
                    <th>Date</th>
                    <th>Ad Type</th>
                    <th>Total (₹)</th>
                    <th>Status</th>
                    <th class="text-center">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {% for order in orders %}
                    {% if not request.GET.status or order.status == request.GET.status %}
                    <tr>
                      <td>{{ forloop.counter }}</td>
                      <td>
                        <strong>{{ order.full_name }}</strong><br>
                        <small class="text-muted">{{ order.email }}</small>
                      </td>
                      <td>{{ order.created_at|date:"M d, Y" }}</td>
                      <td class="text-capitalize">{{ order.template_ad_type }}</td>
                      <td class="fw-semibold text-success">₹{{ order.total_price }}</td>
                      <td>
                        {% if order.status == "pending" %}
                          <span class="badge bg-warning-subtle text-warning fw-semibold">Pending</span>
                        {% elif order.status == "processing" %}
                          <span class="badge bg-info-subtle text-info fw-semibold">Processing</span>
                        {% elif order.status == "completed" %}
                          <span class="badge bg-success-subtle text-success fw-semibold">Completed</span>
                        {% elif order.status == "cancelled" %}
                          <span class="badge bg-danger-subtle text-danger fw-semibold">Cancelled</span>
                        {% endif %}
                      </td>
                      <td class="text-center">
                        <a href="{% url 'order_detail' order.id %}" class="btn btn-primary btn-sm rounded-pill mb-1">
                          <i class="bi bi-eye-fill me-1"></i> View
                        </a>
                        <a href="{% url 'order_edit' order.id %}" class="btn btn-warning btn-sm rounded-pill mb-1">
                          <i class="bi bi-pencil-fill me-1"></i> Edit
                        </a>
                        <button type="button" class="btn btn-danger btn-sm rounded-pill" onclick="confirmDelete('{% url 'order_delete' order.id %}')">
                          <i class="bi bi-trash3 me-1"></i> Delete
                        </button>
                      </td>
                    </tr>
                    {% endif %}
                  {% empty %}
                    <tr>
                      <td colspan="7" class="text-center text-muted py-4">No orders found.</td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>

            <!-- Pagination -->
            {% if page_obj.has_other_pages %}
            <nav class="mt-3 d-flex justify-content-center">
              <ul class="pagination mb-0">
                {% if page_obj.has_previous %}
                  <li class="page-item">
                    <a class="page-link" href="?status={{ request.GET.status }}&page={{ page_obj.previous_page_number }}">«</a>
                  </li>
                {% else %}
                  <li class="page-item disabled"><span class="page-link">«</span></li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                  {% if page_obj.number == num %}
                    <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                  {% else %}
                    <li class="page-item"><a class="page-link" href="?status={{ request.GET.status }}&page={{ num }}">{{ num }}</a></li>
                  {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                  <li class="page-item">
                    <a class="page-link" href="?status={{ request.GET.status }}&page={{ page_obj.next_page_number }}">»</a>
                  </li>
                {% else %}
                  <li class="page-item disabled"><span class="page-link">»</span></li>
                {% endif %}
              </ul>
            </nav>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 rounded shadow">
      <div class="modal-header bg-light border-0">
        <h5 class="modal-title fw-semibold text-danger" id="deleteModalLabel">
          <i class="bi bi-exclamation-triangle me-1"></i> Confirm Deletion
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
        <p class="fs-6 fw-bold text-dark">Are you sure you want to delete this order?</p>
      </div>
      <div class="modal-footer border-0 justify-content-center">
        <form id="deleteForm" method="post">
          {% csrf_token %}
          <button type="submit" class="btn btn-danger rounded-pill px-4">Delete</button>
          <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Delete Confirmation Script -->
<script>
  function confirmDelete(deleteUrl) {
    document.getElementById('deleteForm').action = deleteUrl;
    var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    deleteModal.show();
  }
</script>

{% endblock %}