@extends('layouts.app')

@section('title', 'Dashboard Superadmin')

@section('content')
<div class="page-header mb-4">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="page-title">Dashboard Superadmin</h1>
            <p class="text-muted mb-0">Selamat datang, <strong>{{ $user->name }}</strong></p>
        </div>
        <div class="text-end">
            <p class="text-muted mb-0">{{ now()->isoFormat('dddd, D MMMM Y') }}</p>
        </div>
    </div>
</div>

<!-- Academic Year Info -->
@if($activeAcademicYear)
<div class="alert alert-info border-0 shadow-sm mb-4" role="alert">
    <div class="d-flex align-items-center">
        <div class="flex-shrink-0">
            <i class="bi bi-calendar-check-fill fs-3"></i>
        </div>
        <div class="flex-grow-1 ms-3">
            <h6 class="alert-heading mb-1">
                <i class="bi bi-star-fill text-warning me-1"></i>
                Tahun Ajaran Aktif: <strong>{{ $activeAcademicYear->name }}</strong>
            </h6>
            <p class="mb-0 small">
                <i class="bi bi-calendar-event me-1"></i>
                Periode: {{ $activeAcademicYear->start_date->format('d M Y') }} - {{ $activeAcademicYear->end_date->format('d M Y') }}
                @if($activeAcademicYear->description)
                <span class="ms-2">| {{ $activeAcademicYear->description }}</span>
                @endif
            </p>
        </div>
    </div>
</div>
@else
<div class="alert alert-warning border-0 shadow-sm mb-4" role="alert">
    <div class="d-flex align-items-center">
        <i class="bi bi-exclamation-triangle-fill me-2"></i>
        <div>
            <strong>Perhatian:</strong> Belum ada tahun ajaran yang aktif. 
            <a href="{{ route('superadmin.academic-years.index') }}" class="alert-link">Kelola Tahun Ajaran</a>
        </div>
    </div>
</div>
@endif

<!-- Main Statistics Cards -->
<div class="row mb-4">
    <div class="col-sm-6 col-lg-3 mb-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h6 class="text-muted fw-normal mb-1">Total Users</h6>
                        <h3 class="mb-0">{{ $data['total_users'] }}</h3>
                        <small class="text-success">
                            <i class="bi bi-arrow-up"></i> 
                            {{ $data['active_users'] }} Aktif
                        </small>
                    </div>
                    <div class="text-primary opacity-50" style="font-size: 2.5rem;">
                        <i class="bi bi-people"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 mb-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h6 class="text-muted fw-normal mb-1">KCD (Kawasan)</h6>
                        <h3 class="mb-0">{{ $data['total_kcds'] }}</h3>
                        <small class="text-muted">Kawasan Pendidikan Dasar</small>
                    </div>
                    <div class="text-info opacity-50" style="font-size: 2.5rem;">
                        <i class="bi bi-map"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 mb-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h6 class="text-muted fw-normal mb-1">Sekolah</h6>
                        <h3 class="mb-0">{{ $data['total_schools'] }}</h3>
                        <small class="text-muted">Institusi Pendidikan</small>
                    </div>
                    <div class="text-success opacity-50" style="font-size: 2.5rem;">
                        <i class="bi bi-building"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 mb-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h6 class="text-muted fw-normal mb-1">Kompetensi</h6>
                        <h3 class="mb-0">{{ $data['total_competencies'] }}</h3>
                        <small class="text-muted">Standar Kompetensi</small>
                    </div>
                    <div class="text-warning opacity-50" style="font-size: 2.5rem;">
                        <i class="bi bi-bookmark-check"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <!-- Quick Actions -->
    <div class="col-lg-4 mb-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-bottom">
                <h5 class="card-title mb-0"><i class="bi bi-lightning-fill text-warning"></i> Aksi Cepat</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ route('superadmin.users.create') }}" class="btn btn-primary btn-sm">
                        <i class="bi bi-person-plus"></i> Tambah User
                    </a>
                    <a href="{{ route('superadmin.users.index') }}" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-people"></i> Kelola Users
                    </a>
                    <a href="{{ route('superadmin.kcd.index') }}" class="btn btn-outline-info btn-sm">
                        <i class="bi bi-map"></i> Kelola KCD
                    </a>
                    <a href="{{ route('superadmin.schools.index') }}" class="btn btn-outline-success btn-sm">
                        <i class="bi bi-building"></i> Kelola Sekolah
                    </a>
                    <a href="{{ route('superadmin.kab-kota.index') }}" class="btn btn-outline-success btn-sm">
                        <i class="bi bi-geo-alt"></i> Kab/Kota
                    </a>
                    <a href="{{ route('superadmin.roles.index') }}" class="btn btn-outline-warning btn-sm">
                        <i class="bi bi-shield-check"></i> Kelola Roles
                    </a>
                    <a href="{{ route('superadmin.settings.index') }}" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-gear"></i> Pengaturan Sistem
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- System Information -->
    <div class="col-lg-4 mb-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-bottom">
                <h5 class="card-title mb-0"><i class="bi bi-info-circle text-info"></i> Informasi Sistem</h5>
            </div>
            <div class="card-body">
                <table class="table table-sm table-borderless mb-0">
                    <tr>
                        <td class="text-muted"><small><strong>Laravel</strong></small></td>
                        <td class="text-end"><small>{{ app()->version() }}</small></td>
                    </tr>
                    <tr>
                        <td class="text-muted"><small><strong>PHP</strong></small></td>
                        <td class="text-end"><small>{{ phpversion() }}</small></td>
                    </tr>
                    <tr>
                        <td class="text-muted"><small><strong>Database</strong></small></td>
                        <td class="text-end"><small>MySQL</small></td>
                    </tr>
                    <tr>
                        <td class="text-muted"><small><strong>Server</strong></small></td>
                        <td class="text-end"><small>{{ php_uname('n') }}</small></td>
                    </tr>
                    <tr>
                        <td class="text-muted"><small><strong>Disk Space</strong></small></td>
                        <td class="text-end"><small>{{ round(disk_free_space("/") / 1024 / 1024 / 1024, 2) }} GB</small></td>
                    </tr>
                    <tr>
                        <td class="text-muted"><small><strong>Versi App</strong></small></td>
                        <td class="text-end"><small>v1.0.0</small></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <!-- User Status Overview -->
    <div class="col-lg-4 mb-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-bottom">
                <h5 class="card-title mb-0"><i class="bi bi-pie-chart text-success"></i> Status Users</h5>
            </div>
            <div class="card-body">
                <div class="row text-center mb-3">
                    <div class="col-6 border-end">
                        <div class="mb-2">
                            <span class="badge bg-success p-2" style="font-size: 1.5rem;">{{ $data['active_users'] }}</span>
                        </div>
                        <small class="text-muted">Users Aktif</small>
                    </div>
                    <div class="col-6">
                        <div class="mb-2">
                            <span class="badge bg-secondary p-2" style="font-size: 1.5rem;">{{ $data['inactive_users'] }}</span>
                        </div>
                        <small class="text-muted">Users Nonaktif</small>
                    </div>
                </div>
                <div class="progress mb-3" style="height: 6px;">
                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ ($data['active_users'] / max($data['total_users'], 1)) * 100 }}%" aria-valuenow="{{ $data['active_users'] }}" aria-valuemin="0" aria-valuemax="{{ $data['total_users'] }}"></div>
                </div>
                <small class="text-muted d-block text-center">
                    {{ round(($data['active_users'] / max($data['total_users'], 1)) * 100) }}% users aktif
                </small>
            </div>
        </div>
    </div>
</div>

<!-- Recent Users & Data Overview -->
<div class="row">
    <!-- Recent Users -->
    <div class="col-lg-6 mb-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-bottom">
                <h5 class="card-title mb-0"><i class="bi bi-clock-history text-info"></i> Users Terbaru</h5>
            </div>
            <div class="card-body">
                <div class="list-group list-group-flush">
                    @forelse($data['recent_users'] as $recentUser)
                    <div class="list-group-item px-0 py-2">
                        <div class="d-flex align-items-center">
                            <div class="avatar-sm bg-primary rounded-circle d-flex align-items-center justify-content-center text-white me-2" style="width: 40px; height: 40px; flex-shrink: 0;">
                                <i class="bi bi-person"></i>
                            </div>
                            <div class="flex-grow-1">
                                <small class="d-block fw-bold">{{ $recentUser->name }}</small>
                                <small class="text-muted d-block">{{ $recentUser->email }}</small>
                            </div>
                            <div class="text-end">
                                <span class="badge bg-{{ $recentUser->role->slug === 'superadmin' ? 'danger' : ($recentUser->role->slug === 'admin_dinas' ? 'primary' : 'info') }} me-2">
                                    {{ $recentUser->role->name }}
                                </span>
                                @if($recentUser->is_active)
                                    <span class="badge bg-success">Aktif</span>
                                @else
                                    <span class="badge bg-secondary">Nonaktif</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="text-center py-4 text-muted">
                        <p class="mb-0">Belum ada data users</p>
                    </div>
                    @endforelse
                </div>
            </div>
            <div class="card-footer bg-light text-center border-top">
                <a href="{{ route('superadmin.users.index') }}" class="text-decoration-none small">
                    Lihat Semua Users <i class="bi bi-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>

    <!-- Data Overview -->
    <div class="col-lg-6 mb-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-bottom">
                <h5 class="card-title mb-0"><i class="bi bi-bar-chart text-primary"></i> Ringkasan Data</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6 mb-3">
                        <div class="p-3 bg-light rounded-2 border-start border-4 border-primary">
                            <h6 class="text-muted fw-normal mb-1">Total Roles</h6>
                            <h4 class="mb-0 text-primary">{{ $data['total_roles'] }}</h4>
                            <small class="text-muted">Peran Pengguna</small>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="p-3 bg-light rounded-2 border-start border-4 border-success">
                            <h6 class="text-muted fw-normal mb-1">Total KCD</h6>
                            <h4 class="mb-0 text-success">{{ $data['total_kcds'] }}</h4>
                            <small class="text-muted">Kawasan</small>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="p-3 bg-light rounded-2 border-start border-4 border-info">
                            <h6 class="text-muted fw-normal mb-1">Total Sekolah</h6>
                            <h4 class="mb-0 text-info">{{ $data['total_schools'] }}</h4>
                            <small class="text-muted">Institusi</small>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="p-3 bg-light rounded-2 border-start border-4 border-warning">
                            <h6 class="text-muted fw-normal mb-1">Total Kompetensi</h6>
                            <h4 class="mb-0 text-warning">{{ $data['total_competencies'] }}</h4>
                            <small class="text-muted">Standar</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bottom Navigation Cards -->
<div class="row">
    <div class="col-12">
        <div class="alert alert-info border-0" role="alert">
            <div class="d-flex align-items-center">
                <i class="bi bi-lightbulb me-2"></i>
                <div>
                    <strong>Tips:</strong> Gunakan menu di sidebar untuk mengakses fitur manajemen yang lebih lengkap. 
                    Pantau status system melalui dashboard ini untuk memastikan aplikasi berjalan dengan optimal.
                </div>
            </div>
        </div>
    </div>
</div>

@endsection