@extends('layouts.app', [
    'title' => 'Dashboard PMB',
    'pageTitle' => 'Dashboard PMB',
    'pageSubtitle' => 'Pusat kendali penerimaan mahasiswa baru dari registrasi sampai registrasi ulang.',
])

@section('content')
    {{-- Profile & Stats --}}
    <div class="row g-3 mb-4">
        <div class="col-lg-4">
            <div class="profile-card h-100">
                <div class="d-flex align-items-center gap-3">
                    <div class="profile-avatar">
                        {{ strtoupper(mb_substr($user->name, 0, 1)) }}
                    </div>
                    <div>
                        <div class="profile-name">{{ $user->name }}</div>
                        <div class="profile-role">Panitia PMB</div>
                    </div>
                </div>
                <div class="profile-info mt-3">
                    <div class="profile-info-item">
                        <i class="fas fa-user"></i>
                        <span>{{ $user->username ?? '-' }}</span>
                    </div>
                    <div class="profile-info-item">
                        <i class="fas fa-calendar-alt"></i>
                        <span>Tahun Akademik {{ date('Y') }}</span>
                    </div>
                    <div class="profile-info-item">
                        <i class="fas fa-clock"></i>
                        <span>Login terakhir: {{ $user->last_login?->format('d M Y H:i') ?? 'Pertama kali' }}</span>
                    </div>
                </div>
            </div>
        </div>

        @foreach (array_slice($metrics, 0, 2) as $index => $metric)
            @php $colors = ['stat-card-primary', 'stat-card-success', 'stat-card-warning', 'stat-card-info']; @endphp
            <div class="col-lg-4 col-md-6">
                <div class="stat-card {{ $colors[$index % count($colors)] }} h-100">
                    <div class="stat-icon"><i class="fas {{ $index === 0 ? 'fa-users' : 'fa-user-clock' }}"></i></div>
                    <div class="stat-value">{{ $metric['value'] }}</div>
                    <div class="stat-label">{{ $metric['label'] }}</div>
                    <div class="stat-desc">{{ $metric['description'] }}</div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Quick Actions --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header d-flex align-items-center">
            <i class="fas fa-bolt text-warning mr-2"></i>
            Akses Cepat PMB
        </div>
        <div class="card-body">
            <div class="d-flex flex-wrap" style="gap: 0.5rem;">
                @foreach ($quickActions as $action)
                    <a href="{{ $action['href'] }}" class="btn-quick btn-quick-{{ $action['color'] }}" {{ str_contains($action['href'], 'pmb.index') ? 'target="_blank"' : '' }}>
                        <i class="{{ $action['icon'] }}"></i> {{ $action['label'] }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Remaining Metrics --}}
    @if (count($metrics) > 2)
        <div class="row g-3 mb-4">
            @foreach (array_slice($metrics, 2) as $index => $metric)
                @php $colorIndex = ($index + 2) % 4; $colors = ['stat-card-primary', 'stat-card-success', 'stat-card-warning', 'stat-card-info']; @endphp
                <div class="col-lg-3 col-md-6">
                    <div class="stat-card {{ $colors[$colorIndex] }}">
                        <div class="stat-icon"><i class="fas {{ $index === 0 ? 'fa-user-check' : 'fa-check-circle' }}"></i></div>
                        <div class="stat-value">{{ $metric['value'] }}</div>
                        <div class="stat-label">{{ $metric['label'] }}</div>
                        <div class="stat-desc">{{ $metric['description'] }}</div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- Content Row --}}
    <div class="row g-3">
        {{-- Module Map --}}
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header d-flex align-items-center">
                    <i class="fas fa-map text-primary mr-2"></i>
                    Alur Penerimaan Mahasiswa Baru
                </div>
                <div class="card-body">
                    @foreach ($sections as $section)
                        <div class="section-card mb-3">
                            <div class="section-icon bg-light">
                                <i class="fas fa-user-plus text-primary"></i>
                            </div>
                            <div class="section-title">{{ $section['title'] }}</div>
                            <div class="section-desc">{{ $section['description'] }}</div>
                            <ul class="section-list">
                                @foreach ($section['items'] as $item)
                                    <li>{{ $item }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endforeach

                    {{-- Progress Flow --}}
                    <div class="mt-4">
                        <h6 class="font-weight-bold mb-3">Alur Proses PMB:</h6>
                        <div class="d-flex justify-content-between align-items-center text-center flex-wrap" style="gap: 0.5rem;">
                            <div class="p-2 rounded" style="background: #e8f0fe; min-width: 100px;">
                                <i class="fas fa-file-signature text-primary mb-1" style="font-size: 1.2rem;"></i>
                                <div class="small font-weight-bold">Registrasi</div>
                            </div>
                            <i class="fas fa-arrow-right text-muted"></i>
                            <div class="p-2 rounded" style="background: #fef3c7; min-width: 100px;">
                                <i class="fas fa-upload text-warning mb-1" style="font-size: 1.2rem;"></i>
                                <div class="small font-weight-bold">Upload Dokumen</div>
                            </div>
                            <i class="fas fa-arrow-right text-muted"></i>
                            <div class="p-2 rounded" style="background: #dbeafe; min-width: 100px;">
                                <i class="fas fa-search text-info mb-1" style="font-size: 1.2rem;"></i>
                                <div class="small font-weight-bold">Seleksi</div>
                            </div>
                            <i class="fas fa-arrow-right text-muted"></i>
                            <div class="p-2 rounded" style="background: #d1fae5; min-width: 100px;">
                                <i class="fas fa-bullhorn text-success mb-1" style="font-size: 1.2rem;"></i>
                                <div class="small font-weight-bold">Pengumuman</div>
                            </div>
                            <i class="fas fa-arrow-right text-muted"></i>
                            <div class="p-2 rounded" style="background: #ede9fe; min-width: 100px;">
                                <i class="fas fa-check-circle text-purple mb-1" style="font-size: 1.2rem;"></i>
                                <div class="small font-weight-bold">Registrasi Ulang</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Recent Pendaftar & Announcements --}}
        <div class="col-lg-5">
            {{-- Recent Pendaftar --}}
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-users text-info mr-2"></i>
                        Pendaftar Terbaru
                    </div>
                    <a href="{{ route('pmb.portal.index') }}" class="btn btn-sm btn-outline-primary">Lihat Semua</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="thead-light">
                                <tr>
                                    <th>Nama</th>
                                    <th>Prodi Pilihan</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($recentPendaftar as $pendaftar)
                                    <tr>
                                        <td>{{ $pendaftar->nama_lengkap }}</td>
                                        <td>{{ $pendaftar->pilihanProdi?->nama_prodi ?? '-' }}</td>
                                        <td>
                                            <span class="badge badge-{{ $pendaftar->status === 'lulus' ? 'success' : ($pendaftar->status === 'tidak_lulus' ? 'danger' : 'warning') }}">
                                                {{ ucfirst($pendaftar->status) }}
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center text-muted py-3">Belum ada pendaftar.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- Announcements --}}
            <div class="card border-0 shadow-sm">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-bullhorn text-warning mr-2"></i>
                        Pengumuman Kampus
                    </div>
                </div>
                <div class="card-body">
                    @forelse ($announcements as $announcement)
                        <div class="announcement-item">
                            <div class="announcement-title">{{ $announcement->judul }}</div>
                            <div class="announcement-meta">
                                <i class="far fa-calendar-alt mr-1"></i>
                                {{ $announcement->tanggal?->format('d M Y') ?? $announcement->created_at?->format('d M Y') }}
                            </div>
                            <div class="announcement-text">{{ Str::limit($announcement->isi, 80) }}</div>
                        </div>
                    @empty
                        <div class="text-center py-3 text-muted">Belum ada pengumuman.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
@endsection