@extends('layouts.app')

@section('center')
    <style>
        .wb {
            border-left: 1px solid white !important;
        }

        .bb {
            border-left: 1px solid lightgray !important;
        }

        .rbg {
            border-right: 1px solid lightgray !important;
        }

        .chart-card {
            background: #fff;
            border-radius: 6px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
        }

        .chart-wrapper {
            position: relative;
            width: 100%;
            min-height: 420px;
        }

        #consumptionChart {
            width: 100% !important;
            height: 420px !important;
        }
    </style>

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

    <div class="row gutters">

        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mb-3">
            <form id="graphFilterForm">
                <div class="form-row align-items-end d-flex flex-wrap" style="gap: 10px;">

                    <!-- Device ID -->
                    <div class="form-group mb-0" style="min-width: 200px;">
                        <label class="label">Device ID</label>
                        <select class="form-control selectpicker" data-live-search="true" name="DeviceId" id="device_id">
                            <option value="">Select Device ID</option>
                            @foreach($tr_data as $row)
                                <option value="{{ $row->global_device_id }}"
                                    @if(request('DeviceId') == $row->global_device_id) selected @endif>
                                    {{ $row->global_device_id }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- From -->
                    <div class="form-group mb-0" style="min-width: 200px;">
                        <label class="label">From</label>
                        <input type="text" class="form-control datepicker" name="from" id="from_date" value="{{ request('from', date('m/d/Y')) }}">
                    </div>

                    <!-- To -->
                    <div class="form-group mb-0" style="min-width: 200px;">
                        <label class="label">To</label>
                        <input type="text" class="form-control datepicker" name="to" id="to_date" value="{{ request('to', date('m/d/Y')) }}">
                    </div>

                    <!-- Graph Type -->
                    <div class="form-group mb-0" style="min-width: 200px;">
                        <label class="label">Graph Type</label>
                        <select class="form-control" id="graph_type" name="graph_type">
                            <option value="daily">Daily</option>
                            <option value="monthly">Monthly</option>
                        </select>
                    </div>

                    <!-- Generate -->
                    <div class="form-group mb-0">
                        <label class="label d-block">&nbsp;</label>
                        <button type="button" class="btn btn-primary generate" onclick="loadGraph()">Generate</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Chart -->
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="chart-card">
                <h4 class="mb-3">Solar vs WAPDA Consumption Graph</h4>
                <div class="chart-wrapper">
                    <canvas id="consumptionChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Optional summary table -->
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mt-4">
            <div class="table-responsive">
                <div class="table-container">
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table m-0 table-hover" style="font-size: 12px !important;" id="graphDataTable">
                            <thead style="position: sticky; top: 0; z-index: 1;">
                                <tr>
                                    <th>Period</th>
                                    <th>WAPDA Consumption (kWh)</th>
                                    <th>Solar Consumption (kWh)</th>
                                </tr>
                            </thead>
                            <tbody id="graphTableBody">
                                <tr>
                                    <td colspan="3" class="text-center text-muted">No data loaded</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script src="{{ asset('assets') }}/vendor/datepicker/js/picker.js"></script>
        <script src="{{ asset('assets') }}/vendor/datepicker/js/picker.date.js"></script>
        <script src="{{ asset('assets') }}/vendor/datepicker/js/custom-picker.js"></script>
        <script src="{{ asset('assets') }}/vendor/bs-select/bs-select.min.js"></script>
        <script src="{{ asset('assets') }}/js/main.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

        <script>
            let chartInstance = null;

            function formatDateForApi(dateStr) {
                if (!dateStr) return '';

                // if already yyyy-mm-dd
                if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
                    return dateStr;
                }

                // convert mm/dd/yyyy to yyyy-mm-dd
                let parts = dateStr.split('/');
                if (parts.length === 3) {
                    let month = parts[0].padStart(2, '0');
                    let day = parts[1].padStart(2, '0');
                    let year = parts[2];
                    return `${year}-${month}-${day}`;
                }

                return dateStr;
            }

            function loadGraph() {
                let deviceId = $('#device_id').val();
                let fromDate = formatDateForApi($('#from_date').val());
                let toDate = formatDateForApi($('#to_date').val());
                let graphType = $('#graph_type').val();

                if (!deviceId) {
                    alert('Please select Device ID');
                    return;
                }

                $.ajax({
                    url: "{{ route('solar.wapda.graph.data') }}",
                    type: "GET",
                    data: {
                        device_id: deviceId,
                        from_date: fromDate,
                        to_date: toDate,
                        type: graphType
                    },
                    success: function(response) {
                        if (!response.status || !response.data || response.data.length === 0) {
                            if (chartInstance) {
                                chartInstance.destroy();
                            }

                            $('#graphTableBody').html(`
                                <tr>
                                    <td colspan="3" class="text-danger text-center">Record Not Found</td>
                                </tr>
                            `);

                            alert('No data found');
                            return;
                        }

                        let labels = response.data.map(item => item.label);
                        let wapdaData = response.data.map(item => parseFloat(item.wapda_kwh) || 0);
                        let solarData = response.data.map(item => parseFloat(item.solar_kwh) || 0);

                        drawChart(labels, wapdaData, solarData, graphType);
                        fillTable(response.data);
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                        alert('Error loading graph data');
                    }
                });
            }

            function drawChart(labels, wapdaData, solarData, graphType) {
                const ctx = document.getElementById('consumptionChart').getContext('2d');

                if (chartInstance) {
                    chartInstance.destroy();
                }

                chartInstance = new Chart(ctx, {
                    type: graphType === 'daily' ? 'bar' : 'line',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: 'WAPDA Consumption (kWh)',
                                data: wapdaData,
                                borderWidth: 2,
                                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                                borderColor: 'rgba(54, 162, 235, 1)',
                                fill: false,
                                tension: 0.3
                            },
                            {
                                label: 'Solar Consumption (kWh)',
                                data: solarData,
                                borderWidth: 2,
                                backgroundColor: 'rgba(255, 206, 86, 0.5)',
                                borderColor: 'rgba(255, 206, 86, 1)',
                                fill: false,
                                tension: 0.3
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: true
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: 'kWh'
                                }
                            },
                            x: {
                                title: {
                                    display: true,
                                    text: graphType === 'daily' ? 'Date' : 'Month'
                                }
                            }
                        }
                    }
                });
            }

            function fillTable(rows) {
                let html = '';

                rows.forEach(row => {
                    html += `
                        <tr>
                            <td>${row.label ?? ''}</td>
                            <td>${parseFloat(row.wapda_kwh || 0).toFixed(2)}</td>
                            <td>${parseFloat(row.solar_kwh || 0).toFixed(2)}</td>
                        </tr>
                    `;
                });

                $('#graphTableBody').html(html);
            }

            $(document).ready(function () {
                $('.selectpicker').selectpicker();

                @if(request('DeviceId'))
                    $('#graph_type').val('daily');
                    loadGraph();
                @endif
            });
        </script>
    @endpush
@endsection