@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;
    }

    .calc-kva {
        font-weight: bold;
        color: #0d6efd;
    }

    .calc-kw {
        font-weight: bold;
        color: #198754;
    }

    .calc-kwh {
        font-weight: bold;
        color: #dc3545;
    }

    .table thead th {
        background: #1f2937;
        color: white;
        vertical-align: middle;
        text-align: center;
        white-space: nowrap;
    }

    .table tbody td {
        white-space: nowrap;
        vertical-align: middle;
        text-align: center;
    }

    .device-id {
        color: blue;
        font-weight: bold;
    }

    .filter-card {
        background: white;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
</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">

    {{-- Filter Form --}}
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
        <div class="filter-card">
            <form action="{{ route('kvaLog') }}" method="GET">
                <div class="row gutters">

                    {{-- Device ID --}}
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-12">
                        <div class="form-group">
                            <label class="label">Device ID</label>

                            <select class="form-control selectpicker"
                                    data-live-search="true"
                                    name="DeviceId">

                                <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>
                    </div>

                    {{-- From Date --}}
                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                        <div class="form-group">
                            <label class="label">From Date</label>

                            <input type="datetime-local"
                                   class="form-control"
                                   name="from"
                                   value="{{ request('from') }}">
                        </div>
                    </div>

                    {{-- To Date --}}
                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                        <div class="form-group">
                            <label class="label">To Date</label>

                            <input type="datetime-local"
                                   class="form-control"
                                   name="to"
                                   value="{{ request('to') }}">
                        </div>
                    </div>

                    {{-- Generate Button --}}
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 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>
                    <!-- ✅ Download Button (RIGHT SIDE) -->
                    <div class="form-group mb-0 ml-auto">
                        <label class="label d-block">&nbsp;</label>
                        <button type="button" onclick="exportTableToExcel('logs')" class="btn btn-success">
                            <i class="fas fa-file-excel"></i> Download Excel
                        </button>
                    </div>

                    {{-- Reset Button --}}
                    {{-- <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-12">
                        <div class="form-group">
                            <label class="label">&nbsp;</label>

                            <a href="{{ route('kvaLog') }}" class="form-control btn btn-secondary">
                                Reset
                            </a>
                        </div>
                    </div> --}}

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

    {{-- Table --}}
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
        <div class="table-container">

            <div class="table-responsive" style="max-height: 800px; overflow-y: auto;">

                <table class="table table-bordered table-striped m-0" style="font-size:10px !important;">

                    <thead style="position: sticky; top: 0; z-index: 1;">

                        {{-- Main Header --}}
                        <tr>
                            <th class="wb">Time</th>
                            <th class="wb">Global ID</th>

                            <th colspan="3" class="text-center wb">Voltages</th>
                            <th colspan="3" class="text-center wb">Currents</th>
                            <th colspan="3" class="text-center wb">Power Factor</th>

                            <th colspan="3" class="text-center wb">Average / Sum</th>
                            <th colspan="2" class="text-center wb">Calculated</th>

                            <th colspan="3" class="text-center wb">Stored kVA</th>
                            <th colspan="3" class="text-center wb">Stored kVAR</th>

                            <th colspan="6" class="text-center wb">kVARh</th>
                            <th colspan="6" class="text-center wb">rkVARh</th>
                        </tr>

                        {{-- Sub Header --}}
                        <tr>
                            <th></th>
                            <th></th>

                            {{-- Voltages --}}
                            <th class="wb">V1</th>
                            <th>V2</th>
                            <th>V3</th>

                            {{-- Currents --}}
                            <th class="wb">i1</th>
                            <th>i2</th>
                            <th>i3</th>

                            {{-- PF --}}
                            <th class="wb">PF1</th>
                            <th>PF2</th>
                            <th>PF3</th>

                            {{-- Average / Sum --}}
                            <th class="wb">Avg V</th>
                            <th>Total Current</th>
                            <th>Avg PF</th>

                            {{-- Calculated --}}
                            <th class="wb">kVA</th>
                            <th>kW</th>
                            <!-- <th>5 Min kWh</th> -->

                            {{-- Stored kVA --}}
                            <th class="wb">kVA1</th>
                            <th>kVA2</th>
                            <th>kVA3</th>

                            {{-- Stored kVAR --}}
                            <th class="wb">kVAR1</th>
                            <th>kVAR2</th>
                            <th>kVAR3</th>

                            {{-- kVARh --}}
                            <th class="wb">O1</th>
                            <th>O2</th>
                            <th>O3</th>
                            <th>P1</th>
                            <th>P2</th>
                            <th>P3</th>

                            {{-- rkVARh --}}
                            <th class="wb">O1</th>
                            <th>O2</th>
                            <th>O3</th>
                            <th>P1</th>
                            <th>P2</th>
                            <th class="rbg">P3</th>
                        </tr>

                    </thead>

                    <tbody>
                        @forelse($data as $row)

                            <tr>
                                {{-- Time --}}
                                <td>
                                    @if(!empty($row->dtime))
                                        {{ appDate($row->dtime) }}
                                    @elseif(!empty($row->stime))
                                        {{ appDate($row->stime) }}
                                    @else
                                        -
                                    @endif
                                </td>

                                {{-- Device ID --}}
                                <td class="bb device-id">
                                    {{ $row->global_device_id ?? '-' }}
                                </td>

                                {{-- Voltages --}}
                                <td class="bb">
                                    {{ number_format((float) ($row->v1 ?? 0), 2) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->v2 ?? 0), 2) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->v3 ?? 0), 2) }}
                                </td>

                                {{-- Currents --}}
                                <td class="bb">
                                    {{ number_format((float) ($row->i1 ?? 0), 2) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->i2 ?? 0), 2) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->i3 ?? 0), 2) }}
                                </td>

                                {{-- Power Factor --}}
                                <td class="bb">
                                    {{ number_format((float) ($row->pf1 ?? 0), 3) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->pf2 ?? 0), 3) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->pf3 ?? 0), 3) }}
                                </td>

                                {{-- Average Voltage --}}
                                <td class="bb">
                                    {{ number_format((float) ($row->avg_voltage ?? 0), 2) }}
                                </td>

                                {{-- Sum Current --}}
                                <td>
                                    {{ number_format((float) ($row->sum_current ?? 0), 2) }}
                                </td>

                                {{-- Average PF --}}
                                <td>
                                    {{ number_format((float) ($row->avg_pf ?? 0), 3) }}
                                </td>

                                {{-- Calculated kVA --}}
                                <td class="bb calc-kva">
                                    {{ number_format((float) ($row->calculated_kva ?? 0), 3) }}
                                </td>

                                {{-- Calculated kW --}}
                                <td class="calc-kw">
                                    {{ number_format((float) ($row->calculated_kw ?? 0), 3) }}
                                </td>

                                {{-- Calculated 5-Min kWh --}}
                                <!-- <td class="calc-kwh">
                                    {{-- {{ number_format((float) ($row->calculated_kwh_5min ?? 0), 5) }} --}}
                                </td> -->

                                <!-- {{-- Stored kVA --}}
                                <td class="bb">
                                    {{ number_format((float) ($row->kva1 ?? 0), 3) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->kva2 ?? 0), 3) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->kva3 ?? 0), 3) }}
                                </td>

                                {{-- Stored kVAR --}}
                                <td class="bb">
                                    {{ number_format((float) ($row->kvar1 ?? 0), 3) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->kvar2 ?? 0), 3) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->kvar3 ?? 0), 3) }}
                                </td> -->

                                {{-- Stored kVA (now calculated: V×I/1000) --}}
<td class="bb">{{ number_format((float) ($row->kva1 ?? 0), 3) }}</td>
<td>{{ number_format((float) ($row->kva2 ?? 0), 3) }}</td>
<td>{{ number_format((float) ($row->kva3 ?? 0), 3) }}</td>

{{-- Stored kVAR (now calculated: kVA×sin(acos(PF))) --}}
<td class="bb">{{ number_format((float) ($row->kvar1 ?? 0), 3) }}</td>
<td>{{ number_format((float) ($row->kvar2 ?? 0), 3) }}</td>
<td>{{ number_format((float) ($row->kvar3 ?? 0), 3) }}</td>

                                {{-- kVARh Off-Peak --}}
                                <td class="bb">
                                    {{ number_format((float) ($row->kvarho1 ?? 0), 3) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->kvarho2 ?? 0), 3) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->kvarho3 ?? 0), 3) }}
                                </td>

                                {{-- kVARh Peak --}}
                                <td>
                                    {{ number_format((float) ($row->kvarhp1 ?? 0), 3) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->kvarhp2 ?? 0), 3) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->kvarhp3 ?? 0), 3) }}
                                </td>

                                {{-- rkVARh Off-Peak --}}
                                <td class="bb">
                                    {{ number_format((float) ($row->rkvarho1 ?? 0), 3) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->rkvarho2 ?? 0), 3) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->rkvarho3 ?? 0), 3) }}
                                </td>

                                {{-- rkVARh Peak --}}
                                <td>
                                    {{ number_format((float) ($row->rkvarhp1 ?? 0), 3) }}
                                </td>
                                <td>
                                    {{ number_format((float) ($row->rkvarhp2 ?? 0), 3) }}
                                </td>
                                <td class="rbg">
                                    {{ number_format((float) ($row->rkvarhp3 ?? 0), 3) }}
                                </td>
                            </tr>

                        @empty
                            <tr>
                                <td colspan="36" class="text-center text-muted">
                                    Please select filters and click Generate.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>

                </table>

            </div>

            {{-- Pagination --}}
            <div class="d-flex mt-3">
                {{ $data->appends(request()->query())->links('pagination::bootstrap-4') }}
            </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>
@endpush

@endsection