@extends('admin.layout', [
    'title' => 'Pusat Modul SIAKAD',
    'heading' => 'Pusat Modul SIAKAD',
    'subheading' => 'Peta besar modul Universitas Karyadarma Kupang, lengkap dengan status implementasi, kesiapan database, dan titik lanjut pengembangan.',
])

@section('page_actions')
    <a href="#peta-role" class="btn btn-outline-primary">
        <i class="fas fa-users mr-1"></i>
        Peta Per Role
    </a>
    <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-user-shield mr-1"></i>
        Manajemen User
    </a>
@endsection

@section('admin-content')
    <div class="row">
        @foreach ($summaryCards as $card)
            <div class="col-lg-3 col-md-6">
                <div class="small-box {{ $card['color'] }}">
                    <div class="inner">
                        <h3>{{ $card['value'] }}</h3>
                        <p class="font-weight-bold mb-1">{{ $card['label'] }}</p>
                        <p>{{ $card['description'] }}</p>
                    </div>
                    <div class="icon">
                        <i class="{{ $card['icon'] }}"></i>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card card-info card-outline content-card-note">
                <div class="card-body">
                    <strong>Arti status modul:</strong>
                    <code>Aktif</code> berarti halaman/fitur dasar sudah tersedia, <code>Siap Tahap Berikut</code> berarti struktur tabelnya sudah ada dan tinggal dibangun CRUD/flow-nya,
                    <code>Parsial</code> berarti sebagian logikanya sudah terwakili di schema sekarang, dan <code>Roadmap</code> berarti kebutuhan bisnisnya sudah dipetakan tapi masih butuh desain tabel atau workflow tambahan.
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        @foreach ($sections as $section)
            <div class="col-xl-6">
                <div class="card card-outline card-primary h-100">
                    <div class="card-header">
                        <h3 class="card-title font-weight-bold">
                            <i class="{{ $section['icon'] }} mr-2"></i>
                            {{ $section['title'] }}
                        </h3>
                        <div class="card-tools">
                            <span class="badge badge-dark">{{ $section['feature_count'] }} fitur</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">{{ $section['description'] }}</p>

                        <div class="mb-3">
                            @foreach ($section['status_counts'] as $status)
                                <span class="badge badge-{{ $status['class'] }} mr-1 mb-1">
                                    {{ $status['label'] }}: {{ $status['count'] }}
                                </span>
                            @endforeach
                        </div>

                        <div class="progress mb-3" style="height: 10px;">
                            <div
                                class="progress-bar bg-success"
                                role="progressbar"
                                style="width: {{ $section['feature_count'] > 0 ? round(($section['implemented_count'] / $section['feature_count']) * 100) : 0 }}%;"
                            ></div>
                        </div>

                        <p class="font-weight-bold mb-2">Snapshot modul:</p>
                        <ul class="text-muted pl-3">
                            @foreach ($section['snapshot'] as $item)
                                <li>{{ $item }}</li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="card-footer bg-white">
                        <a href="{{ $section['route'] }}" class="btn btn-primary">
                            <i class="fas fa-arrow-right mr-1"></i>
                            Buka Detail Modul
                        </a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="row mt-4" id="peta-role">
        <div class="col-12">
            <div class="card card-outline card-dark">
                <div class="card-header">
                    <h3 class="card-title font-weight-bold">Peta Modul Per Role</h3>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-0">
                        Sudut pandang ini menunjukkan apa saja kebutuhan tiap aktor sistem, mulai dari admin, dosen, mahasiswa, pegawai, keuangan, PMB, alumni, sampai modul opsional.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        @foreach ($roles as $role)
            <div class="col-xl-4 col-lg-6">
                <div class="card card-outline card-{{ $role['color'] }} h-100">
                    <div class="card-header">
                        <h3 class="card-title font-weight-bold">
                            <i class="{{ $role['icon'] }} mr-2"></i>
                            {{ $role['title'] }}
                        </h3>
                        <div class="card-tools">
                            <span class="badge badge-dark">{{ $role['feature_count'] }} fitur</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">{{ $role['description'] }}</p>

                        <div class="mb-3">
                            @foreach ($role['status_counts'] as $status)
                                <span class="badge badge-{{ $status['class'] }} mr-1 mb-1">
                                    {{ $status['label'] }}: {{ $status['count'] }}
                                </span>
                            @endforeach
                        </div>

                        <div class="progress mb-3" style="height: 10px;">
                            <div
                                class="progress-bar bg-{{ $role['color'] }}"
                                role="progressbar"
                                style="width: {{ $role['feature_count'] > 0 ? round(($role['implemented_count'] / $role['feature_count']) * 100) : 0 }}%;"
                            ></div>
                        </div>

                        <ul class="text-muted pl-3 mb-0">
                            @foreach ($role['snapshot'] as $item)
                                <li>{{ $item }}</li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="card-footer bg-white">
                        <a href="{{ $role['route'] }}" class="btn btn-outline-primary">
                            <i class="fas fa-arrow-right mr-1"></i>
                            Detail Role
                        </a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="row mt-4">
        <div class="col-12">
            <div class="card card-outline card-secondary">
                <div class="card-header">
                    <h3 class="card-title font-weight-bold">Matriks Kesiapan Role</h3>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Role</th>
                                    <th>Total Fitur</th>
                                    <th>Aktif</th>
                                    <th>Siap</th>
                                    <th>Parsial</th>
                                    <th>Roadmap</th>
                                    <th>Progress</th>
                                    <th width="120">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($roleMatrix as $row)
                                    <tr>
                                        <td class="font-weight-bold">
                                            <i class="{{ $row['icon'] }} mr-2 text-{{ $row['color'] }}"></i>
                                            {{ $row['title'] }}
                                        </td>
                                        <td>{{ $row['feature_count'] }}</td>
                                        <td><span class="badge badge-success">{{ $row['implemented_count'] }}</span></td>
                                        <td><span class="badge badge-info">{{ $row['ready_count'] }}</span></td>
                                        <td><span class="badge badge-warning">{{ $row['partial_count'] }}</span></td>
                                        <td><span class="badge badge-secondary">{{ $row['roadmap_count'] }}</span></td>
                                        <td>
                                            <div class="progress" style="height: 10px;">
                                                <div class="progress-bar bg-{{ $row['color'] }}" role="progressbar" style="width: {{ $row['progress'] }}%;"></div>
                                            </div>
                                            <small class="text-muted">{{ $row['progress'] }}% aktif</small>
                                        </td>
                                        <td>
                                            <a href="{{ $row['route'] }}" class="btn btn-sm btn-outline-primary">
                                                Buka
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection