@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">
            <form action="{{route('currentLogWithImbalance')}}">
                <div class="row gutters">
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2">

                        <div class="form-group">
                            <label class="label">Device ID</label>
                            <select class="form-control selectpicker" data-live-search="true" class="form-control "
                                    name="DeviceId">
                                <option value=''>Select Device ID</option>
                                @foreach($tr_data as $k => $row)
                                    <option value="{{$row->global_device_id}}" @isset($_GET["DeviceId"])
                                        @if($_GET["DeviceId"]==$row->global_device_id)
                                            {{'selected'}}
                                            @endif
                                        @endisset>{{$row->global_device_id}}</option>
                                @endforeach

                            </select>
                        </div>


                    </div>


                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3">

                        <div class="form-group">
                            <label class="label">From Date</label>
{{--                            <input type="text" class="form-control datepicker" name="from" placeholder="From"--}}
                            <input type="datetime-local" class="form-control" name="from" placeholder="From"
                                   @isset($_GET["from"])
                                       value="{{$_GET['from']}}"
                                @endisset >
                        </div>

                    </div>

                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3">

                        <div class="form-group">
                            <label class="label">To Date</label>
{{--                            <input type="text" class="form-control datepicker" name="to" placeholder="To"--}}
                            <input type="datetime-local" class="form-control" name="to" placeholder="To"
                                   @isset($_GET["to"])
                                       value="{{$_GET['to']}}"
                                @endisset
                            >
                        </div>

                    </div>

                    <div class="col-xl-2 col-lg col-md-2 col-sm-2 col-12 ">
                        <div class="form-group">
                            <label class="label">&nbsp;</label>
                            <button type="submit" class="form-control btn btn-primary generate">Generate</button>
                        </div>

                    </div>
                </div>
            </form>
        </div>

        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-2 col-12">
            <div class="table-responsive">
                <div class="table-container">
                <div class="col-xl-2 col-lg col-md-2 col-sm-2 col-12 ">
                    <div class="form-group">
                        <label class="label">&nbsp;</label>
                        <button type="button" class="form-control btn btn-success" onclick="exportTableToCSV('imbalance-data.csv')">
                            Export CSV
                        </button>
                    </div>
                </div>
                    <div class="table-responsive" style="max-height: 800px; overflow-y: auto;">
                        <table class="table m-0 table-hover" style="font-size: 10px !important;" id='exportableTable'>
                            <thead style="position: sticky; top: 0;  z-index: 1;">
                            <tr>
                                <th >Time</th>
                                <th >GlobalID</th>
                                <th >Timing</th>
                                <th >i1</th>
                                <th>i2</th>
                                <th>i3</th>

                                <th>Average</th>


                                <th>Max Deviation</th>
                                <th>Imbalance %</th>
                                <!-- <th rowspan="2">isRv</th> -->
                                <!-- <th colspan="3" class="wb text-center">Voltages</th> -->
                                <!-- <th colspan="3" class="wb text-center">Currents</th> -->
                                <!-- <th colspan="3" class="wb text-center">Power Factors</th> -->
                                <!-- <th class="wb text-center">NC</th> -->
                                <!-- <th colspan="3" class="wb text-center">Load Direction</th> -->
                                <!-- <th colspan="6" class="wb text-center">Energy (kWh)</th> -->
                                <!-- <th colspan="6" class="wb text-center">Energy (rkWh)</th> -->
                            </tr>
                            <tr>
                                <!-- Voltages -->
                                <!-- <th class="wb">v1</th>
                                <th>v2</th>
                                <th>v3</th> -->
                                <!-- Currents -->
                                <!-- <th class="wb">i1</th>
                                <th>i2</th>
                                <th>i3</th> -->
                                <!-- Power Factors -->
                                <!-- <th class="wb">pf1</th>
                                <th>pf2</th>
                                <th>pf3</th> -->

                                <!-- Power Factors -->
                                <!-- <th class="wb">pf1</th>
                                <th>pf2</th>
                                <th>pf3</th> -->

                                <!-- <th class="wb"></th>
                                <th class="wb">i1</th>
                                <th>i2</th>
                                <th>i3</th> -->

                                <!-- Energy (kWh) -->
                                <!-- <th class="wb">kwho1</th>
                                <th>kwho2</th>
                                <th>kwho3</th>
                                <th>kwhp1</th>
                                <th>kwhp2</th>
                                <th>kwhp3</th> -->
                                <!-- Reactive Energy (rkWh) -->
                                <!-- <th class="wb">rkwho1</th>
                                <th>rkwho2</th>
                                <th>rkwho3</th>
                                <th>rkwhp1</th>
                                <th>rkwhp2</th>
                                <th>rkwhp3</th> -->
                            </tr>
                            </thead>
                            <tbody class="recent-record-row">
                            @if($data && (!$data->isEmpty()))
                                @foreach($data as $row)

                                    <tr>
                                        <td>{{appDate($row->dtime)}}</td>
                                        <td class="bb "
                                            @if($row->dmdt_phase==1) style="color:blue;" @endif > {{$row->global_device_id}}</td>
                                        <td class="bb">@if($row->isPk==1)
                                                Peak
                                            @else
                                                Offpeak
                                            @endif </td>
                                        <!-- <td>{{$row->isRv}}</td> -->
                                        <!-- Voltages -->
                                      
                                        <!-- Currents -->
                                        <td class="bb">{{$row->i1}}</td>
                                        <td>{{$row->i2}}</td>
                                        <td>{{$row->i3}}</td>
                                        @php
                                            $avg=($row->i1+$row->i2+$row->i3)/3;
                                            $maxDeviation = max(
                                                abs($avg - $row->i1),
                                                abs($avg - $row->i2),
                                                abs($avg - $row->i3)
                                            );
                                            $imbalance = ($maxDeviation / $avg) * 100;
                                        @endphp

                                        <td class="bb">{{$avg}}</td>
                                        <td class="bb">{{$maxDeviation}}</td>
                                        <td class="bb">{{$imbalance}}</td>
                                        <!-- Power Factors -->
                                       


                                       


                                    </tr>

                                @endforeach
                            @else
                                <tr>
                                    <td colspan="25" class="text-danger">Record Not Found</td>
                                </tr>
                            @endif
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="8" class="text-right">Overall Avg Imbalance (%)</th>
                                    <th id="avgImbalanceCell" style="font-weight:bold;" class="bb"></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <div class="d-flex  mt-3">
                        {{ $data->appends(request()->query())->links('pagination::bootstrap-4') }} <!-- You can change the pagination view style -->
                    </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>
function exportTableToCSV(filename) {
    const table = document.getElementById("exportableTable");
    if (!table) {
        alert("Table not found!");
        return;
    }

    let csv = [];
    const rows = table.querySelectorAll("tr");

    rows.forEach(row => {
        let cols = row.querySelectorAll("th, td");
        let rowData = [];

        cols.forEach(col => {
            // Clean & escape text
            let text = col.innerText.replace(/"/g, '""');
            rowData.push(`"${text}"`);
        });

        csv.push(rowData.join(","));
    });

    // Create CSV blob
    let csvFile = new Blob([csv.join("\n")], { type: "text/csv" });

    // Trigger file download
    let downloadLink = document.createElement("a");
    downloadLink.href = URL.createObjectURL(csvFile);
    downloadLink.download = filename;
    downloadLink.click();
}

document.addEventListener("DOMContentLoaded", function() {
    const table = document.getElementById("exportableTable");
    const rows = table.querySelectorAll("tbody tr");

    let sum = 0;
    let count = 0;

    rows.forEach(row => {
        const imbalanceCell = row.querySelector("td:nth-child(9)"); // 9th column
        if (imbalanceCell) {
            const value = parseFloat(imbalanceCell.innerText);
            if (!isNaN(value)) {
                sum += value;
                count++;
            }
        }
    });

    const avg = count > 0 ? (sum / count).toFixed(3) : 0;

    document.getElementById("avgImbalanceCell").innerText = avg;
});
</script>


    @endpush

@endsection