  <footer class="d-footer">
    <div class="row align-items-center justify-content-between">
      <div class="col-auto">
        <p class="mb-0">© 2024 Txpre. All Rights Reserved.</p>
      </div>
      <div class="col-auto">
        <p class="mb-0">Made by <a href="https://thebrandchimp.com/" target="_blank" class="text-primary-600">TheBrandChimp</a></p>
      </div>
    </div>
  </footer>
</main>
  
<!-- jQuery library js (Local jQuery 3.7.1 as default) -->
<script src="<?php echo base_url()?>assets/assets/js/lib/jquery-3.7.1.min.js"></script>
<!-- Bootstrap js -->
<script src="<?php echo base_url()?>assets/assets/js/lib/bootstrap.bundle.min.js"></script>
<!-- Apex Chart js -->
<script src="<?php echo base_url()?>assets/assets/js/lib/apexcharts.min.js"></script>
<!-- Data Table js -->
<script src="<?php echo base_url()?>assets/assets/js/lib/dataTables.min.js"></script>
<!-- Iconify Font js -->
<script src="<?php echo base_url()?>assets/assets/js/lib/iconify-icon.min.js"></script>
<!-- jQuery UI js -->
<script src="<?php echo base_url()?>assets/assets/js/lib/jquery-ui.min.js"></script>
<!-- Vector Map js -->
<script src="<?php echo base_url()?>assets/assets/js/lib/jquery-jvectormap-2.0.5.min.js"></script>
<script src="<?php echo base_url()?>assets/assets/js/lib/jquery-jvectormap-world-mill-en.js"></script>
<!-- Popup js -->
<script src="<?php echo base_url()?>assets/assets/js/lib/magnifc-popup.min.js"></script>
<!-- Slick Slider js -->
<script src="<?php echo base_url()?>assets/assets/js/lib/slick.min.js"></script>
<!-- prism js -->
<script src="<?php echo base_url()?>assets/assets/js/lib/prism.js"></script>
<!-- file upload js -->
<script src="<?php echo base_url()?>assets/assets/js/lib/file-upload.js"></script>
<!-- audioplayer -->
<script src="<?php echo base_url()?>assets/assets/js/lib/audioplayer.js"></script>
  
<!-- main js -->
<script src="<?php echo base_url()?>assets/assets/js/app.js"></script>
<script src="<?php echo base_url()?>assets/assets/js/homeOneChart.js"></script>

<script>
  $(document).ready(function () {
      // Initialize DataTable
      var table = $('#basic-1').DataTable();

      // Employee Filter Button Click Handler
      $('.employee-filter-buttons button').on('click', function () {
          // Highlight the selected button
          $('.employee-filter-buttons button').removeClass('active');
          $(this).addClass('active');

          // Get selected employee ID
          var employeeId = $(this).data('employee-id');

          // Filter rows in the DataTable
          table.rows().every(function () {
              var rowData = $(this.node());
              if (employeeId === 'all') {
                  rowData.show();
              } else {
                  rowData.toggle(rowData.data('employee-id') === employeeId);
              }
          });
      });
  });
</script>
<script>
  if (document.querySelector('#basic-1')) {
    let table = new DataTable('#basic-1', {
      order: [] // Disable initial sorting
    });
  }

  if (document.querySelector('#basic-2')) {
    let table2 = new DataTable('#basic-2', {
      order: [] // Disable initial sorting
    });
  }
</script>

<!-- Load jQuery 3.6.0 from CDN and assign it to jq360 using noConflict -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    var jq360 = jQuery.noConflict(true);
    // Now jq360 holds jQuery 3.6.0 while the global $ and jQuery remain version 3.7.1.
</script>

<!-- Load Moment.js -->
<script src="https://cdn.jsdelivr.net/npm/moment/min/moment.min.js"></script>

<!-- Load Daterangepicker -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script>
  $(document).ready(function() {
      // Initialize daterangepicker
      $('#filter_date_range').daterangepicker({
          locale: {
              format: 'MM/DD/YYYY' // Adjust format as needed
          },
          autoUpdateInput: false // Prevent immediate input update
      });

      // Handle input value update on apply
      $('#filter_date_range').on('apply.daterangepicker', function(ev, picker) {
          $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
      });

      // Clear input value on cancel
      $('#filter_date_range').on('cancel.daterangepicker', function() {
          $(this).val('');
      });
  });
</script>

<!-- Load FullCalendar v6.1.7 JS (removed defer to ensure it loads before use) -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.7/index.global.min.js"></script>

<!-- JavaScript to Initialize FullCalendar -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
      // Check that FullCalendar is loaded
      if (typeof FullCalendar === 'undefined') {
          console.error("FullCalendar is not defined!");
          return;
      }
      console.log("FullCalendar:", FullCalendar);

      const calendarEl = document.getElementById('calendar');

      // Initialize FullCalendar using the vanilla JS API
      const calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth', // Initial view set to Month
          headerToolbar: {
              left: 'prev,next today', // Navigation buttons
              center: 'title',         // Centered title
              right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' // View options
          },
          events: [], // Placeholder for events, will be populated dynamically
          editable: true,  // Allow dragging and resizing events
          selectable: true, // Allow selecting dates
          eventClick: function (info) {
              alert('Event: ' + info.event.title + '\nDescription: ' + info.event.extendedProps.description);
          }
      });

      // Ensure base_url is correctly passed, using PHP variable if needed
      const base_url = "<?php echo base_url(); ?>";

      // Fetch lease data from the server (assuming API endpoint works)
      fetch(`${base_url}home/getLeaseData`)
          .then(response => response.json()) // Parse JSON response
          .then(data => {
              if (!Array.isArray(data)) {
                  console.error('API response is not an array:', data);
                  return;
              }
              const events = [];
              // Map lease data to FullCalendar events
              data.forEach(lease => {
                  if (lease.scheduled_visit_datetime) {
                      events.push({
                          title: `Scheduled Visit - ${lease.property}`,
                          start: lease.scheduled_visit_datetime,
                          color: '#FF6347', // Red for Scheduled Visit
                          description: `${lease.remarks}`
                      });
                  }
                  if (lease.deal_negotiation_datetime) {
                      events.push({
                          title: `Deal Negotiation - ${lease.property}`,
                          start: lease.deal_negotiation_datetime,
                          color: '#32CD32', // Green for Deal Negotiation
                          description: ` ${lease.remarks}`
                      });
                  }
              });
              // Add the mapped events to the FullCalendar instance
              calendar.addEventSource(events);
          })
          .catch(error => console.error('Error fetching lease data:', error));

      // Render the calendar once all data is loaded
      calendar.render();
  });
</script>
<script>    
    $('.remove-button').on('click', function() {
        $(this).closest('.alert').addClass('d-none')
    }); 
</script>
</body>
</html>
