@extends('layouts.user')

@section('title', 'Struktur Organisasi - CV. Amelia Langgeng Jaya')

@section('content')
@php
    // Kita ubah data dari database menjadi array agar mudah dipanggil berdasarkan key jabatannya
    $sdm = $struktur->pluck('nama_pejabat', 'jabatan');
@endphp

{{-- 1. Hero Section --}}
<section class="relative h-[300px] flex items-center justify-center bg-gray-900">
    <img src="{{ asset('images/cor-crown.jpeg') }}" class="absolute inset-0 w-full h-full object-cover opacity-50" alt="Background">
    <div class="absolute inset-0 bg-black/40"></div>
    <div class="relative z-10 text-center">
        <h1 class="text-white text-4xl md:text-5xl font-bold uppercase tracking-tight">Struktur Organisasi</h1>
    </div>
</section>

{{-- 2. Bagan Section --}}
<section class="py-16 bg-white">
    <div class="container mx-auto px-6">
        <div class="mb-12 border-l-4 border-orange-500 pl-4">
            <h2 class="text-orange-500 font-bold uppercase">Management</h2>
            <h3 class="text-blue-900 text-2xl font-black uppercase">CV. Amelia Langgeng Jaya</h3>
        </div>

        <div class="flex flex-col items-center">
            {{-- Level 1: Direktur Utama --}}
            <div class="relative mb-16">
                <div class="w-64 border-2 border-orange-500 rounded-sm shadow-md overflow-hidden bg-white">
                    <div class="bg-orange-500 text-white text-[10px] font-bold py-1 text-center uppercase">Direktur Utama</div>
                    <div class="p-3 text-center font-bold text-blue-900 text-lg uppercase">
                        {{ $sdm['direktur_utama'] ?? 'Sodikin' }}
                    </div>
                </div>
                <div class="absolute left-1/2 -bottom-16 w-px h-16 bg-slate-400"></div>
            </div>

            {{-- Level 2: Direktur Keuangan --}}
            <div class="relative mb-16">
                <div class="w-72 border-2 border-orange-500 rounded-sm shadow-md overflow-hidden bg-white">
                    <div class="bg-orange-500 text-white text-[10px] font-bold py-1 text-center uppercase">Direktur Keuangan</div>
                    <div class="p-3 text-center font-bold text-blue-900 text-base uppercase leading-tight">
                        {!! nl2br(e($sdm['direktur_keuangan'] ?? 'Taofik Langgeng Ardiansyah, S.H.')) !!}
                    </div>
                </div>
                {{-- Garis Utama --}}
                <div class="absolute left-1/2 -bottom-[260px] w-px h-[260px] bg-slate-400"></div>
                {{-- Garis Cabang Horisontal --}}
                <div class="absolute left-1/2 -bottom-8 w-[500px] -translate-x-1/2 h-px bg-slate-400"></div>
            </div>

            {{-- Level 3: Sekretaris & Manajer Teknis --}}
            <div class="flex gap-32 mb-20 relative">
                {{-- Box Sekretaris --}}
                <div class="relative">
                    <div class="absolute -top-8 left-1/2 w-px h-8 bg-slate-400"></div>
                    <div class="w-60 border-2 border-orange-500 rounded-sm shadow-md overflow-hidden bg-white">
                        <div class="bg-orange-500 text-white text-[10px] font-bold py-1 text-center uppercase">Sekretaris</div>
                        <div class="p-3 text-center font-bold text-blue-900 text-sm uppercase">
                            {{ $sdm['sekretaris'] ?? 'Kuswoyo, S.E., M.M.' }}
                        </div>
                    </div>
                </div>
                {{-- Box Manajer Teknis --}}
                <div class="relative">
                    <div class="absolute -top-8 left-1/2 w-px h-8 bg-slate-400"></div>
                    <div class="w-60 border-2 border-orange-500 rounded-sm shadow-md overflow-hidden bg-white">
                        <div class="bg-orange-500 text-white text-[10px] font-bold py-1 text-center uppercase">Manajer Teknis</div>
                        <div class="p-3 text-center font-bold text-blue-900 text-sm uppercase">
                            {{ $sdm['manajer_teknis'] ?? 'Muhammad Fahri, S.T.' }}
                        </div>
                    </div>
                </div>
            </div>

            {{-- Level 4: Grid Seksi --}}
            <div class="relative w-full max-w-5xl mb-24">
                <div class="absolute -top-8 left-[12%] right-[12%] h-px bg-slate-400"></div>
                <div class="grid grid-cols-4 gap-4">
                    @php
                        $list_seksi = [
                            ['pjtbu', 'PJTBU', "Mu'awanah Reza Nur Launtina, S.T."],
                            ['seksi_jembatan', 'Seksi Jembatan', 'Endi Wahyono'],
                            ['seksi_irigasi', 'Seksi Saluran Irigasi', 'Nurochim'],
                            ['seksi_jalan', 'Seksi Jalan', 'Afiq Choerul Anwar']
                        ];
                    @endphp
                    @foreach($list_seksi as $item)
                    <div class="flex flex-col items-center">
                        <div class="w-px h-8 bg-slate-400"></div>
                        <div class="w-full border-2 border-orange-500 rounded-sm shadow-sm overflow-hidden bg-white">
                            <div class="bg-orange-500 text-white text-[9px] font-bold py-1 text-center uppercase">{{ $item[1] }}</div>
                            <div class="p-2 text-center font-bold text-blue-900 text-[10px] uppercase min-h-[50px] flex items-center justify-center">
                                {{ $sdm[$item[0]] ?? $item[2] }}
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Level 5: Mandor --}}
            <div class="w-64 border-2 border-orange-500 rounded-sm shadow-md overflow-hidden bg-white">
                <div class="bg-orange-500 text-white text-[10px] font-bold py-1 text-center uppercase">Mandor Proyek</div>
                <div class="p-3 text-center font-bold text-blue-900 text-lg uppercase">
                    {{ $sdm['mandor_proyek'] ?? 'Sukarman' }}
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .container { max-width: 1100px; }
    h1, h2, h3 { letter-spacing: -0.025em; }
</style>
@endsection