{{-- resources/views/admin/dashboard.blade.php --}}
@extends('admin.layouts.app')

@section('content')
<div class="page-inner">
  <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
    <div>
      <h3 class="fw-bold mb-3">Dashboard Atletik</h3>
      <h6 class="op-7 mb-2">Pusat Data & Statistik PASI</h6>
    </div>
    <div class="ms-md-auto py-2 py-md-0">
      <a href="{{ route('admin.athletes.create') }}" class="btn btn-primary btn-round me-2">
        <i class="fas fa-plus me-1"></i> Tambah Atlet
      </a>
      <a href="{{ route('admin.analysis.index') }}" class="btn btn-secondary btn-round">
        <i class="fas fa-chart-bar me-1"></i> Analisis Rival
      </a>
    </div>
  </div>
  
  <div class="row">
    {{-- Widget Total Atlet --}}
    <div class="col-sm-6 col-md-3">
        <div class="card card-secondary h-100">
            <div class="card-body skew-shadow d-flex align-items-center justify-content-between">
                <div>
                    <h1 class="fw-bold">{{ $totalAthletes }}</h1>
                    <h5 class="op-8 mb-0">Total Atlet</h5>
                </div>
                <div class="pull-right"><h3 class="fw-bold op-8 mb-0"><i class="fas fa-running fa-2x"></i></h3></div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-3">
        <div class="card card-secondary bg-secondary-gradient h-100">
            <div class="card-body bubble-shadow d-flex align-items-center justify-content-between">
                <div>
                    <h1 class="fw-bold">{{ $totalCompetitors }}</h1>
                    <h5 class="op-8 mb-0">Rival (Kompetitor)</h5>
                </div>
                <div class="pull-right"><h3 class="fw-bold op-8 mb-0"><i class="fas fa-user-ninja fa-2x"></i></h3></div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-3">
        <div class="card card-secondary h-100">
            <div class="card-body skew-shadow d-flex align-items-center justify-content-between">
                <div>
                    <h1 class="fw-bold">{{ $totalCoaches ?? 0 }}</h1>
                    <h5 class="op-8 mb-0">Total Pelatih</h5>
                </div>
                <div class="pull-right"><h3 class="fw-bold op-8 mb-0"><i class="fas fa-user-tie fa-2x"></i></h3></div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-3">
        <div class="card card-secondary bg-secondary-gradient h-100">
            <div class="card-body curves-shadow d-flex align-items-center justify-content-between">
                <div>
                    <h1 class="fw-bold">{{ $totalCategories }}</h1>
                    <h5 class="op-8 mb-0">Kategori Lomba</h5>
                </div>
                <div class="pull-right"><h3 class="fw-bold op-8 mb-0"><i class="fas fa-list-alt fa-2x"></i></h3></div>
            </div>
        </div>
    </div>
  </div>

  <div class="row mt-3">
    
    <div class="col-md-8">
      <div class="card card-round">
        <div class="card-header">
          <div class="card-head-row">
            <div class="card-title">Sebaran Atlet per Kelompok Umur</div>
          </div>
        </div>
        <div class="card-body">
          <div class="chart-container" style="min-height: 375px">
            <canvas id="ageChart"></canvas>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card card-round">
        <div class="card-header">
          <div class="card-title">Komposisi Gender</div>
        </div>
        <div class="card-body">
          <div class="chart-container" style="min-height: 250px">
            <canvas id="genderChart"></canvas>
          </div>
          <div class="mt-4 text-center small">
            <span class="me-3"><i class="fas fa-circle text-primary"></i> Putra ({{ $maleCount }})</span>
            <span><i class="fas fa-circle text-danger"></i> Putri ({{ $femaleCount }})</span>
          </div>
        </div>
      </div>

      <div class="card card-round mt-3">
        <div class="card-header">
            <div class="card-title fw-bold">Atlet Terbaru</div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <tbody>
                        @forelse($latestAthletes as $athlete)
                        <tr>
                            <td style="width: 50px;">
                                <div class="avatar avatar-sm ms-3 my-1">
                                    <img src="{{ $athlete->photo_url }}" class="avatar-img rounded-circle border">
                                </div>
                            </td>
                            <td>
                                <h6 class="fw-bold mb-0 text-truncate" style="max-width: 150px;">{{ $athlete->name }}</h6>
                                <small class="text-muted">{{ $athlete->province_name }}</small>
                            </td>
                            <td class="text-end pe-3">
                                <span class="badge bg-light text-dark border">{{ $athlete->age_category[0] ?? '-' }}</span>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="3" class="text-center text-muted py-3">Belum ada data</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
{{-- Load Chart.js --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 

<script>
document.addEventListener('DOMContentLoaded', function() {
    
    var ctxAge = document.getElementById('ageChart').getContext('2d');
    var ageChart = new Chart(ctxAge, {
        type: 'bar',
        data: {
            labels: ['U-16', 'U-18', 'U-20', 'Elite'],
            datasets: [{
                label: 'Jumlah Atlet',
                data: [
                    {{ $ageStats['U-16'] }}, 
                    {{ $ageStats['U-18'] }}, 
                    {{ $ageStats['U-20'] }}, 
                    {{ $ageStats['Elite'] }}
                ],
                backgroundColor: '#1572e8', // Biru
                borderColor: '#1572e8',
                borderWidth: 1,
                borderRadius: 5,
                barPercentage: 0.6,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    grid: { borderDash: [2, 2] }
                },
                x: {
                    grid: { display: false }
                }
            },
            plugins: {
                legend: { display: false }
            }
        }
    });

    var ctxGender = document.getElementById('genderChart').getContext('2d');
    var genderChart = new Chart(ctxGender, {
        type: 'doughnut', 
        data: {
            labels: ['Putra', 'Putri'],
            datasets: [{
                data: [{{ $maleCount }}, {{ $femaleCount }}],
                backgroundColor: ['#1572e8', '#f3545d'], 
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { usePointStyle: true }
                }
            },
            cutout: '70%', 
        }
    });

});
</script>
@endpush