// chartdesign.js

function createCombinedRepairChart(elementId, apiUrl) {
    fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
        const dates = data.map(item => item.DATE);
        const deliveredCounts = data.map(item => item.delivered);
        const receivedCounts = data.map(item => item.receive);

        const ctx = document.getElementById(elementId).getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: dates,
                datasets: [
                    {
                        label: 'Received',
                        data: receivedCounts,
                        backgroundColor: 'rgba(54, 162, 235, 0.6)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    },
                    {
                        label: 'Delivered',
                        data: deliveredCounts,
                        backgroundColor: 'rgba(34, 139, 34, 0.6)',
                        borderColor: 'rgba(34, 139, 34, 1)',
                        borderWidth: 1
                    }
                ]
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        beginAtZero: true,
                    },
                    y: {
                        beginAtZero: true,
                    }
                },
                plugins: {
                    legend: {
                        position: 'top'
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    }
                }
            }
        });
    })
    .catch(error => console.error('Error fetching data:', error));
}


// Example function for creating a pie chart
function createPendingRepairsPieChart(elementId, apiUrl) {
    fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
        const labels = data.map(item => item.reps_desc + ' (' +item.total + ')' || 'Unknown');
        const totals = data.map(item => item.total);

        const ctx = document.getElementById(elementId).getContext('2d');
        new Chart(ctx, {
            type: 'pie',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Pending Repairs',
                    data: totals,
                    backgroundColor: [
                        'rgba(54, 162, 235, 0.8)',    /* Blue */
                        'rgba(255, 165, 0, 0.8)',     /* Orange */
                        'rgba(0, 191, 255, 0.8)',     /* Deep Sky Blue */
                        'rgba(201, 203, 207, 0.8)',   /* Light Gray */
                        'rgba(138, 43, 226, 0.8)',    /* Blue-Violet */
                        'rgba(255, 99, 132, 0.8)',    /* Red */
                        'rgba(34, 139, 34, 0.8)',     /* Forest Green */
                        'rgba(153, 102, 255, 0.8)',   /* Purple */
                        'rgba(255, 105, 180, 0.8)',   /* Hot Pink */
                        'rgba(255, 159, 64, 0.8)',    /* Light Orange */
                        'rgba(255, 99, 71, 0.8)',     /* Tomato */
                        'rgba(75, 192, 192, 0.8)',    /* Aqua */
                        'rgba(255, 20, 147, 0.8)',    /* Deep Pink */
                        'rgba(0, 255, 0, 0.8)',       /* Green */
                        'rgba(255, 206, 86, 0.8)',    /* Yellow */
                    ],
                    borderColor: [
                        'rgba(54, 162, 235, 1)',    /* Blue */
                        'rgba(255, 165, 0, 1)',     /* Orange */
                        'rgba(0, 191, 255, 1)',     /* Deep Sky Blue */
                        'rgba(201, 203, 207, 1)',   /* Light Gray */
                        'rgba(138, 43, 226, 1)',    /* Blue-Violet */
                        'rgba(255, 99, 132, 1)',    /* Red */
                        'rgba(34, 139, 34, 1)',     /* Forest Green */
                        'rgba(153, 102, 255, 1)',   /* Purple */
                        'rgba(255, 105, 180, 1)',   /* Hot Pink */
                        'rgba(255, 159, 64, 1)',    /* Light Orange */
                        'rgba(255, 99, 71, 1)',     /* Tomato */
                        'rgba(75, 192, 192, 1)',    /* Aqua */
                        'rgba(255, 20, 147, 1)',    /* Deep Pink */
                        'rgba(0, 255, 0, 1)',       /* Green */
                        'rgba(255, 206, 86, 1)',    /* Yellow */
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.raw + ' repairs';
                            }
                        }
                    }
                }
            }
        });
    })
    .catch(error => console.error('Error fetching data:', error));
}



// Example function for Delivery Bar chart
function createDeliveredRepairsBarChart(elementId, apiUrl) {
    fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
        const labels = data.map(item => item.delv_date);
        const deliveredData = data.map(item => item.delivered);

        const ctx = document.getElementById(elementId).getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Delivered after Repair',
                    data: deliveredData,
                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    })
    .catch(error => console.error('Error fetching delivered data:', error));
}


// Example function for Repair Bar chart
function createReceivedRepairsBarChart(elementId, apiUrl) {
    fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
        const labels = data.map(item => item.recv_date);
        const receivedData = data.map(item => item.receive);

        const ctx = document.getElementById(elementId).getContext('2d');
        // const repairBarChart = new Chart(ctx, {
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Received for Repair',
                    data: receivedData,
                    backgroundColor: 'rgba(75, 192, 192, 0.6)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    })
    .catch(error => console.error('Error fetching received data:', error));
}



// Example function for creating a pie chart

function createPendingRepairsDoughnutChart(elementId, apiUrl) {
    fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
        const labels = data.map(item => item.reps_desc || 'Unknown');
        const totals = data.map(item => item.total);

        const ctx = document.getElementById(elementId).getContext('2d');
        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Pending Repairs',
                    data: totals,
                    backgroundColor: [
                        'rgba(54, 162, 235, 0.5)',    /* Blue */
                        'rgba(255, 165, 0, 0.5)',     /* Orange */
                        'rgba(0, 191, 255, 0.5)',     /* Deep Sky Blue */
                        'rgba(201, 203, 207, 0.5)',   /* Light Gray */
                        'rgba(138, 43, 226, 0.5)',    /* Blue-Violet */
                        'rgba(255, 99, 132, 0.5)',    /* Red */
                        'rgba(34, 139, 34, 0.5)',     /* Forest Green */
                        'rgba(153, 102, 255, 0.5)',   /* Purple */
                        'rgba(255, 105, 180, 0.5)',   /* Hot Pink */
                        'rgba(255, 159, 64, 0.5)',    /* Light Orange */
                        'rgba(255, 99, 71, 0.5)',     /* Tomato */
                        'rgba(75, 192, 192, 0.5)',    /* Aqua */
                        'rgba(255, 20, 147, 0.5)',    /* Deep Pink */
                        'rgba(0, 255, 0, 0.5)',       /* Green */
                        'rgba(255, 206, 86, 0.5)',    /* Yellow */
                    ],
                    borderColor: [
                        'rgba(54, 162, 235, 1)',    /* Blue */
                        'rgba(255, 165, 0, 1)',     /* Orange */
                        'rgba(0, 191, 255, 1)',     /* Deep Sky Blue */
                        'rgba(201, 203, 207, 1)',   /* Light Gray */
                        'rgba(138, 43, 226, 1)',    /* Blue-Violet */
                        'rgba(255, 99, 132, 1)',    /* Red */
                        'rgba(34, 139, 34, 1)',     /* Forest Green */
                        'rgba(153, 102, 255, 1)',   /* Purple */
                        'rgba(255, 105, 180, 1)',   /* Hot Pink */
                        'rgba(255, 159, 64, 1)',    /* Light Orange */
                        'rgba(255, 99, 71, 1)',     /* Tomato */
                        'rgba(75, 192, 192, 1)',    /* Aqua */
                        'rgba(255, 20, 147, 1)',    /* Deep Pink */
                        'rgba(0, 255, 0, 1)',       /* Green */
                        'rgba(255, 206, 86, 1)',    /* Yellow */
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.raw + ' repairs';
                            }
                        }
                    }
                }
            }
        });
    })
    .catch(error => console.error('Error fetching data:', error));
}


// Add more functions as needed for other chart types