@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
@if (in_array($roleKey, ['pkbm', 'guru', 'walikelas'], true))
    @include('pkbm.dashboard', $pkbmDashboard)
@else
<div class="mx-auto max-w-7xl">
        <section class="dashboard-hero relative overflow-hidden rounded-2xl px-6 py-6 text-white shadow-lg shadow-blue-900/10 sm:px-8 sm:py-7">
            <div class="relative flex flex-col justify-between gap-5 sm:flex-row sm:items-center">
                <div class="max-w-2xl">
                    <p class="text-xs font-semibold tracking-wide text-blue-100">{{ $role }}@if ($organization) <span class="mx-1 text-white/60">/</span> {{ $organization }}@endif</p>
                    <h1 class="mt-2 text-2xl font-bold tracking-tight sm:text-3xl">Halo, {{ $name }}.</h1>
                    <p class="mt-2 max-w-xl text-sm leading-6 text-white/85">Selamat datang di ruang kerja SmartPenF. Kelola aktivitas lembaga Anda dari satu tempat.</p>
                </div>
                <div class="inline-flex w-fit items-center gap-2 rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-xs font-medium text-white shadow-sm backdrop-blur">
                    <span class="grid size-7 place-items-center rounded-lg bg-white/15"><i class="bi bi-mortarboard" aria-hidden="true"></i></span>
                    <span>
                        <span class="block text-[10px] text-blue-100">PORTAL</span>
                        <span class="mt-0.5 block text-sm font-semibold">SmartPenF</span>
                    </span>
                </div>
            </div>
        </section>

        <section class="mt-8">
            <div class="mb-4 flex flex-wrap items-end justify-between gap-3">
                <div>
                    <p class="sp-page-kicker">Ruang kerja</p>
                    <h2 class="sp-section-title mt-1 text-xl">Modul {{ strtolower($role) }}</h2>
                </div>
                <span class="text-xs text-slate-500">Pilih menu untuk mulai bekerja</span>
            </div>

            <div class="grid gap-4 sm:grid-cols-2 2xl:grid-cols-3">
                @forelse ($tiles as $index => $tile)
                    <article class="sp-card dashboard-module-card p-5">
                        <div class="flex items-center justify-between gap-3">
                            <span class="grid size-10 place-items-center rounded-xl bg-blue-50 text-lg text-blue-700">
                                @if ($index === 0)
                                    <i class="bi bi-sliders2-vertical" aria-hidden="true"></i>
                                @elseif ($index === 1)
                                    <i class="bi bi-people" aria-hidden="true"></i>
                                @elseif ($index === 2)
                                    <i class="bi bi-person-workspace" aria-hidden="true"></i>
                                @else
                                    <i class="bi bi-clipboard-data" aria-hidden="true"></i>
                                @endif
                            </span>
                            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-semibold text-slate-600">{{ $tile['label'] }}</span>
                        </div>
                        <h3 class="mt-4 text-base font-bold text-slate-900">{{ $tile['title'] }}</h3>
                        <p class="mt-1.5 min-h-10 text-sm leading-5 text-slate-500">{{ $tile['description'] }}</p>
                        <div class="mt-4 border-t border-slate-100 pt-3">
                            @if (isset($tile['href']))
                                <a href="{{ $tile['href'] }}" class="inline-flex items-center gap-2 text-xs font-semibold text-blue-700 hover:text-blue-900">
                                    Buka modul <i class="bi bi-arrow-right" aria-hidden="true"></i>
                                </a>
                            @else
                                <span class="inline-flex items-center gap-2 text-xs font-medium text-slate-400">
                                    <span class="size-1.5 rounded-full bg-amber-400"></span>Dalam tahap pengembangan
                                </span>
                            @endif
                        </div>
                    </article>
                @empty
                    <div class="rounded-2xl border border-dashed border-slate-300 bg-white p-8 text-sm text-slate-500">Belum ada modul untuk jenis akun ini.</div>
                @endforelse
            </div>
        </section>

</div>
@endif
@endsection