@extends('layouts.app')

@section('center')
@php
    use Carbon\Carbon;

    $offlineAfterMinutes = 60;

    $totalDevices = count($data);
    $onlineCount = 0;
    $offlineCount = 0;
    $offCount = 0;

    foreach ($data as $device) {
        if (!empty($device->server_time_update_our_value)) {
            $lastTime = Carbon::parse($device->server_time_update_our_value);
            $minutesDiff = now()->diffInMinutes($lastTime);
        } else {
            $minutesDiff = 999999;
        }

        if (($device->auxr_status ?? 0) == 1) {
            if ($minutesDiff > $offlineAfterMinutes) {
                $offlineCount++;
            } else {
                $onlineCount++;
            }
        } else {
            $offCount++;
        }
    }
@endphp

<style>
    .dashboard-title {
        text-align: center;
        font-weight: 800;
        color: #1f2937;
        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;
        cursor: pointer;
        transition: all .25s ease;
    }

    .summary-card:hover,
    .summary-card.active-filter {
        transform: translateY(-4px);
        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;
    }

    .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: #ffffff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0,0,0,.08);
        transition: all .25s ease;
        height: 100%;
        border: 1px solid #eef2f7;
    }

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

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

    .device-body {
        padding: 16px;
    }

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

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

    .device-info-table strong {
        color: #111827;
    }

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

    .action-buttons .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;
    }

    .no-device-message {
        display: none;
        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;
        margin-bottom: 20px;
    }
</style>

<h3 class="dashboard-title">
    TransFocure 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">
        <div class="summary-card border-total active-filter" data-filter="all">
            <div class="summary-icon icon-total">
                <i class="fas fa-microchip"></i>
            </div>
            <div>
                <h6>Total Devices</h6>
                <h3>{{ $totalDevices }}</h3>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 mb-3">
        <div class="summary-card border-online" data-filter="online">
            <div class="summary-icon icon-online">
                <i class="fas fa-wifi"></i>
            </div>
            <div>
                <h6>Online Devices</h6>
                <h3>{{ $onlineCount }}</h3>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 mb-3">
        <div class="summary-card border-offline" data-filter="offline">
            <div class="summary-icon icon-offline">
                <i class="fas fa-clock"></i>
            </div>
            <div>
                <h6>Offline Devices</h6>
                <h3>{{ $offlineCount }}</h3>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 mb-3">
        <div class="summary-card border-off" data-filter="off">
            <div class="summary-icon icon-off">
                <i class="fas fa-power-off"></i>
            </div>
            <div>
                <h6>Off Devices</h6>
                <h3>{{ $offCount }}</h3>
            </div>
        </div>
    </div>

</div>

<div id="noDeviceMessage" class="no-device-message">
    No devices found for selected filter.
</div>

<div class="row gutters" id="deviceContainer">

    @forelse($data as $row)

        @php
            $color = "success";
            $state = "Online";
            $lastPulse = "Never";
            $age = "Never";

            if (!empty($row->server_time_update_our_value)) {
                $lastDateTime = Carbon::parse($row->server_time_update_our_value);
                $minutes = now()->diffInMinutes($lastDateTime);
                $lastPulse = $lastDateTime->format('d M Y, h:i A');
                $age = $lastDateTime->diffForHumans();
            } else {
                $minutes = 999999;
            }

            if (($row->auxr_status ?? 0) == 1) {
                if ($minutes > $offlineAfterMinutes) {
                    $color = "info";
                    $state = "Offline";
                } else {
                    $color = "success";
                    $state = "Online";
                }
            } else {
                $color = "danger";
                $state = "Off";
            }

            $statusKey = strtolower($state);

            $sumCurrent = $row->sum_current ?? 0;
            $avgVoltage = $row->avg_voltage ?? 0;
            $avgPf = $row->avg_powerfactor ?? 0;
            $totalKva = $row->total_kva ?? 0;
            $totalKw = $row->total_kw ?? 0;
            $totalConsumption = $row->total_consumption ?? 0;

            if ($sumCurrent <= 0) {
                $displayPf = '0.00';
            } else {
                $displayPf = number_format($avgPf, 2);
            }
        @endphp

        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4 device-item"
             data-status="{{ $statusKey }}">

            <figure class="device-card">

                <div class="device-header bg-{{ $color }}">
                    <h5>Device ID: {{ $row->global_device_id ?? 'N/A' }}</h5>
                    <h5>Capacity: {{ $row->kva ?? '0' }} KVA</h5>

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

                <figcaption class="device-body">

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

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

                        <tr>
                            <td>
                                <strong>Total Current:</strong>
                                {{ number_format($sumCurrent, 2) }} Amps
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <strong>Voltage:</strong>
                                {{ number_format($avgVoltage, 2) }} Volts
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <strong>Power Factor:</strong>
                                {{ $displayPf }}
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <strong>Apparent Power:</strong>
                                {{ number_format($totalKva, 2) }} KVA
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <strong>Active Power:</strong>
                                {{ number_format($totalKw, 2) }} KW
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <strong>Consumption:</strong>
                                {{ number_format($totalConsumption, 2) }} kWh
                            </td>
                        </tr>

                    </table>

                    <div class="action-buttons">

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

    @empty

        <div class="col-12">
            <div class="no-device-message" style="display:block;">
                No transformer devices found.
            </div>
        </div>

    @endforelse

</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const filterCards = document.querySelectorAll('.summary-card');
        const devices = document.querySelectorAll('.device-item');
        const noDeviceMessage = document.getElementById('noDeviceMessage');

        filterCards.forEach(card => {
            card.addEventListener('click', function () {
                const filter = this.getAttribute('data-filter');
                let visibleCount = 0;

                filterCards.forEach(item => item.classList.remove('active-filter'));
                this.classList.add('active-filter');

                devices.forEach(device => {
                    const status = device.getAttribute('data-status');

                    if (filter === 'all' || status === filter) {
                        device.style.display = '';
                        visibleCount++;
                    } else {
                        device.style.display = 'none';
                    }
                });

                if (noDeviceMessage) {
                    noDeviceMessage.style.display = visibleCount === 0 ? 'block' : 'none';
                }
            });
        });
    });
</script>

@endsection