@extends('admin.layouts.app')

@section('content')
<div class="container-fluid">

    <div class="header">
        <!-- <h1 class="header-title" style="margin-top:-40px !important;">
            Welcome back, MPFI Portal!
        </h1> -->
        {{-- <p class="header-subtitle">You have 24 new messages and 5 new notifications.</p> --}}
    </div>


    <div class="row" style="margin-top:-40px !important;">
        <div class="col-xl-12 col-xxl-12 d-flex">
            <div class="w-100">
            <div class="row">
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title">Athletes</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="avatar">
                                            <div class="avatar-title rounded-circle bg-primary-dark">
                                                <i class="fas fa-fw fa-walking"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="display-5 mt-1 mb-3">{{$members->athletes_all}}</h1>
                                <div class="mb-0">
                                    <span class="text-danger"> <i
                                            class="mdi mdi-arrow-bottom-right"></i>{{$members->athletes_today}}</span>
                                    newly added today.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title">Coach</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="avatar">
                                            <div class="avatar-title rounded-circle bg-primary-dark">
                                                <i class="fas fa-fw fa-user-graduate"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="display-5 mt-1 mb-3">{{$members->coach_all}}</h1>
                                <div class="mb-0">
                                    <span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i>
                                        {{$members->coach_today}} </span>
                                    newly added today
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title">Judge</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="avatar">
                                            <div class="avatar-title rounded-circle bg-primary-dark">
                                                <i class="fas fa-fw fa-certificate"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="display-5 mt-1 mb-3">{{$members->judge_all}}</h1>
                                <div class="mb-0">
                                    <span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i>
                                        {{$members->judge_today}} </span>
                                    newly added today
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title">Official</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="avatar">
                                            <div class="avatar-title rounded-circle bg-primary-dark">
                                                <i class="fas fa-fw fa-copy"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="display-5 mt-1 mb-3">{{$members->official_all}}</h1>
                                <div class="mb-0">
                                    <span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i>
                                        {{$members->official_today}} </span>
                                    newly added today
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title">Volunteer</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="avatar">
                                            <div class="avatar-title rounded-circle bg-primary-dark">
                                                <i class="fas fa-fw fa-users"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="display-5 mt-1 mb-3"> {{$members->volunteer_all}}</h1>
                                <div class="mb-0">
                                    <span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i>
                                        {{$members->volunteer_today}} </span>
                                    newly added today
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-8 col-xxl-9 d-flex">
            <div class="card flex-fill">
                <div class="card-header">
                    {{-- <div class="card-actions float-end">
                        <a href="#" class="me-1">
                            <i class="align-middle" data-feather="refresh-cw"></i>
                        </a>
                        <div class="d-inline-block dropdown show">
                            <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
                                <i class="align-middle" data-feather="more-vertical"></i>
                            </a>

                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </div>
                    </div> --}}
                    <h5 class="card-title mb-0">Pending applications for approval</h5>
                </div>
                <div class="table-responsive table-card" style="max-height:55vh; height: auto;  overflow-y: scroll;">
                    <table class="table table-sm table-centered align-middle table-nowrap mb-0">                    
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Application ID</th>
                            <th>Name</th>
                            <!-- <th>Date Of Birth</th>                           -->
                            <th>Profile</th>
                            <th>State</th>
                            <th>District</th>
                            <!-- <th>Status</th> -->
                            <th>Action</th>
                           
                        </tr>
                        </thead>
                        <tbody id="dashAllApplicationsTbody">

                         


                        </tbody>
                    
                    </table>
                    
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-xxl-3 d-flex order-2 order-xxl-3">
            <div class="card flex-fill w-100">
                <div class="card-header">
                    <div class="card-actions float-end">
                        <a href="#" class="me-1">
                            <i class="align-middle" data-feather="refresh-cw"></i>
                        </a>
                        <div class="d-inline-block dropdown show">
                            <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
                                <i class="align-middle" data-feather="more-vertical"></i>
                            </a>

                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </div>
                    </div>
                    <h5 class="card-title mb-0">Profile Ratio</h5>
                </div>
                <div class="card-body d-flex">
                    <div class="align-self-center w-100">
                        <div class="py-3">
                            <!-- <div class="chart chart-xs">
                                <canvas id="chartjs-dashboard-pie"></canvas>
                            </div> -->
                            <div class="chart">
								<div id="apexcharts-pie" style="max-width: 540px;margin:auto;"></div>
							</div>
                        </div>

                        <!-- <table class="table mb-0 text-tiny">
                            <tbody>
                                <tr>
                                    <td><i class="fas fa-circle text-primary fa-fw"></i> Chrome</td>
                                    <td class="text-end">12</td>
                                </tr>
                                <tr>
                                    <td><i class="fas fa-circle text-warning fa-fw"></i> Firefox</td>
                                    <td class="text-end">4003</td>
                                </tr>
                                <tr>
                                    <td><i class="fas fa-circle text-danger fa-fw"></i> IE</td>
                                    <td class="text-end">1589</td>
                                </tr>
                            </tbody>
                        </table> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection