@include('dashboards.header')
<style>
    .graph-container {
        background: #fff;
        border-radius: 14px;
        padding: 25px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        margin-bottom: 30px;
        border: 1px solid #e8e8e8;
        transition: 0.3s ease;
    }
    .graph-container:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    }

    .graph-title {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        margin-bottom: 18px;
        padding-left: 4px;
        border-left: 4px solid #0d6efd;
    }

    .channel-heading {
        font-size: 22px;
        font-weight: 700;
        color: #444;
        margin: 20px 0 10px;
        border-bottom: 2px solid #f0f0f0;
        padding-bottom: 8px;
    }

    /* spacing fixes */
    canvas {
        width: 100% !important;
        height: 350px !important;
    }
</style>

<link rel="stylesheet" href="{{ asset('assets/vendor/bs-select/bs-select.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/vendor/datepicker/css/classic.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/vendor/datepicker/css/classic.date.css') }}" />
<div class="container mt-4">

    @if($graph_data->isEmpty())
        <div class="graph-container text-center">
            <h4>No Record Found</h4>
        </div>
    @else

        @foreach($graph_data as $channelGroup => $groupSamples)

            <h3 class="channel-heading">REAL TIME VALUE</h3>
        <div class="row">
                <!-- Voltage Time Domain -->
                <div class="col-md-6">
                    <div class="graph-container">
                        <div class="graph-title"> VOLATGE</div>
                       <canvas id="voltageChart"></canvas>

                    </div>
                </div>

                <!-- Current Time Domain -->
                <div class="col-md-6">
                    <div class="graph-container">
                        <div class="graph-title"> CURRENT</div>
                        <canvas id="currentChart"></canvas>
                    </div>
                </div>
            </div>

            <div class="row">
            <h3 class="channel-heading">TIME DOMAIN GRAPH</h3>
                <div class="col-md-6">
                    <div class="graph-container">
                        <div class="graph-title">Synthesized Voltage Cycle</div>
                        <canvas id="vChart-{{ $channelGroup }}"></canvas>
                    </div>
                </div>

                <!-- Current Time Domain -->
                <!-- <div class="col-md-6">
                    <div class="graph-container">
                        <div class="graph-title">Synthesized Current Cycle</div>
                        <canvas id="iChart-{{ $channelGroup }}"></canvas>
                    </div>
                </div> -->
            </div>

            <h3 class="channel-heading">FREQUENCY DOMAIN GRAPH </h3>

            <div class="row">
                <!-- Voltage FFT -->
                <div class="col-md-6">
                    <div class="graph-container">
                        <div class="graph-title">Voltage  Harmonics Spectrum</div>
                        <canvas id="vFreqChart-{{ $channelGroup }}"></canvas>
                    </div>
                </div>

                <!-- Current FFT -->
                <div class="col-md-6">
                    <div class="graph-container">
                        <div class="graph-title">Current Harmonics Spectrum</div>
                        <canvas id="iFreqChart-{{ $channelGroup }}"></canvas>
                    </div>
                </div>

            </div>

        @endforeach

    @endif

</div>

<!-- THD SECTION -->

 <!-- THD SECTION -->



<div class="container mt-3">
            <h3 class="channel-heading">THD GRAPHS </h3>

<div class="d-flex justify-content-end mb-3">
    <select id="thdFilter" class="form-select w-auto" style="font-weight:600;">
        <option value="today">Daily</option>
        <option value="week">Weekly</option>
        <option value="month">Monthly</option>
    </select>
</div>
    <div class="row">

        <!-- Today -->
        <div class="col-md-12 mb-4 thd-section" id="thd-today">
            <div class="graph-container">
                <div class="graph-title">THD – Today</div>
                <canvas id="thdToday"></canvas>
            </div>
        </div>

        <!-- Week -->
        <div class="col-md-12 mb-4 thd-section" id="thd-week" style="display:none;">
            <div class="graph-container">
                <div class="graph-title">THD – Last 7 Days</div>
                <canvas id="thdWeek"></canvas>
            </div>
        </div>

        <!-- Month -->
        <div class="col-md-12 mb-4 thd-section" id="thd-month" style="display:none;">
            <div class="graph-container">
                <div class="graph-title">THD – Last 30 Days</div>
                <canvas id="thdMonth"></canvas>
            </div>
        </div>

    </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3.0.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>



<script>
    

    let thdCharts = {}; // store chart instances

document.getElementById("thdFilter").addEventListener("change", function () {
    let selected = this.value;
    console.log("Selected THD Filter:", selected);

    // Hide all sections
    document.querySelectorAll('.thd-section').forEach(div => div.style.display = 'none');

    if (selected === 'today' || selected === 'week') {
        let todayDiv = document.getElementById('thd-today');
        todayDiv.style.display = 'block';

        // Initialize chart if not already
        if (!thdCharts.today) {
            thdCharts.today = new Chart(document.getElementById("thdToday"), {
                type: "line",
                data: {
                    labels: @json($thdTodayLabels),
                    datasets: [
                        { label: "THD Va", data: @json($thdTodayA), borderColor: "red", fill: false },
                        { label: "THD Vb", data: @json($thdTodayB), borderColor: "yellow", fill: false },
                        { label: "THD Vc", data: @json($thdTodayC), borderColor: "blue", fill: false },
                    ]
                },
                options: { responsive: true }
            });
        }
    }

    // if (selected === 'week') {
    //     let weekDiv = document.getElementById('thd-week');
    //     weekDiv.style.display = 'block';

    //     if (!thdCharts.week) {
    //         thdCharts.week = new Chart(document.getElementById("thdWeek"), {
    //             type: "line",
    //             data: {
    //                 labels: @json($thdWeekLabels),
    //                 datasets: [
    //                     { label: "THD Va", data: @json($thdWeekA), borderColor: "red", fill: false },
    //                     { label: "THD Vb", data: @json($thdWeekB), borderColor: "yellow", fill: false },
    //                     { label: "THD Vc", data: @json($thdWeekC), borderColor: "blue", fill: false },
    //                 ]
    //             },
    //             options: { responsive: true }
    //         });
    //     }
    // }

    if (selected === 'month') {
        let monthDiv = document.getElementById('thd-month');
        monthDiv.style.display = 'block';

        if (!thdCharts.month) {
            thdCharts.month = new Chart(document.getElementById("thdMonth"), {
                type: "line",
                data: {
                    labels: @json($thdMonthLabels),
                    datasets: [
                        { label: "THD Va", data: @json($thdMonthA), borderColor: "red", fill: false },
                        { label: "THD Vb", data: @json($thdMonthB), borderColor: "yellow", fill: false },
                        { label: "THD Vc", data: @json($thdMonthC), borderColor: "blue", fill: false },
                    ]
                },
                options: { responsive: true }
            });
        }
    }
});
console.log("hello");

// Default view = Today
// document.getElementById('thdFilter').dispatchEvent(new Event('change'));

const FUNDAMENTAL_FREQUENCY = 50; // Hz
const MAX_FFT_DISPLAY_FREQUENCY = 1000; // Hz limit

// Consistent color scheme
const COLOR_MAP = {
    1: 'red',     // Phase 1
    2: 'yellow',  // Phase 2
    3: 'blue'     // Phase 3
};

function extractFullCycle(inputData) {
    const ZERO_THRESHOLD = 20;
    let startIndex = -1, endIndex = -1, state = 'SEARCHING_FOR_START';
    for (let i = 1; i < inputData.length; i++) {
        const prev = inputData[i - 1], curr = inputData[i];
        if (state === 'SEARCHING_FOR_START' && prev < ZERO_THRESHOLD && curr >= ZERO_THRESHOLD) {
            startIndex = i; state = 'SEARCHING_FOR_END';
        } else if (state === 'SEARCHING_FOR_END' && prev >= ZERO_THRESHOLD && curr < ZERO_THRESHOLD) {
            endIndex = i; break;
        }
    }
    if (startIndex === -1 || endIndex === -1 || startIndex >= endIndex) return null;
    const positiveLobe = inputData.slice(startIndex, endIndex);
    const negativeLobe = positiveLobe.map(v => -v);
    const fullCycleData = positiveLobe.concat(negativeLobe);
    const fullCycleLabels = Array.from({ length: fullCycleData.length }, (_, i) => i + 1);
    return { cycleData: fullCycleData, labels: fullCycleLabels };
}
console.log("hello2");

function applyFFT(timeDomainData, fundamentalFrequency) {
    const n = timeDomainData.length;
    let frequencies = [], amplitudes = [];
    if (n === 0) return { frequencies, amplitudes };
    for (let k = 0; k < n; k++) {
        let re = 0, im = 0;
        for (let t = 0; t < n; t++) {
            const angle = (2 * Math.PI * k * t) / n;
            re += timeDomainData[t] * Math.cos(angle);
            im -= timeDomainData[t] * Math.sin(angle);
        }
        frequencies[k] = k * fundamentalFrequency;
        amplitudes[k] = Math.sqrt(re * re + im * im) / n;
    }
    return { frequencies, amplitudes };
}
console.log("hello3");

function safeSlice(arr, endIndex) {
    if (!arr || arr.length === 0) return [];
    return arr.slice(0, Math.min(endIndex, arr.length));
}
console.log("hello4");
const allSamples = @json($graph_data ?? []);

Object.entries(allSamples).forEach(([channelGroup, groupSamples]) => {
    console.log("hello5");
    const v1_raw = groupSamples.map(s => s.v1);
    const v2_raw = groupSamples.map(s => s.v2);
    const v3_raw = groupSamples.map(s => s.v3);
    const i1_raw = groupSamples.map(s => s.i1);
    const i2_raw = groupSamples.map(s => s.i2);
    const i3_raw = groupSamples.map(s => s.i3);

    const v1_processed = extractFullCycle(v1_raw);
    const v2_processed = extractFullCycle(v2_raw);
    const v3_processed = extractFullCycle(v3_raw);
    const i1_processed = extractFullCycle(i1_raw);
    const i2_processed = extractFullCycle(i2_raw);
    const i3_processed = extractFullCycle(i3_raw);

// TIME-DOMAIN VOLTAGE // finalize version before updated
const vCtx = document.getElementById(`vChart-${channelGroup}`);
if (vCtx && v1_processed) {
    const labels = v1_processed.labels;
    const N = labels.length;

    // Convert sample index to milliseconds (0 → 20ms)
    const msPerSample = 20 / N;
    const timeLabels = labels.map((x, i) => (i * msPerSample).toFixed(2) + " ms");

    const amplitude = Math.max(...v1_processed.cycleData.map(Math.abs)) || 1;
    const sine = labels.map((x, i) => amplitude * Math.sin((2 * Math.PI * i) / N));
    const offsetPct = 0.10; 
    const upper = sine.map(v => v + amplitude * offsetPct);
    const lower = sine.map(v => v - amplitude * offsetPct);

    const chartAreaRedBg = {
        id: 'chartAreaRedBg',
        beforeDraw(chart, args, options) {
            const { ctx, chartArea } = chart;
            if (!chartArea) return;
            ctx.save();
            ctx.fillStyle = options.color || 'rgba(255,99,132,0.15)';
            ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
            ctx.restore();
        }
    };

    new Chart(vCtx, {
        type: 'line',
        data: {
            labels: timeLabels,   // ← replace sample numbers with ms labels
            datasets: [
                { id: 'upperBoundary', label: 'Workable Upper', data: upper, borderColor: 'rgba(0,200,0,0.6)', borderWidth: 1, pointRadius: 0, fill: false, tension: 0.3 },
                { id: 'lowerBoundary', label: 'Workable Lower', data: lower, borderColor: 'rgba(0,200,0,0.6)', borderWidth: 1, pointRadius: 0, backgroundColor: 'rgba(144,238,144,0.45)', fill: '-1', tension: 0.3 },
                { id: 'v1', label: 'V1', data: v1_processed.cycleData, borderColor: COLOR_MAP[1], fill: false, pointRadius: 0, borderWidth: 2, tension: 0.15 },
                { id: 'v2', label: 'V2', data: v2_processed ? v2_processed.cycleData : [], borderColor: COLOR_MAP[2], fill: false, pointRadius: 0, tension: 0.15 },
                { id: 'v3', label: 'V3', data: v3_processed ? v3_processed.cycleData : [], borderColor: COLOR_MAP[3], fill: false, pointRadius: 0, tension: 0.15 }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                chartAreaRedBg: { color: 'rgba(255,99,132,0.12)' },
                title: { display: true, text: `Synthesized Voltage Cycle (Group ${channelGroup})` },
                legend: { position: 'bottom' }
            },
            scales: {
                x: { title: { display: true, text: 'Time (ms)' } },
                y: { title: { display: true, text: 'Voltage' } }
            },
            elements: { line: { tension: 0.15 } }
        },
        plugins: [chartAreaRedBg]
    });
}
console.log("hello6");



// const vCtx = document.getElementById(`vChart-${channelGroup}`);
// if (vCtx && v1_processed) {
//     const labels = v1_processed.labels;
//     const N = labels.length;
//     const amplitude = Math.max(...v1_processed.cycleData.map(Math.abs)) || 1; // avoid zero
//     const sine = labels.map((x, i) => amplitude * Math.sin((2 * Math.PI * i) / N));
//     const offsetPct = 0.10; // ±10% band; change as needed
//     const upper = sine.map(v => v + amplitude * offsetPct);
//     const lower = sine.map(v => v - amplitude * offsetPct);

//     // plugin to fill chart area with light red BEFORE datasets are drawn
//     const chartAreaRedBg = {
//         id: 'chartAreaRedBg',
//         beforeDraw(chart, args, options) {
//             const { ctx, chartArea } = chart;
//             if (!chartArea) return;
//             ctx.save();
//             ctx.fillStyle = options.color || 'rgba(255,99,132,0.15)'; // default light red
//             ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
//             ctx.restore();
//         }
//     };

//     new Chart(vCtx, {
//         type: 'line',
//         data: {
//             labels: labels,
//             datasets: [
//                 // 1) Upper boundary (no fill itself)
//                 {
//                     id: 'upperBoundary',
//                     label: 'Workable Upper',
//                     data: upper,
//                     borderColor: 'rgba(0,200,0,0.6)',
//                     borderWidth: 1,
//                     pointRadius: 0,
//                     fill: false, // no automatic fill here
//                     tension: 0.3
//                 },
//                 // 2) Lower boundary: fill to previous (upper) -> this creates the green band between upper & lower
//                 {
//                     id: 'lowerBoundary',
//                     label: 'Workable Lower',
//                     data: lower,
//                     borderColor: 'rgba(0,200,0,0.6)',
//                     borderWidth: 1,
//                     pointRadius: 0,
//                     backgroundColor: 'rgba(144,238,144,0.45)', // green fill between upper and lower
//                     fill: '-1', // fill to previous dataset (upper)
//                     tension: 0.3
//                 },
//                 // 3) V1, V2, V3 plotted on top (they must come AFTER the fill datasets)
//                 { id: 'v1', label: 'V1', data: v1_processed.cycleData, borderColor: COLOR_MAP[1], fill: false, pointRadius: 0, borderWidth: 2, tension: 0.15 },
//                 { id: 'v2', label: 'V2', data: v2_processed ? v2_processed.cycleData : [], borderColor: COLOR_MAP[2], fill: false, pointRadius: 0, tension: 0.15 },
//                 { id: 'v3', label: 'V3', data: v3_processed ? v3_processed.cycleData : [], borderColor: COLOR_MAP[3], fill: false, pointRadius: 0, tension: 0.15 }
//             ]
//         },
//         options: {
//             responsive: true,
//             plugins: {
//                 // pass options to the background plugin here:
//                 chartAreaRedBg: { color: 'rgba(255,99,132,0.12)' },
//                 title: {
//                     display: true,
//                     text: `Synthesized Voltage Cycle (Group ${channelGroup})`
//                 },
//                 legend: { position: 'bottom' }
//             },
//             scales: {
//                 x: { title: { display: true, text: 'Sample Number' } },
//                 y: { title: { display: true, text: 'ADC Value' } }
//             },
//              elements: {
//                     line: { tension: 0.15 } // smooth lines
//                 }

//         },
//         plugins: [chartAreaRedBg] // register the red-bg plugin
//     });
// }



// TIME-DOMAIN CURRENT 
const iCtx = document.getElementById(`iChart-${channelGroup}`);
if (iCtx && i1_processed) {
    const labels = i1_processed.labels;
    const N = labels.length;
    const amplitude = Math.max(...i1_processed.cycleData.map(Math.abs)) || 1; // avoid zero
    const sine = labels.map((x, i) => amplitude * Math.sin((2 * Math.PI * i) / N));
    const offsetPct = 0.10; // ±10% band (same as voltage)
    const upper = sine.map(v => v + amplitude * offsetPct);
    const lower = sine.map(v => v - amplitude * offsetPct);

    // plugin for red background outside workable area
    const chartAreaRedBg = {
        id: 'chartAreaRedBg',
        beforeDraw(chart, args, options) {
            const { ctx, chartArea } = chart;
            if (!chartArea) return;
            ctx.save();
            ctx.fillStyle = options.color || 'rgba(255,99,132,0.15)';
            ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
            ctx.restore();
        }
    };

    new Chart(iCtx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                // upper bound
                {
                    id: 'upperBoundary',
                    label: 'Workable Upper',
                    data: upper,
                    borderColor: 'rgba(0,200,0,0.6)',
                    borderWidth: 1,
                    pointRadius: 0,
                    fill: false,
                    tension: 0.3
                },
                // lower bound with green fill to upper
                {
                    id: 'lowerBoundary',
                    label: 'Workable Lower',
                    data: lower,
                    borderColor: 'rgba(0,200,0,0.6)',
                    borderWidth: 1,
                    pointRadius: 0,
                    backgroundColor: 'rgba(144,238,144,0.45)', // same green
                    fill: '-1',
                    tension: 0.3
                },
                // I1, I2, I3 on top
                { id: 'i1', label: 'I1', data: i1_processed.cycleData, borderColor: COLOR_MAP[1], fill: false, pointRadius: 0, borderWidth: 2, tension: 0.15 },
                { id: 'i2', label: 'I2', data: i2_processed ? i2_processed.cycleData : [], borderColor: COLOR_MAP[2], fill: false, pointRadius: 0, tension: 0.15 },
                { id: 'i3', label: 'I3', data: i3_processed ? i3_processed.cycleData : [], borderColor: COLOR_MAP[3], fill: false, pointRadius: 0, tension: 0.15 }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                chartAreaRedBg: { color: 'rgba(255,99,132,0.12)' },
                title: {
                    display: true,
                    text: `Synthesized Current Cycle (Group ${channelGroup})`
                },
                legend: { position: 'bottom' }
            },
            scales: {
                x: { title: { display: true, text: 'Sample Number' } },
                y: { title: { display: true, text: 'Current' } }
            },
            elements: { line: { fill: false } }
        },
        plugins: [chartAreaRedBg]
    });
}

console.log("hello7");


    // Apply FFT
    const v1_fft = applyFFT(v1_processed ? v1_processed.cycleData : [], FUNDAMENTAL_FREQUENCY);
    const v2_fft = applyFFT(v2_processed ? v2_processed.cycleData : [], FUNDAMENTAL_FREQUENCY);
    const v3_fft = applyFFT(v3_processed ? v3_processed.cycleData : [], FUNDAMENTAL_FREQUENCY);
    const i1_fft = applyFFT(i1_processed ? i1_processed.cycleData : [], FUNDAMENTAL_FREQUENCY);
    const i2_fft = applyFFT(i2_processed ? i2_processed.cycleData : [], FUNDAMENTAL_FREQUENCY);
    const i3_fft = applyFFT(i3_processed ? i3_processed.cycleData : [], FUNDAMENTAL_FREQUENCY);

    // FREQUENCY-DOMAIN VOLTAGE
    const vFreqCtx = document.getElementById(`vFreqChart-${channelGroup}`);
    if (vFreqCtx && v1_fft.amplitudes.length > 0) {
        const N_v1 = v1_fft.amplitudes.length;
        let displayPointsCount = Math.floor(MAX_FFT_DISPLAY_FREQUENCY / FUNDAMENTAL_FREQUENCY) + 1;
        displayPointsCount = Math.min(displayPointsCount, Math.floor(N_v1 / 2) + 1);
        const chartLabels = v1_fft.frequencies.slice(0, displayPointsCount);
        if (chartLabels.length > 0) {
            new Chart(vFreqCtx, {
                type: 'bar',
                data: {
                    labels: chartLabels,
                    datasets: [
                        { label: 'V1 FFT', data: safeSlice(v1_fft.amplitudes, displayPointsCount), backgroundColor: COLOR_MAP[1] },
                        { label: 'V2 FFT', data: safeSlice(v2_fft.amplitudes, displayPointsCount), backgroundColor: COLOR_MAP[2] },
                        { label: 'V3 FFT', data: safeSlice(v3_fft.amplitudes, displayPointsCount), backgroundColor: COLOR_MAP[3] }
                    ]
                },
                options: {
                    responsive: true,
                    plugins: { title: { display: true, text: `Voltage FFT (Group ${channelGroup})` }},
                    scales: {
                        x: { title: { display: true, text: 'Frequency (Hz)' }},
                        y: { title: { display: true, text: 'Voltage' }}
                    }
                }
            });
        }
    }
    console.log("hello8");

    // FREQUENCY-DOMAIN CURRENT
    const iFreqCtx = document.getElementById(`iFreqChart-${channelGroup}`);
    if (iFreqCtx && i1_fft.amplitudes.length > 0) {
        const N_i1 = i1_fft.amplitudes.length;
        let displayPointsCount = Math.floor(MAX_FFT_DISPLAY_FREQUENCY / FUNDAMENTAL_FREQUENCY) + 1;
        displayPointsCount = Math.min(displayPointsCount, Math.floor(N_i1 / 2) + 1);
        const chartLabels = i1_fft.frequencies.slice(0, displayPointsCount);
        if (chartLabels.length > 0) {
            new Chart(iFreqCtx, {
                type: 'bar',
                data: {
                    labels: chartLabels,
                    datasets: [
                        { label: 'I1 FFT', data: safeSlice(i1_fft.amplitudes, displayPointsCount), backgroundColor: COLOR_MAP[1] },
                        { label: 'I2 FFT', data: safeSlice(i2_fft.amplitudes, displayPointsCount), backgroundColor: COLOR_MAP[2] },
                        { label: 'I3 FFT', data: safeSlice(i3_fft.amplitudes, displayPointsCount), backgroundColor: COLOR_MAP[3] }
                    ]
                },
                options: {
                    responsive: true,
                    plugins: { title: { display: true, text: `Current FFT (Group ${channelGroup})` }},
                    scales: {
                        x: { title: { display: true, text: 'Frequency (Hz)' }},
                        y: { title: { display: true, text: 'Current' }}
                    }
                }
            });
        }
    }
});

// ?THD Graphs
   // ===============================================
// Helper: Create THD chart with Zones & Zoom
// ===============================================
// ---------------- MONTHLY THD ----------------
// ---------------- TODAY THD ----------------
console.log(@json($thdTodayLabels));
console.log(@json($thdTodayA));
console.log(@json($thdTodayB));
console.log(@json($thdTodayC));
new Chart(document.getElementById("thdToday"), {
    type: "line",
    data: {
        labels: @json($thdTodayLabels),
        datasets: [
            { label: "THD Va", data: @json($thdTodayA), borderColor: "red", fill: false },
            { label: "THD Vb", data: @json($thdTodayB), borderColor: "yellow", fill: false },
            { label: "THD Vc", data: @json($thdTodayC), borderColor: "blue", fill: false },
        ]
    },
    options: { responsive: true }
});

// new Chart(document.getElementById("thdMonth"), {
//     type: "line",
//     data: {
//         labels: @json($thdMonthLabels),
//         datasets: [
//             { label: "THD Va", data: @json($thdMonthA), borderColor: "red", fill: false },
//             { label: "THD Vb", data: @json($thdMonthB), borderColor: "yellow", fill: false },
//             { label: "THD Vc", data: @json($thdMonthC), borderColor: "blue", fill: false },
//         ]
//     },
//     options: { responsive: true }
// });
// // console.log("hello10");

// // // ---------------- WEEKLY THD ----------------
// new Chart(document.getElementById("thdWeek"), {
//     type: "line",
//     data: {
//         labels: @json($thdWeekLabels),
//         datasets: [
//             { label: "THD Va", data: @json($thdWeekA), borderColor: "red", fill: false },
//             { label: "THD Vb", data: @json($thdWeekB), borderColor: "yellow", fill: false },
//             { label: "THD Vc", data: @json($thdWeekC), borderColor: "blue", fill: false },
//         ]
//     },
//     options: { responsive: true }
// });

// Current Violatge Graphs 
   const graphData = @json($graph_data1);
   console.log(graphData);
    const timestamps= graphData.map(item => item.stime); // Assuming `timestamp` is a field
    const voltageRed = graphData.map(item => item.v1);
    const voltageYellow = graphData.map(item => item.v2);
    const voltageBlue = graphData.map(item => item.v3);
    const currentRed = graphData.map(item => item.i1);
    const currentYellow = graphData.map(item => item.i2);
    const currentBlue = graphData.map(item => item.i3);
// Simplified script to display three-phase voltage, current, and power factor graphs
console.log(voltageRed);
const voltageData = {
    red: voltageRed,
    yellow: voltageYellow,
    blue: voltageBlue
};
const currentData = {
    red: currentRed,
    yellow: currentYellow,
    blue: currentBlue
};
// const timestamps = timestamps1; // Dynamic timestamps

document.addEventListener('DOMContentLoaded', function() {
    initializeCharts();
});

function initializeCharts() {
    const chartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        animation: {
            duration: 300
        },
        scales: {
            x: {
                display: true,
                grid: {
                    color: 'rgba(255, 255, 255, 0.1)'
                },
                ticks: {
                    color: '#000'
                }
            },
            y: {
                display: true,
                grid: {
                    color: 'rgba(255, 255, 255, 0.1)'
                },
                ticks: {
                    color: '#000'
                }
            }
        },
        plugins: {
            legend: {
                display: true,
                position: 'top',
                labels: {
                    color: '#000',
                    usePointStyle: true,
                    padding: 20
                }
            }
        }
    };

    // Voltage Chart
    const voltageCtx = document.getElementById('voltageChart').getContext('2d');
    new Chart(voltageCtx, {
        type: 'line',
        data: {
            labels: timestamps,
            datasets: [
                {
                    label: 'L1(R)',
                    data: voltageData.red,
                    borderColor: '#ff0000',
                    backgroundColor: '#ff000020',
                    borderWidth: 2,
                    fill: false,
                    tension: 0.4
                },
                {
                    label:'L2(Y)',
                    data: voltageData.yellow,
                    borderColor: '#ffff00',
                    backgroundColor: '#ffff0020',
                    borderWidth: 2,
                    fill: false,
                    tension: 0.4
                },
                {
                    label: 'L3(B)',
                    data: voltageData.blue,
                    borderColor: '#0000ff',
                    backgroundColor: '#0000ff20',
                    borderWidth: 2,
                    fill: false,
                    tension: 0.4
                }
            ]
        },
        options: chartOptions
    });
    console.log("helloaaa");
    // Current Chart
    const currentCtx = document.getElementById('currentChart').getContext('2d');
    new Chart(currentCtx, {
        type: 'line',
        data: {
            labels: timestamps,
            datasets: [
                {
                    label: 'L1(R)',
                    data: currentData.red,
                    borderColor: '#ff0000',
                    backgroundColor: '#ff000020',
                    borderWidth: 2,
                    fill: false,
                    tension: 0.4
                },
                {
                    label: 'L2(Y)',
                    data: currentData.yellow,
                    borderColor: '#ffff00',
                    backgroundColor: '#ffff0020',
                    borderWidth: 2,
                    fill: false,
                    tension: 0.4
                },
                {
                    label: 'L3(B)',
                    data: currentData.blue,
                    borderColor: '#0000ff',
                    backgroundColor: '#0000ff20',
                    borderWidth: 2,
                    fill: false,
                    tension: 0.4
                }
            ]
        },
        options: chartOptions
    });

    console.log("helloccc");


}

</script>