@extends('layouts.app')
@section('title', 'Struktur Organisasi (SOTK)')
@section('meta_description', 'Struktur Organisasi Tata Kerja (SOTK) Perangkat Desa ' . $profile->nama_desa)

@section('content')

{{-- HERO --}}
<div style="background: #1E3A8A;" class="py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <nav class="text-blue-200 text-sm mb-3">
            <a href="{{ route('home') }}" class="hover:text-white">Beranda</a>
            <span class="mx-2">/</span>
            <span class="text-white font-medium">Profil — Pemerintahan</span>
        </nav>
        <h1 class="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">Struktur Organisasi Tata Kerja</h1>
        <p class="text-blue-200 text-sm mt-1 font-light">
            Desa {{ $profile->nama_desa }}, Kecamatan {{ $profile->kecamatan }}, Kabupaten {{ $profile->kabupaten }}
        </p>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

    @php
        $kades    = $officials->firstWhere('jabatan', 'Kepala Desa') ?? $officials->first();
        $sekdes   = $officials->firstWhere('jabatan', 'Sekretaris Desa');
        $kasikaur = $officials->filter(fn($o) =>
            str_contains(strtolower($o->jabatan), 'kasi') ||
            str_contains(strtolower($o->jabatan), 'kaur')
        )->values();
        $kadun    = $officials->filter(fn($o) =>
            str_contains(strtolower($o->jabatan), 'dusun')
        )->values();
    @endphp

    {{-- ===== BAGAN SOTK ===== --}}
    <div class="rounded-3xl shadow-2xl overflow-x-auto mb-12" style="background: linear-gradient(135deg, #064e3b 0%, #065f46 40%, #0f4c75 100%); border: 1px solid rgba(52,211,153,0.25); padding: 2.5rem;">
        <div style="min-width: 820px;">

            {{-- HEADER --}}
            <div style="text-align:center; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(52,211,153,0.2);">
                <p style="color: #6ee7b7; font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 4px;">
                    STRUKTUR ORGANISASI TATA KERJA ( SOTK )
                </p>
                <p style="color: #ecfdf5; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;">
                    DESA {{ strtoupper($profile->nama_desa) }} &bull; KEC. {{ strtoupper($profile->kecamatan) }} &bull; KAB. {{ strtoupper($profile->kabupaten) }}
                </p>
            </div>

            {{-- LEVEL 1: KEPALA DESA --}}
            <div style="display:flex; justify-content:center; margin-bottom:0;">
                <div class="sotk-card" style="width: 210px; border-color: #f59e0b;">
                    <div class="sotk-header" style="background: #d97706;">KEPALA DESA</div>
                    <div class="sotk-body">
                        <p class="sotk-name">{{ $kades->nama ?? '-' }}</p>
                        @if($kades && $kades->ttl)
                            <p class="sotk-ttl">{{ $kades->ttl }}</p>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Line down --}}
            <div style="display:flex; justify-content:center;">
                <div style="width:2px; height:32px; background:#6ee7b7;"></div>
            </div>

            {{-- LEVEL 2: SEKRETARIS DESA --}}
            @if($sekdes)
            <div style="display:flex; justify-content:center; margin-bottom:0;">
                <div class="sotk-card" style="width: 190px; border-color: #14b8a6;">
                    <div class="sotk-header" style="background: #0f766e;">SEKRETARIS DESA</div>
                    <div class="sotk-body">
                        <p class="sotk-name">{{ $sekdes->nama }}</p>
                        @if($sekdes->ttl)
                            <p class="sotk-ttl">{{ $sekdes->ttl }}</p>
                        @endif
                    </div>
                </div>
            </div>
            @endif

            {{-- Horizontal connector to Kasi/Kaur --}}
            <div style="display:flex; flex-direction:column; align-items:center;">
                <div style="width:2px; height:28px; background:#6ee7b7;"></div>
                <div style="width:90%; height:2px; background:#6ee7b7;"></div>
                <div style="width:90%; display:flex; justify-content:space-between;">
                    @foreach($kasikaur as $item)
                        <div style="width:2px; height:24px; background:#6ee7b7;"></div>
                    @endforeach
                </div>
            </div>

            {{-- LEVEL 3: KASI & KAUR --}}
            <div style="display:grid; grid-template-columns:repeat({{ $kasikaur->count() }}, 1fr); gap:10px; margin-bottom:0;">
                @foreach($kasikaur as $item)
                <div class="sotk-card" style="border-color: #34d399;">
                    <div class="sotk-header" style="background: #065f46; font-size: 8px;">{{ strtoupper($item->jabatan) }}</div>
                    <div class="sotk-body">
                        <p class="sotk-name" style="font-size:10px;">{{ $item->nama }}</p>
                        @if($item->ttl)
                            <p class="sotk-ttl" style="font-size:8px;">{{ $item->ttl }}</p>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>

            {{-- Connector to Kepala Dusun --}}
            @if($kadun->count() > 0)
            <div style="display:flex; flex-direction:column; align-items:center; margin-top:8px;">
                <div style="width:2px; height:28px; background:#6ee7b7;"></div>
                <div style="width:44%; height:2px; background:#6ee7b7;"></div>
                <div style="width:44%; display:flex; justify-content:space-between;">
                    @foreach($kadun as $item)
                        <div style="width:2px; height:24px; background:#6ee7b7;"></div>
                    @endforeach
                </div>
            </div>

            {{-- LEVEL 4: KEPALA DUSUN --}}
            <div style="display:flex; justify-content:center;">
                <div style="display:grid; grid-template-columns:repeat({{ $kadun->count() }}, 1fr); gap:12px; width:50%;">
                    @foreach($kadun as $item)
                    <div class="sotk-card" style="border-color: #94a3b8;">
                        <div class="sotk-header" style="background: #334155; font-size:8px;">{{ strtoupper($item->jabatan) }}</div>
                        <div class="sotk-body">
                            <p class="sotk-name" style="font-size:11px;">{{ $item->nama }}</p>
                            @if($item->ttl)
                                <p class="sotk-ttl" style="font-size:9px;">{{ $item->ttl }}</p>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

        </div>
    </div>

    {{-- ===== DAFTAR LENGKAP ===== --}}
    <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center gap-2">
        <span style="width:4px; height:24px; background:#2563EB; border-radius:2px; display:inline-block;"></span>
        Daftar Lengkap Perangkat Desa
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        @foreach($officials as $official)
        @php
            $jabatan = $official->jabatan;
            if ($jabatan === 'Kepala Desa')           { $hdr = '#d97706'; $bg = '#fffbeb'; $bdr = '#fde68a'; }
            elseif ($jabatan === 'Sekretaris Desa')   { $hdr = '#0f766e'; $bg = '#f0fdfa'; $bdr = '#99f6e4'; }
            elseif (str_contains($jabatan, 'Dusun'))  { $hdr = '#334155'; $bg = '#f8fafc'; $bdr = '#cbd5e1'; }
            else                                       { $hdr = '#065f46'; $bg = '#ecfdf5'; $bdr = '#6ee7b7'; }

            $words = explode(' ', $official->nama);
            $initials = strtoupper(substr($words[0], 0, 1) . (isset($words[1]) ? substr($words[1], 0, 1) : ''));
        @endphp
        <div style="background:#fff; border: 1.5px solid {{ $bdr }}; border-radius:16px; padding:16px; display:flex; align-items:flex-start; gap:12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: all 0.2s;" class="hover:-translate-y-0.5 hover:shadow-lg">
            <div style="width:44px; height:44px; border-radius:12px; background:{{ $hdr }}; color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:900; flex-shrink:0;">
                {{ $initials }}
            </div>
            <div style="flex:1; min-width:0;">
                <p style="font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:{{ $hdr }}; margin-bottom:3px;">{{ $official->jabatan }}</p>
                <p style="font-size:13px; font-weight:800; color:#111827; line-height:1.3;">{{ $official->nama }}</p>
                @if($official->ttl)
                <p style="font-size:11px; color:#6b7280; margin-top:3px;">📍 {{ $official->ttl }}</p>
                @endif
            </div>
        </div>
        @endforeach
    </div>

</div>

<style>
.sotk-card {
    background: white;
    border-radius: 12px;
    border: 2px solid;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}
.sotk-card:hover { transform: translateY(-3px); }
.sotk-header {
    color: white;
    font-weight: 900;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 8px;
    line-height: 1.3;
}
.sotk-body {
    padding: 8px 10px 10px;
    text-align: center;
}
.sotk-name {
    font-size: 12px;
    font-weight: 800;
    color: #111827;
    line-height: 1.3;
    margin: 0;
}
.sotk-ttl {
    font-size: 9px;
    color: #6b7280;
    margin-top: 3px;
    font-weight: 500;
    line-height: 1.3;
}
</style>

@endsection
