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

{% block content %}


<section class="page-title-section bg-img cover-background top-position1 left-overlay-secondary"
         data-overlay-dark="8"
         data-background="{% static 'img/banner/2.jpg' %}">

    <div class="container text-center">
        <h1 class="text-primary font-weight-800">
            {{ category.name }}
        </h1>

        <ul class="list-unstyled">
            <li><a href="{% url 'home' %}">HOME</a></li>
            <li>
                {{ category.name }} →
                {{ subcategory.name }} →
                Project Details
            </li>
        </ul>
    </div>
</section>




<div class="container py-5">

    <h2 class="fw-bold text-center mb-4">{{ project.title }}</h2>

    <!-- Video -->
    {% if project.demo_video %}
    <div class="text-center mb-4">
        <video controls style="width: 100%; max-width: 700px; border-radius: 10px;">
            <source src="{{ project.demo_video.url }}" type="video/mp4">
        </video>
    </div>
    {% endif %}

    <!-- Action Buttons -->
    <div class="text-center d-flex flex-wrap gap-3 justify-content-center">

        {% if project.base_paper %}
        <button class="btn btn-outline-primary btn-lg download-btn"
                data-file="{{ project.base_paper.url }}"
                data-type="Base Paper Request">
            📄 Download Base Paper
        </button>
        {% endif %}

        {% if project.source_code %}
        <button class="btn btn-success btn-lg download-btn"
                data-file="{{ project.source_code.url }}"
                data-type="Source Code Request">
            💾 Download Source Code
        </button>
        {% endif %}

    </div>

    <hr class="my-4">

    <!-- Created Date -->
    <p class="text-center text-muted">📅 Added On: {{ project.created_date|date:"F d, Y" }}</p>

</div>



    </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">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>


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


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

    const csrf = "{{ csrf_token }}";

    fetch("{% url 'contact' %}", {
        method: "POST",
        headers: {
            "X-CSRFToken": csrf,
        },
        body: new FormData(this)
    }).then(() => {
        let file = document.getElementById("fileUrl").value;
        window.location.href = file;
        bootstrap.Modal.getInstance(document.getElementById("downloadModal")).hide();
    });
});
</script>


{% endblock %}