@extends('layouts.admin')

@section('title', 'Staff Dashboard')

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

@section('content')
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Welcome to Staff Dashboard</h5>
        </div>
        <div class="card-body">

            {{-- show user id --}}
            {{ $user->id }}

            {{--  Summary Cards --}}
            <div class="row mb-4">
                {{-- Total Applications --}}
                <div class="col-xl-4 col-sm-6 mb-4">
                    <div class="card shadow-sm border-left-primary">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Applications</p>
                                    <h4 class="font-weight-bolder">{{ $applicationCount }}</h4>
                                    <p class="mb-0 text-muted text-sm">Excluding Draft & Rejected</p>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                                        <i class="ni ni-collection text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Eligible Applications --}}
                <div class="col-xl-4 col-sm-6 mb-4">
                    <div class="card shadow-sm border-left-success">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Eligible Applications</p>
                                    <h4 class="font-weight-bolder text-success">{{ $eligibleCount }}</h4>
                                    <p class="mb-0 text-muted text-sm">Applications under Eligible list</p>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-success shadow text-center border-radius-md">
                                        <i class="ni ni-check-bold text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Ineligible Applications --}}
                <div class="col-xl-4 col-sm-6 mb-4">
                    <div class="card shadow-sm border-left-danger">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Ineligible Applications</p>
                                    <h4 class="font-weight-bolder text-danger">{{ $ineligibleCount }}</h4>
                                    <p class="mb-0 text-muted text-sm">Applications under Ineligible list</p>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="icon icon-shape bg-gradient-danger shadow text-center border-radius-md">
                                        <i class="ni ni-fat-remove text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{--  Applications by Type --}}
            <div class="row">
                @foreach ($applicationsByType as $type)
                    <div class="col-xl-3 col-sm-6 mb-4">
                        <div class="card shadow-sm">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <p class="text-sm mb-0 text-uppercase font-weight-bold">
                                            {{ $type->application_type_name }}
                                        </p>
                                        <h5 class="font-weight-bolder">{{ $type->count }}</h5>
                                        <p class="mb-0 text-muted text-sm">Active Applications</p>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div class="icon icon-shape bg-gradient-info shadow text-center border-radius-md">
                                            <i class="ni ni-folder-17 text-lg opacity-10" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

        </div>
    </div>
@endsection