 <!-- jQuery library js -->
 <script src="../assets/js/lib/jquery-3.7.1.min.js"></script>
 <!-- Bootstrap js -->
 <script src="../assets/js/lib/bootstrap.bundle.min.js"></script>
 <!-- Apex Chart js -->
 <script src="../assets/js/lib/apexcharts.min.js"></script>
 <!-- Iconify Font js -->
 <script src="../assets/js/lib/iconify-icon.min.js"></script>
 <!-- Data Table js -->
 <script src="../assets/js/lib/dataTables.min.js"></script>

 <!-- jQuery UI js -->
 <script src="../assets/js/lib/jquery-ui.min.js"></script>

 <!-- main js -->
 <script src="../assets/js/app.js"></script>

 <script>
// ================== Password Show Hide Js Start ==========
function initializePasswordToggle(toggleSelector) {
    $(toggleSelector).on('click', function() {
        $(this).toggleClass("ri-eye-off-line");
        var input = $($(this).attr("data-toggle"));
        if (input.attr("type") === "password") {
            input.attr("type", "text");
        } else {
            input.attr("type", "password");
        }
    });
}
// Call the function
initializePasswordToggle('.toggle-password');
// ========================= Password Show Hide Js End ===========================

// ========================== Drag & Drop Upload photo Js start ========================
document.querySelectorAll(".drop-zone__input").forEach((inputElement) => {
    const dropZoneElement = inputElement.closest(".drop-zone");

    dropZoneElement.addEventListener("click", (e) => {
        inputElement.click();
    });

    inputElement.addEventListener("change", (e) => {
        if (inputElement.files.length) {
            updateThumbnail(dropZoneElement, inputElement.files[0]);
        }
    });

    dropZoneElement.addEventListener("dragover", (e) => {
        e.preventDefault();
        dropZoneElement.classList.add("drop-zone--over");
    });

    ["dragleave", "dragend"].forEach((type) => {
        dropZoneElement.addEventListener(type, (e) => {
            dropZoneElement.classList.remove("drop-zone--over");
        });
    });

    dropZoneElement.addEventListener("drop", (e) => {
        e.preventDefault();

        if (e.dataTransfer.files.length) {
            inputElement.files = e.dataTransfer.files;
            updateThumbnail(dropZoneElement, e.dataTransfer.files[0]);
        }

        dropZoneElement.classList.remove("drop-zone--over");
    });
});

/**
 * Updates the thumbnail on a drop zone element.
 *
 * @param {HTMLElement} dropZoneElement
 * @param {File} file
 */
function updateThumbnail(dropZoneElement, file) {
    let thumbnailElement = dropZoneElement.querySelector(".drop-zone__thumb");

    // First time - remove the prompt
    if (dropZoneElement.querySelector(".drop-zone__prompt")) {
        dropZoneElement.querySelector(".drop-zone__prompt").remove();
    }

    // First time - there is no thumbnail element, so lets create it
    if (!thumbnailElement) {
        thumbnailElement = document.createElement("div");
        thumbnailElement.classList.add("drop-zone__thumb");
        dropZoneElement.appendChild(thumbnailElement);
    }

    thumbnailElement.dataset.label = file.name;

    // Show thumbnail for image files
    if (file.type.startsWith("image/index.html")) {
        const reader = new FileReader();

        reader.readAsDataURL(file);
        reader.onload = () => {
            thumbnailElement.style.backgroundImage = `url('%24%7breader.html')`;
        };
    } else {
        thumbnailElement.style.backgroundImage = null;
    }
}
// ========================== Drag & Drop Upload photo Js end ========================
 </script>

 </body>

 </html>