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

@section('content')
<style>
.navbar-toggler,
.hamburger,
.menu-toggle,
[data-kt-drawer-toggle] {
    display: none !important;
}
</style>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>


<section class="sphf-page">

    <!-- HEADER -->
    <div class="sphf-page__heading-row">
        <div class="sphf-page__title-wrap">
            <h1 class="sphf-page__title">Dashboard Summary</h1>
            <span class="sphf-page__badge">Updated 10-03-26</span>
        </div>

        <button type="button" class="sphf-export-btn">Export</button>
    </div>

    <div class="bg-slate-100 p-4 font-sans">
        <div class="mx-auto max-w-[1900px]">

            <!-- CHART ROW -->
            <div class="grid grid-cols-1 gap-4 xl:grid-cols-3">

                <div class="rounded-2xl border bg-white shadow-sm">
                    <div class="border-b px-4 py-4">
                        <h2 class="text-[18px] font-bold">Financial Delay Health</h2>
                    </div>
                    <div class="p-4">
                        <div id="donutChart"></div>
                    </div>
                </div>

                <div class="rounded-2xl border bg-white shadow-sm">
                    <div class="border-b px-4 py-4">
                        <h2 class="text-[18px] font-bold">Tranche Release vs Withdrawal</h2>
                    </div>
                    <div class="p-4">
                        <div id="trancheChart"></div>
                    </div>
                </div>

                <div class="rounded-2xl border bg-white shadow-sm">
                    <div class="border-b px-4 py-4">
                        <h2 class="text-[18px] font-bold">Bank Bottlenecks</h2>
                    </div>
                    <div class="p-4">
                        <div id="bankChart"></div>
                    </div>
                </div>

            </div>

            <!-- 🔥 ORIGINAL TABLE (EXACT RESTORED) -->
            <div class="mt-4 rounded-2xl border border-slate-200 bg-white shadow-sm">

                <div class="flex items-center justify-between border-b border-slate-200 px-4 py-4">
                    <h2 class="text-[18px] font-bold text-slate-900">
                        Withdrawal Date Based Financial Alerts
                    </h2>
                    <span class="rounded-full bg-green-100 px-3 py-1 text-sm font-semibold text-green-700">
                        Now Possible
                    </span>
                </div>

                <div class="p-4">

                    <div class="overflow-hidden rounded-2xl border border-slate-200">

                        <table class="w-full border-collapse text-left text-sm">

                            <thead class="bg-slate-50 text-slate-600">
                                <tr class="border-b border-slate-200">
                                    <th class="px-4 py-3 font-semibold">FINANCIAL EVENT</th>
                                    <th class="px-4 py-3 font-semibold">CASES</th>
                                    <th class="px-4 py-3 font-semibold">AVG DAYS</th>
                                    <th class="px-4 py-3 font-semibold">RED CASES</th>
                                    <th class="px-4 py-3 font-semibold">LIKELY REASON</th>
                                    <th class="px-4 py-3 font-semibold">DECISION</th>
                                </tr>
                            </thead>

                            <tbody class="bg-white text-slate-800">

                                <tr class="border-b border-slate-200">
                                    <td class="px-4 py-4">Tranche released but not withdrawn</td>
                                    <td class="px-4 py-4">31,850</td>
                                    <td class="px-4 py-4">18</td>
                                    <td class="px-4 py-4">
                                        <span class="rounded-full bg-red-100 px-3 py-1 font-semibold text-red-700">
                                            2,450
                                        </span>
                                    </td>
                                    <td class="px-4 py-4">Bank branch delay / beneficiary access</td>
                                    <td class="px-4 py-4">Branch-wise management follow-up</td>
                                </tr>

                                <tr class="border-b border-slate-200">
                                    <td class="px-4 py-4">Withdrawal after 1st tranche delayed</td>
                                    <td class="px-4 py-4">18,400</td>
                                    <td class="px-4 py-4">22</td>
                                    <td class="px-4 py-4">
                                        <span class="rounded-full bg-red-100 px-3 py-1 font-semibold text-red-700">
                                            1,260
                                        </span>
                                    </td>
                                    <td class="px-4 py-4">Account activation issue</td>
                                    <td class="px-4 py-4">Bank focal person escalation</td>
                                </tr>

                                <tr class="border-b border-slate-200">
                                    <td class="px-4 py-4">Withdrawal after 2nd tranche delayed</td>
                                    <td class="px-4 py-4">12,200</td>
                                    <td class="px-4 py-4">19</td>
                                    <td class="px-4 py-4">
                                        <span class="rounded-full bg-red-100 px-3 py-1 font-semibold text-red-700">
                                            830
                                        </span>
                                    </td>
                                    <td class="px-4 py-4">CNIC/account mismatch</td>
                                    <td class="px-4 py-4">Data correction and reprocessing</td>
                                </tr>

                                <tr class="border-b border-slate-200">
                                    <td class="px-4 py-4">Failed or reversed transactions</td>
                                    <td class="px-4 py-4">8,400</td>
                                    <td class="px-4 py-4">14</td>
                                    <td class="px-4 py-4">
                                        <span class="rounded-full bg-red-100 px-3 py-1 font-semibold text-red-700">
                                            610
                                        </span>
                                    </td>
                                    <td class="px-4 py-4">Validation failure</td>
                                    <td class="px-4 py-4">Reconcile with bank and MIS</td>
                                </tr>

                                <tr>
                                    <td class="px-4 py-4">Withdrawal date missing</td>
                                    <td class="px-4 py-4">0</td>
                                    <td class="px-4 py-4">0</td>
                                    <td class="px-4 py-4">
                                        <span class="rounded-full bg-red-100 px-3 py-1 font-semibold text-red-700">
                                            0
                                        </span>
                                    </td>
                                    <td class="px-4 py-4">Resolved after new data received</td>
                                    <td class="px-4 py-4">Keep mandatory field validation</td>
                                </tr>

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>
    </div>

</section>

@endsection


@section('scripts')

<script>
new ApexCharts(document.querySelector("#donutChart"), {
    chart: { type: 'donut', height: 280 },
    series: [73, 17, 7, 3],
    labels: ['Green', 'Yellow', 'Amber', 'Red'],
    colors: ['#16a34a', '#facc15', '#f59e0b', '#ef4444'],
    legend: { position: 'bottom' }
}).render();

new ApexCharts(document.querySelector("#trancheChart"), {
    chart: {
        type: 'bar',
        height: 280
    },

    series: [
        { name: 'Released', data: [195, 148, 102, 62] },
        { name: 'Withdrawn', data: [188, 142, 96, 58] }
    ],

    xaxis: {
        categories: ['1st', '2nd', '3rd', '4th']
    },

    colors: ['#2563eb', '#16a34a'],

    dataLabels: {
        enabled: false
    },

    legend: {
        show: true,
        position: 'top'
    }

}).render();

new ApexCharts(document.querySelector("#bankChart"), {
    chart: { type: 'bar', height: 280 },

    series: [{
        data: [92, 55, 80, 42, 94]
    }],

    xaxis: {
        categories: ['HBL', 'Meezan', 'NBP', 'MCB', 'Sindh Bank']
    },

    plotOptions: {
        bar: {
            horizontal: true
        }
    },

    colors: ['#f97316'],

    dataLabels: {
        enabled: false   // 🔥 hides 92, 55, etc.
    }

}).render();
</script>

@endsection