@extends('layouts.app')
@section('title', 'Fasilitas 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['fasilitas']) ? $heroImages['fasilitas']->url : asset('images/buatfasilitas.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>Fasilitas Sekolah</span>
    </p>
    <h1 class="sd-page-title">Fasilitas Sekolah</h1>
    <p class="sd-page-subtitle">Sarana dan prasarana penunjang kegiatan belajar mengajar</p>
    <div class="sd-page-accent"></div>
  </div>
</div>

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

  <div class="sd-fasilitas-grid sd-reveal">
    @forelse($fasilitas as $f)
    <div class="sd-fasilitas-card">
      <div class="sd-fasilitas-img-wrap">
        @if($f->gambar)
        <img src="{{ str_starts_with($f->gambar,'http') ? $f->gambar : asset($f->gambar) }}" alt="{{ $f->nama }}">
        @else
        <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center">
          <i class="bi bi-image" style="font-size:2.2rem;color:var(--biru);opacity:.3"></i>
        </div>
        @endif
      </div>
      <div class="sd-fasilitas-body">
        <p class="sd-fasilitas-nama">{{ $f->nama }}</p>
        <p class="sd-fasilitas-desc">{{ $f->deskripsi }}</p>
      </div>
    </div>
    @empty
    <p style="color:var(--teks-abu)">Belum ada data fasilitas.</p>
    @endforelse
  </div>

</div>

@endsection