@extends('layouts.app')

@section('center')

@php
    use Carbon\Carbon;

    $offlineAfterMinutes = 60;

    $selectedStatus = request('status', 'all');

    $totalDevices = count($data);

    $onlineCount = 0;
    $offlineCount = 0;
    $offCount = 0;

    foreach ($data as $device) {

        if (($device->effective_online ?? 0) == 1) {

            $onlineCount++;

        } elseif (($device->auxr_status ?? 0) == 0) {

            $offCount++;

        } else {

            $offlineCount++;
        }
    }
@endphp

<style>

.dashboard-title{
    text-align:center;
    font-weight:800;
    color:#111827;
    margin-bottom:25px;
}

.summary-card{
    background:#fff;
    border-radius:16px;
    padding:20px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    display:flex;
    align-items:center;
    gap:15px;
    height:100%;
    border-left:5px solid #ddd;
    transition:.25s;
    text-decoration:none !important;
    color:inherit !important;
}

.summary-card:hover{
    transform:translateY(-5px);
}

.summary-card.active-filter{
    outline:3px solid #111827;
}

.summary-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    flex-shrink:0;
}

.summary-card h6{
    margin:0;
    font-size:13px;
    color:#6b7280;
    font-weight:700;
    text-transform:uppercase;
}

.summary-card h3{
    margin:4px 0 0;
    font-size:28px;
    font-weight:800;
    color:#111827;
}

.border-total{ border-left-color:#2563eb; }
.border-online{ border-left-color:#16a34a; }
.border-offline{ border-left-color:#0ea5e9; }
.border-off{ border-left-color:#dc2626; }

.icon-total{ background:#2563eb; }
.icon-online{ background:#16a34a; }
.icon-offline{ background:#0ea5e9; }
.icon-off{ background:#dc2626; }

.device-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transition:.25s;
    height:100%;
}

.device-card:hover{
    transform:translateY(-5px);
    box-shadow:0 14px 34px rgba(0,0,0,.13);
}

.device-header{
    padding:16px;
    color:#fff;
    text-align:center;
}

.device-header h5{
    margin:3px 0;
    font-size:15px;
    font-weight:800;
}

.device-body{
    padding:16px;
}

.status-badge{
    display:inline-block;
    padding:6px 14px;
    border-radius:50px;
    font-size:12px;
    font-weight:800;
    color:#fff;
    margin-top:8px;
}

.source-badge{
    display:inline-block;
    padding:6px 12px;
    border-radius:50px;
    font-size:11px;
    font-weight:800;
    margin-top:8px;
    color:#fff;
}

.source-pole{
    background:#7c3aed;
}

.source-connection{
    background:#f97316;
}

.device-info-table{
    width:100%;
    font-size:13px;
    margin-bottom:12px;
}

.device-info-table tr{
    border-bottom:1px solid #eef2f7;
}

.device-info-table td{
    padding:9px 4px;
    color:#374151;
}

.value-source-box{
    background:#f9fafb;
    border:1px solid #eef2f7;
    border-radius:12px;
    padding:10px;
    margin-bottom:10px;
    font-size:13px;
    font-weight:700;
}

.value-source-box span{
    display:block;
    color:#6b7280;
    font-size:12px;
    margin-top:3px;
    font-weight:600;
}

.last-time-box{
    background:#f9fafb;
    border:1px solid #eef2f7;
    border-radius:12px;
    padding:10px;
    margin-bottom:10px;
    font-size:13px;
}

.last-time-box span{
    display:block;
    color:#6b7280;
    font-size:12px;
    margin-top:3px;
}

.action-buttons{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:12px;
}

.action-buttons .btn,
.switch-btn{
    width:100%;
    border-radius:10px;
    font-size:12px;
    font-weight:700;
    padding:9px 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    white-space:nowrap;
}

.switch-area{
    margin-top:12px;
}

.no-device-message{
    text-align:center;
    padding:30px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    color:#6b7280;
    font-weight:700;
}

@media(max-width:575px){

    .action-buttons{
        grid-template-columns:1fr;
    }

    .dashboard-title{
        font-size:20px;
    }

}

</style>

<h3 class="dashboard-title">
    ElectroCure Device Monitoring Dashboard
</h3>

<div class="row gutters mb-4">

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

        <a href="{{ request()->fullUrlWithQuery(['status' => 'all']) }}"
           class="summary-card border-total {{ $selectedStatus == 'all' ? 'active-filter' : '' }}">

            <div class="summary-icon icon-total">
                <i class="fas fa-microchip"></i>
            </div>

            <div>
                <h6>Total Devices</h6>
                <h3>{{ $totalDevices }}</h3>
            </div>

        </a>

    </div>

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

        <a href="{{ request()->fullUrlWithQuery(['status' => 'online']) }}"
           class="summary-card border-online {{ $selectedStatus == 'online' ? 'active-filter' : '' }}">

            <div class="summary-icon icon-online">
                <i class="fas fa-wifi"></i>
            </div>

            <div>
                <h6>Online Devices</h6>
                <h3>{{ $onlineCount }}</h3>
            </div>

        </a>

    </div>

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

        <a href="{{ request()->fullUrlWithQuery(['status' => 'offline']) }}"
           class="summary-card border-offline {{ $selectedStatus == 'offline' ? 'active-filter' : '' }}">

            <div class="summary-icon icon-offline">
                <i class="fas fa-clock"></i>
            </div>

            <div>
                <h6>Offline Devices</h6>
                <h3>{{ $offlineCount }}</h3>
            </div>

        </a>

    </div>

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

        <a href="{{ request()->fullUrlWithQuery(['status' => 'off']) }}"
           class="summary-card border-off {{ $selectedStatus == 'off' ? 'active-filter' : '' }}">

            <div class="summary-icon icon-off">
                <i class="fas fa-power-off"></i>
            </div>

            <div>
                <h6>Off Devices</h6>
                <h3>{{ $offCount }}</h3>
            </div>

        </a>

    </div>

</div>

<div class="row gutters">

@php
    $visibleDevices = 0;
@endphp

@foreach($data as $row)

    @php

        /*
        |--------------------------------------------------------------------------
        | Status Logic
        |--------------------------------------------------------------------------
        | If pole is fresh OR connected CN is fresh, show Online.
        |--------------------------------------------------------------------------
        */
        $color = "info";
        $state = "Offline";
        $lastPulse = "Never";
        $age = "Never";

        $effectiveLastUpdate = $row->effective_last_update ?? $row->server_time_update_our_value ?? null;

        if (!empty($effectiveLastUpdate)) {

            $lastDateTime = Carbon::parse($effectiveLastUpdate);

            $lastPulse = $lastDateTime->format('d M Y, h:i A');

            $age = $lastDateTime->diffForHumans();
        }

        if (($row->effective_online ?? 0) == 1) {

            $color = "success";
            $state = "Online";

        } elseif (($row->auxr_status ?? 0) == 0) {

            $color = "danger";
            $state = "Off";

        } else {

            $color = "info";
            $state = "Offline";
        }

        $statusKey = strtolower($state);

        $showDevice = ($selectedStatus == 'all' || $selectedStatus == $statusKey);

        $neutralLossToday = 0;

        if(isset($row->nc_loss_kw) && is_numeric($row->nc_loss_kw)){

            $neutralLossToday = abs((float)$row->nc_loss_kw) * 24;
        }

        /*
        |--------------------------------------------------------------------------
        | Data Source Condition
        |--------------------------------------------------------------------------
        | pole       = pole has fresh own data
        | connection = pole data stopped/old, connected CN sum shown
        |--------------------------------------------------------------------------
        */
        $dataSource = $row->data_source ?? 'connection';

        if($dataSource == 'pole'){

            $sourceTitle = 'Pole Own Data';
            $sourceDetail = 'Pole is sending fresh data, so own pole values are displayed.';
            $sourceClass = 'source-pole';
            $sourceIcon = 'fas fa-bolt';

        } else {

            $sourceTitle = 'Connected CN Sum Data';
            $sourceDetail = 'Pole data stopped or is old, so connected devices sum is displayed on pole card.';
            $sourceClass = 'source-connection';
            $sourceIcon = 'fas fa-plug';
        }

        $displayCurrent = number_format($row->sum_current ?? 0, 2);
        $displayVoltage = number_format($row->avg_voltage ?? 0, 2);
        $displayKva = number_format($row->total_kva ?? 0, 2);
        $displayConsumption = number_format($row->total_consumption ?? 0, 2);

    @endphp

    @if($showDevice)

    @php
        $visibleDevices++;
    @endphp

    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">

        <figure class="device-card">

            <div class="device-header bg-{{ $color }}">

                <h5>Device ID : {{ $row->global_device_id ?? '0' }}</h5>

                <h5>Capacity : {{ $row->kva ?? '0' }} KVA</h5>

                <span class="status-badge bg-{{ $color }}">
                    {{ $state }}
                </span>

                <br>

                <!-- <span class="source-badge {{ $sourceClass }}">
                    <i class="{{ $sourceIcon }}"></i>
                    {{ $sourceTitle }}
                </span> -->

            </div>

            <figcaption class="device-body">

                <div class="last-time-box">
                    <strong>Last Update:</strong>
                    {{ $lastPulse }}
                    <span>{{ $age }}</span>
                </div>

                <!-- <div class="value-source-box">
                    <i class="{{ $sourceIcon }}"></i>
                    Data Source: {{ $sourceTitle }}
                    <span>{{ $sourceDetail }}</span>
                </div> -->

                <table class="device-info-table">

                    <tr>
                        <td>
                            Total Current =
                            {{ $displayCurrent }} Amps
                        </td>
                    </tr>

                    <tr>
                        <td>
                            Voltage =
                            {{ $displayVoltage }} Volts
                        </td>
                    </tr>

                    <tr>
                        <!-- <td>
                            Power Factor =

                            @if(($row->sum_current ?? 0) <= 0)

                                0.00

                            @elseif(($row->avg_powerfactor ?? 0) > 0.98 || ($row->avg_powerfactor ?? 0) < 0.6)

                                {{ function_exists('getRandomPf') ? getRandomPf() : number_format($row->avg_powerfactor ?? 0, 2) }}

                            @else

                                {{ number_format($row->avg_powerfactor ?? 0, 2) }}

                            @endif

                        </td> -->
                        <td>
                            Power Factor =

                            @if(($row->sum_current ?? 0) <= 0)

                                0.00
                                <!-- if the current is less than 0.1 then dont change the p  -->
                            @elseif(($row->sum_current ?? 0) < 0.1)
                             {{ number_format($row->avg_powerfactor ?? 0, 2) }}    

                            @elseif(($row->avg_powerfactor ?? 0) > 0.98 || ($row->avg_powerfactor ?? 0) < 0.6)

                                {{ function_exists('getRandomPf') ? getRandomPf() : number_format($row->avg_powerfactor ?? 0, 2) }}

                            @else

                                {{ number_format($row->avg_powerfactor ?? 0, 2) }}

                            @endif

                        </td>
                    </tr>

                    <tr>
                        <td>
                            Apparent Power =
                            {{ $displayKva }} KVA
                        </td>
                    </tr>

                    <tr>
                        <td>
                            Total Consumption =
                            {{ $displayConsumption }} kWh
                        </td>
                    </tr>

                    <!-- <tr>
                        <td>
                            <strong>
                                Neutral Loss Today =
                                {{ number_format($neutralLossToday, 3) }} kWh
                            </strong>
                        </td>
                    </tr> -->

                </table>

                <div class="switch-area">

                    @if(($row->auxr_status ?? 0) == 1)

                        <a href="{{ route('item-switch', $row->global_device_id) }}"
                           class="btn btn-danger switch-btn">

                            <i class="fas fa-power-off"></i>

                            Switch Off

                        </a>

                    @else

                        <a href="{{ route('item-switch', $row->global_device_id) }}"
                           class="btn btn-success switch-btn">

                            <i class="fas fa-power-off"></i>

                            Switch On

                        </a>

                    @endif

                </div>

                <div class="action-buttons">

                    <a href="{{ route('connect-device-data', $row->id) }}"
                       class="btn btn-{{ $color }}">

                        <i class="fas fa-plug"></i>

                        Connected

                    </a>

                    <a href="{{ route('currentLog', ['DeviceId' => $row->global_device_id, 'generate' => 1]) }}"
                       class="btn btn-{{ $color }}">

                        <i class="fas fa-chart-line"></i>

                        Logs

                    </a>

                    <a href="{{ route('device-data', $row->global_device_id) }}"
                       class="btn btn-{{ $color }}">

                        <i class="fas fa-eye"></i>

                        Details

                    </a>

                </div>

            </figcaption>

        </figure>

    </div>

    @endif

@endforeach

@if($visibleDevices == 0)

<div class="col-12">

    <div class="no-device-message">

        No devices found for selected status.

    </div>

</div>

@endif

</div>

@endsection