{% extends 'partials/base.html' %}
{% load static %}
{% block content %}
{% load custom_filters %}
<!-- Page Wrapper -->

  <div class="page-wrapper">
    {% include 'partials/error-meg.html' %}
    <div class="content">
      <!-- Page Header -->
      <div class="d-md-flex d-block align-items-center justify-content-between mb-3"> 
     {% block title %}
            {% include "partials/title.html" with title="Certificate" text="Dashboard" textone="All Certificate" %}
      {% endblock title %}
      <!-- /Page Header -->
      </div>
      <!-- Teacher-Profile -->
      <div class="row">
        <div class="col-xxl-12 col-xl-12">
          <div class="row">
            <div class="col-xxl-12 col-xl-12 d-flex">
              <div class="card flex-fill">
                <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                  <h4 class="card-title mb-0">Certificate</h4>
                  <div class="d-flex flex-wrap align-items-center gap-2">
                   
                  </div>
                </div>

                <div class="card-body">
                   
                  <div class="custom-datatable-filter table-responsive">
                    <table class="table table-bordered">
                      <thead>
                        <tr>
                          <th>Sr.</th>
                          <th>Course Title</th>                          
                          {% comment %} <th>Start Time</th>
                          <th>End Time</th> {% endcomment %}
                          <th>Download</th>
                        </tr>
                      </thead>
                      <tbody>
                       <tr>
                        <td>1.</td>
                        <td>{{assign_course.course_id}}</td>
                       {% comment %} <td>{{assign_course.start_date|date:'d-m-Y'}}</td>
                       <td>{{assign_course.end_date|date:'d-m-Y'}}</td> {% endcomment %}
                       <td>
                        {% comment %} <a class="btn btn-outline-light me-1" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Genrate Certificate </a>  {% endcomment %}
                        {% if certificate %}
                       
                          <a href="javascript:void(0)"  class="btn btn-success" data-bs-toggle="modal" data-bs-target="#imagePreviewModal" data-url="{{ certificate.certificate_file.url }}">
                            Preview Certificate</a>
                        {% endif %}

                      </td>
                    </tr>
                       


                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
             
            </div>
          </div>

          <!-- Today's Class -->

          <!-- /Today's Class -->
        </div>

     
      </div>
      <!-- Teacher-profile -->

      <!-- Syllabus -->

      <!-- /Syllabus -->
    </div>
  </div>
  <!-- /Page Wrapper -->
    <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalToggleLabel">Genrate Certificate</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form class="px-3" id="genrateCertificateform">
                {% csrf_token %}
                <input type="hidden" name="studentid" value="{{ assign_course.user.id|base64_encode }}">
                <input type="hidden" name="course_id" value="{{  assign_course.course_id.id|base64_encode }}">

                <div class="mb-3">
                  <label for="studentname" class="form-label">Student Name</label>
                  <input class="form-control" type="text" id="studentname" name="studentname" required="" value="{{ assign_course.user.first_name }} {{ assign_course.user.last_name }}" placeholder="Enter student name">
                </div>
                <div class="mb-3">
                  <label for="coursename" class="form-label">Coruse Name</label>
                  <input class="form-control" type="text" id="coursename" name="coursename" required="" value="{{ assign_course.course_id }}" placeholder="Enter course name">
                </div>
                <div class="mb-3 d-flex justify-content-between">
                  <div class="">
                    <label for="startdate" class="form-label">Start date</label>
                    <input class="form-control" type="date" id="startdate" name="startdate" required="" value="{{ assign_course.start_date|date:'Y-m-d' }}" placeholder="Enter Start date">
                  </div>
                  <div class="">
                    <label for="enddate" class="form-label">End date</label>
                    <input class="form-control" type="date" id="enddate" name="enddate" required="" value="{{ assign_course.end_date|date:'Y-m-d' }}" placeholder="Enter Start date">
                  </div>
                </div>
                
                <div class="mb-3 text-center">
                  <button class="btn btn-primary" type="button" id="genrateCertificate">Genrate Certificate</button>
                </div>
              </form>     
            </div>  
            </div>
        </div>
    </div>
    <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-labelledby="imagePreviewModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Document Preview</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body text-center">
            <iframe id="modalPdfPreview" src="" width="100%" height="500" style="border: none;"></iframe>
          </div>
        </div>
      </div>
    </div>

{% endblock %}

{% block javascript %}
  {{ block.super }}
  <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    tooltipTriggerList.forEach(function (tooltipTriggerEl) {
      new bootstrap.Tooltip(tooltipTriggerEl)
    })


 document.addEventListener("DOMContentLoaded", function () {
  const modal = document.getElementById("imagePreviewModal");
  const iframe = document.getElementById("modalPdfPreview");

  modal.addEventListener("show.bs.modal", function (event) {
    const trigger = event.relatedTarget;
    const url = trigger.getAttribute("data-url");
    iframe.src = url;
  });

  modal.addEventListener("hidden.bs.modal", function () {
    iframe.src = ""; // Clear iframe on close
  });
});
  </script>
{% endblock %}