{% extends 'dashboard/gate_keeper_dashboard/main.html' %}
{% load static %}
{% block content %}
  <div class="row">
    <div class="col-lg-12 col-md-12 order-1">
      <div class="card">
        <h5 class="card-header">Visitor</h5>
        <div class="table-responsive" style="margin: 10px;">
          <table class="table table-bordered table-striped dataTable dtr-inline" id="appointment_table">
            <thead>
              <tr>
                <th>ID</th>
                <th>VISITOR NAME</th>
                <th>IMAGE</th>
                <th>VISITOR ID</th>
                <th>EMAIL</th>
                <th>MOBILE</th>
                <th>GENDER</th>
                <th>ADDRESS</th>
                <th>USER CREATED BY</th>
                <th>CREATED AT</th>
                <th>UPDATED AT</th>
                <th>APPOINTMENT</th>
              </tr>
            </thead>
          </table>
            {% csrf_token %}
        </div>
      </div>
    </div>
  </div>
<script src="{% static 'plugins/jQuery/jQuery-2.1.3.min.js' %}" type="text/javascript"></script>
<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 'gate_keeper_user_page_ajax' %}";
    console.log("AJAX URL: ", ajaxUrl);

    // Initialize DataTable with server-side processing
    $('#appointment_table').DataTable({
        "ajax": {
            "url": ajaxUrl,
            "type": "POST"
        },
        "columns": [
            { data: 'id'},
            {
              data: null, // Use null data to indicate that we are not using a direct field
              render: function(data, type, row) {
                  return row.first_name + ' ' + row.last_name;
              }
            },

            {
              data: 'image',
              render: function(data, type, row) {
                  let imageUrl = data ? '{{IMAGEPATH}}' + data : '{{DEFAULT_IMAGE}}';
                  return '<img src="' + imageUrl + '" alt="Visitor Image" width="50" height="50"/>';
              }
            },
            {data : 'uni_id'},
            { data : 'email'},
            { data : 'mobile'},
            { data : 'gender'},
            {data :'address'},
            {
              data: null, // Use null data to indicate that we are not using a direct field
              render: function(data, type, row) {
                  // Check if created_by_first_name and created_by_last_name are available
                  if (row.created_by_first_name && row.created_by_last_name) {
                      return row.created_by_first_name + ' ' + row.created_by_last_name;
                  } else {
                      // Fallback to row.first_name and row.last_name
                      return row.first_name + ' ' + row.last_name;
                  }
              }
            },
            { data : 'created_at'},
            { data : 'updated_at'},
            {
                data: null,
                render: function(data, type, row) {
                    var editUrl = "{% url 'gate_keeper_user_new_appointment' 0 %}".replace('0', row.id);;

                    var editButton = '<a title="NEW APPOINTMENT" href="' + editUrl + '" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Edit"><i class="bx bx-plus"></i></a>';

                    return editButton;
                }
            },
        ],
        "processing": true,
        "serverSide": true,
        "responsive": true,
        "ordering": false,
        lengthMenu: [
            [10, 25, 50, 100],
            [10, 25, 50, 100]
        ],

        layout: {
            topStart: {
                buttons: ['csv','pageLength']
            }
       },
    });
});


  </script>
{% endblock %}