{% extends "base.html" %}
{% load static %}

{% block content %}
<section class="page-title-section bg-img cover-background left-overlay-secondary"
         style="display: flex; align-items: center; justify-content: flex-start; min-height: 300px; padding: 20px; background: url('{% static 'img/banner/2.jpg' %}') center/cover no-repeat; position: relative;">
    
    <div style="max-width: 600px;">
        <h1 style="font-size: 48px; font-weight: 700; color: rgb(223, 14, 77); line-height: 1.2;">
            {{ category.name }}
        </h1>
        <!-- <p style="font-size: 20px; color: white;">
            Projects in this category
        </p> -->
    </div>
    
</section>





<div class="container my-5">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold text-primary">Available Titles</h4>

        <!-- Category Dropdown -->
        <select id="categorySelect" class="form-select w-auto">
            <option value="">All Categories</option>
            {% for cat in categories %}
                <option value="{{ cat.id }}" {% if selected_category and selected_category.id == cat.id %}selected{% endif %}>
                    {{ cat.name }}
                </option>
            {% endfor %}
        </select>
    </div>

    {% if projects %}
    <div class="table-responsive shadow rounded-4">
        <table class="table table-hover align-middle">

            <thead class="table-primary">
                <tr>
                    <th width="60">#</th>
                    <th>Project Title</th>
                    <th width="200" class="text-end">Action</th>
                </tr>
            </thead>

            <tbody id="projectTable">
                {% for item in projects %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td class="fw-semibold">{{ item.title }}</td>
                    <td class="text-end">
                        <button class="btn btn-outline-primary btn-sm download-btn"
                                data-type="{{ item.title }}">
                            Request Details
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>

        </table>
    </div>
    {% else %}
        <div class="alert alert-warning text-center fw-semibold mt-4">
            ⚠ No titles found in this category.
        </div>
    {% endif %}
</div>



<!-- Modal -->
<div class="modal fade" id="downloadModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content shadow-lg border-0 rounded-4">

      <!-- <div class="modal-header bg-primary text-white">
        <h5 class="modal-title fw-bold">Before Download</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div> -->

      <form id="downloadForm">
        <div class="modal-body p-4">

          <input type="hidden" id="fileUrl">
          <input type="hidden" id="requestType" name="subject">

          <div class="mb-3">
            <label class="form-label fw-semibold">Full Name *</label>
            <input type="text" class="form-control" name="name" required placeholder="Enter your full name">
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold">Email *</label>
            <input type="email" class="form-control" name="email" required placeholder="Enter email address">
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold">Phone *</label>
            <input type="text" class="form-control" name="phone" required placeholder="Enter phone number">
          </div>

          <div>
            <label class="form-label fw-semibold">Message</label>
            <textarea class="form-control" name="message" rows="2" placeholder="Optional"></textarea>
          </div>

        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn-primary w-100 py-3 fw-bold">
            Submit & Download
          </button>
        </div>
      </form>

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




<!-- Modal
<div class="modal fade" id="downloadModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content shadow-lg border-0 rounded-4">

      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title fw-bold">Request Project Title Details</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>

      <form id="downloadForm">
        <div class="modal-body p-4">

          <input type="hidden" id="requestType" name="subject">

          <div class="mb-3">
            <label class="form-label fw-semibold">Full Name *</label>
            <input type="text" class="form-control" name="name" required placeholder="Enter your full name">
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold">Email *</label>
            <input type="email" class="form-control" name="email" required placeholder="Enter email address">
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold">Phone *</label>
            <input type="text" class="form-control" name="phone" required placeholder="Enter phone number">
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold">Selected Title</label>
            <textarea class="form-control" name="message" rows="2" placeholder="Optional"></textarea>
          </div>

        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn-primary w-100 py-2 fw-bold">
            Submit Request
          </button>
        </div>
      </form>

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



<!-- Scripts -->
<script>
document.querySelectorAll(".download-btn").forEach(btn => {
    btn.addEventListener("click", function () {
        document.getElementById("requestType").value = this.dataset.type;
        new bootstrap.Modal(document.getElementById('downloadModal')).show();
    });
});


document.getElementById("downloadForm").addEventListener("submit", function(e){
    e.preventDefault();

    fetch("{% url 'contact' %}", {
        method: "POST",
        headers: { "X-CSRFToken": "{{ csrf_token }}" },
        body: new FormData(this)
    }).then(() => {
        bootstrap.Modal.getInstance(document.getElementById("downloadModal")).hide();
        alert("📩 Your request has been submitted successfully!");
    });
});


document.getElementById("categorySelect").addEventListener("change", function() {
    let url = "{% url 'project_titles' %}?category=" + this.value;
    window.location.href = url;
});
</script>


<style>
.table-hover tbody tr:hover {
    background: #eef6ff !important;
    transition: 0.25s;
}

.download-btn {
    border-radius: 5px;
    padding: 6px 12px;
    transition: 0.3s ease;
}

.download-btn:hover {
    background: #0f517e;
    color: white;
    transform: translateY(-3px);
}
</style>

{% endblock %}