<?php $__env->startSection('title', 'Struktur Organisasi (SOTK)'); ?>
<?php $__env->startSection('meta_description', 'Struktur Organisasi Tata Kerja (SOTK) Perangkat Desa ' . $profile->nama_desa); ?>

<?php $__env->startSection('content'); ?>


<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="<?php echo e(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 <?php echo e($profile->nama_desa); ?>, Kecamatan <?php echo e($profile->kecamatan); ?>, Kabupaten <?php echo e($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();
    ?>

    
    <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;">

            
            <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 <?php echo e(strtoupper($profile->nama_desa)); ?> &bull; KEC. <?php echo e(strtoupper($profile->kecamatan)); ?> &bull; KAB. <?php echo e(strtoupper($profile->kabupaten)); ?>

                </p>
            </div>

            
            <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"><?php echo e($kades->nama ?? '-'); ?></p>
                        <?php if($kades && $kades->ttl): ?>
                            <p class="sotk-ttl"><?php echo e($kades->ttl); ?></p>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

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

            
            <?php 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"><?php echo e($sekdes->nama); ?></p>
                        <?php if($sekdes->ttl): ?>
                            <p class="sotk-ttl"><?php echo e($sekdes->ttl); ?></p>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            <?php endif; ?>

            
            <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;">
                    <?php $__currentLoopData = $kasikaur; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div style="width:2px; height:24px; background:#6ee7b7;"></div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>

            
            <div style="display:grid; grid-template-columns:repeat(<?php echo e($kasikaur->count()); ?>, 1fr); gap:10px; margin-bottom:0;">
                <?php $__currentLoopData = $kasikaur; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="sotk-card" style="border-color: #34d399;">
                    <div class="sotk-header" style="background: #065f46; font-size: 8px;"><?php echo e(strtoupper($item->jabatan)); ?></div>
                    <div class="sotk-body">
                        <p class="sotk-name" style="font-size:10px;"><?php echo e($item->nama); ?></p>
                        <?php if($item->ttl): ?>
                            <p class="sotk-ttl" style="font-size:8px;"><?php echo e($item->ttl); ?></p>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

            
            <?php 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;">
                    <?php $__currentLoopData = $kadun; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div style="width:2px; height:24px; background:#6ee7b7;"></div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>

            
            <div style="display:flex; justify-content:center;">
                <div style="display:grid; grid-template-columns:repeat(<?php echo e($kadun->count()); ?>, 1fr); gap:12px; width:50%;">
                    <?php $__currentLoopData = $kadun; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="sotk-card" style="border-color: #94a3b8;">
                        <div class="sotk-header" style="background: #334155; font-size:8px;"><?php echo e(strtoupper($item->jabatan)); ?></div>
                        <div class="sotk-body">
                            <p class="sotk-name" style="font-size:11px;"><?php echo e($item->nama); ?></p>
                            <?php if($item->ttl): ?>
                                <p class="sotk-ttl" style="font-size:9px;"><?php echo e($item->ttl); ?></p>
                            <?php endif; ?>
                        </div>
                    </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
            <?php endif; ?>

        </div>
    </div>

    
    <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">
        <?php $__currentLoopData = $officials; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $official): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?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) : ''));
        ?>
        <div style="background:#fff; border: 1.5px solid <?php echo e($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:<?php echo e($hdr); ?>; color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:900; flex-shrink:0;">
                <?php echo e($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:<?php echo e($hdr); ?>; margin-bottom:3px;"><?php echo e($official->jabatan); ?></p>
                <p style="font-size:13px; font-weight:800; color:#111827; line-height:1.3;"><?php echo e($official->nama); ?></p>
                <?php if($official->ttl): ?>
                <p style="font-size:11px; color:#6b7280; margin-top:3px;">📍 <?php echo e($official->ttl); ?></p>
                <?php endif; ?>
            </div>
        </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </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>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH F:\web Desa Suka Baru\website-desa-suka-baru\resources\views/public/profile/pemerintahan.blade.php ENDPATH**/ ?>