@extends('theme.sphf.layouts.app')

@section('content')
<section class="sphf-page" style="overflow-x:hidden; width:100%;">
    <div class="sphf-page__heading-row">
        <div class="sphf-page__title-wrap">
            <h1 class="sphf-page__title">SPHF Live Monitoring & DSS Prototype</h1>
            <!-- <span class="sphf-page__badge">Updated 10-03-26</span> -->
        </div>
        <button type="button" class="sphf-export-btn" data-sphf-export-btn="true" data-export-target="#sphfDashboardExportArea" data-export-file="SPHF_Dashboard_Report" data-export-bg="#f3f5f6">
            <i class="ki-filled ki-exit-down"></i>
            <span>Export</span>
        </button>
    </div>

    <div class="sphf-export-area" id="sphfDashboardExportArea" style="width:100%; overflow-x:hidden;">

        @include('theme.sphf.partials.filter-bar', [
            'options'  => $filterOptions ?? [],
            'selected' => $selectedFilters ?? [],
        ])

        {{-- ═══ KPI CARDS ROW ═══ --}}
        <div class="grid gap-3 mb-3" style="grid-template-columns: repeat(6, minmax(0, 1fr));">

            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4 min-w-0">
                <p class="text-xs text-gray-500 font-medium mb-1 truncate">Under-progress Cases</p>
                <p class="font-mono text-2xl font-bold text-blue-600 truncate">{{ number_format($kpi['under_progress'] ?? 434245) }}</p>
                <p class="text-xs text-gray-400 mt-1 truncate">Started but not fully completed</p>
            </div>

            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4 min-w-0">
                <p class="text-xs text-gray-500 font-medium mb-1 truncate">Red Alerts</p>
                <p class="font-mono text-2xl font-bold text-red-600 truncate">{{ number_format($kpi['red_alerts'] ?? 18420) }}</p>
                <p class="text-xs text-gray-400 mt-1 truncate">Stage threshold crossed</p>
            </div>

            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4 min-w-0">
                <p class="text-xs text-gray-500 font-medium mb-1 truncate">Amber Alerts</p>
                <p class="font-mono text-2xl font-bold text-amber-600 truncate">{{ number_format($kpi['amber_alerts'] ?? 32810) }}</p>
                <p class="text-xs text-gray-400 mt-1 truncate">Approaching critical delay</p>
            </div>

            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4 min-w-0">
                <p class="text-xs text-gray-500 font-medium mb-1 truncate">Yellow Alerts</p>
                <p class="font-mono text-2xl font-bold text-yellow-600 truncate">{{ number_format($kpi['yellow_alerts'] ?? 61250) }}</p>
                <p class="text-xs text-gray-400 mt-1 truncate">Beyond expected time span</p>
            </div>

            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4 min-w-0">
                <p class="text-xs text-gray-500 font-medium mb-1 truncate">Avg Active Stage Days</p>
                <p class="font-mono text-2xl font-bold text-purple-600 truncate">{{ $kpi['avg_stage_days'] ?? 58 }}</p>
                <p class="text-xs text-gray-400 mt-1 truncate">Live pipeline average</p>
            </div>

            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4 min-w-0">
                <p class="text-xs text-gray-500 font-medium mb-1 truncate">Email Queue Later</p>
                <p class="font-mono text-2xl font-bold text-green-600 truncate">{{ $kpi['email_queue'] ?? 12 }}</p>
                <p class="text-xs text-gray-400 mt-1 truncate">Management digest groups</p>
            </div>

        </div>{{-- /KPI CARDS --}}

        {{-- ═══ MIDDLE ROW: 22% | auto | 26% ═══ --}}
        <div class="grid gap-3 mb-3" style="grid-template-columns: repeat(3, minmax(0, 1fr)); min-width:0;">

            {{-- System Health --}}
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm min-w-0">
                <div class="flex items-center justify-between px-4 pt-4 pb-2" style="
    border-bottom: 0.5px solid lightgrey;"
>
                    <span class="font-semibold text-gray-800 text-sm">System Health</span>
                    <span class="text-xs font-semibold bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">Count Based</span>
                </div>
                <div class="grid grid-cols-4 gap-2 px-4 pb-4">
                    <div class="bg-green-50 rounded-lg p-3 min-w-0 mt-3">
                        <p class="text-xs font-semibold text-green-700 mb-1">Green</p>
                        <p class="font-mono text-base font-bold text-green-700 truncate">{{ number_format($health['green'] ?? 321765) }}</p>
                    </div>
                    <div class="bg-yellow-50 rounded-lg p-3 min-w-0 mt-3">
                        <p class="text-xs font-semibold text-yellow-800 mb-1">Yellow</p>
                        <p class="font-mono text-base font-bold text-yellow-800 truncate">{{ number_format($health['yellow'] ?? 61250) }}</p>
                    </div>
                    <div class="bg-orange-50 rounded-lg p-3 min-w-0 mt-3">
                        <p class="text-xs font-semibold text-orange-700 mb-1">Amber</p>
                        <p class="font-mono text-base font-bold text-orange-700 truncate">{{ number_format($health['amber'] ?? 32810) }}</p>
                    </div>
                    <div class="bg-red-50 rounded-lg p-3 min-w-0 mt-3">
                        <p class="text-xs font-semibold text-red-700 mb-1">Red</p>
                        <p class="font-mono text-base font-bold text-red-700 truncate">{{ number_format($health['red'] ?? 18420) }}</p>
                    </div>
                </div>
            </div>

            {{-- Stage-wise Alert Mix Chart --}}
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm min-w-0" style="overflow:hidden;">
                <div class="flex items-center justify-between px-4 pt-4 pb-2"  style="
    border-bottom: 0.5px solid lightgrey;">
                    <span class="font-semibold text-gray-800 text-sm">Stage-wise Alert Mix</span>
                    <span class="text-xs font-semibold bg-red-100 text-red-700 px-2 py-0.5 rounded-full">Live</span>
                </div>
                <div class="px-3 pb-4" style="height:210px; position:relative;">
                    <canvas id="stageChart"></canvas>
                </div>
            </div>

            {{-- Critical Bottleneck Ranking --}}
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm min-w-0">
                <div class="flex items-center justify-between px-4 pt-4 pb-2"  style="
    border-bottom: 0.5px solid lightgrey;">
                    <span class="font-semibold text-gray-800 text-sm">Critical Bottleneck Ranking</span>
                    <span class="text-xs font-semibold bg-red-100 text-red-700 px-2 py-0.5 rounded-full">Top Stages</span>
                </div>
                <div class="px-4 pb-4 space-y-3">
                    @php
                        $bottlenecks = $bottlenecks ?? [
                            ['label' => 'Overall',       'val' => 26900],
                            ['label' => '3rd to Roof',   'val' => 9200],
                            ['label' => '1st to Plinth', 'val' => 8100],
                            ['label' => '2nd to Lintel', 'val' => 7500],
                            ['label' => 'Plinth to 2nd', 'val' => 5800],
                        ];
                        $maxVal = 30000;
                    @endphp

                    @foreach($bottlenecks as $bn)
                        @php $pct = round($bn['val'] / $maxVal * 100, 1); @endphp
                        <div>
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-xs font-medium text-gray-700">{{ $bn['label'] }}</span>
                                <span class="text-xs text-gray-400">{{ number_format($bn['val']) }}</span>
                            </div>
                            <div class="bg-gray-100 rounded-full h-2.5 overflow-hidden">
                                <div class="bg-red-600 h-full rounded-full" style="width:{{ $pct }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

        </div>{{-- /MIDDLE ROW --}}

        {{-- ═══ BOTTOM ROW: auto | 26% ═══ --}}
        <div class="grid gap-3 mb-3" style="grid-template-columns: 1fr 26%; min-width:0;">

            {{-- Live Management Alerts --}}
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm min-w-0">
                <div class="px-4 pt-4 pb-2">
                    <span class="font-semibold text-gray-800 text-sm">Live Management Alerts</span>
                </div>

              @php
$alerts = $alerts ?? [
    [
        'color' => 'red',
        'title' => '26,900 overall cases crossed Red threshold',
        'desc' => 'Overall 1st installment to Roof/4th stage has exceeded 450 days. SPHF HQ review required',
        'level' => 'Red'
    ],
    [
        'color' => 'amber',
        'title' => '32,810 cases are Amber across active stages',
        'desc' => 'These cases are approaching critical delay and should move to district action plans.',
        'level' => 'Amber'
    ],
    [
        'color' => 'yellow',
        'title' => '61,250 cases have crossed Yellow thresholds',
        'desc' => 'Early warning generated. IP and district teams should resolve before escalation',
        'level' => 'Yellow'
    ],
    [
        'color' => 'green',
        'title' => 'Email notification module planned',
        'desc' => 'Current prototype prepares counts and owners. Email digest can be added in next phase.',
        'level' => 'Later'
    ],
];
@endphp

<div class="bg-white border border-gray-200 shadow-sm min-w-0">
    <div class="px-4 pb-4 space-y-2 pt-4">

        @foreach($alerts as $alert)

        @php
            if($alert['color'] === 'red') {
                $bg = 'bg-red-50'; $border = 'border-red-500'; $text = 'text-red-700'; $badge = 'bg-red-200 text-red-900';
            } elseif($alert['color'] === 'amber') {
                $bg = 'bg-amber-50'; $border = 'border-amber-500'; $text = 'text-amber-700'; $badge = 'bg-amber-200 text-amber-900';
            } elseif($alert['color'] === 'yellow') {
                $bg = 'bg-yellow-50'; $border = 'border-yellow-500'; $text = 'text-yellow-700'; $badge = 'bg-yellow-200 text-yellow-900';
            } else { // green
                $bg = 'bg-green-50'; $border = 'border-green-500'; $text = 'text-green-700'; $badge = 'bg-green-200 text-green-900';
            }
        @endphp

        <div class="rounded-lg px-4 py-3 flex items-start justify-between gap-2 {{ $bg }} border-l-4 {{ $border }}">

            <div class="min-w-0">
                <p class="text-xs font-bold {{ $text }}">
                    {{ $alert['title'] }}
                </p>
                <p class="text-xs text-gray-500 mt-0.5">
                    {{ $alert['desc'] }}
                </p>
            </div>

            <span class="text-xs font-bold px-3 py-1 rounded-full shrink-0 {{ $badge }}">
                {{ $alert['level'] }}
            </span>

        </div>

        @endforeach

    </div>
</div>
<!-- 
                <div class="flex gap-2 px-4 py-3 border-t border-gray-100">
                    <button type="button" class="text-xs font-semibold border border-gray-300 text-gray-700 px-4 py-1.5 rounded-lg hover:bg-gray-50 transition">
                        Generate Email Digest Later
                    </button>
                    <button type="button" class="text-xs font-semibold border border-gray-300 text-gray-700 px-4 py-1.5 rounded-lg hover:bg-gray-50 transition">
                        Export Action List
                    </button>
                </div> -->
            </div>

            {{-- SPHF Management Escalation --}}
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm min-w-0">
                <div class="flex items-center justify-between px-4 pt-4 pb-2" style="
    border-bottom: 0.5px solid lightgray;>
                    <span class="font-semibold text-gray-800 text-sm">SPHF Management Escalation</span>
                    <span class="text-xs font-semibold bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">Levels</span>
                </div>
                <div class="px-4 pb-4 space-y-2 pt-4">
                    <div class="bg-yellow-50 rounded-lg px-4 py-3 flex items-start justify-between gap-2" style="border-left: solid #EAB308;">
                        <div class="min-w-0">
                            <p class="text-xs font-bold text-yellow-800">Yellow</p>
                            <p class="text-xs text-gray-500 mt-0.5">District/IP operational follow-up</p>
                        </div>
                        <span class="text-xs font-bold bg-yellow-200 text-yellow-900 px-3 py-1 rounded-full shrink-0">Level 1</span>
                    </div>
                    <div class="bg-orange-50 rounded-lg px-4 py-3 flex items-start justify-between gap-2" style="border-left: solid #EAB308;">
                        <div class="min-w-0">
                            <p class="text-xs font-bold text-orange-700">Amber</p>
                            <p class="text-xs text-gray-500 mt-0.5">SPHF regional / operations review</p>
                        </div>
                        <span class="text-xs font-bold bg-orange-200 text-orange-900 px-3 py-1 rounded-full shrink-0">Level 2</span>
                    </div>
                    <div class="bg-red-50 rounded-lg px-4 py-3 flex items-start justify-between gap-2" style="border-left: solid #FF0000;">
                        <div class="min-w-0">
                            <p class="text-xs font-bold text-red-700">Red</p>
                            <p class="text-xs text-gray-500 mt-0.5">SPHF HQ management intervention</p>
                        </div>
                        <span class="text-xs font-bold bg-red-200 text-red-900 px-3 py-1 rounded-full shrink-0">Level 3</span>
                    </div>
                </div>
            </div>

        </div>{{-- /BOTTOM ROW --}}

        <p class="text-xs text-gray-400 pb-1">
            This prototype treats completed units as trend reporting only. DSS logic is driven by under-progress cases,
            current stage elapsed days, stage-specific thresholds, alert counts, and SPHF management escalation.
        </p>

    </div>{{-- /sphf-export-area --}}
</section>
@endsection

@section('scripts')
<script src="{{ asset('theme/default/assets/js/chart-toolbar.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    @php
        $stageChartData = $stageChartData ?? [
            'labels' => ['1st to Plinth','Plinth to 2nd','2nd to Lintel','Lintel to 3rd','3rd to Roof','Roof to 4th','Overall'],
            'green'  => [48000,42000,38000,36000,55000,18000,90000],
            'yellow' => [8000,10000,9000,12000,14000,3000,61250],
            'amber'  => [5000,7000,6500,8000,9000,2000,32810],
            'red'    => [2000,3000,2800,3500,4200,900,18420],
        ];
    @endphp
    const stageData = @json($stageChartData);

    new Chart(document.getElementById('stageChart').getContext('2d'), {
        type: 'bar',
        data: {
            labels: stageData.labels,
            datasets: [
                { label:'Green',  data: stageData.green,  backgroundColor:'#16a34a', stack:'a' },
                { label:'Yellow', data: stageData.yellow, backgroundColor:'#ca8a04', stack:'a' },
                { label:'Amber',  data: stageData.amber,  backgroundColor:'#d97706', stack:'a' },
                { label:'Red',    data: stageData.red,    backgroundColor:'#dc2626', stack:'a' },
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: { boxWidth:10, font:{ size:9 }, padding:8 }
                }
            },
            scales: {
                x: { stacked:true, ticks:{ font:{ size:9 } }, grid:{ display:false } },
                y: { stacked:true, ticks:{ font:{ size:9 } }, grid:{ color:'#f3f4f6' } }
            }
        }
    });

});
</script>
@endsection