{% extends 'dashboard/employee_dashboard/main.html' %}
{% load static %}
{% block content %}

<h4 class="fw-bold py-3 mb-4">All Visitors</h4>

<!-- TABLE -->
<div class="card">
  <div class="table-responsive p-3">
    <table class="table table-bordered table-striped" id="appointment_table">
      <thead>
        <tr>
          <th>ID</th>
              <th>First Name</th>
              <th>Email</th>
              <th>Image</th>
              <th>Mobile</th>
              <th>Date</th>
              <th>Time</th>
              <th>Status</th>
              <th>Created At</th>
              <th>Updated At</th>
              <th>Purpose</th>
              <th>Details</th>
              <th>Visitor Type</th>
              <th>Check-In Time</th>
              <th>Check-Out Time</th>
              <th>ACTION</th>

        </tr>
      </thead>
      <tbody>
        {% for result in results %}
        <tr>
          <td>{{ result.id }}</td>
          <td>{{ result.visitors_first_name }}</td>
          <td>{{ result.visitors_email }}</td>
          <td><img src="{{ result.visitors_image }}" alt="Visitor Image" width="50" height="50"></td>
          <td>{{ result.visitors_mobile }}</td>
          <td>{{ result.date }}</td>
          <td>{{ result.time }}</td>
          <td>{{ result.status }}</td>
          <td>{{ result.created_at }}</td>
          <td>{{ result.updated_at }}</td>
          <td>{{ result.purpose }}</td>
          <td>{{ result.detail }}</td>
          <td>{{ result.visitors_type }}</td>
          <td>{{ result.check_in_time }}</td>
          <td>{{ result.check_out_time }}</td>
          <td>
            <button class="btn btn-info view-visitor"
                    data-appointment-id="{{ result.id }}">
              <i class="bx bx-show"></i>
            </button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% csrf_token %}

  </div>
  <!-- Pagination -->
      <div class="pagination-container p-3">
        <div class="data-info">
          Showing {{ start_index }} to {{ end_index }} of {{ total_entries }} entries
        </div>
        <div class="pagination-wrapper">
          <ul class="pagination">
            {% if pagination.current_page > 1 %}
              <li class="page-item"><a class="page-link" href="?page=1">« First</a></li>
              <li class="page-item"><a class="page-link" href="?page={{ pagination.current_page|add:"-1" }}">‹ Previous</a></li>
            {% endif %}

            {% for page_num in page_range %}
              <li class="page-item {% if pagination.current_page == page_num %}active{% endif %}">
                <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
              </li>
            {% endfor %}

            {% if pagination.current_page < pagination.last_page %}
              <li class="page-item"><a class="page-link" href="?page={{ pagination.current_page|add:"1" }}">Next ›</a></li>
              <li class="page-item"><a class="page-link" href="?page={{ pagination.last_page }}">Last »</a></li>
            {% endif %}
          </ul>
        </div>
      </div>

</div>

<!-- MODAL -->
<div class="modal fade" id="visitorModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Visitor Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <table class="table table-bordered">
          <tbody id="visitor-details-body"></tbody>
        </table>
      </div>

    </div>
  </div>
</div>

<!-- JS -->
<script src="{% static 'plugins/jQuery/jQuery-2.1.3.min.js' %}"></script>
<script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatables/dataTables.bootstrap5.min.js' %}"></script>

<script>
$(document).ready(function () {

    // DataTable
    $('#appointment_table').DataTable({
        responsive: true,
        columnDefs: [
            { targets: [8, 9, 10, 11], className: 'none' }
            // 👆 These indices start from 0
            // 0=ID, 1=First Name, 2=Email, 3=Mobile → kept visible
            // All the rest moved under the + icon
        ],
      paging: false,
      info: false,
      order: [[0, 'desc']]
    });

    // CLICK EVENT (IMPORTANT)
    $(document).on('click', '.view-visitor', function () {
        var appointmentId = $(this).data('appointment-id');
        console.log("Appointment ID:", appointmentId);

        $.ajax({
            url: '/api/visitore_detail',
            type: 'POST',
            data: {
                appointment_id: appointmentId,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function (response) {

                if (response.status === "true") {

                    var data = response.data[0];

                    var html = `
                      <tr><td><b>ID</b></td><td>${data.id}</td></tr>
                      <tr><td><b>Name</b></td><td>${data.visitor_first_name}</td></tr>
                      <tr><td><b>Email</b></td><td>${data.visitor_email}</td></tr>
                      <tr><td><b>Mobile</b></td><td>${data.visitor_mobile}</td></tr>
                      <tr>
                        <td><b>Image</b></td>
                        <td><img src="${data.visitors_image}" width="100"></td>
                      </tr>
                      <tr><td><b>Purpose</b></td><td>${data.purpose}</td></tr>
                      <tr><td><b>Details</b></td><td>${data.detail}</td></tr>
                      <tr><td><b>Check-In</b></td><td>${data.check_in_time}</td></tr>
                      <tr><td><b>Check-Out</b></td><td>${data.check_out_time}</td></tr>
                    `;

                    $('#visitor-details-body').html(html);
                    $('#visitorModal').modal('show');

                } else {
                    alert(response.message);
                }
            },
            error: function () {
                alert('Server error');
            }
        });
    });

});
</script>

{% endblock %}