@extends('layouts.app')
@section('title', 'Beranda – Sekolah Dasar Negeri Swasta')

@section('content')

{{-- ============================================================ HERO --}}
<section class="sd-hero" id="heroSlider">
  <div class="sd-slides-wrap">

    @forelse($slides as $i => $slide)
    <div class="sd-slide {{ $i === 0 ? 'active' : '' }}">
      <img src="{{ str_starts_with($slide->gambar,'http') ? $slide->gambar : asset($slide->gambar) }}" alt="{{ $slide->judul }}" class="sd-slide-img">
      <div class="sd-slide-overlay"></div>
      <div class="sd-slide-content">
        <div class="sd-slide-accent-line"></div>
        <div class="sd-slide-texts">
          <p class="sd-slide-eyebrow">{{ $slide->eyebrow }}</p>
          <h1 class="sd-slide-title">{{ $slide->judul }}</h1>
          <p class="sd-slide-caption">{!! nl2br(e($slide->caption)) !!}</p>
        </div>
      </div>
    </div>
    @empty
    <div class="sd-slide active">
      <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=1600&q=85" alt="Upacara" class="sd-slide-img">
      <div class="sd-slide-overlay"></div>
      <div class="sd-slide-content">
        <div class="sd-slide-accent-line"></div>
        <div class="sd-slide-texts">
          <p class="sd-slide-eyebrow">Kegiatan</p>
          <h1 class="sd-slide-title">Selamat Datang</h1>
          <p class="sd-slide-caption">SD Negeri 4 Keling</p>
        </div>
      </div>
    </div>
    @endforelse

  </div>
  <div class="sd-dots" id="sliderDots">
    @forelse($slides as $i => $slide)
    <button class="sd-dot {{ $i === 0 ? 'active' : '' }}" data-index="{{ $i }}"></button>
    @empty
    <button class="sd-dot active" data-index="0"></button>
    @endforelse
  </div>
</section>

{{-- ============================================================ SELAMAT DATANG --}}
<section class="sd-welcome">
  <div class="sd-welcome-header sd-reveal">
    <h2 class="sd-welcome-title">Selamat Datang</h2>
    <p class="sd-welcome-desc">
      SD Negeri 4 Keling adalah sekolah dasar yang berkomitmen memberikan<br>
      pendidikan berkualitas dan membentuk karakter anak sejak dini.
    </p>
    <div class="sd-yellow-line"></div>
  </div>

  @php
    $homeVisi = $visiMisi->visi ?? 'Membentuk generasi pemimpin yang berintegritas, cinta tanah air, dan peduli terhadap sesama.';
    $homeMisi = collect($visiMisi->misi ?? [
        'Menyelenggarakan pembelajaran yang aktif, kreatif, dan menyenangkan bagi seluruh siswa.',
        'Menanamkan nilai-nilai keimanan dan ketaqwaan dalam setiap kegiatan sekolah.',
        'Membentuk karakter siswa yang disiplin, jujur, dan bertanggung jawab.',
    ])->take(3);
  @endphp

  <div class="sd-visimisi-wrap sd-reveal">
    <div class="sd-visimisi-img-col">
      <img src={{ asset('images/potoanaksd.png') }}
           alt="Siswa SD" class="sd-visimisi-img">
    </div>
    <div class="sd-visimisi-spacer"></div>
    <div class="sd-visimisi-col">
      <h3 class="sd-visimisi-title">Visi Kita</h3>
      <p class="sd-visimisi-text">
        {{ $homeVisi }}
      </p>
    </div>
    <div class="sd-visimisi-col">
      <h3 class="sd-visimisi-title">Misi Kita</h3>
      <ul class="sd-visimisi-misi-list">
        @foreach($homeMisi as $m)
        <li>{{ \Illuminate\Support\Str::limit($m, 85) }}</li>
        @endforeach
      </ul>
      <a href="{{ route('profil.visi-misi') }}" class="sd-link-detail">Lihat Detail --&gt;</a>
    </div>
  </div>
</section>

{{-- ============================================================ BERITA & ACARA --}}
<section class="sd-berita">
  <div class="sd-berita-header sd-reveal">
    <div>
      <p class="sd-berita-eyebrow">Informasi Terbaru</p>
      <h2 class="sd-berita-title">Berita &amp; Acara</h2>
    </div>
    <a href="{{ route('berita-acara') }}" class="sd-link-detail-sm">
      Lihat Detail Berita &amp; Acara --&gt;
    </a>
  </div>

  <div class="sd-grid">
    @php
      // Struktur kotak TETAP 6 slot (posisi 1-2 & 7-8 = kartu bergambar besar,
      // posisi 3,4,5,6 = kartu teks satu-satu). Isinya berganti otomatis
      // mengikuti item RSS terbaru, tapi jumlah & posisi kotak tidak berubah.
      $slotFirst = $posts->first();
      $slotLast  = $posts->count() > 1 ? $posts->last() : null;
      $slotMid   = $posts->count() > 2 ? $posts->slice(1, -1) : collect();
    @endphp

    @if($slotFirst)
    {{-- Slot 1-2: kartu bergambar/video --}}
    <div class="sd-card-video sd-span2 sd-reveal-child"
         onclick="window.open('{{ $slotFirst->rss_source ? ($slotFirst->sumber_url ?: route('berita-acara')) : route('berita-acara.detail', $slotFirst->id) }}', '{{ $slotFirst->rss_source ? '_blank' : '_self' }}')">
      @if($slotFirst->gambar)
      <img src="{{ str_starts_with($slotFirst->gambar,'http') ? $slotFirst->gambar : asset($slotFirst->gambar) }}"
           alt="{{ $slotFirst->judul }}" class="sd-card-video-img">
      @else
      <div class="sd-card-video-fallback"><i class="bi {{ $slotFirst->type === 'acara' ? 'bi-calendar-event' : 'bi-newspaper' }}"></i></div>
      @endif
      <div class="sd-card-video-inner-shadow"></div>
      <div class="sd-card-video-top">
        <span class="sd-badge-label">{{ ucfirst($slotFirst->type) }}</span>
        @if($slotFirst->video)
        <span class="sd-badge-cam"><i class="bi bi-camera-video-fill"></i></span>
        @endif
      </div>
      <div class="sd-card-video-bottom">
        <p class="sd-card-date">{{ $slotFirst->tanggal->translatedFormat('d F Y') }}</p>
        <h4 class="sd-card-video-title">{{ $slotFirst->judul }}</h4>
      </div>
    </div>
    @endif

    {{-- Slot 3,4,5,6: SELALU kartu teks, walau sumbernya ada gambar --}}
    @foreach($slotMid->take(4) as $post)
    @php $postLink = $post->rss_source ? ($post->sumber_url ?: '#') : route('berita-acara.detail', $post->id); @endphp
    <div class="sd-card-berita sd-reveal-child"
         onclick="window.open('{{ $postLink }}','{{ $post->rss_source ? '_blank' : '_self' }}')">
      <span class="sd-badge-berita">{{ ucfirst($post->type) }}</span>
      <h5 class="sd-card-berita-title">{{ $post->judul }}</h5>
      <p class="sd-card-berita-tema">{{ \Illuminate\Support\Str::limit($post->deskripsi, 90) }}</p>
      <div class="sd-card-berita-sep"></div>
      <a href="{{ $postLink }}" target="{{ $post->rss_source ? '_blank' : '_self' }}" class="sd-selengkapnya">Selengkapnya</a>
    </div>
    @endforeach

    @if($slotLast)
    {{-- Slot 7-8: kartu bergambar/video --}}
    <div class="sd-card-video sd-span2 sd-reveal-child"
         onclick="window.open('{{ $slotLast->rss_source ? ($slotLast->sumber_url ?: route('berita-acara')) : route('berita-acara.detail', $slotLast->id) }}', '{{ $slotLast->rss_source ? '_blank' : '_self' }}')">
      @if($slotLast->gambar)
      <img src="{{ str_starts_with($slotLast->gambar,'http') ? $slotLast->gambar : asset($slotLast->gambar) }}"
           alt="{{ $slotLast->judul }}" class="sd-card-video-img">
      @else
      <div class="sd-card-video-fallback"><i class="bi {{ $slotLast->type === 'acara' ? 'bi-calendar-event' : 'bi-newspaper' }}"></i></div>
      @endif
      <div class="sd-card-video-inner-shadow"></div>
      <div class="sd-card-video-top">
        <span class="sd-badge-label">{{ ucfirst($slotLast->type) }}</span>
        @if($slotLast->video)
        <span class="sd-badge-cam"><i class="bi bi-camera-video-fill"></i></span>
        @endif
      </div>
      <div class="sd-card-video-bottom">
        <p class="sd-card-date">{{ $slotLast->tanggal->translatedFormat('d F Y') }}</p>
        <h4 class="sd-card-video-title">{{ $slotLast->judul }}</h4>
      </div>
    </div>
    @endif

    @if(!$slotFirst)
    <p style="color:var(--teks-abu)">Belum ada berita atau acara. Tambahkan sumber RSS di halaman admin, atau tambahkan berita manual.</p>
    @endif
  </div>
</section>

@endsection