@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;
        }
    </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">
            <div class="form-row align-items-end d-flex flex-wrap" style="gap: 10px;">

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

                <!-- From Date -->
                <div class="form-group mb-0" style="min-width: 200px;">
                    <label class="label">From</label>
                    <input type="date" id="from_date" class="form-control">
                </div>

                <!-- To Date -->
                <div class="form-group mb-0" style="min-width: 200px;">
                    <label class="label">To</label>
                    <input type="date" id="to_date" class="form-control">
                </div>

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

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

                <!-- ✅ Download Button (RIGHT SIDE) -->
                <div class="form-group mb-0 ml-auto">
                    <label class="label d-block">&nbsp;</label>
                    <button type="button" onclick="exportTableToExcel()" class="btn btn-success">
                        <i class="icon-file-excel"></i> Download Excel
                    </button>
                </div>

            </div>
        </div>

        <!-- GRAPH -->
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mb-1">
            <canvas id="consumptionChart"></canvas>
        </div>

        <!-- TABLE -->
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="table-responsive">
                <div class="table-container">
                    <div class="table-responsive" style="max-height: 800px; overflow-y: auto;">
                        <table class="table m-0 table-hover" style="font-size: 10px !important;">
                            <thead style="position: sticky; top: 0; z-index: 1;">
                                <tr>
                                    <th>Period</th>
                                    <th>WAPDA (kWh)</th>
                                    <th>Solar (kWh)</th>
                                </tr>
                            </thead>
                            <tbody id="graphTableBody">
                                <tr>
                                    <td colspan="3" class="text-danger text-center">No Data</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 loadGraph() {
                let deviceId = $('#device_id').val();
                let fromDate = $('#from_date').val();
                let toDate = $('#to_date').val();
                let type = $('#graph_type').val();

                if (!deviceId) {
                    alert('Select Device First');
                    return;
                }

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

                $.ajax({
                    url: "{{ route('solar.wapda.graph.data') }}",
                    type: "GET",
                    data: {
                        device_id: deviceId,
                        from_date: fromDate,
                        to_date: toDate,
                        type: type
                    },
                    success: function(res) {
                        if (!res.status || res.data.length === 0) {
                            if (chartInstance) chartInstance.destroy();
                            $('#graphTableBody').html(`
                                <tr>
                                    <td colspan="3" class="text-danger text-center">No Data Found</td>
                                </tr>
                            `);
                            return;
                        }

                        let labels = [];
                        let wapda = [];
                        let solar = [];
                        let tableHtml = '';

                        res.data.forEach(row => {
                            labels.push(row.label);
                            let w = parseFloat(row.wapda_kwh || 0);
                            let s = parseFloat(row.solar_kwh || 0);
                            wapda.push(w);
                            solar.push(s);
                            tableHtml += `
                                <tr>
                                    <td>${row.label}</td>
                                    <td>${w.toFixed(2)}</td>
                                    <td>${s.toFixed(2)}</td>
                                </tr>
                            `;
                        });

                        $('#graphTableBody').html(tableHtml);
                        drawChart(labels, wapda, solar, type);
                    }
                });
            }

            function drawChart(labels, wapda, solar, type) {
                let ctx = document.getElementById('consumptionChart').getContext('2d');
                if (chartInstance) chartInstance.destroy();

                chartInstance = new Chart(ctx, {
                    type: type === 'daily' ? 'bar' : 'line',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: 'WAPDA',
                                data: wapda,
                                borderWidth: 2,
                                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                                borderColor: 'rgba(54, 162, 235, 1)'
                            },
                            {
                                label: 'Solar',
                                data: solar,
                                borderWidth: 2,
                                backgroundColor: 'rgba(255, 206, 86, 0.5)',
                                borderColor: 'rgba(255, 206, 86, 1)'
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        plugins: {
                            legend: {
                                position: 'top',
                            }
                        }
                    }
                });
            }

            function exportTableToExcel() {
                const table = document.querySelector('.table');
                if (!table) {
                    alert('Table not found!');
                    return;
                }
                const ws = XLSX.utils.table_to_sheet(table);
                const wb = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(wb, ws, 'Solar_WAPDA_Data');
                XLSX.writeFile(wb, 'solar_wapda_data.xlsx');
            }
        </script>
    @endpush
@endsection