{% load static %}
<footer class="main-footer">
    <div class="pull-right hidden-xs">
<!--      <b>Version</b> 2.0-->
    </div>
    <strong>{{copyright}} <a href="{{website_link}}">{{website_name}}</a>.</strong>
  </footer>

<script src="{% static 'plugins/jQuery/jQuery-2.1.3.min.js' %}" type="text/javascript"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}" type="text/javascript"></script>
<!-- Data Table  -->
<!--<script src="{% static 'plugins/datatables/jquery.dataTables.js' %}" type="text/javascript"></script>-->
<!--<script src="{% static 'plugins/datatables/dataTables.bootstrap.js' %}" type="text/javascript"></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>


<!-- AdminLTE App -->
<script src="{% static 'dist/js/app.min.js' %}" type="text/javascript"></script>
<!-- jQuery UI 1.11.2 -->
<script src="{% static 'default/footer/jquery-ui.min.js' %}" type="text/javascript"></script>
<!-- Morris.js charts -->
<script src="{% static 'default/footer/raphael-min.js' %}"></script>

<!-- Sparkline -->
<script src="{% static 'plugins/sparkline/jquery.sparkline.min.js' %}" type="text/javascript"></script>
<!-- jvectormap -->
<script src="{% static 'plugins/jvectormap/jquery-jvectormap-1.2.2.min.js' %}" type="text/javascript"></script>
<script src="{% static 'plugins/jvectormap/jquery-jvectormap-world-mill-en.js' %}" type="text/javascript"></script>
<!-- jQuery Knob Chart -->
<script src="{% static 'plugins/knob/jquery.knob.js' %}" type="text/javascript"></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>
<!-- Bootstrap WYSIHTML5 -->
<script src="{% static 'plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js' %}" type="text/javascript"></script>
<!-- iCheck -->
<script src="{% static 'plugins/iCheck/icheck.min.js' %}" type="text/javascript"></script>
<!-- Slimscroll -->
<script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}" type="text/javascript"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->

<script src="{% static 'dist/js/messages_time/messages_container_time.js' %}" type="text/javascript"></script>

<!-- Include jQuery (Select2 depends on jQuery) -->

<script src="{% static 'default/footer/sweetalert2@10.js' %}"></script>
<script src="{% static 'dist\js\pages\multiselect\jquery.multiselect.js' %}" type="text/javascript"></script>
<script src="{% static 'select2\js\select2.min.js' %}"></script>
{% comment %} <script>
  $(document).ready(function() {
    // Get the current URL path
    var path = window.location.pathname;

    // Define the URLs to check
    var appointmentUrl = "{% url 'visitors_appointment' %}";
    var upcomingAppointmentUrl = "{% url 'visitors_appointment_upcoming_appointment' %}";
    var dashboardUrl = "{% url 'visitors_dashboard' %}";

    // Debugging
    console.log("Current path:", path);
    console.log("Appointment URL:", appointmentUrl);
    console.log("Upcoming Appointment URL:", upcomingAppointmentUrl);
    console.log("Dashboard URL:", dashboardUrl);

    // Deactivate all menu items and treeviews
    $('.sidebar-menu li').removeClass('active');
    $('.treeview-menu').removeClass('menu-open');

    // Check if the current path matches the URL for 'visitors_dashboard'
    if (path === dashboardUrl || path.startsWith(dashboardUrl) || path.endsWith('/' + dashboardUrl)) {
        console.log("Activating 'Dashboard'");
        // Activate 'Dashboard'
        $('a[href$="' + dashboardUrl + '"]').closest('li').addClass('active');
        $('a[href$="' + dashboardUrl + '"]').closest('.treeview-menu').addClass('menu-open');
        $('a[href$="' + dashboardUrl + '"]').closest('.treeview').addClass('active');
    }

    // Check if the current path matches the URL for 'visitors_appointment'
    if (path === appointmentUrl || path.startsWith(appointmentUrl) || path.endsWith('/' + appointmentUrl)) {
        console.log("Activating 'All Appointment'");
        // Activate 'All Appointment'
        $('a[href$="' + appointmentUrl + '"]').closest('li').addClass('active');
        $('a[href$="' + appointmentUrl + '"]').closest('.treeview-menu').addClass('menu-open');
        $('a[href$="' + appointmentUrl + '"]').closest('.treeview').addClass('active');
    }

    // Check if the current path matches the URL for 'visitors_appointment_upcoming_appointment'
    if (path === upcomingAppointmentUrl || path.startsWith(upcomingAppointmentUrl) || path.endsWith('/' + upcomingAppointmentUrl)) {
        console.log("Activating 'Upcoming Appointment'");
        // Activate 'Upcoming Appointment'
        $('a[href$="' + upcomingAppointmentUrl + '"]').closest('li').addClass('active');
        $('a[href$="' + upcomingAppointmentUrl + '"]').closest('.treeview-menu').addClass('menu-open');
        $('a[href$="' + upcomingAppointmentUrl + '"]').closest('.treeview').addClass('active');
    }
  });   

</script> {% endcomment %}







{% comment %} <script>
  $(document).ready(function(){
    // Handle click events on treeview menu items
    $('.sidebar-menu .treeview > a').on('click', function(event){
        event.preventDefault(); // Prevent default link behavior

        var $parentLi = $(this).parent('li'); // Get the parent <li> element
        var $submenu = $parentLi.find('.treeview-menu'); // Find the submenu

        console.log('submenu_1:-',submenu)
        // Toggle the current submenu
        $submenu.slideToggle();

        // Toggle the active and menu-open classes
        $parentLi.toggleClass('active menu-open');
        console.log('parentLi:-',parentLi)  
        // Close all other submenus and remove active/menu-open classes
        $('.sidebar-menu .treeview').not($parentLi).each(function(){
            var $otherSubmenu = $(this).find('.treeview-menu');
            if ($otherSubmenu.is(':visible')) {
                $otherSubmenu.slideUp();
                $(this).removeClass('menu-open'); // Remove menu-open class
            }
            $(this).removeClass('active'); // Remove active class
        });
    });

    // Handle click events on submenu items
    $('.sidebar-menu .treeview-menu .menu-item').on('click', function(){
        $('.sidebar-menu .treeview-menu .menu-item').removeClass('active-menu-item'); // Remove active class from all menu items
        $(this).addClass('active-menu-item'); // Add active class to clicked menu item
    });
});
</script> {% endcomment %}


<script>
  function validateNumericInput(input) {
      // Remove any non-numeric characters
      input.value = input.value.replace(/[^0-9]/g, '');
  }
</script>









<script type="text/javascript">
  $("#employee-dropdown").change(function () {
      var url = "{% url 'gate_keeper_ajax_load_employee' %}";
      var employeeId = $(this).val();
      console.log('employeeId:-', employeeId)
      if (employeeId === '') {
          $("#company_ide").html('<option value="">-- Select Company --</option>');
          $("#department_ide").html('<option value="">-- Select Department --</option>');
          $("#location_id").html('<option value="">-- Select Location --</option>');

          return; // Exit the function early if no employee is selected
      }

      $.ajax({
          url: url,
          data: {
              'employee_id': employeeId 
          },
          success: function (data) {
              $("#company_ide").html('<option value="">-- Select Company --</option>');
              $("#department_ide").html('<option value="">-- Select Department --</option>');
              $("#location_id").html('<option value="">-- Select Location --</option>');
              console.log('employeedata:-', data) 
              console.log('employeedata:-', data.company[0].id)

              if (data.company[0].id) {
                  $("#company_ide").append('<option value="' + data.company[0].id + '" selected>' + data.company[0].company_name + '</option>');

              if (data.departments[0].id) {
                  $("#department_ide").append('<option value="' + data.departments[0].id + '" selected>' + data.departments[0].department_name + '</option>');                    
              } 

              if (data.location[0].id) {
                  $("#location_id").append('<option value="' + data.location[0].id + '" selected>' + data.location[0].location_name + '</option>');                    
              }

              } else {
                  console.log('No company data returned');
              }
          },
          error: function(xhr, status, error) {
              console.log('Error:', error);
          }
      });
  });
</script>

{% comment %} <script>
  document.addEventListener('DOMContentLoaded', function() {
    // Get the current URL
    const currentUrl = window.location.href;

    // Define the menu items and their corresponding URLs
    const menuItems = {
      'dashboard-menu': '{% url 'visitors_dashboard' %}',
      'all-appointments': '{% url 'visitors_appointment' %}',
      'upcoming-appointments': '{% url 'visitors_appointment_upcoming_appointment' %}'
    };

    // Loop through the menu items and set the active class if the URL matches
    for (const [menuId, url] of Object.entries(menuItems)) {
      if (currentUrl.includes(url)) {
        document.getElementById(menuId).classList.add('active');
        if (menuId === 'appointment-menu') {
          document.getElementById(menuId).classList.add('active');
        }
      }
    }
  });
</script> {% endcomment %}

<script>
    // In your Javascript (external .js resource or <script> tag)
        $(document).ready(function() {
            $('.select2').select2();
        });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Flatpickr for timepicker
        flatpickr("#timepickere", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "h:i K", // AM/PM format
            time_24hr: false, // Use 12-hour format
            
        });
    });
</script>
<script type="text/javascript">
  $(document).ready(function() {
    // When SMTP TLS changes
    $('#smtp_tls').change(function() {
      if ($(this).is(':checked')) {
        // If TLS is checked, uncheck SSL
        $('#smtp_ssl').prop('checked', false);
      } else {
        // If TLS is unchecked, check SSL
        $('#smtp_ssl').prop('checked', true);
      }
    });

    // When SMTP SSL changes
    $('#smtp_ssl').change(function() {
      if ($(this).is(':checked')) {
        // If SSL is checked, uncheck TLS
        $('#smtp_tls').prop('checked', false);
      } else {
        // If SSL is unchecked, check TLS
        $('#smtp_tls').prop('checked', true);
      }
    });
  });
</script>
  

{% block content %}{% endblock content %} 