@extends('layouts.app')
@section('title', 'MCSS Dashboard')
@section('breadcrumb', 'MCSS Central Dashboard')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0" style="color:#0f3d23;">
            <i class="bi bi-speedometer2 me-2" style="color:#c9a94d;"></i>MCSS Central Dashboard
        </h4>
        <p class="text-muted mb-0" style="font-size:.85rem;">{{ now()->format('l, F j, Y') }}</p>
    </div>
    <a href="{{ route('admin.schools.create') }}" class="btn btn-sm" style="background:#1a6b3c; color:#fff; border-radius:8px;">
        <i class="bi bi-plus-lg me-1"></i> Add School
    </a>
</div>

{{-- ── STAT CARDS ──────────────────────────────────────────────────── --}}
<div class="row g-3 mb-4">
    @php
    $cards = [
        ['label'=>'Total Schools',   'value'=>$stats['total_schools'],    'icon'=>'bi-building',        'bg'=>'#e8f5ee', 'ic'=>'#1a6b3c'],
        ['label'=>'Total Students',  'value'=>number_format($stats['total_students']),  'icon'=>'bi-person-badge', 'bg'=>'#e8f0ff', 'ic'=>'#3b5bdb'],
        ['label'=>'Pending Transfers','value'=>$stats['pending_transfers'],'icon'=>'bi-arrow-left-right','bg'=>'#fff3cd', 'ic'=>'#c9a94d'],
        ['label'=>'System Users',    'value'=>$stats['total_users'],      'icon'=>'bi-people',          'bg'=>'#fce4ec', 'ic'=>'#c62828'],
    ];
    @endphp
    @foreach($cards as $card)
    <div class="col-6 col-md-3">
        <div class="stat-card" style="background:#fff;">
            <div class="stat-icon" style="background:{{ $card['bg'] }}; color:{{ $card['ic'] }};">
                <i class="bi {{ $card['icon'] }}"></i>
            </div>
            <div>
                <div class="stat-value" style="color:{{ $card['ic'] }};">{{ $card['value'] }}</div>
                <div class="stat-label">{{ $card['label'] }}</div>
            </div>
        </div>
    </div>
    @endforeach
</div>

<div class="row g-3 mb-4">
    {{-- Enrollment by School Bar Chart --}}
    <div class="col-lg-7">
        <div class="card table-card h-100">
            <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                <span class="fw-semibold"><i class="bi bi-bar-chart me-2" style="color:#1a6b3c;"></i>Enrollment by School</span>
            </div>
            <div class="card-body">
                <canvas id="enrollmentChart" height="220"></canvas>
            </div>
        </div>
    </div>

    {{-- Recent Transfers --}}
    <div class="col-lg-5">
        <div class="card table-card h-100">
            <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                <span class="fw-semibold"><i class="bi bi-arrow-left-right me-2" style="color:#c9a94d;"></i>Recent Transfers</span>
                <a href="{{ route('admin.transfers') }}" class="btn btn-sm btn-outline-secondary" style="font-size:.75rem;">View All</a>
            </div>
            <div class="card-body p-0">
                <ul class="list-group list-group-flush">
                    @forelse($recentTransfers as $transfer)
                    <li class="list-group-item px-3 py-2">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <div class="fw-semibold" style="font-size:.85rem;">{{ $transfer->student->full_name }}</div>
                                <div class="text-muted" style="font-size:.75rem;">
                                    {{ $transfer->fromSchool->code }} → {{ $transfer->toSchool->code }}
                                </div>
                            </div>
                            <span class="badge badge-status-{{ $transfer->status }}" style="font-size:.7rem;">
                                {{ ucfirst($transfer->status) }}
                            </span>
                        </div>
                    </li>
                    @empty
                    <li class="list-group-item text-center text-muted py-4" style="font-size:.85rem;">
                        No transfers yet.
                    </li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
</div>

{{-- Schools Table --}}
<div class="card table-card">
    <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
        <span class="fw-semibold"><i class="bi bi-building me-2" style="color:#1a6b3c;"></i>Schools Under MCSS</span>
        <a href="{{ route('admin.schools.index') }}" class="btn btn-sm btn-outline-secondary" style="font-size:.75rem;">Manage Schools</a>
    </div>
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle">
            <thead>
                <tr>
                    <th>School Name</th>
                    <th>Code</th>
                    <th>Level</th>
                    <th>Students</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach($enrollmentBySchool as $school)
                <tr>
                    <td class="fw-semibold">{{ $school->name }}</td>
                    <td><span class="badge bg-secondary">{{ $school->code }}</span></td>
                    <td class="text-capitalize">{{ str_replace('_', ' ', $school->level ?? '—') }}</td>
                    <td><span class="badge" style="background:#e8f5ee; color:#1a6b3c;">{{ $school->student_count }}</span></td>
                    <td><span class="badge badge-status-active">Active</span></td>
                    <td>
                        <a href="{{ route('admin.schools.edit', $school) }}" class="btn btn-sm btn-outline-secondary">
                            <i class="bi bi-pencil"></i>
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('enrollmentChart'), {
    type: 'bar',
    data: {
        labels: @json($enrollmentBySchool->pluck('name')->map(fn($n) => strlen($n) > 20 ? substr($n, 0, 20).'…' : $n)),
        datasets: [{
            label: 'Enrolled Students',
            data: @json($enrollmentBySchool->pluck('student_count')),
            backgroundColor: '#1a6b3c',
            borderRadius: 6,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, grid: { color: '#f0f0f0' } },
            x: { grid: { display: false } }
        }
    }
});
</script>
@endpush