///////////////// graph Chart Complete js here ////////////////////// 
const ctx = document.getElementById('weeklyChart').getContext('2d');

new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        datasets: [
            {
                label: 'Patient',
                data: [0, 300, 1000, 900, 800, 1800, 1400],
                borderColor: '#00cba9',
                backgroundColor: 'transparent',
                tension: 0.5,
                fill: false,
                borderWidth: 6,
                borderCapStyle: 'round',
                pointRadius: 0
            },
            {
                label: 'Impatient',
                data: [100, 500, 300, 400, 900, 200, 1600],
                borderColor: '#002f36',
                backgroundColor: '#002f36',
                tension: 0.6,
                fill: false,
                borderWidth: 6,
                borderCapStyle: 'round',
                pointRadius: 0
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false,
                labels: {
                    font: {
                        family: 'Plus Jakarta Sans',
                        size: 12,
                        weight: '400'
                    },
                    color: '#4e4e4e'
                }
            },
            tooltip: {
                enabled: true,
                backgroundColor: '#fff',
                titleColor: '#4e4e4e',
                bodyColor: '#4e4e4e',
                borderColor: '#ccc',
                borderWidth: 1,
                titleFont: {
                    family: 'Plus Jakarta Sans',
                    size: 12,
                    weight: '400'
                },
                bodyFont: {
                    family: 'Plus Jakarta Sans',
                    size: 12,
                    weight: '400'
                },
                padding: 10
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    stepSize: 500,
                    color: '#4e4e4e',
                    font: {
                        family: 'Plus Jakarta Sans',
                        size: 12,
                        weight: '400'
                    }
                },
                grid: {
                    color: '#eee'
                }
            },
            x: {
                ticks: {
                    color: '#4e4e4e',
                    font: {
                        family: 'Plus Jakarta Sans',
                        size: 12,
                        weight: '400'
                    }
                },
                grid: {
                    display: false
                }
            }
        }
    }
});

const chartInstance = Chart.getChart("weeklyChart");

const legendItems = document.querySelectorAll(".legend-item");

legendItems.forEach((item, index) => {
    item.addEventListener("click", () => {
        const meta = chartInstance.getDatasetMeta(index);
        meta.hidden = meta.hidden === null ? !chartInstance.data.datasets[index].hidden : null;
        chartInstance.update();
        item.classList.toggle("inactive"); // optional style for inactive legend
    });
});

///////////////// graph Chart Complete js here //////////////////////

///////////////// calender complete js here ///////////////////////////
const monthYear = document.getElementById("monthYear");
const calendarDates = document.getElementById("calendarDates");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");

let currentDate = new Date();

let attendance = {
    "2025-07-01": "present",
    "2025-07-05": "absent",
    "2025-07-08": "leave",
    "2025-07-14": "present",
    "2025-07-16": "present",
    "2025-07-22": "absent",
    "2025-07-27": "present",
    "2025-07-29": "leave",
    "2025-07-30": "absent"
};

function renderCalendar(date) {
    const year = date.getFullYear();
    const month = date.getMonth();
    const firstDay = new Date(year, month, 1);
    const lastDate = new Date(year, month + 1, 0).getDate();
    const startDay = (firstDay.getDay() + 6) % 7;

    monthYear.textContent = `${date.toLocaleString("default", {
        month: "long"
    })} ${year}`;

    calendarDates.innerHTML = "";

    for (let i = 0; i < startDay; i++) {
        calendarDates.innerHTML += `<div></div>`;
    }

    for (let day = 1; day <= lastDate; day++) {
        let key = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
        let status = attendance[key];
        let dot = "";

        if (status) {
            dot = `<span class="dot ${status}" style="position:absolute;bottom:5px;left:50%;transform:translateX(-50%);"></span>`;
        }

        calendarDates.innerHTML += `<div>${day}${dot}</div>`;
    }
}

prevBtn.onclick = () => {
    currentDate.setMonth(currentDate.getMonth() - 1);
    renderCalendar(currentDate);
};

nextBtn.onclick = () => {
    currentDate.setMonth(currentDate.getMonth() + 1);
    renderCalendar(currentDate);
};

renderCalendar(currentDate);
///////////////// calender complete js here ///////////////////////////