@php
    // Fetch all active perangkat desa
    $allPerangkats = \App\Models\PerangkatDesa::where('status', 'aktif')->orderBy('urutan')->get();

    // Helper to find a perangkat by search keywords in their position title
    $findPerangkat = function($keywords) use ($allPerangkats) {
        return $allPerangkats->first(function($p) use ($keywords) {
            $jabatanLower = Str::lower($p->jabatan);
            foreach ($keywords as $kw) {
                if (Str::contains($jabatanLower, $kw)) {
                    return true;
                }
            }
            return false;
        });
    };

    // Resolve specific roles using keyword matching
    $bpd = $findPerangkat(['bpd', 'badan permusyawaratan']);
    $lpm = $findPerangkat(['lpm', 'lembaga pemberdayaan']);
    
    // Fallback to the root node if no explicit "Kepala Desa" is matched
    $kades = $findPerangkat(['kepala desa', 'kades', 'penjabat kepala', 'pj kepala', 'plt kepala']);
    if (!$kades) {
        $kades = $allPerangkats->whereNull('atasan_id')->first();
    }
    
    $sekdes = $findPerangkat(['sekretaris desa', 'sekdes']);

    $kasiPemerintahan = $findPerangkat(['kasi pemerintahan', 'seksi pemerintahan', 'pemerintahan']);
    
    // Kasi Kesejahteraan & Pelayanan
    $kasiKesraPelayanan = $findPerangkat(['kesejahteraan & pelayanan', 'kesejahteraan dan pelayanan', 'kesejahteraan', 'pelayanan', 'kesra', 'sosial']);
    
    $kaurTuUmum = $findPerangkat(['tu & umum', 'tata usaha dan umum', 'tu dan umum', 'tata usaha', 'umum']);
    $kaurPerencanaan = $findPerangkat(['perencanaan', 'rencana']);
    $kaurKeuangan = $findPerangkat(['keuangan', 'keu', 'bendahara']);

    // Filter Kepala Dusuns
    $kadusList = $allPerangkats->filter(function($p) {
        $jab = Str::lower($p->jabatan);
        return Str::contains($jab, ['dusun', 'kadus', 'kewilayahan']);
    })->values();

    // Map to 7 Dusun slots
    $dusunSlots = [];
    for ($i = 1; $i <= 7; $i++) {
        $matched = $kadusList->first(function($kd) use ($i) {
            $jab = Str::lower($kd->jabatan);
            $roman = ['1' => 'i', '2' => 'ii', '3' => 'iii', '4' => 'iv', '5' => 'v', '6' => 'vi', '7' => 'vii'];
            $words = ['1' => 'satu', '2' => 'dua', '3' => 'tiga', '4' => 'empat', '5' => 'lima', '6' => 'enam', '7' => 'tujuh'];
            
            return Str::contains($jab, ["dusun $i", "dusun " . $roman[$i], "dusun " . $words[$i], "kadus $i", "kadus " . $roman[$i]]);
        });

        if (!$matched && isset($kadusList[$i - 1])) {
            $matched = $kadusList[$i - 1];
        }

        $dusunSlots[$i] = $matched;
    }
@endphp

<style>
    /* Scoped Design System for Organization Chart */
    .village-chart-scroll-wrapper {
        width: 100%;
        overflow-x: auto;
        padding: 20px 0;
        background-color: #ffffff;
        -webkit-overflow-scrolling: touch;
    }
    
    .village-chart-container {
        width: 1100px;
        margin: 0 auto;
        padding: 20px;
        position: relative;
        background-color: #ffffff;
        box-sizing: border-box;
    }

    /* Card Item Style */
    .org-card-item {
        width: 140px;
        height: 210px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .org-card-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    
    .org-card-header {
        width: 100%;
        height: 30px;
        font-size: 10px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 4px;
        box-sizing: border-box;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    
    .org-card-body {
        width: 100%;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 12px 8px;
        box-sizing: border-box;
    }
    
    .org-card-img {
        width: 70px;
        height: 90px;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid #e2e8f0;
    }
    
    .org-card-placeholder-img {
        width: 70px;
        height: 90px;
        background-color: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
        font-size: 24px;
    }
    
    .org-card-name-badge {
        width: 100%;
        background-color: #f0fdfa;
        border: 1px solid #ccfbf1;
        border-radius: 20px;
        padding: 4px 8px;
        text-align: center;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .org-card-name-text {
        display: block;
        font-size: 9px;
        font-weight: 700;
        color: #0f766e;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Box Mitra Styles (BPD & LPM) */
    .mitra-box-container {
        width: 140px;
        display: flex;
        justify-content: center;
    }

    .mitra-box {
        width: 120px;
        height: 45px;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 800;
        color: #1e293b;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    /* Rows */
    .chart-row {
        display: flex;
        width: 100%;
        position: relative;
    }
    
    .row-kades-mitra {
        justify-content: center;
        align-items: center;
        margin-bottom: 0px;
    }
    
    .dashed-line {
        width: 180px;
        height: 0px;
        border-top: 2px dashed #cbd5e1;
    }
    
    /* Branch Kades -> Sekdes */
    .chart-branch-kades-sekdes {
        position: relative;
        width: 100%;
        height: 250px;
    }
    
    .kades-down-line {
        position: absolute;
        top: 0;
        left: 550px; /* Center of 1100px */
        width: 2px;
        height: 250px;
        background-color: #cbd5e1;
        z-index: 1;
    }
    
    .kades-to-sekdes-line {
        position: absolute;
        top: 30px;
        left: 550px;
        width: 320px; /* From 550px to 870px */
        height: 40px;
        border-top: 2px solid #cbd5e1;
        border-right: 2px solid #cbd5e1;
        z-index: 1;
    }
    
    .sekdes-card-wrapper {
        position: absolute;
        top: 70px;
        left: 870px;
        transform: translateX(-50%);
        z-index: 2;
    }

    /* Kasis & Kaurs Row Layout */
    .chart-row-kasi-kaur-container {
        position: relative;
        width: 100%;
        height: 250px;
    }
    
    /* Lines inside Kasi/Kaur Section */
    .kasi-horizontal-bar {
        position: absolute;
        top: 15px;
        left: 120px;
        width: 430px; /* From 120px to 550px */
        height: 2px;
        background-color: #cbd5e1;
    }
    
    .kasi-vertical-drop-1 {
        position: absolute;
        top: 15px;
        left: 120px;
        width: 2px;
        height: 25px;
        background-color: #cbd5e1;
    }
    
    .kasi-vertical-drop-2 {
        position: absolute;
        top: 15px;
        left: 290px;
        width: 2px;
        height: 25px;
        background-color: #cbd5e1;
    }
    
    .kaur-vertical-from-sekdes {
        position: absolute;
        top: -15px; /* Extends from above */
        left: 870px;
        width: 2px;
        height: 30px;
        background-color: #cbd5e1;
    }
    
    .kaur-horizontal-bar {
        position: absolute;
        top: 15px;
        left: 700px;
        width: 340px; /* From 700px to 1040px */
        height: 2px;
        background-color: #cbd5e1;
    }
    
    .kaur-vertical-drop-1 {
        position: absolute;
        top: 15px;
        left: 700px;
        width: 2px;
        height: 25px;
        background-color: #cbd5e1;
    }
    
    .kaur-vertical-drop-2 {
        position: absolute;
        top: 15px;
        left: 870px;
        width: 2px;
        height: 25px;
        background-color: #cbd5e1;
    }
    
    .kaur-vertical-drop-3 {
        position: absolute;
        top: 15px;
        left: 1040px;
        width: 2px;
        height: 25px;
        background-color: #cbd5e1;
    }

    .row-kasi-kaur {
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        display: flex;
        box-sizing: border-box;
    }
    
    .chart-col-card {
        width: 140px;
        position: absolute;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        z-index: 2;
    }
    
    .col-kasi-1 { left: 120px; }
    .col-kasi-2 { left: 290px; }
    
    .col-kaur-1 { left: 700px; }
    .col-kaur-2 { left: 870px; }
    .col-kaur-3 { left: 1040px; }

    /* Dusun Section Layout */
    .chart-branch-to-dusun {
        position: relative;
        width: 100%;
        height: 40px;
    }
    
    .line-vertical-to-dusun {
        position: absolute;
        top: 0;
        left: 550px;
        width: 2px;
        height: 40px;
        background-color: #cbd5e1;
    }
    
    .chart-dusun-section {
        position: relative;
        width: 100%;
        height: 260px;
    }
    
    .dusun-horizontal-bar {
        position: absolute;
        top: 15px;
        left: 85px;
        width: 930px; /* From 85px to 1015px */
        height: 2px;
        background-color: #cbd5e1;
    }
    
    .dusun-vertical-drop {
        position: absolute;
        top: 15px;
        width: 2px;
        height: 20px;
        background-color: #cbd5e1;
    }
    
    .row-dusun {
        position: absolute;
        top: 35px;
        left: 0;
        width: 100%;
        display: flex;
    }
    
    .col-dusun-1 { left: 85px; }
    .col-dusun-2 { left: 240px; }
    .col-dusun-3 { left: 395px; }
    .col-dusun-4 { left: 550px; }
    .col-dusun-5 { left: 705px; }
    .col-dusun-6 { left: 860px; }
    .col-dusun-7 { left: 1015px; }

    /* Footer Info Alert Box */
    .chart-footer-alert {
        width: 100%;
        background-color: #f0f9ff;
        border: 1px solid #bae6fd;
        border-radius: 8px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 30px;
        box-sizing: border-box;
    }
    
    .chart-footer-alert i {
        color: #0284c7;
        font-size: 16px;
    }
    
    .chart-footer-alert span {
        color: #0369a1;
        font-size: 11px;
        font-weight: 500;
    }
</style>

<div class="village-chart-scroll-wrapper">
    <div class="village-chart-container">
        
        <!-- ROW 1: BPD, Kades, LPM -->
        <div class="chart-row row-kades-mitra">
            <!-- BPD Box -->
            <div class="mitra-box-container">
                <div class="mitra-box">BPD</div>
            </div>
            
            <!-- Dashed Line Left -->
            <div class="dashed-line"></div>
            
            <!-- Kades Card -->
            <div class="mitra-box-container">
                @include('partials.org-card-new', ['perangkat' => $kades, 'defaultTitle' => 'Kepala Desa', 'type' => 'kades'])
            </div>
            
            <!-- Dashed Line Right -->
            <div class="dashed-line"></div>
            
            <!-- LPM Box -->
            <div class="mitra-box-container">
                <div class="mitra-box">LPM</div>
            </div>
        </div>

        <!-- ROW 2: Kades Down line and Sekdes wrapper -->
        <div class="chart-branch-kades-sekdes">
            <div class="kades-down-line"></div>
            <div class="kades-to-sekdes-line"></div>
            
            <div class="sekdes-card-wrapper">
                @include('partials.org-card-new', ['perangkat' => $sekdes, 'defaultTitle' => 'Sekretaris Desa', 'type' => 'sekdes'])
            </div>
        </div>

        <!-- ROW 3: Kasis & Kaurs -->
        <div class="chart-row-kasi-kaur-container">
            <!-- Kasi lines -->
            <div class="kasi-horizontal-bar"></div>
            <div class="kasi-vertical-drop-1"></div>
            <div class="kasi-vertical-drop-2"></div>
            
            <!-- Kaur lines -->
            <div class="kaur-vertical-from-sekdes"></div>
            <div class="kaur-horizontal-bar"></div>
            <div class="kaur-vertical-drop-1"></div>
            <div class="kaur-vertical-drop-2"></div>
            <div class="kaur-vertical-drop-3"></div>
            
            <!-- Cards Row -->
            <div class="row-kasi-kaur">
                <!-- Kasi Pemerintahan -->
                <div class="chart-col-card col-kasi-1">
                    @include('partials.org-card-new', ['perangkat' => $kasiPemerintahan, 'defaultTitle' => 'Kasi Pemerintahan', 'type' => 'kasi_kaur'])
                </div>
                
                <!-- Kasi Kesejahteraan & Pelayanan -->
                <div class="chart-col-card col-kasi-2">
                    @include('partials.org-card-new', ['perangkat' => $kasiKesraPelayanan, 'defaultTitle' => 'Kasi Kesejahteraan & Pelayanan', 'type' => 'kasi_kaur'])
                </div>
                
                <!-- Kaur TU & Umum -->
                <div class="chart-col-card col-kaur-1">
                    @include('partials.org-card-new', ['perangkat' => $kaurTuUmum, 'defaultTitle' => 'Kaur Tata Usaha & Umum', 'type' => 'kasi_kaur'])
                </div>
                
                <!-- Kaur Perencanaan -->
                <div class="chart-col-card col-kaur-2">
                    @include('partials.org-card-new', ['perangkat' => $kaurPerencanaan, 'defaultTitle' => 'Kaur Perencanaan', 'type' => 'kasi_kaur'])
                </div>
                
                <!-- Kaur Keuangan -->
                <div class="chart-col-card col-kaur-3">
                    @include('partials.org-card-new', ['perangkat' => $kaurKeuangan, 'defaultTitle' => 'Kaur Keuangan', 'type' => 'kasi_kaur'])
                </div>
            </div>
        </div>

        <!-- Divider line going to Dusun section -->
        <div class="chart-branch-to-dusun">
            <div class="line-vertical-to-dusun"></div>
        </div>

        <!-- ROW 4: Kepala Dusun Row -->
        <div class="chart-dusun-section">
            <!-- Dusun branch lines -->
            <div class="dusun-horizontal-bar"></div>
            @for($i = 1; $i <= 7; $i++)
                @php
                    $leftOffset = [1 => 85, 2 => 240, 3 => 395, 4 => 550, 5 => 705, 6 => 860, 7 => 1015][$i];
                @endphp
                <div class="dusun-vertical-drop" style="left: {{ $leftOffset }}px;"></div>
            @endfor
            
            <div class="row-dusun">
                @for($i = 1; $i <= 7; $i++)
                    <div class="chart-col-card col-dusun-{{ $i }}">
                        @include('partials.org-card-new', ['perangkat' => $dusunSlots[$i], 'defaultTitle' => 'Kepala Dusun ' . $i, 'type' => 'dusun'])
                    </div>
                @endfor
            </div>
        </div>
        
        <!-- FOOTER ALERT -->
        <div class="chart-footer-alert">
            <i class="fas fa-info-circle"></i>
            <span>Struktur organisasi desa berdasarkan Peraturan Desa dan dapat berubah sesuai dengan kebijakan pemerintah desa.</span>
        </div>

    </div>
</div>