{% load static %}
<!DOCTYPE html>
<html
  lang="en"
  class="light-style layout-menu-fixed"
  dir="ltr"
  data-theme="theme-default"
  data-assets-path="../assets/"
  data-template="vertical-menu-template-free"
>
  <head>
    {% include 'dashboard/employee_dashboard/header.html' %}
  </head>
<body>
    <div class="layout-wrapper layout-content-navbar">
        <div class="layout-container">
            {% include 'dashboard/employee_dashboard/menu.html' %}
            <div class="layout-page">
                {% include 'dashboard/employee_dashboard/navbar.html' %}
                <div class="content-wrapper">
                    <div class="container-xxl flex-grow-1 container-p-y">
                        {% block content %}
                        {% endblock %}
                    </div>
                    {% include 'dashboard/employee_dashboard/footer.html' %}
                </div>
            </div>
        </div>
    </div>
    <script src="{% static '/assets/vendor/libs/jquery/jquery.js'%}"></script>
    <script src="{% static '/assets/vendor/libs/popper/popper.js'%}"></script>
    <script src="{% static '/assets/vendor/js/bootstrap.js'%}"></script>
    <script src="{% static '/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js'%}"></script>

    <script src="{% static '/assets/vendor/js/menu.js'%}"></script>
    <!-- endbuild -->

    <!-- Vendors JS -->
    <script src="{% static '/assets/vendor/libs/apex-charts/apexcharts.js'%}"></script>

    <!-- Main JS -->
    <script src="{% static '/assets/js/main.js'%}"></script>

    <!-- Page JS -->
    <script src="{% static '/assets/js/dashboards-analytics.js'%}"></script>

    <script src="{% static 'default/footer/dataTables.js' %}"></script>

    <script src="{% static 'default/footer/dataTables.buttons.js' %}"></script>

    <script src="{% static 'default/footer/buttons.html5.min.js' %}"></script>

    <script src="{% static 'default/footer/buttons.print.min.js' %}"></script>

    <link rel="stylesheet" type="text/css" href="{% static 'default/footer/dataTables.dataTables.css' %}">

    <link rel="stylesheet" type="text/css" href="{% static 'default/footer/buttons.dataTables.css' %}">

    <script src="{% static 'default/footer/buttons.print.min.js' %}"></script>

    <script src="{% static 'default/footer/dataTables.responsive.js' %}"></script>
    <script src="{% static 'default/footer/responsive.dataTables.js' %}"></script>
    <!-- FastClick -->
    <script src="{% static 'plugins/fastclick/fastclick.min.js' %}"></script>

    <link href="{% static 'select2\css\select2.min.css' %}" rel="stylesheet" type="text/css"/>

    <script src="{% static 'default/footer/sweetalert2@10.js' %}"></script>

    <script src="{% static 'select2\js\select2.min.js' %}"></script>

    <!-- daterangepicker -->
    <script src="{% static 'plugins/daterangepicker/daterangepicker.js' %}" type="text/javascript"></script>
    <!-- datepicker -->
    <script src="{% static 'plugins/datepicker/bootstrap-datepicker.js' %}" type="text/javascript"></script>
    <script>
  $('.btn-success').on('click', function() {
    var appointmentId = $(this).attr('data-appointment-id');
    console.log("appointmentId:", appointmentId);
    $.ajax({
        url: '/api/visitore_detail',
        type: 'POST',
        data: {
            'appointment_id': appointmentId,
            'csrfmiddlewaretoken': '{{ csrf_token }}'  // Ensure this is available in the template
        },
        success: function(response) {
            if (response.status === "true") {
                var data = response.data[0];  // Assuming response.data is an array
                var appointmentReason = response.appointment_reason ? response.appointment_reason[0] : null;

                // Start building modal content
                var modalContent = `
                    <tr><td><strong>ID:</strong></td><td>${data.id}</td></tr>
                    <tr><td><strong>Visitor Name:</strong></td><td>${data.visitor_first_name}</td></tr>
                    <tr><td><strong>Email:</strong></td><td>${data.visitor_email}</td></tr>
                    <tr><td><strong>Mobile:</strong></td><td>${data.visitor_mobile}</td></tr>
                    <tr><td><strong>Image:</strong></td><td><img src="${data.visitors_image}" alt="Visitor Image" class="visitor-image" style="width: 100px; height: 100px;"></td></tr>
                    <tr><td><strong>Purpose:</strong></td><td>${data.purpose}</td></tr>
                    <tr><td><strong>Details:</strong></td><td>${data.detail}</td></tr>
                    <tr><td><strong>Visitor Type:</strong></td><td>${data.visitors_type}</td></tr>
                    <tr><td><strong>Check-In Time:</strong></td><td>${data.check_in_time}</td></tr>
                    <tr><td><strong>Check-Out Time:</strong></td><td>${data.check_out_time}</td></tr>`;

                // Add appointment reason only if the status is rejected and appointmentReason exists
                if (data.status === "rejected" && appointmentReason) {
                    modalContent += `
                    <tr><td><strong>Appointment Reason:</strong></td><td>${appointmentReason.appointment_reason}</td></tr>
                    <tr><td><strong>Appointment Date:</strong></td><td>${appointmentReason.appointment_date}</td></tr>
                    <tr><td><strong>Appointment Time:</strong></td><td>${appointmentReason.appointment_time}</td></tr>`;
                }

                // Insert the modal content into the modal body
                $('#visitor-details-body').html(modalContent);

                // Show the modal
                $('#visitorModal').modal('show');
            } else {
                alert(response.message);
            }
        },
        error: function(xhr, status, error) {
            alert('An error occurred. Please try again later.');
        }
    });
  });
  </script>
</body>