{% extends 'dashboard/admin_dashboard/main.html' %}
{% load static %}
{% block content %}
<!-- Right side column. Contains the navbar and content of the page -->
<h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Gate Pass Management</span></h4>
<div style="padding: 10px;">
  {% if messages %}
    {% for message in messages %}
      <div class="alert {% if 'success' in message.tags %}alert-success alert-dismissible{% elif 'danger' in message.tags %}alert-danger alert-dismissible{% endif %}" role="alert" id="success-alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>
      </div>
    {% endfor %}
  {% endif %}
</div>
<div class="row">
    <div class="col-lg-12 col-md-12">
      <div class="card">

        <div class="table-responsive" style="margin: 10px;">
          <table class="table table-bordered table-striped" id="location_table" style="width: 100%;">
            <thead>
              <tr>
                <th>ID</th>
                <th>GATE PASS NAME</th>
                <th>ACTIONS</th>
              </tr>
            </thead>
          </table>
          {% csrf_token %}
        </div>
      </div>
    </div>
</div>
<!-- ================= MODAL ================= -->
<div class="modal fade" id="gatePassModal" tabindex="-1">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Gate Pass Template</h5>
        <button type="button"
                class="btn-close close-modal-btn"
                data-bs-dismiss="modal"
                aria-label="Close">
        </button>
      </div>
      <div class="modal-body" id="gatePassModalBody">
        <div class="text-center py-5">
          <span class="spinner-border"></span>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- ========================================= -->


<!-- Ensure jQuery is loaded before Bootstrap and DataTables -->
<script src="{% static 'plugins/jQuery/jQuery-2.1.3.min.js' %}" type="text/javascript"></script>
<script src="{% static 'dist/js/pages/designation_delete.js' %}" type="text/javascript"></script>
<!-- Custom CSS for Modal -->
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<script>
  $(document).ready(function() {
    // Retrieve CSRF token value from the hidden input
    var csrfToken = $('input[name=csrfmiddlewaretoken]').val();
    console.log("CSRF Token: ", csrfToken);

    // Set up AJAX to include the CSRF token in the headers for non-GET requests
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrfToken);
                console.log("CSRF Token set in header: ", csrfToken);
            }
        }
    });

    // Define the AJAX URL, ensure it's correctly rendered
    var ajaxUrl = "{% url 'admin_gate_pass_template_ajax_page_ajax' %}";
    console.log("AJAX URL: ", ajaxUrl);

    // Initialize DataTable with server-side processing
    $('#location_table').DataTable({
        "ajax": {
            "url": ajaxUrl,
            "type": "POST"
        },
        "columns": [
            { data: 'id'},
            { data : 'gate_pass_name'},
            {
                data: null,
                render: function(data, type, row) {

                    //var editUrl = "{% url 'admin_gate_pass_template_edit' 0 %}".replace('0', row.id);
                    var viewUrl = "{% url 'admin_gate_pass_template_view' 0 %}".replace('0', row.id);

                    return `
                        <button class="btn btn-info btn-sm view-template"
                                data-url="${viewUrl}">
                            <i class="fa fa-eye"></i> View
                        </button>

<!--                        <a title="Edit" href="#" class="btn btn-primary btn-sm">-->
<!--                            <i class="fa fa-edit"></i> Edit-->
<!--                        </a>-->


                    `;
                }
            }


        ],
        "processing": true,
        "serverSide": true,
        "responsive": true,
        "ordering": false,
        lengthMenu: [
            [10, 25, 50, 100],
            [10, 25, 50, 100]
        ],
        layout: {
            topStart: {
                buttons: ['csv','pageLength']
            }
       },
    });
    // VIEW CLICK
    $(document).on('click', '.view-template', function () {

        let url = $(this).data('url');

        let modal = new bootstrap.Modal(
            document.getElementById('gatePassModal')
        );
        modal.show();

        $('#gatePassModalBody').html(
            '<div class="text-center"><span class="spinner-border"></span></div>'
        );

        $.get(url, function (res) {

            if (res.status) {
                $('#gatePassModalBody').html(res.html);
                $('.modal-title').text(res.template_name);
            } else {
                $('#gatePassModalBody').html('No data');
            }
        });
    });
});


  </script>
{% endblock %}