@extends('layouts.app')

@section('title', 'Dashboard - NGBVD')

@section('content')
    <script>
        /*
         * Dashboard asset guard:
         * - The main layout already loads chart libraries on some pages.
         * - Loading Highcharts again on this dashboard causes Highcharts error #16.
         * - Some legacy theme bundles call c3 even on Highcharts pages; provide a harmless guard
         *   so c3_renderers does not break this dashboard when c3 is not used here.
         */
        window.c3 = window.c3 || {
            generate: function () {
                return {
                    load: function(){},
                    unload: function(){},
                    destroy: function(){},
                    resize: function(){},
                    flush: function(){},
                    transform: function(){},
                    groups: function(){},
                    xgrids: function(){},
                    ygrids: function(){},
                    data: function(){ return []; }
                };
            }
        };
    </script>


    <style>
        /* NGBVD dashboard-only clean responsive layout. Scoped to this page. */
        .ngbvd-dashboard-page-clean {
            width: 100% !important;
            max-width: 100% !important;
            overflow-x: hidden !important;
            padding-bottom: 24px;
        }

        .ngbvd-dashboard-page-clean * {
            box-sizing: border-box;
        }

        .ngbvd-dashboard-hero-clean {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            flex-wrap: wrap;
            width: 100%;
            padding: 22px 24px;
            margin-bottom: 20px;
            border-radius: 20px;
            background: linear-gradient(135deg, #13233f 0%, #255dcf 100%);
            color: #ffffff;
            overflow: hidden;
            box-shadow: 0 18px 38px rgba(15, 23, 42, .12);
        }

        .ngbvd-dashboard-hero-clean::after {
            content: "";
            position: absolute;
            right: -70px;
            top: -90px;
            width: 240px;
            height: 240px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .12);
            pointer-events: none;
        }

        .ngbvd-dashboard-hero-copy {
            position: relative;
            z-index: 1;
            min-width: 240px;
            flex: 1 1 520px;
        }

        .ngbvd-dashboard-hero-copy .ngbvd-kicker {
            display: inline-flex !important;
            width: auto !important;
            max-width: 100% !important;
            margin-bottom: 8px;
            color: #fbbf24;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            white-space: normal !important;
            word-break: normal !important;
        }

        .ngbvd-dashboard-hero-copy h2 {
            margin: 0 0 7px 0;
            color: #ffffff;
            font-size: clamp(22px, 2.4vw, 34px);
            line-height: 1.15;
            font-weight: 900;
            letter-spacing: -.03em;
            word-break: normal;
        }

        .ngbvd-dashboard-hero-copy p {
            max-width: 820px;
            margin: 0;
            color: rgba(255, 255, 255, .88);
            font-size: clamp(13px, 1.15vw, 16px);
            line-height: 1.55;
        }

        .ngbvd-dashboard-actions-clean {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            flex: 0 1 auto;
        }

        .ngbvd-dashboard-actions-clean .btn {
            min-height: 44px;
            padding: 11px 18px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 800;
            line-height: 1.2;
            white-space: nowrap;
            box-shadow: none;
        }

        .ngbvd-dashboard-kpi-row {
            margin-left: -10px;
            margin-right: -10px;
            row-gap: 20px;
        }

        .ngbvd-dashboard-kpi-row > [class*="col-"] {
            padding-left: 10px;
            padding-right: 10px;
            display: flex;
        }

        .ngbvd-dashboard-kpi {
            width: 100% !important;
            min-width: 0 !important;
            border: 0 !important;
            border-radius: 20px !important;
            background: #ffffff !important;
            box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
            overflow: hidden !important;
            margin-bottom: 0 !important;
        }

        .ngbvd-dashboard-kpi .ngbvd-kpi-inner {
            min-height: 178px;
            display: grid !important;
            grid-template-columns: 64px minmax(0, 1fr) !important;
            align-items: center;
            gap: 18px;
            padding: 22px !important;
        }

        .ngbvd-dashboard-kpi .ngbvd-kpi-icon {
            width: 62px !important;
            height: 62px !important;
            min-width: 62px !important;
            border-radius: 18px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: #07142b !important;
            font-size: 30px !important;
            line-height: 1 !important;
        }

        .ngbvd-dashboard-kpi .ngbvd-kpi-icon.bg-c-blue { background: #4f7df3 !important; }
        .ngbvd-dashboard-kpi .ngbvd-kpi-icon.bg-c-pink { background: #f65b86 !important; }
        .ngbvd-dashboard-kpi .ngbvd-kpi-icon.bg-c-green { background: #9ac15a !important; }
        .ngbvd-dashboard-kpi .ngbvd-kpi-icon.bg-c-yellow { background: #ffbd52 !important; }

        .ngbvd-dashboard-kpi .ngbvd-kpi-copy {
            min-width: 0 !important;
            width: 100% !important;
            display: block !important;
        }

        .ngbvd-dashboard-kpi .ngbvd-kpi-title {
            display: block !important;
            width: auto !important;
            max-width: 100% !important;
            margin: 0 0 8px 0 !important;
            color: #2563eb !important;
            font-size: clamp(14px, 1.1vw, 17px) !important;
            line-height: 1.25 !important;
            font-weight: 900 !important;
            letter-spacing: .01em;
            white-space: normal !important;
            overflow-wrap: normal !important;
            word-break: normal !important;
            writing-mode: horizontal-tb !important;
            text-orientation: mixed !important;
        }

        .ngbvd-dashboard-kpi .ngbvd-kpi-number {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 0 8px 0 !important;
            color: #06142c !important;
            font-size: clamp(28px, 2.35vw, 42px) !important;
            line-height: 1.02 !important;
            font-weight: 950 !important;
            letter-spacing: -.045em !important;
            white-space: nowrap !important;
            overflow-wrap: normal !important;
            word-break: keep-all !important;
        }

        .ngbvd-dashboard-kpi .ngbvd-kpi-note {
            display: block !important;
            width: auto !important;
            max-width: 100% !important;
            color: #64748b !important;
            font-size: clamp(12px, 1vw, 15px) !important;
            line-height: 1.35 !important;
            font-weight: 500 !important;
            white-space: normal !important;
            word-break: normal !important;
        }

        .ngbvd-dashboard-chart-row {
            margin-left: -10px;
            margin-right: -10px;
            row-gap: 20px;
            margin-top: 22px;
        }

        .ngbvd-dashboard-chart-row > [class*="col-"] {
            padding-left: 10px;
            padding-right: 10px;
        }

        .ngbvd-dashboard-chart-card {
            width: 100% !important;
            max-width: 100% !important;
            border: 0 !important;
            border-radius: 20px !important;
            box-shadow: 0 12px 28px rgba(15, 23, 42, .07) !important;
            overflow: hidden !important;
        }

        .ngbvd-dashboard-chart-card .card-block,
        .ngbvd-dashboard-chart-card .card-header {
            max-width: 100% !important;
        }

        .ngbvd-dashboard-chart-card .card-block {
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch;
        }

        .ngbvd-dashboard-chart-container {
            width: 100% !important;
            min-width: 0;
            min-height: 360px;
        }

        .ngbvd-dashboard-chart-container.is-tall {
            min-height: 520px;
        }

        @media (max-width: 1399.98px) {
            .ngbvd-dashboard-kpi .ngbvd-kpi-inner {
                grid-template-columns: 56px minmax(0, 1fr) !important;
                gap: 14px;
                padding: 20px !important;
            }

            .ngbvd-dashboard-kpi .ngbvd-kpi-icon {
                width: 56px !important;
                height: 56px !important;
                min-width: 56px !important;
                font-size: 27px !important;
            }

            .ngbvd-dashboard-kpi .ngbvd-kpi-number {
                font-size: clamp(27px, 2.15vw, 38px) !important;
            }
        }

        @media (max-width: 1199.98px) {
            .ngbvd-dashboard-kpi .ngbvd-kpi-inner {
                min-height: 156px;
            }
        }

        @media (max-width: 991.98px) {
            .ngbvd-dashboard-hero-clean {
                padding: 20px;
            }

            .ngbvd-dashboard-actions-clean {
                width: 100%;
                justify-content: flex-start;
            }

            .ngbvd-dashboard-actions-clean .btn {
                flex: 1 1 220px;
            }
        }

        @media (max-width: 767.98px) {
            .ngbvd-dashboard-kpi .ngbvd-kpi-inner {
                min-height: 132px;
                grid-template-columns: 54px minmax(0, 1fr) !important;
            }

            .ngbvd-dashboard-chart-container.is-tall {
                min-width: 640px;
                min-height: 420px;
            }
        }

        @media (max-width: 575.98px) {
            .ngbvd-dashboard-page-clean {
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

            .ngbvd-dashboard-hero-clean {
                border-radius: 16px;
                padding: 18px;
            }

            .ngbvd-dashboard-actions-clean {
                flex-direction: column;
                align-items: stretch;
            }

            .ngbvd-dashboard-actions-clean .btn {
                width: 100%;
                flex: 1 1 auto;
                white-space: normal;
            }

            .ngbvd-dashboard-kpi .ngbvd-kpi-inner {
                grid-template-columns: 52px minmax(0, 1fr) !important;
                gap: 14px;
                padding: 18px !important;
            }

            .ngbvd-dashboard-kpi .ngbvd-kpi-icon {
                width: 52px !important;
                height: 52px !important;
                min-width: 52px !important;
                border-radius: 16px !important;
                font-size: 25px !important;
            }

            .ngbvd-dashboard-chart-container {
                min-width: 500px;
                min-height: 330px;
            }

            .ngbvd-dashboard-chart-container.is-tall {
                min-width: 620px;
                min-height: 390px;
            }
        }
    </style>

    <div class="pcoded-content">
        <div class="pcoded-inner-content">
            <div class="main-body">
                <div class="page-wrapper">
                    <div class="page-body ngbvd-dashboard-page-clean ngbvd-highcharts-dashboard">
                        <div class="ngbvd-dashboard-hero-clean">
                            <div class="ngbvd-dashboard-hero-copy">
                                <span class="ngbvd-kicker">Decision Support Dashboard</span>
                                <h2>National GBV Incident Overview</h2>
                                <p>Monitor reported GBV cases, district trends, survivor demographics and incident categories.</p>
                            </div>
                            <div class="ngbvd-dashboard-actions-clean">
                                <a href="{{ route('/dataentry/index') }}" class="btn ngbvd-btn-primary"><i class="ti-plus"></i> Add New Case</a>
                                <a href="{{ route('/dataentry/list') }}" class="btn ngbvd-btn-soft"><i class="ti-list"></i> View Profiled Cases</a>
                            </div>
                        </div>

                        <div class="row ngbvd-dashboard-kpi-row">
                            @php
                                // All values below are supplied by DashboardController using the signed-in user's data scope.
                                // No dashboard KPI should query the database directly from the Blade view.
                                $reportedProfiles = $reportedProfiles ?? 0;
                                $incidentRecords = $incidentRecords ?? ($totalincidents ?? 0);
                                $referredCases = $referredCases ?? 0;
                                $reportingDistricts = $reportingDistricts ?? 0;
                                $femaleSurvivors = $femaleSurvivors ?? 0;
                                $maleSurvivors = $maleSurvivors ?? 0;
                                $resourcesCount = $resourcesCount ?? 0;
                                $activeUsersCount = $activeUsersCount ?? 0;
                            @endphp

                            <div class="col-12 col-sm-6 col-xl-3">
                                <div class="card ngbvd-dashboard-kpi">
                                    <div class="ngbvd-kpi-inner">
                                        <div class="ngbvd-kpi-icon bg-c-blue"><i class="icofont icofont-pie-chart"></i></div>
                                        <div class="ngbvd-kpi-copy"><div class="ngbvd-kpi-title">Reported Cases</div><div class="ngbvd-kpi-number">{{ number_format($reportedProfiles) }}</div><div class="ngbvd-kpi-note">Total survivor profiles</div></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-xl-3">
                                <div class="card ngbvd-dashboard-kpi">
                                    <div class="ngbvd-kpi-inner">
                                        <div class="ngbvd-kpi-icon bg-c-blue"><i class="icofont icofont-chart-histogram"></i></div>
                                        <div class="ngbvd-kpi-copy"><div class="ngbvd-kpi-title">Incident Records</div><div class="ngbvd-kpi-number">{{ number_format($incidentRecords) }}</div><div class="ngbvd-kpi-note">All incident categories</div></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-xl-3">
                                <div class="card ngbvd-dashboard-kpi">
                                    <div class="ngbvd-kpi-inner">
                                        <div class="ngbvd-kpi-icon bg-c-blue"><i class="icofont icofont-share"></i></div>
                                        <div class="ngbvd-kpi-copy"><div class="ngbvd-kpi-title">Referred Cases</div><div class="ngbvd-kpi-number">{{ number_format($referredCases) }}</div><div class="ngbvd-kpi-note">Marked referred</div></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-xl-3">
                                <div class="card ngbvd-dashboard-kpi">
                                    <div class="ngbvd-kpi-inner">
                                        <div class="ngbvd-kpi-icon bg-c-blue"><i class="icofont icofont-location-pin"></i></div>
                                        <div class="ngbvd-kpi-copy"><div class="ngbvd-kpi-title">Reporting Districts</div><div class="ngbvd-kpi-number">{{ number_format($reportingDistricts) }}</div><div class="ngbvd-kpi-note">Configured districts</div></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-xl-3">
                                <div class="card ngbvd-dashboard-kpi">
                                    <div class="ngbvd-kpi-inner">
                                        <div class="ngbvd-kpi-icon bg-c-pink"><i class="icofont icofont-woman-in-glasses"></i></div>
                                        <div class="ngbvd-kpi-copy"><div class="ngbvd-kpi-title">Female Survivors</div><div class="ngbvd-kpi-number">{{ number_format($femaleSurvivors) }}</div><div class="ngbvd-kpi-note">Profiles captured</div></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-xl-3">
                                <div class="card ngbvd-dashboard-kpi">
                                    <div class="ngbvd-kpi-inner">
                                        <div class="ngbvd-kpi-icon bg-c-green"><i class="icofont icofont-users-social"></i></div>
                                        <div class="ngbvd-kpi-copy"><div class="ngbvd-kpi-title">Male Survivors</div><div class="ngbvd-kpi-number">{{ number_format($maleSurvivors) }}</div><div class="ngbvd-kpi-note">Profiles captured</div></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-xl-3">
                                <div class="card ngbvd-dashboard-kpi">
                                    <div class="ngbvd-kpi-inner">
                                        <div class="ngbvd-kpi-icon bg-c-yellow"><i class="icofont icofont-folder-open"></i></div>
                                        <div class="ngbvd-kpi-copy"><div class="ngbvd-kpi-title">Resources</div><div class="ngbvd-kpi-number">{{ number_format($resourcesCount) }}</div><div class="ngbvd-kpi-note">Published documents</div></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-xl-3">
                                <div class="card ngbvd-dashboard-kpi">
                                    <div class="ngbvd-kpi-inner">
                                        <div class="ngbvd-kpi-icon bg-c-blue"><i class="icofont icofont-user-suited"></i></div>
                                        <div class="ngbvd-kpi-copy"><div class="ngbvd-kpi-title">System Users</div><div class="ngbvd-kpi-number">{{ number_format($activeUsersCount) }}</div><div class="ngbvd-kpi-note">Active users</div></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row ngbvd-dashboard-chart-row">
                            <div class="col-12">
                                <div class="card ngbvd-dashboard-chart-card">
                                    <div class="card-block"><div id="top_districts" class="ngbvd-dashboard-chart-container"></div></div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-6">
                                <div class="card ngbvd-dashboard-chart-card">
                                    <div class="card-block"><div id="national_status" class="ngbvd-dashboard-chart-container"></div></div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-6">
                                <div class="card ngbvd-dashboard-chart-card">
                                    <div class="card-block"><div id="regions" class="ngbvd-dashboard-chart-container"></div></div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="card ngbvd-dashboard-chart-card">
                                    <div class="card-block"><div id="column-chart" class="ngbvd-dashboard-chart-container is-tall"></div></div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="card ngbvd-dashboard-chart-card">
                                    <div class="card-block"><div id="column-chart-agegroups" class="ngbvd-dashboard-chart-container is-tall"></div></div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-6">
                                <div class="card ngbvd-dashboard-chart-card">
                                    <div class="card-header"><h5>Trends</h5><span>Trends of Incidents across the Years</span></div>
                                    <div class="card-block"><div id="line-example" class="ngbvd-dashboard-chart-container"></div></div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-6">
                                <div class="card ngbvd-dashboard-chart-card">
                                    <div class="card-header"><h5>Number of Incidents</h5><span>Total number of Incidents separated by Incident Category</span></div>
                                    <div class="card-block"><div id="donut-example" class="ngbvd-dashboard-chart-container"></div></div>
                                </div>
                            </div>
                            <div class="col-12 d-none">
                                <div class="card ngbvd-dashboard-chart-card">
                                    <div class="card-block"><div id="area-example" class="ngbvd-dashboard-chart-container"></div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        if (window.Highcharts) {
            Highcharts.setOptions({
                chart: { spacing: [16, 16, 18, 16], reflow: true },
                title: { style: { fontSize: '16px', fontWeight: '700' } },
                subtitle: { style: { fontSize: '12px' } },
                legend: { itemStyle: { fontSize: '12px' } },
                responsive: {
                    rules: [{
                        condition: { maxWidth: 576 },
                        chartOptions: {
                            chart: { spacing: [10, 8, 12, 8] },
                            title: { style: { fontSize: '14px' } },
                            subtitle: { style: { fontSize: '11px' } },
                            xAxis: { labels: { style: { fontSize: '10px' } } },
                            yAxis: { labels: { style: { fontSize: '10px' } } },
                            legend: { itemStyle: { fontSize: '10px' } },
                            plotOptions: { series: { dataLabels: { style: { fontSize: '10px', textOutline: 'none' } } } }
                        }
                    }]
                }
            });
        }
    </script>

    {{-- All dashboard chart data is now rendered from scoped controller payloads in dashboard.charts. --}}

    @push('scripts')
        @include('dashboard.charts', ['dashboardPayload' => $dashboardPayload ?? []])
        <script>
            window.addEventListener('load', function () {
                if (window.Highcharts && Highcharts.charts) {
                    Highcharts.charts.forEach(function (chart) { if (chart) { chart.reflow(); } });
                }
            });
        </script>
    @endpush
@endsection