@extends('layouts.admin')

@section('title', 'Hq Staff Dashboard')
@section('page-title', 'Dashboard')

@section('content')

    <div class="container-fluid mt-4 dashboard-matrics">
        <div>
            <h1 class="h3 d-inline align-middle">Dashboard</h1>
            <p>Overview of the application metrics for the selected year.</p>
        </div>
        <form method="GET" id="yearFilterForm">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="row align-items-end">

                        {{-- Financial Year --}}
                        <div class="col-md-4">
                            <label class="form-label"><b>Financial Year</b></label>
                            <select name="year" class="form-control">
                                @foreach (range(date('Y'), date('Y') - 5) as $yr)
                                    <option value="{{ $yr }}"
                                        {{ request('year', $selectedYear) == $yr ? 'selected' : '' }}>
                                        {{ $yr }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Apply Filters Button --}}
                        <div class="col-auto ms-auto">
                            <button type="submit" class="btn btn-primary">
                                <i class="align-middle me-1 fas fa-fw fa-filter"></i>
                                Apply Filters
                            </button>
                        </div>

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

        {{-- <div class="mb-3 d-flex align-items-center justify-content-between flex-wrap"> --}}

        {{-- <div class="mt-2 mt-md-0 d-flex align-items-center justify-content-between flex-wrap gap-3">
                <form id="yearFilterForm" method="GET">
                    <select name="year" class="form-select"
                        onchange="document.getElementById('yearFilterForm').submit()">
                        @foreach (range(date('Y'), date('Y') - 5) as $yr)
                            <option value="{{ $yr }}" {{ $yr == $selectedYear ? 'selected' : '' }}>
                                {{ $yr }}
                            </option>
                        @endforeach
                    </select>
                </form>
                <a href="#" class="btn btn-primary">Go To
                    Reports</a>
            </div> --}}

        {{-- </div> --}}

        <div class="row">

            <!--left-->
            <div class="col-md-3">
                <div class="card" style="background: #1D53DC; color: #fff; min-height: 234px;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col mt-0">
                                <h5 class="card-title text-white">Total Applications</h5>
                            </div>
                        </div>
                        <h1 class="mt-1 mb-3 text-white">{{ $submittedCount }}</h1>
                        <hr>
                        <div class="my-2">
                            <small class="text-uppercase">Submission Portal</small>
                        </div>
                    </div>
                </div>
            </div>
            <!--left-->

            <!--right-->
            <div class="col-md-9">

                <!--row1-->
                <div class="row">
                    <!--1-->
                    {{-- <div class="col-md-3 pe-0">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title">Inbox</h5>
                                    </div>
                                </div>
                                <h1 class="my-0" style="color: #135BEC;">42</h1>
                                <div class="mb-0">
                                    <span class="text-muted small">Pending Action</span>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                    <!--1-->
                    <!--2-->
                    <div class="col-md-4 pe-0">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title">Approved</h5>
                                    </div>
                                </div>
                                <h1 class="my-0" style="color: #049467;">{{ $approvedApplicationCount }}</h1>
                                <div class="mb-0">
                                    <span class="text-muted small">Successfully Processed</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--2-->
                    <!--3-->
                    <div class="col-md-4 pe-0">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title">Rejected</h5>
                                    </div>
                                </div>
                                <h1 class="my-0" style="color: #E35454;">{{ $rejectedApplicationCount }}</h1>
                                <div class="mb-0">
                                    <span class="text-muted small">Finalized</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--3-->
                    <!--4-->
                    <div class="col-md-4 pe-0">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title">Defected</h5>
                                    </div>
                                </div>
                                <h1 class="my-0" style="color: #E9570B;">{{ $defectedApplicationCount }}</h1>
                                <div class="mb-0">
                                    <span class="text-muted small">Defected For Clarification</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--4-->
                </div>
                <!--row1-->

                <!--row2-->
                <div class="row">
                    <!--1-->
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col mt-0">
                                        <h5 class="card-title">Fund Transferred</h5>
                                        <h1 class="my-0" style="font-size: 20px;">{{ $fundTransferredCount }} <span
                                                class="badge badge-success-light"
                                                style="font-size: 12px; font-weight: 500;"> <i
                                                    class="mdi mdi-arrow-bottom-right"></i> Apps</span></h1>
                                    </div>
                                    <div class="col-auto ms-auto text-end">
                                        <span class="text-muted">Total Amount</span>
                                        <h1 class="my-0" style="font-size: 20px; font-weight: 500; color: #9336E9;">
                                            {{ formatINR($fundTransferredAmount) }}</h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--1-->
                    <!--1-->
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col mt-0">
                                        <h5 class="card-title">Fund Disbursed</h5>
                                        <h1 class="my-0" style="font-size: 20px;">{{ $fundDisbursedCount }} <span
                                                class="badge badge-success-light"
                                                style="font-size: 12px; font-weight: 500;"> <i
                                                    class="mdi mdi-arrow-bottom-right"></i> Apps</span></h1>
                                    </div>
                                    <div class="col-auto ms-auto text-end">
                                        <span class="text-muted">Total Amount</span>
                                        <h1 class="my-0" style="font-size: 20px; font-weight: 500; color: #0991B1;">
                                            {{ formatINR($fundDisbursedAmount) }}</h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--1-->
                </div>
                <!--row2-->

            </div>
            <!--right-->

        </div>
        <!--row-->
        @if ($role == 2)
            <div class="row">
                <div class="col-12 col-lg-8 d-flex">
                    <div class="card flex-fill w-100">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Applications by District at {{ $selectedYear }}</h5>
                        </div>
                        <div class="card-body pt-2 pb-3">
                            <div class="chart chart-md">
                                <canvas id="statusPieChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-4 d-flex">
                    <div class="card flex-fill w-100">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Applications by Scheme</h5>
                        </div>
                        <div class="card-body px-4">
                            dddd
                        </div>
                    </div>
                </div>
            </div>
        @endif

    @endsection

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {

                const ctx = document.getElementById('statusPieChart');

                new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels: [
                            'Submitted',
                            'Approved',
                            'Rejected',
                            'Pending',
                            'Defected'
                        ],
                        datasets: [{
                            data: [
                                {{ $submittedCount }},
                                {{ $approvedApplicationCount }},
                                {{ $rejectedApplicationCount }},
                                {{ $pendingApplicationCount }},
                                {{ $defectedApplicationCount }}
                            ],
                            backgroundColor: [
                                '#2196F3', // Submitted - Blue
                                '#4CAF50', // Approved - Green
                                '#F44336', // Rejected - Red
                                '#FFC107', // Pending - Amber
                                '#9C27B0' // Defected - Purple
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }
                });

            });
        </script>
    @endpush