@extends('layouts.app')

@section('dashboard-title')
    <h3>NPIWC-II - FINANCIAL PROGRESS DASHBOARD</h3>
@endsection

@section('content')
<!-- Inner Navbar -->
<div class="flex items-stretch lg:fixed z-5 top-(--header-height) start-(--sidebar-width) end-5 h-(--navbar-height) mx-5 lg:mx-0 bg-muted"
    id="navbar" style="margin-top: 32px">
    <div class="rounded-t-xl border border-input border-b-input filter-container flex items-stretch grow nav-color">
        <!-- Container -->
        <div class="kt-container-fluid flex justify-center items-stretch gap-5">
            <div class="grid items-stretch">
                <div class="kt-scrollable-x-auto flex items-stretch">
                    <div class="kt-menu gap-5 lg:gap-7.5" data-kt-menu="true" data-is-financial="true">

                        <!-- <x-dropdown-filter title="Zone/Unit" :options="['Select All', 'Punjab', 'KP', 'ICT', 'GB', 'Balochistan', 'AJK']" searchable="true" /> -->
                        <x-dropdown-filter
                            title="Zone/Unit"
                            name="zone"
                            :api="'/api/zone/list'"
                            :options="[]"
                            searchable="true" />

                    </div>
                </div>
            </div>

        </div>
        <!-- Right section: Download icon -->
        @can('data export')
        <div class="flex items-center ml-auto me-2 export-white">
            <a href="{{ url('/api/export-financialProgress') }}"
                class="export-btn flex items-center gap-2 px-4 py-2 text-black font-semibold rounded-lg shadow-sm hover:shadow-md transition-all duration-200 whitespace-nowrap">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 12v8m0 0l-4-4m4 4l4-4" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v8" />
                </svg>
                Dataset
            </a>
        </div>
        @endcan
        <!-- End of Container -->
    </div>
</div>
<!-- End of Inner Navbar -->


<!-- Container -->
<div class="kt-container-fluid" style="margin-top: 32px">
    <div class="grid gap-5 lg:gap-7.5 mb-5">
        <!-- begin: grid -->
        <div class="grid lg:grid-cols-2 gap-5 lg:gap-7.5 items-stretch">
            <div class="lg:col-span-1">
                <div class="kt-card h-full">
                    <div class="kt-card-content flex flex-col items-center justify-center p-6 gap-6">

                        <!-- Donut Charts -->
                        <div class="flex flex-col lg:flex-row items-center justify-center gap-6 mt-7">
                            <div class="flex flex-col items-center">
                                <!-- previously added class class="w-[160px] h-[160px]" on both -->
                                <div id="donutPC1"></div>
                                <div
                                    class="graph-title-text-sm text-white text-center rounded-md py-1.5 px-3 text-sm shadow-md" style="font-size: 1.5em !important ">
                                    Overall Funds Provision PC-1
                                </div>
                            </div>

                            <div class="flex flex-col items-center">
                                <div id="donutReleases" class="w-[160px] h-[160px]"></div>
                                <div
                                    class="graph-title-text-sm text-white text-center rounded-md py-1.5 px-3 text-sm shadow-md" style="font-size: 1.5em !important">
                                    Overall Releases
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>




            <div class="lg:col-span-1">
                <div class="kt-card h-full">
                    <div class="kt-card-content flex flex-col place-content-center gap-5 pb-0">

                        <!-- Chart Container -->
                         <!-- previously added class   class="w-full h-[500px]"-->
                        <div id="overallPC1Chart" class="w-full h-full"></div>

                    </div>
                </div>
            </div>


        </div>
        <!-- end: grid -->
    </div>

    {{-- section 2 --}}
    <div class="grid gap-5 lg:gap-7.5 mb-5">
        <!-- begin: grid -->
        <div class="grid lg:grid-cols-2 gap-5 lg:gap-7.5 items-stretch">
            <div class="lg:col-span-1">
                <div class="kt-card h-full">
                    <div class="kt-card-content flex flex-col items-center justify-center p-6 gap-6">

                        <!-- Donut Charts -->
                        <div class="flex flex-col lg:flex-row items-center justify-center gap-6 mt-7">
                            <div class="flex flex-col items-center">
                                <div id="donutPC1_2" class="w-[160px] h-[160px]"></div>
                                <div
                                    class="graph-title-text-sm text-white text-center rounded-md py-1.5 px-3 text-sm shadow-md" style="font-size: 1.5em !important">
                                    PSDP Funds Provision PC-1
                                </div>
                            </div>

                            <div class="flex flex-col items-center">
                                <div id="donutReleases_2" class="w-[160px] h-[160px]"></div>
                                <div
                                    class="graph-title-text-sm text-white text-center rounded-md py-1.5 px-3 text-sm shadow-md" style="font-size: 1.5em !important">
                                    PSDP Releases
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>




            <div class="lg:col-span-1">
                <div class="kt-card h-full">
                    <div class="kt-card-content flex flex-col place-content-center gap-5 pb-0">

                        <!-- Chart Container -->
                        <div id="overallPC1Chart_2" class="w-full h-[500px]"></div>

                    </div>
                </div>
            </div>


        </div>
        <!-- end: grid -->
    </div>


    {{-- section 3 --}}
    <div class="grid gap-5 lg:gap-7.5 mb-5">
        <!-- begin: grid -->
        <div class="grid lg:grid-cols-2 gap-5 lg:gap-7.5 items-stretch">
            <div class="lg:col-span-1">
                <div class="kt-card h-full">
                    <div class="kt-card-content flex flex-col items-center justify-center p-6 gap-6">

                        <!-- Donut Charts -->
                        <div class="flex flex-col lg:flex-row items-center justify-center gap-6 mt-7">
                            <div class="flex flex-col items-center">
                                <div id="donutPC1_3" class="w-[160px] h-[160px]"></div>
                                <div
                                    class="graph-title-text-sm text-white text-center rounded-md py-1.5 px-3 text-sm shadow-md" style="font-size: 1.5em !important">
                                    ADP Funds Provision PC-1
                                </div>
                            </div>

                            <div class="flex flex-col items-center">
                                <div id="donutReleases_3" class="w-[160px] h-[160px]"></div>
                                <div
                                    class="graph-title-text-sm text-white text-center rounded-md py-1.5 px-3 text-sm shadow-md" style="font-size: 1.5em !important">
                                    ADP Releases
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>




            <div class="lg:col-span-1">
                <div class="kt-card h-full">
                    <div class="kt-card-content flex flex-col place-content-center gap-5 pb-0">

                        <!-- Chart Container -->
                        <div id="overallPC1Chart_3" class="w-full h-[500px]"></div>

                    </div>
                </div>
            </div>


        </div>
        <!-- end: grid -->
    </div>


</div>
<!-- End of Container -->
@endsection

@section('scripts')
<!-- @vite('resources/js/pages/financial-dashboard.js') -->
@vite('resources/js/generic-filter.js')
@endsection

</rewritten_file>