{% 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 AdTemplates</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 AdTemplates</li>
          </ol>
        </div>
      </div>
    </div>

    <!-- Filter and Add Button -->
    <div class="row mb-3 align-items-center">
      <div class="col-md-4">
        <form method="get">
          <div class="input-group">
            <select name="ad_type" class="form-select" onchange="this.form.submit()">
              <option value="">All Ad Types</option>
              {% for adtype in ad_types %}
                <option value="{{ adtype.id }}" {% if adtype.id|stringformat:"s" == selected_ad_type %}selected{% endif %}>
                  {{ adtype.name }}
                </option>
              {% endfor %}
            </select>
          </div>
        </form>
      </div>
      <div class="col-md-8 text-end">
        <a href="{% url 'adtemplate_add' %}" class="btn btn-success rounded-pill px-3">
          <i class="bi bi-plus-circle me-1"></i> Add Ad Template
        </a>
      </div>
    </div>

    <!-- Ad Templates 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-card-text me-2"></i> Ad Template List
              </h5>
            </div>

            <div class="table-responsive">
              <table class="table table-hover table-centered mb-0 align-middle">
                <thead class="table-dark">
                  <tr>
                    <th>Template Name</th>
                    <th>Description</th>
                    <th>Category</th>
                    <th>Ad Type</th>
                    <th>Image</th>
                    <th>Price (₹)</th>
                    <th class="text-center">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {% for template in page_obj %}
                  <tr>
                    <td class="fw-medium">{{ template.name }}</td>
                    <td class="text-muted">{{ template.description }}</td>
                    <td class="text-capitalize">{{ template.category.name }}</td>
                    <td class="text-capitalize">{{ template.ad_type.name }}</td>
                    <td>
                      {% if template.image %}
                        <img src="{{ template.image.url }}" alt="Ad Image" class="img-thumbnail shadow-sm" style="max-width: 70px; border-radius: 8px;">
                      {% else %}
                        <span class="text-muted">No Image</span>
                      {% endif %}
                    </td>
                    <td class="fw-semibold text-success">₹{{ template.price }}</td>
                    <td class="text-center">
                      <a href="{% url 'adtemplate_edit' template.id %}" class="btn btn-warning btn-sm mb-2 rounded-pill">
                        <i class="bi bi-pencil-square me-1"></i> Edit
                      </a>
                      <button type="button" class="btn btn-danger btn-sm rounded-pill" onclick="confirmDelete('{% url 'adtemplate_delete' template.id %}')">
                        <i class="bi bi-trash3 me-1"></i> Delete
                      </button>
                    </td>
                  </tr>
                  {% empty %}
                  <tr>
                    <td colspan="7" class="text-center text-muted py-4">No ad templates available.</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="?ad_type={{ selected_ad_type }}&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="?ad_type={{ selected_ad_type }}&page={{ num }}">{{ num }}</a></li>
                  {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                  <li class="page-item">
                    <a class="page-link" href="?ad_type={{ selected_ad_type }}&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="mt-4 fw-bold text-dark">Are you sure you want to delete this ad template?</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 %}