{{-- resources/views/public/ppdb/ppdb.blade.php --}}
  <section id="ppdb" class="ppdb-section">
   <div class="container">
    <div class="row align-items-center g-5">
     <div class="col-lg-6 ppdb-content">
      <h2 class="ppdb-title" style="color: var(--accent-gold);">{{ $setting->judul ?? 'Pendaftaran Peserta Didik Baru' }}</h2>
      <p style="font-size: 1.1rem; margin-bottom: 2rem;">{{ $setting->deskripsi ?? 'Bergabunglah dengan keluarga besar Madrasah Al Idrus Lengkong dan rasakan pengalaman belajar yang berkesan dalam lingkungan Islami yang mendukung.' }}</p>
      
      <div class="ppdb-schedule">
       @if(isset($setting) && is_array($setting->jadwal))
           @foreach($setting->jadwal as $index => $jadwal)
               <div class="schedule-item">
                <div class="schedule-icon">
                 {{ $index + 1 }}
                </div>
                <div class="schedule-text">
                 <h6>{{ $jadwal['title'] ?? '' }}</h6>
                 <p>{{ $jadwal['date'] ?? '' }}</p>
                </div>
               </div>
           @endforeach
       @else
           {{-- Fallback jika database belum disetting --}}
           <div class="schedule-item">
            <div class="schedule-icon">1</div>
            <div class="schedule-text">
             <h6>Pendaftaran Online</h6>
             <p>1 - 28 Februari 2024</p>
            </div>
           </div>
           <div class="schedule-item">
            <div class="schedule-icon">2</div>
            <div class="schedule-text">
             <h6>Tes Seleksi</h6>
             <p>1 - 15 Maret 2024</p>
            </div>
           </div>
           <div class="schedule-item">
            <div class="schedule-icon">3</div>
            <div class="schedule-text">
             <h6>Pengumuman Hasil</h6>
             <p>20 Maret 2024</p>
            </div>
           </div>
           <div class="schedule-item">
            <div class="schedule-icon">4</div>
            <div class="schedule-text">
             <h6>Registrasi &amp; Orientasi</h6>
             <p>25 - 31 Maret 2024</p>
            </div>
           </div>
       @endif
      </div>
      
      <div class="ppdb-buttons">
          <a href="{{ route('public.ppdb.info') }}" class="btn-ppdb" style="text-decoration: none; display: inline-block; text-align: center;">Daftar PPDB Online</a>
          
          @if(isset($setting) && $setting->brosur_file)
              <a href="{{ asset('storage/ppdb/' . $setting->brosur_file) }}" target="_blank" class="btn-ppdb" style="background: transparent; border: 2px solid white; color: white; text-decoration: none; display: inline-block; text-align: center;">Download Brosur</a>
          @else
              <button class="btn-ppdb" style="background: transparent; border: 2px solid white; color: white;" onclick="alert('Mohon maaf, brosur PPDB belum tersedia saat ini.')">Download Brosur</button>
          @endif
      </div>
     </div>
     
     <div class="col-lg-6 text-center position-relative">
        @if(isset($setting) && $setting->gambar_ilustrasi)
            <img src="{{ asset('storage/ppdb/' . $setting->gambar_ilustrasi) }}" 
                 alt="Ilustrasi PPDB" 
                 class="img-fluid rounded-4 shadow-lg" 
                 style="max-height: 500px; width: 100%; object-fit: cover; border: 1px solid rgba(255,255,255,0.2);">
        @else
            <svg width="100%" height="500" viewbox="0 0 400 500" xmlns="http://www.w3.org/2000/svg"><defs>
                <lineargradient id="ppdbGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:rgba(255,255,255,0.2);stop-opacity:1" />
                <stop offset="100%" style="stop-color:rgba(212,175,55,0.2);stop-opacity:1" />
                </lineargradient>
            </defs> <rect width="400" height="500" fill="url(#ppdbGrad)" rx="20" /> <!-- Illustration --> <circle cx="200" cy="100" r="50" fill="rgba(255,255,255,0.3)" /> <rect x="100" y="180" width="200" height="150" fill="rgba(212,175,55,0.2)" rx="10" /> <!-- Documents --> <rect x="120" y="200" width="60" height="80" fill="rgba(255,255,255,0.4)" /> <line x1="125" y1="210" x2="175" y2="210" stroke="rgba(255,255,255,0.6)" stroke-width="2" /> <line x1="125" y1="225" x2="175" y2="225" stroke="rgba(255,255,255,0.6)" stroke-width="2" /> <line x1="125" y1="240" x2="175" y2="240" stroke="rgba(255,255,255,0.6)" stroke-width="2" /> <rect x="220" y="200" width="60" height="80" fill="rgba(255,255,255,0.3)" /> <line x1="225" y1="210" x2="275" y2="210" stroke="rgba(255,255,255,0.5)" stroke-width="2" /> <line x1="225" y1="225" x2="275" y2="225" stroke="rgba(255,255,255,0.5)" stroke-width="2" /> <!-- Check marks --> <circle cx="200" cy="380" r="30" fill="rgba(212,175,55,0.4)" /> <path d="M 195 380 L 200 385 L 210 375" stroke="rgba(255,255,255,0.8)" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" /> <!-- Decorative stars --> <circle cx="80" cy="100" r="4" fill="rgba(212,175,55,0.5)" /> <circle cx="320" cy="120" r="4" fill="rgba(212,175,55,0.5)" /> <circle cx="70" cy="400" r="4" fill="rgba(212,175,55,0.5)" /> <circle cx="340" cy="380" r="4" fill="rgba(212,175,55,0.5)" />
            </svg>
        @endif
     </div>
    </div>
   </div>
  </section>