<footer class="d-footer">
    <div class="">
        <p class="mb-0 text-center">
            &copy; <?= date('Y') ?> All Rights Reserved | <?= APP_NAME ?>
        </p>
    </div>
</footer>
</main>

<!-- 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>
// ================================ Users Overview Donut chart Start ================================ 
var options = {
    series: <?= json_encode($chartSeries) ?>,
    colors: ['#487FFF', '#FF9F29', '#45B369', "#9935FE"],
    labels: <?= json_encode($chartLabels) ?>,
    legend: {
        show: false
    },
    chart: {
        type: 'donut',
        height: 270,
        sparkline: {
            enabled: true // Remove whitespace
        },
        margin: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        },
        padding: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        }
    },
    stroke: {
        width: 0,
    },
    dataLabels: {
        enabled: false
    },
    responsive: [{
        breakpoint: 480,
        options: {
            chart: {
                width: 200
            },
            legend: {
                position: 'bottom'
            }
        }
    }],
};

const chartElement =
    document.querySelector("#userOverviewDonutChart");

if (chartElement) {

    var chart =
        new ApexCharts(
            chartElement,
            options
        );

    chart.render();

}
// ================================ Users Overview Donut chart End ================================ 

// ============================= Calendar Js Start =================================
const display = document.querySelector(".display");
const days = document.querySelector(".days");
const previous = document.querySelector(".left");
const next = document.querySelector(".right");

if (display && days && previous && next) {

    let date = new Date();

    let year = date.getFullYear();

    let month = date.getMonth();

    function displayCalendar() {

        days.innerHTML = "";

        const firstDay = new Date(year, month, 1);

        const lastDay = new Date(year, month + 1, 0);

        const firstDayIndex = firstDay.getDay();

        const numberOfDays = lastDay.getDate();

        display.innerHTML = date.toLocaleString("en-US", {
            month: "long",
            year: "numeric"
        });

        for (let x = 1; x <= firstDayIndex; x++) {

            let div = document.createElement("div");

            days.appendChild(div);

        }

        for (let i = 1; i <= numberOfDays; i++) {

            let div = document.createElement("div");

            let currentDate = new Date(year, month, i);

            div.innerHTML = i;

            if (

                currentDate.getFullYear() == new Date().getFullYear() &&

                currentDate.getMonth() == new Date().getMonth() &&

                currentDate.getDate() == new Date().getDate()

            ) {

                div.classList.add("current-date");

            }

            days.appendChild(div);

        }

    }

    displayCalendar();

    previous.addEventListener("click", function() {

        month--;

        if (month < 0) {

            month = 11;

            year--;

        }

        displayCalendar();

    });

    next.addEventListener("click", function() {

        month++;

        if (month > 11) {

            month = 0;

            year++;

        }

        displayCalendar();

    });

}
// ============================= Calendar Js End =================================



//============================= ✅ Data Table start =============================
// Data Table start
if (document.querySelector("#dataTable")) {
    new DataTable("#dataTable");
}

if (document.querySelector("#dataTableTwo")) {
    new DataTable("#dataTableTwo");
}

if (document.querySelector("#dataTableThree")) {
    new DataTable("#dataTableThree");
}

if (document.querySelector("#dataTableFour")) {
    new DataTable("#dataTableFour");
}

if (document.querySelector("#firstSemesterTable")) {
    new DataTable("#firstSemesterTable");
}

if (document.querySelector("#monthlyTestJun")) {
    new DataTable("#monthlyTestJun");
}

if (document.querySelector("#weeklyTestJun")) {
    new DataTable("#weeklyTestJun");
}

if (document.querySelector("#weeklyTestMay")) {
    new DataTable("#weeklyTestMay");
}

if (document.querySelector("#monthlyTestMay")) {
    new DataTable("#monthlyTestMay");
}

if (document.querySelector("#dataTableLibrary")) {
    new DataTable("#dataTableLibrary");
}

if (document.querySelector("#loginDetailsTable")) {
    new DataTable("#loginDetailsTable");
}
//============================= ✅ Data Table end =============================

// Dynamic Class added to the (absent/present/late/holiday)
$(document).ready(function() {
    $('.attendance').each(function() {
        let value = $(this).text().trim().toUpperCase();

        if (value === 'P') {
            $(this).addClass('text-success-600')
        } else if (value === 'A') {
            $(this).addClass('text-danger-600')
        } else if (value === 'H') {
            $(this).addClass('text-warning-600')
        } else if (value === 'F') {
            $(this).addClass('text-purple-600')
        } else if (value === 'L') {
            $(this).addClass('text-info-600')
        }
    });
});
// Dynamic Class added to the (absent/present/late/holiday)


// Custom accordion js start
$(document).on('click', '.custom-accordion-btn', function() {
    $('.custom-accordion-btn').not(this).removeClass('active').siblings('.custom-accordion-content').slideUp();

    // Toggle current one
    $(this).toggleClass('active');
    $(this).siblings('.custom-accordion-content').slideToggle();
});

// Keep first accordion open by default
$(document).ready(function() {
    const firstAccordion = $('.custom-accordion-btn').first();
    firstAccordion.addClass('active');
    firstAccordion.siblings('.custom-accordion-content').show();
});
// Custom accordion js end


// Sidebar js start
$('.my-sidebar-btn').on('click', function() {
    $('.my-sidebar').addClass('active');
    $('.overlay').addClass('active');
});
$('.close-my-sidebar, .overlay').on('click', function() {
    $('.my-sidebar').removeClass('active');
    $('.overlay').removeClass('active');
});


$('.apply-leave-btn').on('click', function() {
    $('.apply-leave').addClass('active');
    $('.overlay').addClass('active');
});
$('.close-apply-leave, .overlay').on('click', function() {
    $('.apply-leave').removeClass('active');
    $('.overlay').removeClass('active');
});
// Sidebar js end

$('.collect-payroll-btn').on('click', function() {
    $('.collect-payroll').addClass('active');
    $('.overlay').addClass('active');
});
$('.close-collect-payroll, .overlay').on('click', function() {
    $('.collect-payroll').removeClass('active');
    $('.overlay').removeClass('active');
});
// Sidebar js end
</script>
<script>
$('.view-member-btn').on('click', function() {
    $('#memberName').text($(this).data('name'));
    $('#memberState').text($(this).data('state'));
    $('#memberRole').text('Corps Member');
});
</script>

</body>

</html>