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

@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['program-sekolah']) ? $heroImages['program-sekolah']->url : asset('images/buatprogram.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>Program Sekolah</span>
    </p>
    <h1 class="sd-page-title">Program Sekolah</h1>
    <p class="sd-page-subtitle">Program unggulan yang dijalankan untuk mendukung tumbuh kembang siswa</p>
    <div class="sd-page-accent"></div>
  </div>
</div>

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

  <div class="sd-program-list sd-reveal">
    @forelse($program as $i => $p)
    <a href="{{ route('informasi.program-sekolah.detail', $p->id) }}" class="sd-program-item warna-{{ $p->warna }}">
      <div class="sd-program-thumb">
        @if($p->gambar)
        <img src="{{ str_starts_with($p->gambar,'http') ? $p->gambar : asset($p->gambar) }}" alt="{{ $p->nama }}">
        @else
        <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center">
          <i class="bi bi-image" style="font-size:1.6rem;color:var(--biru);opacity:.3"></i>
        </div>
        @endif
      </div>
      <div class="sd-program-num">{{ sprintf('%02d', $i+1) }}</div>
      <div class="sd-program-body">
        <div class="sd-program-top">
          <p class="sd-program-nama">{{ $p->nama }}</p>
          <span class="sd-program-kategori">{{ $p->kategori }}</span>
        </div>
        <p class="sd-program-desc">{{ $p->deskripsi }}</p>
        <span class="sd-program-more">Selengkapnya <i class="bi bi-arrow-right"></i></span>
      </div>
    </a>
    @empty
    <p style="color:var(--teks-abu)">Belum ada program sekolah.</p>
    @endforelse
  </div>

</div>

@endsection