@extends('layouts.admin')

@section('title', 'Registrar 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>

        <div class="card mb-3">
            <div class="card-body">
                <form method="GET">
                    <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 }}" {{ $yr == $selectedYear ? 'selected' : '' }}>
                                        {{ $yr }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- District --}}
                        <div class="col-md-4">
                            <label class="form-label"><b>District</b></label>
                            <select name="district_id" class="form-control district_dropdown">
                                <option value="">All Districts</option>
                                @foreach ($districts as $district)
                                    <option value="{{ Crypt::encryptString($district->id) }}"
                                        {{ $districtId == $district->id ? 'selected' : '' }}>
                                        {{ $district->district }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Apply 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>
                </form>
            </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">{{ $totalApplications }}</h1>
                        {{-- <div class="mb-4">
                            <span class="badge badge-success-light  text-white"> <i class="mdi mdi-arrow-bottom-right"></i>
                                + 5.2% </span>
                            <span class="text-white">vs last year</span>
                        </div> --}}
                        <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;">{{ $applicationInboxCount }}</h1>
                                <div class="mb-0">
                                    <span class="text-muted small">Pending Action</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--1-->
                    <!--2-->
                    <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">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-3 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-3 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;">{{ $fundDisbursedApplications }} <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>

        <div class="row">

            <div class="col-12 col-lg-4">
                <h4 class="card-title mb-3">Pending Workflow</h4>
                <div class="card w-100 mb-2">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title mb-0">At Societies</h5>
                            </div>
                            <div class="col-auto ms-auto text-end">
                                <h1 class="my-0" style="font-size: 20px; font-weight: 500; color: #6366F1;">
                                    {{ $pendingAtSocietyCount }}</h1>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card w-100 mb-2">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title mb-0">At Unit Inspector</h5>
                            </div>
                            <div class="col-auto ms-auto text-end">
                                <h1 class="my-0" style="font-size: 20px; font-weight: 500; color: #3B82F6;">
                                    {{ $pendingAtUnitCount }}</h1>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card w-100 mb-2">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title mb-0">At Asst. Registrar</h5>
                            </div>
                            <div class="col-auto ms-auto text-end">
                                <h1 class="my-0" style="font-size: 20px; font-weight: 500; color: #125AEB;">
                                    {{ $pendingAtAssistantCount }}</h1>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card w-100 mb-2">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title mb-0">At HQ</h5>
                            </div>
                            <div class="col-auto ms-auto text-end">
                                <h1 class="my-0" style="font-size: 20px; font-weight: 500; color: #E9570B;">
                                    {{ $pendingAtHQCount }}</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-4 d-flex">
                <div class="card flex-fill w-100">
                    <div class="card-header">
                        <div class="float-end">
                            <a href="#">View Report</a>
                        </div>
                        <h5 class="card-title mb-0">Pending Distribution</h5>
                    </div>
                    <div class="card-body pt-2 pb-3">
                        <div class="chart chart-md d-flex align-items-center justify-content-center text-center">
                            <canvas id="statusPieChart"></canvas>

                            <p id="noDataText" class="text-muted mt-3" style="display:none;">
                                No data found for the selected district
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card flex-fill w-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Type wise Breakdown</h5>
                    </div>
                    <div class="card-body pt-2 pb-3">

                        <div class="row justify-content-center mt-0 mb-2">
                            <div class="col-auto">
                                <nav class="nav btn-group" role="tablist">
                                    <a href="#typeOne" class="btn btn-outline-primary active" data-bs-toggle="tab"
                                        aria-selected="true" role="tab">Type 1</a>
                                    <a href="#typeTwo" class="btn btn-outline-primary" data-bs-toggle="tab"
                                        aria-selected="false" tabindex="-1" role="tab">Type 2</a>
                                </nav>
                            </div>
                        </div>

                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="typeOne" role="tabpanel">
                                <div class="row">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item py-2">
                                            <p class="mb-0 font-weight-bold">Total Applications <span class="float-end"
                                                    style="color:#313B4C">{{ $type1Stats['inbox'] }}</span></p>
                                        </li>
                                        <li class="list-group-item py-2">
                                            <p class="mb-0 font-weight-bold">Pending <span class="float-end"
                                                    style="color:#E9570B">{{ $type1Stats['pending'] }}</span></p>
                                        </li>
                                        <li class="list-group-item py-2">
                                            <p class="mb-0 font-weight-bold">Approved <span class="float-end"
                                                    style="color:#049467">{{ $type1Stats['approved'] }}</span></p>
                                        </li>
                                        <li class="list-group-item py-2">
                                            <p class="mb-0 font-weight-bold">Rejected <span class="float-end"
                                                    style="color:#E35454">{{ $type1Stats['rejected'] }}</span></p>
                                        </li>
                                        <li class="list-group-item py-2">
                                            <p class="mb-0 font-weight-bold">Defected <span class="float-end"
                                                    style="color:#5A6B84">{{ $type1Stats['defected'] }}</span></p>
                                        </li>
                                        <li class="list-group-item py-2">
                                            <p class="mb-0 font-weight-bold">Fund Transferred <span class="float-end"
                                                    style="color:#9336E9">{{ $type1Stats['fund_transferred']['count'] }}</span>
                                            </p>
                                        </li>
                                        <li class="list-group-item py-2">
                                            <p class="mb-0 font-weight-bold">Fund Disbursed <span class="float-end"
                                                    style="color:#0991B1">{{ $type1Stats['fund_disbursed']['count'] }}</span>
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="typeTwo" role="tabpanel">
                                <div class="row">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item py-2">
                                            <p class="mb-0 font-weight-bold">Total Applications <span class="float-end"
                                                    style="color:#313B4C">{{ $type2Stats['inbox'] }}</span></p>
                                        </li>
                                        <li class="list-group-item py-2">
                                            <p class="mb-0 font-weight-bold">Pending <span class="float-end"
                                                    style="color:#E9570B">{{ $type2Stats['pending'] }}</span></p>
                                        </li>
                                        <li class="list-group-item py-2">
                                            <p class="mb-0 font-weight-bold">Approved <span class="float-end"
                                                    style="color:#049467">{{ $type2Stats['approved'] }}</span></p>
                                        </li>
                                        <li class="list-group-item py-2">
                                            <p class="mb-0 font-weight-bold">Rejected <span class="float-end"
                                                    style="color:#E35454">{{ $type2Stats['rejected'] }}</span></p>
                                        </li>
                                        <li class="list-group-item py-2">
                                            <p class="mb-0 font-weight-bold">Defected <span class="float-end"
                                                    style="color:#5A6B84">{{ $type2Stats['defected'] }}</span></p>
                                        </li>
                                        <li class="list-group-item py-2">
                                            <p class="mb-0 font-weight-bold">Fund Transferred <span class="float-end"
                                                    style="color:#9336E9">{{ $type2Stats['fund_transferred']['count'] }}</span>
                                            </p>
                                        </li>
                                        <li class="list-group-item py-2">
                                            <p class="mb-0 font-weight-bold">Fund Disbursed <span class="float-end"
                                                    style="color:#0991B1">{{ $type2Stats['fund_disbursed']['count'] }}</span>
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

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

        </div>


        {{-- @if ($role == 2)
            @endif --}}

    </div>

@endsection

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

            const dataValues = [
                {{ $pendingAtSocietyCount }},
                {{ $pendingAtUnitCount }},
                {{ $pendingAtAssistantCount }},
                {{ $pendingAtHQCount }}
            ];

            const hasData = dataValues.some(value => value > 0);

            const canvas = document.getElementById('statusPieChart');
            const noDataText = document.getElementById('noDataText');

            if (!hasData) {
                canvas.style.display = 'none';
                noDataText.style.display = 'block';
                return;
            }

            new Chart(canvas, {
                type: 'doughnut',
                data: {
                    labels: [
                        'Pending At Society',
                        'Pending At Unit',
                        'Pending At Assistant',
                        'Pending At HQ'
                    ],
                    datasets: [{
                        data: dataValues,
                        backgroundColor: [
                            '#2196F3',
                            '#4CAF50',
                            '#F44336',
                            '#FFC107'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    cutout: '70%',
                    plugins: {
                        legend: {
                            position: 'bottom',
                            display: false
                        }
                    }
                }
            });

        });
    </script>
@endpush