@extends('layouts.app')
@section('content')
<section class="mb-6 rounded-[2rem] bg-gradient-to-br from-slate-950 to-teal-900 p-8 text-white shadow-soft">
    <span class="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 text-sm font-bold"><i class="fa-solid fa-sitemap"></i> Struktur Organisasi RT</span>
    <h2 class="mt-5 text-4xl font-black tracking-tight">Flowchart Pengurus RT</h2>
    <p class="mt-3 max-w-3xl text-slate-300">Jabatan pengurus diambil dari data warga, sehingga tidak perlu mengetik ulang nama, email, dan nomor WA.</p>
</section>
@php
$groups = $officials->groupBy('position');
$ketua = $officials->first(fn($o)=>str_contains(strtolower($o->position),'ketua') && !str_contains(strtolower($o->position),'wakil'));
$wakil = $officials->first(fn($o)=>str_contains(strtolower($o->position),'wakil'));
$sekretaris = $officials->first(fn($o)=>str_contains(strtolower($o->position),'sekretaris'));
$bendahara = $officials->first(fn($o)=>str_contains(strtolower($o->position),'bendahara'));
$seksis = $officials->filter(fn($o)=>!in_array($o->id, collect([$ketua,$wakil,$sekretaris,$bendahara])->filter()->pluck('id')->all()));
@endphp
<div class="space-y-8">
    <div class="flex justify-center">@include('pages.partials.official-card',['o'=>$ketua,'title'=>'Ketua RT','icon'=>'fa-user-tie'])</div>
    <div class="mx-auto h-8 w-px bg-slate-300"></div>
    <div class="grid gap-5 md:grid-cols-3">
        @include('pages.partials.official-card',['o'=>$wakil,'title'=>'Wakil Ketua RT','icon'=>'fa-user-shield'])
        @include('pages.partials.official-card',['o'=>$sekretaris,'title'=>'Sekretaris RT','icon'=>'fa-file-lines'])
        @include('pages.partials.official-card',['o'=>$bendahara,'title'=>'Bendahara RT','icon'=>'fa-wallet'])
    </div>
    <div class="mx-auto h-8 w-px bg-slate-300"></div>
    <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
        @forelse($seksis as $o)
            @include('pages.partials.official-card',['o'=>$o,'title'=>$o->position,'icon'=>'fa-people-group'])
        @empty
            <div class="card col-span-full p-6 text-center text-slate-500">Belum ada data seksi/bidang.</div>
        @endforelse
    </div>
</div>
@endsection