@extends('layouts.app')
@section('title', 'Struktur Organisasi – SD Negeri 4 Keling')

@push('styles')
<style>
.sd-tree{display:flex;flex-direction:column;align-items:center;margin-bottom:8px}

.sd-tree-root{
  background:var(--biru);color:var(--putih);padding:18px 34px;text-align:center;
  border-top:4px solid var(--kuning);box-shadow:0 10px 28px rgba(22,27,102,.18);
  margin-bottom:0;
}
.sd-tree-root-foto{
  width:64px;height:64px;border-radius:50%;object-fit:cover;margin:0 auto 10px;
  border:3px solid var(--kuning);display:block;
}
.sd-tree-root-jabatan{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--kuning);margin-bottom:4px}
.sd-tree-root-nama{font-size:1rem;font-weight:700}

.sd-tree-trunk{width:2px;height:28px;background:#c7cbe0}

.sd-tree-branch{width:100%;max-width:960px;margin-bottom:26px}
.sd-tree-branch-label{
  text-align:center;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teks-abu);margin-bottom:14px;position:relative;
}
.sd-tree-branch-row{
  display:flex;justify-content:center;gap:16px;flex-wrap:wrap;position:relative;
  padding-top:20px;
}
.sd-tree-branch-row::before{
  /* horizontal connector line across the row */
  content:'';position:absolute;top:0;left:10%;right:10%;height:2px;background:#c7cbe0;
}
.sd-tree-node{
  position:relative;background:var(--putih);border:1px solid var(--abu);
  padding:14px 18px;text-align:center;min-width:170px;border-bottom:3px solid var(--kuning);
  transition:.2s;
}
.sd-tree-node::before{
  content:'';position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:2px;height:20px;background:#c7cbe0;
}
.sd-tree-node:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.08);border-bottom-color:var(--merah)}
.sd-tree-node-jabatan{font-size:.78rem;font-weight:700;color:var(--biru);margin-bottom:3px}
.sd-tree-node-nama{font-size:.8rem;color:var(--teks-abu)}
.sd-tree-node-foto{
  width:48px;height:48px;border-radius:50%;object-fit:cover;margin:0 auto 8px;
  border:2px solid var(--kuning);display:block;
}

/* Nested sub-branch (contoh: Pesuruh -> Masyarakat) */
.sd-tree-sub{display:flex;flex-direction:column;align-items:center;margin-top:0}
.sd-tree-sub-trunk{width:2px;height:20px;background:#c7cbe0}
.sd-tree-sub-node{
  background:#fafafa;border:1px dashed #c7cbe0;padding:9px 16px;text-align:center;
  font-size:.75rem;color:var(--teks-abu);min-width:140px;
}

@media(max-width:700px){
  .sd-tree-branch-row{flex-direction:column;align-items:center;gap:20px}
  .sd-tree-branch-row::before{display:none}
  .sd-tree-node::before{display:none}
}
</style>
@endpush

@section('content')

{{-- Page Hero --}}
<div class="sd-page-hero" style="background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.30),rgba(0,0,0,.05)), url('{{ (isset($heroImages['struktur-organisasi']) ? $heroImages['struktur-organisasi']->url : asset('images/buatorg.jpeg')) }}');background-size:cover;background-position:center;">
  <div class="sd-page-hero-inner">
    <p class="sd-page-breadcrumb">
      <a href="{{ route('home') }}">Beranda</a> &nbsp;/&nbsp;
      <a href="#">Profil Sekolah</a> &nbsp;/&nbsp;
      <span>Struktur Organisasi</span>
    </p>
    <h1 class="sd-page-title">Struktur Organisasi</h1>
    <p class="sd-page-subtitle">Susunan tugas dan tanggung jawab pengelola SD Negeri 4 Keling</p>
    <div class="sd-page-accent"></div>
  </div>
</div>

{{-- Content --}}
<div class="sd-page-body">

  @php
  // Fallback data kalau tabel masih kosong (misalnya belum migrate/seed)
  if (!isset($kepsek) || !$kepsek) {
      $kepsek = (object)[
          'nama' => 'Drs. Ahmad Fauzi, M.Pd.',
          'jabatan' => 'Kepala Sekolah',
          'foto' => null,
          'children' => collect([
              (object)['nama'=>'Perwakilan Orang Tua Siswa','jabatan'=>'Komite Sekolah','foto'=>null,'kelompok'=>'Manajemen','children'=>collect()],
              (object)['nama'=>'Ibu Sunarti','jabatan'=>'Perpustakaan','foto'=>null,'kelompok'=>'Manajemen','children'=>collect()],
              (object)['nama'=>'Bapak Bambang Irawan','jabatan'=>'Tata Usaha','foto'=>null,'kelompok'=>'Manajemen','children'=>collect()],
              (object)['nama'=>'Ibu Siti Rahayu, S.Pd','jabatan'=>'Guru Kelas 1','foto'=>null,'kelompok'=>'Guru Kelas & Mapel','children'=>collect()],
              (object)['nama'=>'Bapak Ahmad Fauzi, S.Pd','jabatan'=>'Guru Kelas 2','foto'=>null,'kelompok'=>'Guru Kelas & Mapel','children'=>collect()],
              (object)['nama'=>'Ibu Dwi Lestari, S.Pd','jabatan'=>'Guru Kelas 3','foto'=>null,'kelompok'=>'Guru Kelas & Mapel','children'=>collect()],
              (object)['nama'=>'Bapak Hendra Saputra, S.Pd','jabatan'=>'Guru Kelas 4','foto'=>null,'kelompok'=>'Guru Kelas & Mapel','children'=>collect()],
              (object)['nama'=>'Ibu Nurul Hidayah, S.Pd','jabatan'=>'Guru Kelas 5','foto'=>null,'kelompok'=>'Guru Kelas & Mapel','children'=>collect()],
              (object)['nama'=>'Bapak Supriyanto, S.Pd','jabatan'=>'Guru Kelas 6','foto'=>null,'kelompok'=>'Guru Kelas & Mapel','children'=>collect()],
              (object)['nama'=>'Bapak Muslih, S.Pd.I','jabatan'=>'Guru Agama','foto'=>null,'kelompok'=>'Guru Kelas & Mapel','children'=>collect()],
              (object)['nama'=>'Bapak Joko Susilo, S.Pd','jabatan'=>'Guru OR','foto'=>null,'kelompok'=>'Guru Kelas & Mapel','children'=>collect()],
              (object)['nama'=>'Ibu Sunarti','jabatan'=>'Pustakawan','foto'=>null,'kelompok'=>'Tenaga Pendukung','children'=>collect()],
              (object)['nama'=>'Ibu Dewi Kristina, S.Pd','jabatan'=>'Guru Bahasa Inggris','foto'=>null,'kelompok'=>'Tenaga Pendukung','children'=>collect()],
              (object)['nama'=>'Bapak Gatot Subroto','jabatan'=>'Bendahara','foto'=>null,'kelompok'=>'Tenaga Pendukung','children'=>collect()],
              (object)['nama'=>'Ibu Rini Setyowati','jabatan'=>'Guru Tari','foto'=>null,'kelompok'=>'Tenaga Pendukung','children'=>collect()],
              (object)['nama'=>'Bapak Sugiyono','jabatan'=>'Pesuruh','foto'=>null,'kelompok'=>'Tenaga Pendukung','children'=>collect([
                  (object)['nama'=>'Masyarakat Sekitar','jabatan'=>'Masyarakat'],
              ])],
          ]),
      ];
  }

  $groups = collect($kepsek->children)->groupBy(fn($c) => $c->kelompok ?? 'Lainnya');
  @endphp

  <div class="sd-tree sd-reveal">
    <div class="sd-tree-root">
      <img src="{{ !empty($kepsek->foto) ? (str_starts_with($kepsek->foto,'http') ? $kepsek->foto : asset($kepsek->foto)) : 'https://ui-avatars.com/api/?name='.urlencode($kepsek->nama).'&size=128&background=ffad00&color=161b66&bold=true' }}" class="sd-tree-root-foto" alt="{{ $kepsek->nama }}">
      <p class="sd-tree-root-jabatan">{{ $kepsek->jabatan }}</p>
      <p class="sd-tree-root-nama">{{ $kepsek->nama }}</p>
    </div>
    <div class="sd-tree-trunk"></div>

    @foreach($groups as $label => $members)
    <div class="sd-tree-branch">
      <p class="sd-tree-branch-label">{{ $label }}</p>
      <div class="sd-tree-branch-row">
        @foreach($members as $m)
        <div>
          <div class="sd-tree-node">
            <img src="{{ !empty($m->foto) ? (str_starts_with($m->foto,'http') ? $m->foto : asset($m->foto)) : 'https://ui-avatars.com/api/?name='.urlencode($m->nama).'&size=96&background=eaeaea&color=161b66&bold=true' }}" class="sd-tree-node-foto" alt="{{ $m->nama }}">
            <p class="sd-tree-node-jabatan">{{ $m->jabatan }}</p>
            <p class="sd-tree-node-nama">{{ $m->nama }}</p>
          </div>

          @if(!empty($m->children) && count($m->children))
          <div class="sd-tree-sub">
            <div class="sd-tree-sub-trunk"></div>
            @foreach($m->children as $sub)
            <div class="sd-tree-sub-node">{{ $sub->jabatan }} — {{ $sub->nama }}</div>
            @endforeach
          </div>
          @endif
        </div>
        @endforeach
      </div>
    </div>
    @endforeach
  </div>

  {{-- Keterangan --}}
  <div class="sd-inner-card sd-reveal" style="margin-top:12px">
    <h3 class="sd-inner-section-title">Keterangan</h3>
    <p>
      Struktur organisasi di atas menggambarkan garis koordinasi utama SD Negeri 4 Keling.
      Kepala Sekolah bertanggung jawab penuh atas keseluruhan penyelenggaraan pendidikan dan
      berkoordinasi langsung dengan seluruh unsur manajemen, guru, serta tenaga kependidikan
      di bawah ini demi tercapainya visi dan misi sekolah.
    </p>
  </div>

</div>

@endsection