@extends('layouts.app')
@section('title', 'Guru & Tendik – SD Negeri 4 Keling')

@push('styles')
<style>
/* ---- Stat Cards (reuse dari data-guru) ---- */
.sd-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:36px}
.sd-stat-card{background:var(--putih);border:1px solid var(--abu);padding:22px 20px;display:flex;align-items:center;gap:16px;border-bottom:3px solid transparent}
.sd-stat-card:nth-child(1){border-bottom-color:var(--biru)}
.sd-stat-card:nth-child(2){border-bottom-color:var(--kuning)}
.sd-stat-card:nth-child(3){border-bottom-color:var(--merah)}
.sd-stat-card:nth-child(4){border-bottom-color:#27ae60}
.sd-stat-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.sd-stat-card:nth-child(1) .sd-stat-icon{background:rgba(22,27,102,.1);color:var(--biru)}
.sd-stat-card:nth-child(2) .sd-stat-icon{background:rgba(255,173,0,.15);color:#c98a00}
.sd-stat-card:nth-child(3) .sd-stat-icon{background:rgba(196,49,47,.1);color:var(--merah)}
.sd-stat-card:nth-child(4) .sd-stat-icon{background:rgba(39,174,96,.12);color:#27ae60}
.sd-stat-num{font-size:1.8rem;font-weight:800;color:var(--teks);line-height:1}
.sd-stat-label{font-size:.75rem;font-weight:400;color:var(--teks-abu);margin-top:2px}

/* ---- Guru/Tendik Cards ---- */
.sd-guru-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px}
.sd-guru-card{background:var(--putih);border:1px solid #edf0f7;overflow:hidden;transition:.25s;border-bottom:3px solid transparent;border-radius:0;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.sd-guru-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(22,27,102,.12);border-bottom-color:var(--kuning)}
.sd-guru-card-header{aspect-ratio:3/4;width:100%;position:relative;overflow:hidden;background:linear-gradient(135deg,#f6f8ff 0%,#eef2ff 100%)}
.sd-guru-foto{width:100%;height:100%;object-fit:cover;display:block;transition:.4s}
.sd-guru-card:hover .sd-guru-foto{transform:scale(1.04)}
.sd-guru-card-body{padding:20px 20px 22px}
.sd-guru-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px}
.sd-guru-nama{font-size:1rem;font-weight:700;margin-bottom:4px;color:var(--teks)}
.sd-guru-badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:rgba(255,173,0,.16);color:#9a6600;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0}
.sd-guru-badge.kategori-staff{background:rgba(196,49,47,.12);color:var(--merah)}
.sd-guru-nip{font-size:.75rem;font-family:monospace;color:var(--teks-abu);margin-bottom:16px}
.sd-guru-info-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.sd-guru-info-row{display:flex;gap:10px;font-size:.84rem;align-items:flex-start;padding:9px 10px;background:#fafcff;border:1px solid #f0f2f8;border-radius:10px}
.sd-guru-info-row i{width:18px;color:var(--kuning);margin-top:2px}
.sd-guru-info-row span{line-height:1.6;color:var(--teks-abu)}
.sd-guru-contact-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.sd-contact-chip{
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 10px;
    min-height:42px;
    width:100%;
    min-width:0;
    overflow:hidden;

    border:1px solid #eceef5;
    border-radius:10px;
    background:#fcfcfd;
    color:var(--teks);
    font-size:.76rem;
    line-height:1.3;
    transition:all .2s ease;
}
.sd-contact-chip:hover{border-color:var(--kuning);background:#fff8e7;transform:translateY(-1px)}
.sd-contact-chip i{color:var(--biru);flex-shrink:0}
.sd-contact-chip.is-copied{border-color:#27ae60;background:rgba(39,174,96,.12);color:#1e7e44}
.sd-contact-text{
    flex:1;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

/* ---- Table (list view) ---- */
.sd-table-wrap{overflow-x:auto;background:var(--putih);border:1px solid var(--abu)}
.sd-table{width:100%;border-collapse:collapse;font-size:.85rem}
.sd-table thead tr{background:var(--biru)}
.sd-table thead th{padding:13px 16px;text-align:left;font-weight:600;color:var(--putih);font-size:.8rem;letter-spacing:.03em;white-space:nowrap}
.sd-table thead th:first-child{width:48px;text-align:center}
.sd-table tbody tr{border-bottom:1px solid var(--abu);transition:background .14s}
.sd-table tbody tr:hover{background:#f7f7ff}
.sd-table tbody td{padding:12px 16px;color:var(--teks);vertical-align:middle}
.sd-table tbody td:first-child{text-align:center;color:var(--teks-abu);font-size:.78rem}
.sd-table tbody tr:last-child{border-bottom:none}

/* ---- Toolbar ---- */
.sd-view-toggle{display:flex;gap:6px}
.sd-view-btn{width:34px;height:34px;border:1.5px solid #d0d0d0;background:var(--putih);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--teks-abu);font-size:.95rem;transition:all .16s}
.sd-view-btn.active{background:var(--biru);border-color:var(--biru);color:var(--putih)}
.sd-tbl-toolbar{display:flex;gap:12px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.sd-tbl-search-wrap{position:relative;flex:1;min-width:200px}
.sd-tbl-search-wrap i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--teks-abu);font-size:.9rem;pointer-events:none}
.sd-tbl-search{width:100%;padding:10px 12px 10px 36px;border:1.5px solid #d0d0d0;font-family:var(--font);font-size:.84rem;color:var(--teks);outline:none;border-radius:0;transition:border-color .18s}
.sd-tbl-search:focus{border-color:var(--biru)}
.sd-tbl-select{padding:10px 14px;border:1.5px solid #d0d0d0;font-family:var(--font);font-size:.84rem;color:var(--teks);outline:none;background:var(--putih);cursor:pointer;border-radius:0}
.sd-tbl-count{font-size:.78rem;color:var(--teks-abu);white-space:nowrap;margin-left:auto}

.sd-badge-status{display:inline-block;padding:2px 10px;font-size:.7rem;font-weight:700;letter-spacing:.03em}
.sd-badge-pns{background:rgba(22,27,102,.1);color:var(--biru)}
.sd-badge-honorer{background:rgba(255,173,0,.2);color:#9a6600}
.sd-badge-p3k{background:rgba(39,174,96,.12);color:#1e7e44}

/* ---- Tab kategori ---- */
.sd-gs-kategori-tab{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.sd-gs-kategori-btn{padding:9px 18px;border:1.5px solid #d0d0d0;background:var(--putih);font-family:var(--font);font-size:.82rem;font-weight:600;color:var(--teks-abu);cursor:pointer;transition:all .16s}
.sd-gs-kategori-btn.active,.sd-gs-kategori-btn:hover{background:var(--biru);border-color:var(--biru);color:var(--putih)}

@media(max-width:900px){.sd-guru-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .sd-guru-grid{grid-template-columns:1fr}
  .sd-stat-row{grid-template-columns:repeat(2,1fr)}
  .sd-tbl-toolbar{flex-direction:column;align-items:stretch}
}
</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['guru-tendik']) ? $heroImages['guru-tendik']->url : asset('images/buatguru.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="#">Informasi</a> &nbsp;/&nbsp;
      <span>Guru & Tendik</span>
    </p>
    <h1 class="sd-page-title">Guru & Tendik</h1>
    <p class="sd-page-subtitle">Tenaga pendidik dan tenaga kependidikan SD Negeri 4 Keling tahun ajaran 2024/2025</p>
    <div class="sd-page-accent"></div>
  </div>
</div>

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

  @php
  $pegawai = $pegawai ?? collect();
  $gsStats = [
      'total'   => $pegawai->count(),
      'guru'    => $pegawai->where('kategori','Guru')->count(),
      'staf'    => $pegawai->where('kategori','Tendik')->count(),
      'pns'     => $pegawai->where('status','PNS')->count(),
  ];
  @endphp

  <div class="sd-stat-row sd-reveal">
    <div class="sd-stat-card">
      <div class="sd-stat-icon"><i class="bi bi-people-fill"></i></div>
      <div><div class="sd-stat-num">{{ $gsStats['total'] }}</div><div class="sd-stat-label">Total Pegawai</div></div>
    </div>
    <div class="sd-stat-card">
      <div class="sd-stat-icon"><i class="bi bi-mortarboard-fill"></i></div>
      <div><div class="sd-stat-num">{{ $gsStats['guru'] }}</div><div class="sd-stat-label">Jumlah Guru</div></div>
    </div>
    <div class="sd-stat-card">
      <div class="sd-stat-icon"><i class="bi bi-person-badge-fill"></i></div>
      <div><div class="sd-stat-num">{{ $gsStats['staf'] }}</div><div class="sd-stat-label">Jumlah Tendik</div></div>
    </div>
    <div class="sd-stat-card">
      <div class="sd-stat-icon"><i class="bi bi-award-fill"></i></div>
      <div><div class="sd-stat-num">{{ $gsStats['pns'] }}</div><div class="sd-stat-label">Status PNS</div></div>
    </div>
  </div>

  {{-- Tab Kategori --}}
  <h2 class="sd-inner-section-title sd-reveal">Daftar Guru & Tendik</h2>
  <div class="sd-gs-kategori-tab sd-reveal">
    <button class="sd-gs-kategori-btn active" data-kategori="">Semua</button>
    <button class="sd-gs-kategori-btn" data-kategori="Guru">Guru</button>
    <button class="sd-gs-kategori-btn" data-kategori="Tendik">Tendik</button>
  </div>

  {{-- Toolbar --}}
  <div class="sd-tbl-toolbar sd-reveal">
    <div class="sd-tbl-search-wrap">
      <i class="bi bi-search"></i>
      <input type="text" id="guruSearch" class="sd-tbl-search" placeholder="Cari nama, NIP, atau jabatan...">
    </div>
    <select id="guruFilterStatus" class="sd-tbl-select">
      <option value="">Semua Status</option>
      <option value="PNS">PNS</option>
      <option value="Honorer">Honorer</option>
      <option value="P3K">P3K</option>
    </select>
    <div class="sd-view-toggle">
      <button class="sd-view-btn active" id="btnCard" title="Tampilan Kartu"><i class="bi bi-grid-fill"></i></button>
      <button class="sd-view-btn" id="btnTable" title="Tampilan Tabel"><i class="bi bi-list-ul"></i></button>
    </div>
    <span class="sd-tbl-count" id="guruCount">Menampilkan <strong>{{ $gsStats['total'] }}</strong> pegawai</span>
  </div>

  {{-- Card View --}}
  <div class="sd-guru-grid sd-reveal" id="guruCardView">
    @forelse($pegawai as $g)
    <div class="sd-guru-card"
         data-nama="{{ strtolower($g->nama) }}"
         data-nip="{{ $g->nip }}"
         data-status="{{ $g->status }}"
         data-kategori="{{ $g->kategori }}">

      <div class="sd-guru-card-header">
        <img src="{{ $g->foto ? (str_starts_with($g->foto,'http') ? $g->foto : asset($g->foto)) : 'https://ui-avatars.com/api/?name='.urlencode($g->nama).'&size=300&background=eaeaea&color=161b66&bold=true' }}" class="sd-guru-foto" alt="{{ $g->nama }}">
      </div>

      <div class="sd-guru-card-body">
        <div class="sd-guru-card-top">
          <p class="sd-guru-nama">{{ $g->nama }}</p>
          <span class="sd-guru-badge {{ $g->kategori === 'Tendik' ? 'kategori-staff' : '' }}">{{ $g->status }}</span>
        </div>

        <p class="sd-guru-nip">{{ $g->nip ?: 'NIP tidak tersedia' }}</p>

        <div class="sd-guru-info-list">
          <div class="sd-guru-info-row">
            <i class="bi bi-briefcase-fill"></i>
            <span>{{ $g->jabatan }}</span>
          </div>
          <div class="sd-guru-info-row">
            <i class="bi bi-mortarboard-fill"></i>
            <span>{{ $g->pendidikan }}</span>
          </div>
        </div>

        <div class="sd-guru-contact-row">
          <button type="button" class="sd-contact-chip sd-copy-btn" data-copy="{{ $g->telepon }}" title="Klik untuk menyalin nomor">
            <i class="bi bi-telephone-fill"></i>
            <span class="sd-contact-text">{{ $g->telepon }}</span>
          </button>
          @php
            $socialIcons = [
              'instagram' => 'bi-instagram',
              'tiktok' => 'bi-tiktok',
              'facebook' => 'bi-facebook',
              'youtube' => 'bi-youtube',
              'twitter' => 'bi-twitter-x',
              'whatsapp' => 'bi-whatsapp',
            ];
            $socialIcon = $socialIcons[$g->social_platform] ?? 'bi-instagram';
          @endphp
          <a href="{{ $g->social_url }}" class="sd-contact-chip sd-social-link" target="_blank" rel="noopener noreferrer" title="Buka akun sosial media">
            <i class="bi {{ $socialIcon }}"></i>
            <span class="sd-contact-text">{{ $g->social_handle }}</span>
          </a>
        </div>
      </div>
    </div>
    @empty
    <p style="grid-column:1/-1;text-align:center;padding:32px;color:var(--teks-abu)">Belum ada data guru atau tendik.</p>
    @endforelse
  </div>

  {{-- Table View (hidden by default) --}}
  <div style="display:none" id="guruTableView">
    <div class="sd-table-wrap">
      <table class="sd-table">
        <thead>
          <tr>
            <th>No</th>
            <th>Kategori</th>
            <th>NIP</th>
            <th>Nama Lengkap</th>
            <th>Jabatan</th>
            <th>Pendidikan</th>
            <th>Status</th>
            <th>Kontak</th>
          </tr>
        </thead>
        <tbody id="guruTableBody">
          @foreach($pegawai as $i => $g)
          <tr data-nama="{{ strtolower($g->nama) }}" data-nip="{{ $g->nip }}" data-status="{{ $g->status }}" data-kategori="{{ $g->kategori }}">
            <td>{{ $i+1 }}</td>
            <td>{{ $g->kategori }}</td>
            <td style="font-family:monospace;font-size:.78rem">{{ $g->nip ?: '-' }}</td>
            <td style="font-weight:600">{{ $g->nama }}</td>
            <td>{{ $g->jabatan }}</td>
            <td>{{ $g->pendidikan }}</td>
            <td><span class="sd-badge-status sd-badge-{{ strtolower(str_replace(' ','',$g->status)) }}">{{ $g->status }}</span></td>
            <td>{{ $g->telepon }} / {{ $g->social_handle }}</td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>

</div>

@endsection

@push('scripts')
<script>
(function(){
  const search    = document.getElementById('guruSearch');
  const selStat   = document.getElementById('guruFilterStatus');
  const count     = document.getElementById('guruCount');
  const cardView  = document.getElementById('guruCardView');
  const tableView = document.getElementById('guruTableView');
  const btnCard   = document.getElementById('btnCard');
  const btnTable  = document.getElementById('btnTable');
  const kategoriBtns = document.querySelectorAll('.sd-gs-kategori-btn');
  let currentKategori = '';

  function copyContact(button){
    const text = button.dataset.copy || '';
    if(!text) return;
    navigator.clipboard.writeText(text).then(function(){
      const label = button.querySelector('.sd-contact-text');
      const original = label.textContent;
      label.textContent = 'Tersalin';
      button.classList.add('is-copied');
      setTimeout(function(){
        label.textContent = original;
        button.classList.remove('is-copied');
      }, 1400);
    }).catch(function(){
      button.querySelector('.sd-contact-text').textContent = 'Gagal';
    });
  }

  function filter(){
    const q    = search.value.toLowerCase().trim();
    const stat = selStat.value;
    let visible = 0;

    cardView.querySelectorAll('.sd-guru-card').forEach(function(el){
      const m = (!q || el.dataset.nama.includes(q) || el.dataset.nip.includes(q))
             && (!stat || el.dataset.status === stat)
             && (!currentKategori || el.dataset.kategori === currentKategori);
      el.style.display = m ? '' : 'none';
      if(m) visible++;
    });
    tableView.querySelectorAll('tbody tr').forEach(function(el){
      const m = (!q || el.dataset.nama.includes(q) || el.dataset.nip.includes(q))
             && (!stat || el.dataset.status === stat)
             && (!currentKategori || el.dataset.kategori === currentKategori);
      el.style.display = m ? '' : 'none';
    });
    count.innerHTML = 'Menampilkan <strong>'+visible+'</strong> pegawai';
  }

  document.querySelectorAll('.sd-copy-btn').forEach(function(button){
    button.addEventListener('click', function(){ copyContact(this); });
  });

  kategoriBtns.forEach(function(btn){
    btn.addEventListener('click', function(){
      kategoriBtns.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      currentKategori = btn.dataset.kategori;
      filter();
    });
  });

  search.addEventListener('input', filter);
  selStat.addEventListener('change', filter);

  btnCard.addEventListener('click', function(){
    cardView.style.display='';tableView.style.display='none';
    btnCard.classList.add('active');btnTable.classList.remove('active');
  });
  btnTable.addEventListener('click', function(){
    tableView.style.display='';cardView.style.display='none';
    btnTable.classList.add('active');btnCard.classList.remove('active');
    filter();
  });

  filter();
})();
</script>
@endpush