@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
<div class="row g-3 mb-3">
    <!-- Stats Cards -->
    @php
        $summary = [
            [
                'label' => 'Athletes',
                'count' => $members->athletes_all,
                'today' => $members->athletes_today,
                'icon' => 'fa-person-running',
                'color' => 'primary'
            ],
            [
                'label' => 'Coach',
                'count' => $members->coach_all,
                'today' => $members->coach_today,
                'icon' => 'fa-user-graduate',
                'color' => 'info'
            ],
            [
                'label' => 'Referee',
                'count' => $members->referee_all,
                'today' => $members->referee_today,
                'icon' => 'fa-award',
                'color' => 'success'
            ],
            [
                'label' => 'Manager',
                'count' => $members->manager_all,
                'today' => $members->manager_today,
                'icon' => 'fa-user-tie',
                'color' => 'secondary',
              
            ],
            [
                'label' => 'Official',
                'count' => $members->official_all,
                'today' => $members->official_today,
                'icon' => 'fa-clipboard-check',
                'color' => 'warning'
            ],
            [
                'label' => 'Doctor',
                'count' => $members->doctor_all,
                'today' => $members->doctor_today,
                'icon' => 'fa-user-md',
                'color' => 'danger'
            ],
            
              
            
        ];
    @endphp
    @foreach($summary as $card)
    <div class="col-6 col-md-4 col-xl-2 mb-3">
        <div class="card h-100 shadow-sm border-0 bg-primary-subtle">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="text-body-secondary fw-semibold">{{ $card['label'] }}</div>
                        <div class="fs-2 fw-bold text-body-emphasis">{{ $card['count'] }}</div>
                        <div class="fs-10 text-muted">
                            <span class="text-{{ $card['today'] > 0 ? 'success' : 'danger' }} fw-bold">{{ $card['today'] }}</span>
                            newly added today.
                        </div>
                    </div>
                    <div class="bg-{{ $card['color'] }} text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <span class="fa {{ $card['icon'] }} fa-lg"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

<div class="row g-3">
    <div class="col-xl-8">
        <div class="card h-100">
            <div class="card-header bg-white border-bottom-0 pb-2 d-flex justify-content-between align-items-center">
                <span class="">Pending top 10 applications for approval</span>
                <a href="{{ route('admin.operations.applications') }}" class="btn btn-primary btn-sm">All-Applications</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive scrollbar">
                 
                    <div class="phoenix-table-sticky-wrapper" style="position:relative; max-height:calc(100vh - 156px); overflow:auto;">
                        <table class="table table-sm fs-9 mb-0 text-center">
                            <thead style="position:sticky; top:0; z-index:2; background:#fff;">
                                <tr>
                                     <th class="sort border-top border-translucent ps-3" >#</th>
                                <th class="sort border-top border-translucent">Application ID</th>
                                <th class="sort border-top border-translucent">Name</th>
                                <th class="sort border-top border-translucent">Profile</th>
                                <th class="sort border-top border-translucent">State</th>
                                <th class="sort border-top border-translucent">District</th>
                                <th class="sort bordertop border-translucent pe-3">Action</th>
                                </tr>
                            </thead>
                            <tbody id="dashAllApplicationsTbody" class="">
                                <!-- Application rows will be rendered by JS -->
                            </tbody>
                        </table>
                    </div>
                </div>


                
            </div>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="card h-100">
            <div class="card-header bg-white border-bottom-0 pb-2 d-flex justify-content-between align-items-center">
                <span class="fw-semibold">Profile Ratio</span>
                <div>
                    <button class="btn btn-link btn-sm p-0"><span class="fa fa-sync-alt"></span></button>
                    <button class="btn btn-link btn-sm p-0"><span class="fa fa-ellipsis-v"></span></button>
                </div>
            </div>
            <div class="card-body d-flex flex-column align-items-center justify-content-center" id="doughnutRoundedChart">
                <div class="position-relative w-100" style="height:220px;">
                    <canvas id="profileRatioChart" width="220" height="220"></canvas>
                    <div class="position-absolute top-50 start-50 translate-middle text-center">
                        <span class="fw-bold fs-4" id="profileRatioTotal"></span>
                        <div class="fs-10 text-muted">Total Profiles</div>
                    </div>
                </div>
                <div class="mt-3 w-100" id="profileRatioLegend">
                    <!-- Legend will be rendered by JS -->
                </div>
            </div>
               
            </div>
        </div>
    </div>
</div>
@endsection
<!-- @push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="/vendor/select2/select2.min.css">

@endpush -->

@push('scripts')
<script src="{{ asset('vendors/chart/chart.umd.js') }}"></script>
<script>
    // Inject chart_data as a global JS variable for dashboard.js
    window.chart_data = @json($chart_data);
</script>
@endpush


@push('scripts')
<!-- <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> -->

<script src="/js/pages/admin/dashboard.js?v=1768947759"></script>

@endpush