{% extends 'dashboard/admin_dashboard/main.html' %}
{% load static %}

{% block content %}
<!-- Page Header -->
<h4 class="fw-bold py-3 mb-4">Report Management</h4>

<!-- Messages Section -->
<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>

<!-- Report Management Section -->
<div class="row">
  <div class="col-lg-12 col-md-12">
    <div class="card">

      <div class="card-body">
        <form id="filterForm" method="POST" enctype="multipart/form-data" action="">
          {% csrf_token %}
          <div class="row">
            <div class="col-md-3">
              <div class="form-group">
                <label for="reservation">Date:</label>
                <input type="text" id="reservation" name="date" class="form-control" required>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for="department">Department:</label>
                <select id="department" name="department" class="form-control" required>
                  <option value="">Select Department</option>
                  {% for department in departments %}
                    <option value="{{ department.id }}">{{ department.department_name }}</option>
                  {% endfor %}
                </select>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label for="visitor_type">Visitor Type:</label>
                <select id="visitor_type" name="visitor_type" class="form-control" required>
                  <option value="">Select Visitor Type</option>
                  <option value="candidate">Candidate</option>
                  <option value="customer">Customer</option>
                  <option value="general">General</option>
                  <option value="government officer">Government Officer</option>
                  <option value="interviewer">Interviewer</option>
                  <option value="vender">Vendor</option>
                  <option value="other">Other</option>
                </select>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label>&nbsp;</label>
                <button type="button" id="filterButton" class="btn btn-primary form-control">Filter</button>
              </div>
            </div>
          </div>
        </form>

        <div class="table-responsive" style="margin-top: 10px;">
          <table id="user_table" class="table table-bordered table-striped" style="width:100%;">
            <thead>
              <tr>
                <th>ID</th>
                <th>Visitor Name</th>
                <th>Visitor ID</th>
                <th>Image</th>
                <th>TO Meet</th>
                <th>Visitor Email</th>
                <th>Visitor Mobile</th>
                <th>Company</th>
                <th>Department</th>
                <th>Location</th>
                <th>Check-In Time</th>
                <th>Check-Out Time</th>
                <th>Visitor Type</th>
              </tr>
            </thead>
          </table>
          {% csrf_token %}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript Dependencies -->
<script src="{% static 'plugins/jQuery/jQuery-2.1.3.min.js' %}" type="text/javascript"></script>
<script src="{% static 'dist/js/pages/user_delete.js' %}" type="text/javascript"></script>
<script src="{% static 'dist/js/moment.min.js' %}" type="text/javascript"></script>
<link rel="stylesheet" href="{% static 'dist/css/all.min.css' %}">
<!-- Date Picker -->
<link href="{% static 'plugins/datepicker/datepicker3.css' %}" rel="stylesheet" type="text/css" />
<!-- Daterange picker -->
<link href="{% static 'plugins/daterangepicker/daterangepicker-bs3.css' %}" rel="stylesheet" type="text/css" />
<style>
    /* Hide built-in arrow text */
    .daterangepicker .prev span,
    .daterangepicker .next span {
      visibility: hidden;   /* hide the default < and > */
    }

    /* Replace with FA icons */
    .daterangepicker .prev:after {
      content: "\f104";  /* fa-chevron-left */
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 14px;
      visibility: visible;
    }

    .daterangepicker .next:after {
      content: "\f105";  /* fa-chevron-right */
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 14px;
      visibility: visible;
    }
  </style>
<script>
  $(function() {
    // Initialize daterangepicker for Report Management
    $('#reservation').daterangepicker({
    locale: { format: 'MM/DD/YYYY' },
    templates: {
      leftArrow: '<i class="fa fa-chevron-left"></i>',
      rightArrow: '<i class="fa fa-chevron-right"></i>'
    }
  });

    // CSRF Token Setup for AJAX
    var csrfToken = $('input[name=csrfmiddlewaretoken]').val();
    $.ajaxSetup({
      beforeSend: function(xhr, settings) {
        if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
          xhr.setRequestHeader("X-CSRFToken", csrfToken);
        }
      }
    });

    // DataTable for Report Management
    var ajaxUrl = "{% url 'admin_report' %}";
    var userTable = $('#user_table').DataTable({
      "ajax": {
        "url": ajaxUrl,
        "type": "POST",
        "data": function(d) {
          d.date = $('#reservation').val();
          d.department = $('#department').val();
          d.visitor_type = $('#visitor_type').val();
        }
      },
      "columns": [
        { data: 'id' },
        {
          data: null,
          render: function(data, type, row) {
            return row.visitors_first_name + ' ' + row.visitors_last_name;
          }
        },
        { data: 'visitors_uni_id' },
        {
          data: 'visitors_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: 'employee_first_name' },
        { data: 'visitors_email' },
        { data: 'visitors_mobile' },
        { data: 'company_name' },
        { data: 'department_name' },
        { data: 'location_name' },
        { data: 'check_in_time' },
        { data: 'check_out_time' },
        { data: 'visitors_type' },
      ],
      "processing": true,
      "serverSide": true,
      "responsive": true,
      "ordering": false,
      lengthMenu: [
        [10, 25, 50, 100],
        [10, 25, 50, 100]
      ],
      layout: {
        topStart: {
          buttons: [
            {
              extend: 'csv',
              text: 'Export'
            },
            'pageLength'
          ]
        }
      }
    });

    // Filter Button for Report Management
    $('#filterButton').on('click', function() {
      userTable.ajax.reload();
    });
  });
</script>
{% endblock %}