@extends('layouts.app')

@section('content')
<div class="container py-4">

    <h3 class="mb-4">CEO Dashboard</h3>

    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h6>Total Devices</h6>
                    <h3>{{ $totalDevices ?? 0 }}</h3>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h6>Online Devices</h6>
                    <h3 class="text-success">{{ $onlineDevices ?? 0 }}</h3>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h6>Offline Devices</h6>
                    <h3 class="text-danger">{{ $offlineDevices ?? 0 }}</h3>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h6>Total Energy</h6>
                    <h3>{{ number_format($todayEnergy ?? 0, 2) }}</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-header">
            Latest Meter Visuals Records
        </div>

        <div class="card-body table-responsive">

            @if(isset($devices) && count($devices) > 0)
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>MSN</th>
                            <th>Device ID</th>
                            <th>Import kWh</th>
                            <th>Export kWh</th>
                            <th>Voltage A</th>
                            <th>Current A</th>
                            <th>PF</th>
                            <th>Last Communication</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($devices as $device)
                            <tr>
                                <td>{{ $device->id }}</td>
                                <td>{{ $device->msn ?? 'N/A' }}</td>
                                <td>{{ $device->global_device_id ?? 'N/A' }}</td>
                                <td>{{ $device->active_energy_pos_tl ?? 0 }}</td>
                                <td>{{ $device->active_energy_neg_tl ?? 0 }}</td>
                                <td>{{ $device->voltage_phase_a ?? 0 }}</td>
                                <td>{{ $device->current_phase_a ?? 0 }}</td>
                                <td>{{ $device->average_pf ?? 0 }}</td>
                                <td>{{ $device->last_communication_datetime ?? 'N/A' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="alert alert-warning mb-0">
                    No data found in meter_visuals table.
                </div>
            @endif

        </div>
    </div>

</div>
@endsection@extends('layouts.app')

@section('center')

<style>
    .ceo-title {
        font-weight: 900;
        color: #111827;
        margin-bottom: 8px;
    }

    .ceo-subtitle {
        color: #6b7280;
        margin-bottom: 25px;
        font-size: 14px;
    }

    .kpi-card {
        background: #fff;
        border-radius: 18px;
        padding: 22px;
        box-shadow: 0 8px 25px rgba(0,0,0,.08);
        height: 100%;
        border-left: 6px solid #2563eb;
    }

    .kpi-card h6 {
        font-size: 13px;
        color: #6b7280;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    .kpi-card h2 {
        font-size: 29px;
        font-weight: 900;
        color: #111827;
        margin: 0;
    }

    .kpi-card span {
        font-size: 13px;
        color: #6b7280;
    }

    .border-blue { border-left-color: #2563eb; }
    .border-green { border-left-color: #16a34a; }
    .border-red { border-left-color: #dc2626; }
    .border-orange { border-left-color: #f97316; }
    .border-cyan { border-left-color: #0ea5e9; }
    .border-purple { border-left-color: #7c3aed; }
    .border-dark { border-left-color: #111827; }

    .section-card {
        background: #fff;
        border-radius: 18px;
        padding: 22px;
        box-shadow: 0 8px 25px rgba(0,0,0,.08);
        margin-top: 25px;
    }

    .section-card h5 {
        font-weight: 900;
        color: #111827;
        margin-bottom: 18px;
    }

    .insight-box {
        background: #f9fafb;
        border-radius: 14px;
        padding: 16px;
        height: 100%;
        border: 1px solid #e5e7eb;
    }

    .insight-box strong {
        display: block;
        color: #111827;
        margin-bottom: 5px;
    }

    .insight-box span {
        color: #6b7280;
        font-size: 13px;
    }

    .progress {
        height: 14px;
        border-radius: 20px;
    }

    .table th {
        background: #f9fafb;
        color: #374151;
        font-size: 13px;
        white-space: nowrap;
    }

    .table td {
        font-size: 13px;
        vertical-align: middle;
        white-space: nowrap;
    }

    .status-badge {
        padding: 5px 12px;
        border-radius: 30px;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
    }
</style>

<h3 class="ceo-title">CEO Executive Dashboard</h3>
<div class="ceo-subtitle">
    Operational health, electrical performance, asset coverage, communication reliability, and loss monitoring.
</div>

<div class="row">

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-blue">
            <h6>Total Devices</h6>
            <h2>{{ number_format($totalDevices) }}</h2>
            <span>All installed APMS monitoring devices</span>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-green">
            <h6>Online Devices</h6>
            <h2>{{ number_format($onlineDevices) }}</h2>
            <span>{{ number_format($onlinePercentage, 2) }}% communication health</span>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-cyan">
            <h6>Offline Devices</h6>
            <h2>{{ number_format($offlineDevices) }}</h2>
            <span>No communication within 60 minutes</span>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-red">
            <h6>Off Devices</h6>
            <h2>{{ number_format($offDevices) }}</h2>
            <span>Relay/device status is off</span>
        </div>
    </div>

</div>

<div class="row">

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-purple">
            <h6>Transformers</h6>
            <h2>{{ number_format($totalTransformers) }}</h2>
            <span>Unique installed transformer records</span>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-orange">
            <h6>Poles</h6>
            <h2>{{ number_format($totalPoles) }}</h2>
            <span>Unique pole records using pool_id</span>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-blue">
            <h6>Connections</h6>
            <h2>{{ number_format($totalConnections) }}</h2>
            <span>Connection records linked by parent_id</span>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-dark">
            <h6>Feeders</h6>
            <h2>{{ number_format($totalFeeders) }}</h2>
            <span>Unique feeder records</span>
        </div>
    </div>

</div>

<div class="row">

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-blue">
            <h6>Installed Capacity</h6>
            <h2>{{ number_format($installedCapacity, 2) }} KVA</h2>
            <span>Total KVA installed capacity</span>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-orange">
            <h6>Estimated Current Load</h6>
            <h2>{{ number_format($estimatedLoadKva, 2) }} KVA</h2>
            <span>Calculated from voltage × current</span>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-cyan">
            <h6>Total Current</h6>
            <h2>{{ number_format($totalCurrent, 2) }} A</h2>
            <span>Phase A + B + C current</span>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-purple">
            <h6>Load Utilization</h6>
            <h2>{{ number_format($loadPercentage, 2) }}%</h2>
            <div class="progress mt-3">
                <div class="progress-bar
                    @if($loadPercentage >= 90) bg-danger
                    @elseif($loadPercentage >= 70) bg-warning
                    @else bg-success
                    @endif"
                    style="width: {{ min($loadPercentage, 100) }}%">
                </div>
            </div>
        </div>
    </div>

</div>

<div class="row">

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-green">
            <h6>Average Voltage</h6>
            <h2>{{ number_format($avgVoltage ?? 0, 2) }} V</h2>
            <span>Average of available phase voltages</span>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-blue">
            <h6>Average Current</h6>
            <h2>{{ number_format($avgCurrent, 2) }} A</h2>
            <span>Average current per device</span>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-purple">
            <h6>Average PF</h6>
            <h2>{{ number_format($avgPowerFactor ?? 0, 2) }}</h2>
            <span>Power factor efficiency indicator</span>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-cyan">
            <h6>Average Frequency</h6>
            <h2>{{ number_format($avgFrequency ?? 0, 2) }} Hz</h2>
            <span>System frequency health</span>
        </div>
    </div>

</div>

<div class="row">

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-red">
            <h6>Neutral Current</h6>
            <h2>{{ number_format($neutralCurrent, 2) }}</h2>
            <span>High NC may indicate imbalance/theft/leakage</span>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-orange">
            <h6>Neutral Loss</h6>
            <h2>{{ number_format($neutralLoss, 2) }}</h2>
            <span>Sum of NL field</span>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-red">
            <h6>Neutral Unit Loss</h6>
            <h2>{{ number_format($neutralUnitLoss, 2) }}</h2>
            <span>Sum of NUL field</span>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="kpi-card border-dark">
            <h6>Peak / Off-Peak Energy</h6>
            <h2>{{ number_format($peakEnergy, 0) }} / {{ number_format($offPeakEnergy, 0) }}</h2>
            <span>Peak and off-peak energy totals</span>
        </div>
    </div>

</div>

<div class="section-card">
    <h5>Executive Risk Indicators</h5>

    <div class="row">
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="insight-box">
                <strong>{{ number_format($lowVoltageDevices) }} Low Voltage Devices</strong>
                <span>Voltage below 180V may indicate overloaded area, weak supply, or infrastructure issue.</span>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="insight-box">
                <strong>{{ number_format($highVoltageDevices) }} High Voltage Devices</strong>
                <span>Voltage above 260V may indicate regulation issue and risk to consumer equipment.</span>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="insight-box">
                <strong>{{ number_format($poorPfDevices) }} Poor PF Devices</strong>
                <span>Low power factor increases losses and reduces energy efficiency.</span>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="insight-box">
                <strong>{{ number_format($highNeutralDevices) }} High Neutral Current Devices</strong>
                <span>High NC may indicate imbalance, leakage, loose neutral, or possible theft.</span>
            </div>
        </div>
    </div>
</div>

<div class="section-card">
    <h5>Feeder Performance Ranking</h5>

    <div class="table-responsive">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Feeder</th>
                    <th>Devices</th>
                    <th>Offline</th>
                    <th>Capacity KVA</th>
                    <th>Load KVA</th>
                    <th>Neutral Current</th>
                    <th>Avg PF</th>
                </tr>
            </thead>
            <tbody>
                @forelse($feederSummary as $feeder)
                    <tr>
                        <td>{{ $feeder->feeder_id }}</td>
                        <td>{{ number_format($feeder->devices) }}</td>
                        <td>{{ number_format($feeder->offline) }}</td>
                        <td>{{ number_format($feeder->capacity, 2) }}</td>
                        <td>{{ number_format($feeder->load, 2) }}</td>
                        <td>{{ number_format($feeder->neutral_current, 2) }}</td>
                        <td>{{ number_format($feeder->avg_pf ?? 0, 2) }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center">No feeder data found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="section-card">
    <h5>Critical Devices Requiring Attention</h5>

    <div class="table-responsive">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Device ID</th>
                    <th>Transformer</th>
                    <th>Pole</th>
                    <th>Connection</th>
                    <th>Feeder</th>
                    <th>KVA</th>
                    <th>Avg Voltage</th>
                    <th>Total Current</th>
                    <th>Load KVA</th>
                    <th>PF</th>
                    <th>NC</th>
                    <th>Last Update</th>
                    <th>Risk</th>
                </tr>
            </thead>

            <tbody>
                @forelse($criticalDevices as $device)
                    <tr>
                        <td>{{ $device->global_device_id }}</td>
                        <td>{{ $device->transformer_id ?? '-' }}</td>
                        <td>{{ $device->pool_id ?? '-' }}</td>
                        <td>{{ $device->parent_id ?? '-' }}</td>
                        <td>{{ $device->feeder_id ?? '-' }}</td>
                        <td>{{ number_format($device->kva ?? 0, 2) }}</td>
                        <td>{{ number_format($device->avg_voltage_calc ?? 0, 2) }}</td>
                        <td>{{ number_format($device->total_current_calc ?? 0, 2) }}</td>
                        <td>{{ number_format($device->load_kva_calc ?? 0, 2) }}</td>
                        <td>{{ number_format($device->average_pf ?? 0, 2) }}</td>
                        <td>{{ number_format($device->NC ?? 0, 2) }}</td>
                        <td>
                            @if(!empty($device->server_time_update_our_value))
                                {{ \Carbon\Carbon::parse($device->server_time_update_our_value)->diffForHumans() }}
                            @else
                                Never
                            @endif
                        </td>
                        <td>
                            <span class="status-badge bg-danger">
                                {{ $device->risk_issue }}
                            </span>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="13" class="text-center">No critical devices found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection