@extends('layouts.app')

@section('center')
<link rel="stylesheet" href="{{ asset('assets') }}/vendor/morris/morris.css" />

<style>
    .morris-hover {
        background-color: #ffffff !important;
        border: 1px solid #ddd;
        color: #000000 !important;
        padding: 10px !important;
        border-radius: 6px;
    }

    .morris-hover .morris-hover-point {
        color: #000000 !important;
    }

    .chart-height {
        height: 300px;
    }

    .card-title {
        font-weight: 600;
    }
</style>

@if(empty($data))
    <div class="alert alert-danger text-center mt-4">
        <strong>Device not found.</strong>
    </div>
@else

@php
    $dailyNcValue = 0;
    $monthlyNcValue = 0;
    $dailyConsumptionValue = 0;
    $monthlyConsumptionValue = 0;

    if (!empty($daily_nc_loss) && count($daily_nc_loss) > 0) {
        $lastDailyNc = collect($daily_nc_loss)->last();
        $dailyNcValue = (float) (is_array($lastDailyNc) ? ($lastDailyNc['total'] ?? 0) : ($lastDailyNc->total ?? 0));
    }

    if (!empty($monthly_nc_loss) && count($monthly_nc_loss) > 0) {
        $lastMonthlyNc = collect($monthly_nc_loss)->last();
        $monthlyNcValue = (float) (is_array($lastMonthlyNc) ? ($lastMonthlyNc['total'] ?? 0) : ($lastMonthlyNc->total ?? 0));
    }

    if (!empty($daily_kwh) && count($daily_kwh) > 0) {
        $lastDailyConsumption = collect($daily_kwh)->last();
        $dailyConsumptionValue = (float) (is_array($lastDailyConsumption) ? ($lastDailyConsumption['total'] ?? 0) : ($lastDailyConsumption->total ?? 0));
    }

    if (!empty($monthly_kwh) && count($monthly_kwh) > 0) {
        $lastMonthlyConsumption = collect($monthly_kwh)->last();
        $monthlyConsumptionValue = (float) (is_array($lastMonthlyConsumption) ? ($lastMonthlyConsumption['total'] ?? 0) : ($lastMonthlyConsumption->total ?? 0));
    }

    $dailyRatio = $dailyConsumptionValue > 0 ? ($dailyNcValue / $dailyConsumptionValue) * 100 : 0;
    $monthlyRatio = $monthlyConsumptionValue > 0 ? ($monthlyNcValue / $monthlyConsumptionValue) * 100 : 0;

    $hasNoData =
        $latest_graph_data->isEmpty() &&
        $daily_kwh->isEmpty() &&
        $monthly_kwh->isEmpty() &&
        (empty($daily_nc_loss) || $daily_nc_loss->isEmpty()) &&
        (empty($monthly_nc_loss) || $monthly_nc_loss->isEmpty());
@endphp

@if($hasNoData)
    <div class="alert alert-warning text-center mt-4">
        <strong>No recent data available for this device.</strong>
    </div>
@else

<div class="row gutters">
    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12">
        <label class="mb-1"><strong>Device ID</strong></label>
        <input type="text" class="form-control" readonly value="{{ $data->global_device_id }}">
        <br/>
    </div>
</div>

<div class="row gutters">
    <div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Daily NC Loss</div>
            </div>
            <div class="card-body text-center">
                <h4 class="mb-0">{{ number_format($dailyNcValue, 4) }}</h4>
                <small class="text-muted">kWh</small>
            </div>
        </div>
    </div>

    <div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Monthly NC Loss</div>
            </div>
            <div class="card-body text-center">
                <h4 class="mb-0">{{ number_format($monthlyNcValue, 4) }}</h4>
                <small class="text-muted">kWh</small>
            </div>
        </div>
    </div>

    <div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Daily Consumption</div>
            </div>
            <div class="card-body text-center">
                <h4 class="mb-0">{{ number_format($dailyConsumptionValue, 2) }}</h4>
                <small class="text-muted">kWh</small>
            </div>
        </div>
    </div>

    <div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Monthly Consumption</div>
            </div>
            <div class="card-body text-center">
                <h4 class="mb-0">{{ number_format($monthlyConsumptionValue, 2) }}</h4>
                <small class="text-muted">kWh</small>
            </div>
        </div>
    </div>

    <div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Daily Ratio</div>
            </div>
            <div class="card-body text-center">
                <h4 class="mb-0">{{ number_format($dailyRatio, 2) }}</h4>
                <small class="text-muted">%</small>
            </div>
        </div>
    </div>

    <div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Monthly Ratio</div>
            </div>
            <div class="card-body text-center">
                <h4 class="mb-0">{{ number_format($monthlyRatio, 2) }}</h4>
                <small class="text-muted">%</small>
            </div>
        </div>
    </div>
</div>

<div class="row gutters">
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Current</div>
            </div>
            <div class="card-body">
                <div id="currentChart" class="chart-height"></div>
            </div>
        </div>
    </div>

    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Voltage</div>
            </div>
            <div class="card-body">
                <div id="voltageChart" class="chart-height"></div>
            </div>
        </div>
    </div>
</div>

<div class="row gutters">
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">KVA</div>
            </div>
            <div class="card-body">
                <div id="kvaChart" class="chart-height"></div>
            </div>
        </div>
    </div>
</div>

<div class="row gutters">
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Daily kWh</div>
            </div>
            <div class="card-body">
                <div id="dailyKWH" class="chart-height"></div>
            </div>
        </div>
    </div>

    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Monthly kWh</div>
            </div>
            <div class="card-body">
                <div id="monthlyKWH" class="chart-height"></div>
            </div>
        </div>
    </div>
</div>

<div class="row gutters">
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Daily Neutral Loss kWh</div>
            </div>
            <div class="card-body">
                <div id="dailyNcLoss" class="chart-height"></div>
            </div>
        </div>
    </div>

    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Monthly Neutral Loss kWh</div>
            </div>
            <div class="card-body">
                <div id="monthlyNcLoss" class="chart-height"></div>
            </div>
        </div>
    </div>
</div>

<div class="row gutters">
    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Daily kWh vs Daily Neutral Loss vs Daily Ratio</div>
            </div>
            <div class="card-body">
                <div id="dailyRatioGraph" class="chart-height"></div>
            </div>
        </div>
    </div>

    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">Monthly kWh vs Monthly Neutral Loss vs Monthly Ratio</div>
            </div>
            <div class="card-body">
                <div id="monthlyRatioGraph" class="chart-height"></div>
            </div>
        </div>
    </div>
</div>

@endif
@endif

@push('scripts')
<script src="{{ asset('assets') }}/vendor/morris/raphael-min.js"></script>
<script src="{{ asset('assets') }}/vendor/morris/morris.min.js"></script>
<script>
$(document).ready(function () {
    let latest_graph_data = @json($latest_graph_data ?? []);
    let daily_kwh = @json($daily_kwh ?? []);
    let monthly_kwh = @json($monthly_kwh ?? []);
    let daily_nc_loss = @json($daily_nc_loss ?? []);
    let monthly_nc_loss = @json($monthly_nc_loss ?? []);

    if (
        (!latest_graph_data || latest_graph_data.length === 0) &&
        (!daily_kwh || daily_kwh.length === 0) &&
        (!monthly_kwh || monthly_kwh.length === 0) &&
        (!daily_nc_loss || daily_nc_loss.length === 0) &&
        (!monthly_nc_loss || monthly_nc_loss.length === 0)
    ) {
        return;
    }

    let currentData = [];
    let voltageData = [];
    let kvaData = [];
    let dailyRatioData = [];
    let monthlyRatioData = [];

    function pad(num) {
        return String(num).padStart(2, '0');
    }

    function formatDateTime(dateObj) {
        return pad(dateObj.getDate()) + '-' +
               pad(dateObj.getMonth() + 1) + '-' +
               dateObj.getFullYear() + ' ' +
               pad(dateObj.getHours()) + ':' +
               pad(dateObj.getMinutes()) + ':' +
               pad(dateObj.getSeconds());
    }

    $.each(latest_graph_data, function(index, item) {
        let i1 = parseFloat(item.i1) || 0;
        let i2 = parseFloat(item.i2) || 0;
        let i3 = parseFloat(item.i3) || 0;

        let v1 = parseFloat(item.v1) || 0;
        let v2 = parseFloat(item.v2) || 0;
        let v3 = parseFloat(item.v3) || 0;

        let kva1 = (v1 * i1) / 1000;
        let kva2 = (v2 * i2) / 1000;
        let kva3 = (v3 * i3) / 1000;

        currentData.push({
            period: item.stime,
            phase_a: parseFloat(i1.toFixed(2)),
            phase_b: parseFloat(i2.toFixed(2)),
            phase_c: parseFloat(i3.toFixed(2))
        });

        voltageData.push({
            period: item.stime,
            voltage_phase_a: parseFloat(v1.toFixed(2)),
            voltage_phase_b: parseFloat(v2.toFixed(2)),
            voltage_phase_c: parseFloat(v3.toFixed(2))
        });

        kvaData.push({
            period: item.stime,
            kva1: parseFloat(kva1.toFixed(2)),
            kva2: parseFloat(kva2.toFixed(2)),
            kva3: parseFloat(kva3.toFixed(2))
        });
    });

    if (daily_kwh && daily_kwh.length > 0) {
        daily_kwh.forEach(function(item, index) {
            let consumption = parseFloat(item.total) || 0;
            let neutralLoss = 0;

            if (daily_nc_loss && daily_nc_loss[index]) {
                neutralLoss = parseFloat(daily_nc_loss[index].total) || 0;
            }

            let ratio = consumption > 0 ? (neutralLoss / consumption) * 100 : 0;

            dailyRatioData.push({
                period: item.period,
                consumption: parseFloat(consumption.toFixed(2)),
                neutral_loss: parseFloat(neutralLoss.toFixed(4)),
                ratio: parseFloat(ratio.toFixed(2))
            });
        });
    }

    if (monthly_kwh && monthly_kwh.length > 0) {
        monthly_kwh.forEach(function(item, index) {
            let consumption = parseFloat(item.total) || 0;
            let neutralLoss = 0;

            if (monthly_nc_loss && monthly_nc_loss[index]) {
                neutralLoss = parseFloat(monthly_nc_loss[index].total) || 0;
            }

            let ratio = consumption > 0 ? (neutralLoss / consumption) * 100 : 0;

            monthlyRatioData.push({
                period: item.period,
                consumption: parseFloat(consumption.toFixed(2)),
                neutral_loss: parseFloat(neutralLoss.toFixed(4)),
                ratio: parseFloat(ratio.toFixed(2))
            });
        });
    }

    function getAxisRange(data, ykeys, step = 10) {
        let allValues = [];

        data.forEach(item => {
            ykeys.forEach(key => {
                let value = parseFloat(item[key]);
                if (!isNaN(value)) {
                    allValues.push(value);
                }
            });
        });

        if (allValues.length === 0) {
            return { ymin: 0, ymax: step, numLines: 1 };
        }

        let min = Math.min(...allValues);
        let max = Math.max(...allValues);

        let ymin = Math.floor(min / step) * step;
        let ymax = Math.ceil(max / step) * step;

        if (ymin === ymax) {
            ymax = ymin + step;
        }

        let numLines = Math.max(1, Math.round((ymax - ymin) / step));

        return { ymin, ymax, numLines };
    }

    function drawLineGraph(elementId, data, ykeys, labels, colors, options = {}) {
        $('#' + elementId).empty();

        if (!data || data.length === 0) {
            $('#' + elementId).html('<div class="text-center text-muted mt-5">No data found</div>');
            return;
        }

        let chartOptions = {
            element: elementId,
            data: data,
            xkey: 'period',
            ykeys: ykeys,
            labels: labels,
            resize: true,
            hideHover: 'auto',
            parseTime: true,
            gridLineColor: '#e5e5e5',
            lineColors: colors,
            pointFillColors: ['#ffffff'],
            pointStrokeColors: colors,
            lineWidth: 2,
            pointSize: 3,
            xLabelFormat: function(x) {
                return formatDateTime(x);
            },
            dateFormat: function(x) {
                return formatDateTime(new Date(x));
            }
        };

        if (options.fixedStep === true) {
            let axis = getAxisRange(data, ykeys, options.step || 10);
            chartOptions.ymin = axis.ymin;
            chartOptions.ymax = axis.ymax;
            chartOptions.numLines = axis.numLines;
            chartOptions.yLabelFormat = function(y) {
                return y.toFixed(0);
            };
        }

        Morris.Line(chartOptions);
    }

    function drawBarGraph(elementId, data, labelTitle, valueLabel = 'Total kWh', decimals = 2) {
        $('#' + elementId).empty();

        if (!data || data.length === 0) {
            $('#' + elementId).html('<div class="text-center text-muted mt-5">No data found</div>');
            return;
        }

        Morris.Bar({
            element: elementId,
            data: data,
            xkey: 'period',
            ykeys: ['total'],
            labels: [valueLabel],
            resize: true,
            hideHover: 'auto',
            barColors: ['#190be2'],
            gridLineColor: '#e5e5e5',
            xLabelAngle: 45,
            parseTime: false,
            hoverCallback: function(index, options, content, row) {
                return `
                    <div class="morris-hover-row-label"><strong>${labelTitle}:</strong> ${row.period}</div>
                    <div class="morris-hover-point"><strong>${valueLabel}:</strong> ${parseFloat(row.total).toFixed(decimals)}</div>
                `;
            }
        });
    }

    function drawRatioGraph(elementId, data, labelTitle) {
    $('#' + elementId).empty();

    if (!data || data.length === 0) {
        $('#' + elementId).html('<div class="text-center text-muted mt-5">No data found</div>');
        return;
    }

    Morris.Bar({
        element: elementId,
        data: data,
        xkey: 'period',
        ykeys: ['ratio'],   // ✅ ONLY ratio
        labels: ['Ratio %'],
        resize: true,
        hideHover: 'auto',
        barColors: ['#f06c25'], // green for ratio
        gridLineColor: '#e5e5e5',
        xLabelAngle: 45,
        parseTime: false,
        hoverCallback: function(index, options, content, row) {
            return `
                <div class="morris-hover-row-label"><strong>${labelTitle}:</strong> ${row.period}</div>
                <div class="morris-hover-point"><strong>Ratio %:</strong> ${parseFloat(row.ratio).toFixed(2)}</div>
            `;
        }
    });
}

    drawLineGraph(
        'currentChart',
        currentData,
        ['phase_a', 'phase_b', 'phase_c'],
        ['Phase A', 'Phase B', 'Phase C'],
        ['#0066ff', '#e83e8c', '#2b2f82']
    );

    drawLineGraph(
        'voltageChart',
        voltageData,
        ['voltage_phase_a', 'voltage_phase_b', 'voltage_phase_c'],
        ['Voltage A', 'Voltage B', 'Voltage C'],
        ['#28a745', '#ff9800', '#6f42c1'],
        { fixedStep: true, step: 10 }
    );

    drawLineGraph(
        'kvaChart',
        kvaData,
        ['kva1', 'kva2', 'kva3'],
        ['Line 1', 'Line 2', 'Line 3'],
        ['#17a2b8', '#dc3545', '#ffc107']
    );

    drawBarGraph('dailyKWH', daily_kwh, 'Date', 'Total kWh', 2);
    drawBarGraph('monthlyKWH', monthly_kwh, 'Month', 'Total kWh', 2);

    drawBarGraph('dailyNcLoss', daily_nc_loss, 'Date', 'Neutral Loss kWh', 4);
    drawBarGraph('monthlyNcLoss', monthly_nc_loss, 'Month', 'Neutral Loss kWh', 4);

    drawRatioGraph('dailyRatioGraph', dailyRatioData, 'Date');
    drawRatioGraph('monthlyRatioGraph', monthlyRatioData, 'Month');
});
</script>
@endpush

@endsection