<?php  ?>

<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- ================= TOAST ================= -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    let toastEl = document.getElementById('successToast');
    if (toastEl) {
        let toast = new bootstrap.Toast(toastEl, { delay: 3000 });
        toast.show();
    }
});
</script>

<!-- ================= LOGOUT MODAL ================= -->
<div class="modal fade" id="logoutModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">
            <i class="fa fa-sign-out-alt fa-shake text-danger"></i> Confirm Logout
        </h5>
      </div>

      <div class="modal-body text-center">
        <p class="mb-0">Are you sure you want to logout?</p>
      </div>

      <div class="modal-footer justify-content-center">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <a href="../logout.php" class="btn btn-danger">Logout</a>
      </div>

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

<!-----========================== DELETE MODAL BOX ========================--->
<div class="modal fade" id="deleteModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title text-danger"> <i class="fa fa-trash fa-shake text-danger"></i> Confirm Delete</h5>
      </div>

      <div class="modal-body text-center">
        Are you sure you want to delete this?
      </div>

      <div class="modal-footer justify-content-center">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <a href="#" id="confirmDeleteBtn" class="btn btn-danger">Delete</a>
      </div>

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

<!-- AJAX Loader -->
<div id="ajaxLoader" class="ajax-loader">
    <div class="spinner"></div>
</div>

<!-- ================= COMMON JS ================= -->
<script>

// Sidebar toggle
function toggleSidebar(){
    document.getElementById("sidebar")?.classList.toggle("active");
}

// ================= GENERIC AJAX SEARCH =================
document.addEventListener("DOMContentLoaded", function(){

    const loader = document.getElementById("ajaxLoader");

    function showLoader(){
        if(loader) loader.style.display = "flex";
    }

    function hideLoader(){
        if(loader) loader.style.display = "none";
    }

    function setupSearch(inputId, tableId, url){

        const input = document.getElementById(inputId);
        const table = document.getElementById(tableId);

        if(!input || !table) return;

        let timer;

        input.addEventListener("keyup", function(){

            clearTimeout(timer);

            timer = setTimeout(() => {

                showLoader();

                fetch(url + "?search=" + encodeURIComponent(input.value))
                .then(res => res.text())
                .then(data => {
                    table.innerHTML = data;
                    hideLoader();
                })
                .catch(err => {
                    console.error(err);
                    hideLoader();
                });

            }, 400);

        });
    }

    // Apply globally
    setupSearch("liveSearch", "serviceTable", "../actions/ajax_services.php");
    setupSearch("invoiceSearch", "invoiceTable", "../actions/ajax_invoices.php");
    setupSearch("customerSearch", "customerTable", "../actions/ajax_customers.php");
    setupSearch("expenseSearch", "expenseTable", "../actions/ajax_expenses.php");

});
document.addEventListener("DOMContentLoaded", function(){

    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    const confirmBtn = document.getElementById("confirmDeleteBtn");

    document.addEventListener("click", function(e){

        if(e.target.classList.contains("deleteBtn")){

            e.preventDefault();

            const id  = e.target.getAttribute("data-id");
            const url = e.target.getAttribute("data-url");

            // dynamic URL
            confirmBtn.href = url + "?id=" + id;

            modal.show();
        }

    });

});
</script>
