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

<div class="page-content">
  <div class="container-fluid">
    <!-- Page Title -->
    <div class="row">
      <div class="col-12">
        <div class="page-title-box">
          <h4 class="mb-0 fw-semibold">Add AdTemplate</h4>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{% url 'managetemplate' %}">Manage AdTemplates</a></li>
            <li class="breadcrumb-item active text-primary">Add AdTemplate</li>
          </ol>
        </div>
      </div>
    </div>

    <!-- Form Card -->
    <div class="row justify-content-center">
      <div class="col-xl-12">
        <div class="card shadow rounded-4 border-0">
          <div class="card-header bg-dark text-white rounded-top-4 text-center">
            <h5 class="mb-0 py-2">Add New AdTemplate</h5>
          </div>
          <div class="card-body">
            <form id="adTemplateForm" action="{% url 'adtemplate_add' %}" method="POST" enctype="multipart/form-data" novalidate>
              {% csrf_token %}

              <div class="mb-3">
                <label for="template_name" class="form-label fw-semibold">Template Name</label>
                <input type="text" class="form-control rounded-pill" id="template_name" name="name" required pattern=".{3,}" title="Minimum 3 characters">
              </div>

              <div class="mb-3">
                <label for="template_description" class="form-label fw-semibold">Description</label>
                <textarea class="form-control rounded-3" id="template_description" name="description" rows="3" required minlength="10"></textarea>
              </div>

              <div class="mb-3">
                <label for="template_price" class="form-label fw-semibold">Price (₹)</label>
                <input type="number" class="form-control rounded-pill" id="template_price" name="price" step="0.01" min="0" required>
              </div>

              <div class="mb-3">
                <label for="template_category" class="form-label fw-semibold">Category</label>
                <select class="form-select rounded-pill" id="template_category" name="category" required>
                  <option value="" disabled selected>Select category</option>
                  {% for category in categories %}
                    <option value="{{ category.id }}">{{ category.name }}</option>
                  {% endfor %}
                </select>
              </div>

              <div class="mb-3">
                <label for="template_ad_type" class="form-label fw-semibold">Ad Type</label>
                <select class="form-select rounded-pill" id="template_ad_type" name="ad_type" required>
                  <option value="" disabled selected>Select ad type</option>
                  {% for ad_type in ad_types %}
                    <option value="{{ ad_type.id }}">{{ ad_type.name }}</option>
                  {% endfor %}
                </select>
              </div>

              <div class="mb-4">
                <label for="template_image" class="form-label fw-semibold">Upload Image</label>
                <input type="file" class="form-control rounded-pill" id="template_image" name="image" accept="image/*" required>
              </div>

              <div class="text-center">
                <button type="submit" class="btn btn-success rounded-pill px-4">
                  <i class="bx bx-check-circle me-1"></i> Save
                </button>
              </div>
            </form>
          </div> <!-- End Card Body -->
        </div> <!-- End Card -->
      </div> <!-- End Col -->
    </div> <!-- End Row -->
  </div> <!-- End Container -->
</div> <!-- End Page Content -->

<script>
  // Frontend validation (optional but improves UX)
  document.getElementById('adTemplateForm').addEventListener('submit', function (event) {
    const form = this;

    if (!form.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
      alert('Please fill out all required fields correctly.');
    }

    form.classList.add('was-validated');
  });
</script>

{% endblock %}