@extends('layouts.app')

@section('title', 'Panduan dan Fitur')

@php
    $activePercent = $total > 0 ? (int) round($activeCount / $total * 100) : 0;
@endphp

@section('content')
<div class="pkbm-master-page mx-auto max-w-[1200px] space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Menu Aplikasi</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Panduan dan Fitur</p>
            <h1 class="pkbm-dashboard__title">Panduan dan Fitur</h1>
            <p class="pkbm-dashboard__subtitle">Seluruh modul SmartPenF untuk <strong>{{ $institution }}</strong>. Modul yang tampil abu-abu belum diaktifkan di lembaga ini — klik <strong>Aktifkan</strong> untuk menghubungi pengembang via WhatsApp.</p>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-right shadow-sm">
            <span class="block text-xs text-slate-500">Fitur aktif</span>
            <strong class="text-lg font-bold text-slate-800">{{ $activeCount }}/{{ $total }}</strong>
            <span class="block text-xs text-slate-500">{{ $activePercent }}% modul tersedia</span>
        </div>
    </header>

    @foreach ($groups as $group)
        @php
            $groupActive = count(array_filter($group['items'], fn (array $f): bool => $f['active']));
            $groupTotal = count($group['items']);
        @endphp
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
                <div class="flex min-w-0 items-center gap-3">
                    <span class="grid size-10 shrink-0 place-items-center rounded-xl bg-blue-50 text-lg text-blue-600">
                        <i class="bi {{ $group['icon'] }}" aria-hidden="true"></i>
                    </span>
                    <div class="min-w-0">
                        <h2 class="sp-section-title text-slate-800">{{ $group['title'] }}</h2>
                        <p class="mt-0.5 text-xs text-slate-500">
                            <strong class="{{ $groupActive === $groupTotal ? 'text-emerald-600' : 'text-amber-600' }}">{{ $groupActive }}/{{ $groupTotal }}</strong> fitur aktif
                            @if ($groupActive < $groupTotal)
                                · {{ $groupTotal - $groupActive }} perlu diaktifkan
                            @endif
                        </p>
                    </div>
                </div>
                <div class="flex flex-wrap items-center gap-2">
                    <a href="{{ route('pkbm.panduan-fitur.panduan', ['jenis' => 'teks', 'menu' => $group['title']]) }}" class="sp-btn-primary px-3 py-1.5 text-xs">
                        <i class="bi bi-file-earmark-text" aria-hidden="true"></i>Teks Panduan
                    </a>
                    <a href="{{ route('pkbm.panduan-fitur.panduan', ['jenis' => 'video', 'menu' => $group['title']]) }}" class="sp-btn-secondary px-3 py-1.5 text-xs">
                        <i class="bi bi-play-circle" aria-hidden="true"></i>Video Panduan
                    </a>
                </div>
            </div>

            <div class="grid gap-2.5 p-4 sm:grid-cols-2 xl:grid-cols-3">
                @foreach ($group['items'] as $fitur)
                    <div @class([
                        'flex items-center justify-between gap-3 rounded-xl border px-3 py-2.5',
                        'border-slate-200 bg-white' => $fitur['active'],
                        'border-slate-200 bg-slate-100 grayscale' => ! $fitur['active'],
                    ])>
                        <div class="min-w-0">
                            <p class="truncate text-sm font-semibold text-slate-800" title="{{ $fitur['label'] }}">{{ $fitur['label'] }}</p>
                            @if ($fitur['active'])
                                <span class="mt-0.5 inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[11px] font-semibold text-emerald-700">
                                    <i class="bi bi-check-circle-fill" aria-hidden="true"></i>Aktif
                                </span>
                            @else
                                <span class="mt-0.5 inline-flex items-center gap-1 rounded-full border border-slate-300 bg-slate-200 px-2 py-0.5 text-[11px] font-semibold text-slate-500">
                                    <i class="bi bi-slash-circle" aria-hidden="true"></i>Belum Aktif
                                </span>
                            @endif
                        </div>
                        @if (! $fitur['active'])
                            <a href="{{ $fitur['wa_url'] }}" target="_blank" rel="noopener"
                               class="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-emerald-500 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-emerald-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/40"
                               title="Aktifkan fitur ini via WhatsApp pengembang">
                                <i class="bi bi-whatsapp" aria-hidden="true"></i>Aktifkan
                            </a>
                        @endif
                    </div>
                @endforeach
            </div>
        </section>
    @endforeach
</div>
@endsection