{{---- resources/views/admin/ppdb-banner/index.blade.php ----}}
@extends('layouts.admin')
@section('title', 'Pengaturan Banner PPDB')

@section('content')
<div class="page-inner">
  <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
      <div>
        <h3 class="fw-bold mb-3">Pengaturan Banner PPDB</h3>
        <h6 class="op-7 mb-2">Kelola gambar dan status banner di halaman PPDB.</h6>
      </div>
  </div>

  <div class="card card-round shadow-sm border-0">
    <div class="card-header">
      {{-- Navigasi Tab --}}
      <ul class="nav nav-tabs card-header-tabs" id="bannerTab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="utama-tab" data-bs-toggle="tab" href="#utama" role="tab" aria-controls="utama" aria-selected="true">
            <i class="fas fa-image me-1"></i> Banner Utama
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="kedua-tab" data-bs-toggle="tab" href="#kedua" role="tab" aria-controls="kedua" aria-selected="false">
            <i class="fas fa-images me-1"></i> Banner Kedua
          </a>
        </li>
      </ul>
    </div>

    <div class="card-body">
      {{-- Konten Tab --}}
      <div class="tab-content" id="bannerTabContent">

        {{-- Tab 1: Banner Utama --}}
        <div class="tab-pane fade show active" id="utama" role="tabpanel" aria-labelledby="utama-tab">
          @include('admin.ppdb-banner._form_utama')
        </div>

        {{-- Tab 2: Banner Kedua --}}
        <div class="tab-pane fade" id="kedua" role="tabpanel" aria-labelledby="kedua-tab">
          @include('admin.ppdb-banner._form_kedua')
        </div>

      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
{{-- Skrip Live Preview untuk KEDUA form --}}
<script>
  function setupImagePreview(inputId, previewId, placeholderId) {
    const input = document.getElementById(inputId);
    const preview = document.getElementById(previewId);
    const placeholder = document.getElementById(placeholderId);

    input.addEventListener('change', function () {
      if (this.files && this.files[0]) {
        const reader = new FileReader();
        reader.onload = function (e) {
          preview.src = e.target.result;
          preview.style.display = 'block';
          if(placeholder) placeholder.style.display = 'none';
        }
        reader.readAsDataURL(this.files[0]);
      }
    });
  }

  $(document).ready(function() {
    // Init preview untuk tab 1
    setupImagePreview('img1_input', 'img1_preview', 'img1_placeholder');

    // Init preview untuk tab 2
    setupImagePreview('img_input_kedua', 'img_preview_kedua', 'img_placeholder_kedua');
  });
</script>
@endpush