{{-- resources/views/public/profil/page.blade.php --}}
@extends('layouts.app')
@section('title', 'Profil Sekolah - ' . ($setting->web_name ?? 'SMP Al Idrus'))

@section('content')
  <div class="page-title dark-background">
    <div class="heading">
      <div class="container">
        <div class="row d-flex justify-content-center text-center">
          <div class="col-lg-8">
            <h1>Profil Sekolah</h1>
            <p class="mb-0">Mengenal lebih dekat sejarah, visi misi, serta identitas lengkap sekolah kami.</p>
          </div>
        </div>
      </div>
    </div>
    <nav class="breadcrumbs">
      <div class="container">
        <ol>
          <li><a href="{{ url('/') }}">Home</a></li>
          <li class="current">Profil Sekolah</li>
        </ol>
      </div>
    </nav>
  </div><section id="portfolio-details" class="portfolio-details section">
    <div class="container" data-aos="fade-up">

      <div class="portfolio-details-slider swiper init-swiper">
        <script type="application/json" class="swiper-config">
          {
            "loop": true,
            "speed": 600,
            "autoplay": { "delay": 5000 },
            "slidesPerView": "auto",
            "navigation": {
              "nextEl": ".swiper-button-next",
              "prevEl": ".swiper-button-prev"
            },
            "pagination": {
              "el": ".swiper-pagination",
              "type": "bullets",
              "clickable": true
            }
          }
        </script>
        <div class="swiper-wrapper align-items-center">
          @if(isset($sejarah) && $sejarah->img)
            <div class="swiper-slide">
              <img src="{{ asset('uploads/sejarah/' . $sejarah->img) }}" alt="Gambar Sejarah Sekolah" style="max-height: 500px; object-fit: cover;">
            </div>
          @endif
          
          @if(isset($peta) && $peta->image)
            <div class="swiper-slide">
              <img src="{{ asset('uploads/peta/' . $peta->image) }}" alt="Gambar Peta Sekolah" style="max-height: 500px; object-fit: cover;">
            </div>
          @endif
          
          @if((!isset($sejarah) || !$sejarah->img) && (!isset($peta) || !$peta->image))
             <div class="swiper-slide">
              <img src="{{ asset('bocor/assets/img/about.jpg') }}" alt="Default Image">
            </div>
          @endif
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-pagination"></div>
      </div>

      <div class="row justify-content-between gy-4 mt-4">

        <div class="col-lg-8" data-aos="fade-up">
          <div class="portfolio-description">
            
            <h2>Sejarah Sekolah</h2>
            <div class="mb-5">
              @if(isset($sejarah) && $sejarah->description)
                {!! $sejarah->description !!}
              @else
                <p>Data sejarah sekolah belum ditambahkan.</p>
              @endif
            </div>

            <hr>

            <h2 class="mt-4">Visi & Misi</h2>
            <div class="mb-4">
              <h4 class="fw-bold"><i class="bi bi-diagram-3 text-primary me-2"></i>Visi</h4>
              <div>{!! $vimi->visi ?? 'Visi belum diatur.' !!}</div>
            </div>
            <div class="mb-5">
              <h4 class="fw-bold"><i class="bi bi-fullscreen-exit text-primary me-2"></i>Misi</h4>
              <div>{!! $vimi->misi ?? 'Misi belum diatur.' !!}</div>
            </div>

            <hr>

            @if(isset($kepsek))
            <h2 class="mt-4">Sambutan Kepala Sekolah</h2>
            <div class="testimonial-item mt-4 bg-light p-4 rounded shadow-sm">
              <p>
                <i class="bi bi-quote quote-icon-left"></i>
                <span>{!! strip_tags($kepsek->desc) !!}</span>
                <i class="bi bi-quote quote-icon-right"></i>
              </p>
              <div class="d-flex align-items-center mt-4">
                @if($kepsek->img)
                  <img src="{{ asset('uploads/kepsek/' . $kepsek->img) }}" class="testimonial-img flex-shrink-0" alt="{{ $kepsek->name }}">
                @endif
                <div class="ms-3">
                  <h3 class="mb-0">{{ $kepsek->name }}</h3>
                  <h4 class="text-muted mb-0">Kepala Sekolah</h4>
                  @if($kepsek->nip) <small>NIP: {{ $kepsek->nip }}</small> @endif
                </div>
              </div>
            </div>
            @endif

          </div>
        </div>

        <div class="col-lg-3" data-aos="fade-up" data-aos-delay="100">
          
          <div class="portfolio-info mb-4">
            <h3>Identitas Sekolah</h3>
            <ul>
              <li><strong>Nama Sekolah</strong> <br>{{ $identitas->nama_sekolah ?? '-' }}</li>
              <li><strong>NSS</strong> <br>{{ $identitas->nss ?? '-' }}</li>
              <li><strong>Akreditasi</strong> <br>{{ $identitas->akreditasi ?? '-' }}</li>
              <li><strong>Status</strong> <br>{{ $identitas->status ?? '-' }}</li>
              <li><strong>Luas Area</strong> <br>{{ $identitas->luas_area ?? '-' }}</li>
              <li><strong>SK Pendirian</strong> <br>{{ $identitas->nokep ?? '-' }}</li>
              <li><strong>Alamat</strong> <br>{{ $identitas->alamat ?? '-' }}</li>
            </ul>
          </div>

          @if(isset($peta) && $peta->title)
          <div class="portfolio-info">
            <h3>{{ $peta->title }}</h3>
            <div class="small">
              {!! $peta->desc !!}
            </div>
            @if($setting->web_maps)
              <div class="mt-3 ratio ratio-1x1">
                {!! $setting->web_maps !!}
              </div>
            @endif
          </div>
          @endif

        </div>

      </div>

    </div>
  </section>
@endsection