@extends('layouts.admin')
@section('title', 'Syarat & Info Pendaftaran – Admin')

@section('admin-content')
<div class="sd-admin-topbar">
  <div>
    <p class="sd-admin-eyebrow">Pendaftaran (SPMB)</p>
    <h1 class="sd-admin-title">Syarat &amp; Info Lainnya</h1>
  </div>
</div>

<div class="sd-admin-card">
  <form action="{{ route('admin.ppdb-info.update') }}" method="POST">
    @csrf
    @method('PUT')

    <h2 class="sd-admin-card-title">Umum</h2>
    <div class="sd-form-row">
      <div class="sd-form-group">
        <label>Tahun Ajaran</label>
        <input type="text" name="tahun_ajaran" class="sd-form-control" value="{{ old('tahun_ajaran', $info->tahun_ajaran ?? '') }}" placeholder="2026/2027">
      </div>
    </div>
    <div class="sd-form-group">
      <label>Teks Pengumuman (kotak kuning di atas halaman)</label>
      <textarea name="pengumuman" class="sd-form-control" rows="3">{{ old('pengumuman', $info->pengumuman ?? '') }}</textarea>
    </div>

    <hr style="border:none;border-top:1px solid var(--abu);margin:26px 0">

    <h2 class="sd-admin-card-title">Dokumen yang Diperlukan</h2>
    <div id="dokumenWrap">
      @foreach(old('dokumen_judul', collect($info->dokumen_list ?? [])->pluck('judul')->all() ?: ['']) as $i => $judul)
      @php $ket = old('dokumen_ket.'.$i, $info->dokumen_list[$i]['keterangan'] ?? ''); @endphp
      <div class="sd-array-input-row">
        <input type="text" name="dokumen_judul[]" class="sd-form-control" style="max-width:220px" value="{{ $judul }}" placeholder="Nama dokumen">
        <input type="text" name="dokumen_ket[]" class="sd-form-control" value="{{ $ket }}" placeholder="Keterangan">
        <button type="button" class="sd-btn-icon" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>
      </div>
      @endforeach
    </div>
    <button type="button" class="sd-btn-add-row" onclick="addDouble('dokumenWrap','dokumen_judul[]','dokumen_ket[]','Nama dokumen','Keterangan')"><i class="bi bi-plus-lg"></i> Tambah Dokumen</button>

    <hr style="border:none;border-top:1px solid var(--abu);margin:26px 0">

    <h2 class="sd-admin-card-title">Ketentuan Penerimaan</h2>
    <div class="sd-form-group">
      <label>Batas Usia</label>
      <textarea name="batas_usia" class="sd-form-control" rows="2">{{ old('batas_usia', $info->batas_usia ?? '') }}</textarea>
    </div>
    <div class="sd-form-group">
      <label>Daya Tampung</label>
      <textarea name="daya_tampung" class="sd-form-control" rows="2">{{ old('daya_tampung', $info->daya_tampung ?? '') }}</textarea>
    </div>
    <div class="sd-form-group">
      <label>Prioritas Penerimaan</label>
      <textarea name="prioritas_penerimaan" class="sd-form-control" rows="3">{{ old('prioritas_penerimaan', $info->prioritas_penerimaan ?? '') }}</textarea>
    </div>
    <div class="sd-form-group">
      <label>Catatan Penting</label>
      <textarea name="catatan_penting" class="sd-form-control" rows="2">{{ old('catatan_penting', $info->catatan_penting ?? '') }}</textarea>
    </div>

    <hr style="border:none;border-top:1px solid var(--abu);margin:26px 0">

    <h2 class="sd-admin-card-title">Alur Pendaftaran</h2>
    <div id="alurWrap">
      @foreach(old('alur_judul', collect($info->alur_list ?? [])->pluck('judul')->all() ?: ['']) as $i => $judul)
      @php $ket = old('alur_ket.'.$i, $info->alur_list[$i]['keterangan'] ?? ''); @endphp
      <div class="sd-array-input-row">
        <input type="text" name="alur_judul[]" class="sd-form-control" style="max-width:220px" value="{{ $judul }}" placeholder="Judul langkah">
        <input type="text" name="alur_ket[]" class="sd-form-control" value="{{ $ket }}" placeholder="Penjelasan">
        <button type="button" class="sd-btn-icon" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>
      </div>
      @endforeach
    </div>
    <button type="button" class="sd-btn-add-row" onclick="addDouble('alurWrap','alur_judul[]','alur_ket[]','Judul langkah','Penjelasan')"><i class="bi bi-plus-lg"></i> Tambah Langkah</button>

    <hr style="border:none;border-top:1px solid var(--abu);margin:26px 0">

    <h2 class="sd-admin-card-title">FAQ</h2>
    <div id="faqWrap">
      @foreach(old('faq_tanya', collect($info->faq_list ?? [])->pluck('tanya')->all() ?: ['']) as $i => $tanya)
      @php $jawab = old('faq_jawab.'.$i, $info->faq_list[$i]['jawab'] ?? ''); @endphp
      <div class="sd-array-input-row" style="align-items:flex-start">
        <input type="text" name="faq_tanya[]" class="sd-form-control" style="max-width:260px" value="{{ $tanya }}" placeholder="Pertanyaan">
        <textarea name="faq_jawab[]" class="sd-form-control" rows="2" placeholder="Jawaban">{{ $jawab }}</textarea>
        <button type="button" class="sd-btn-icon" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>
      </div>
      @endforeach
    </div>
    <button type="button" class="sd-btn-add-row" onclick="addFaq()"><i class="bi bi-plus-lg"></i> Tambah FAQ</button>

    <hr style="border:none;border-top:1px solid var(--abu);margin:26px 0">

    <h2 class="sd-admin-card-title">Kontak Panitia PPDB</h2>
    <div class="sd-form-row">
      <div class="sd-form-group">
        <label>Telepon Sekolah</label>
        <input type="text" name="telepon_sekolah" class="sd-form-control" value="{{ old('telepon_sekolah', $info->telepon_sekolah ?? '') }}">
      </div>
      <div class="sd-form-group">
        <label>WhatsApp Panitia</label>
        <input type="text" name="whatsapp_panitia" class="sd-form-control" value="{{ old('whatsapp_panitia', $info->whatsapp_panitia ?? '') }}">
      </div>
      <div class="sd-form-group">
        <label>Instagram Panitia</label>
        <input type="text" name="instagram_panitia" class="sd-form-control" value="{{ old('instagram_panitia', $info->instagram_panitia ?? '') }}">
      </div>
    </div>

    <div class="sd-form-actions">
      <button type="submit" class="sd-admin-btn"><i class="bi bi-check2"></i> Simpan Semua Perubahan</button>
    </div>
  </form>
</div>
@endsection

@push('scripts')
<script>
function addDouble(wrapId, name1, name2, ph1, ph2){
  var wrap = document.getElementById(wrapId);
  var row = document.createElement('div');
  row.className = 'sd-array-input-row';
  row.innerHTML = '<input type="text" name="'+name1+'" class="sd-form-control" style="max-width:220px" placeholder="'+ph1+'">'+
                   '<input type="text" name="'+name2+'" class="sd-form-control" placeholder="'+ph2+'">'+
                   ' <button type="button" class="sd-btn-icon" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>';
  wrap.appendChild(row);
}
function addFaq(){
  var wrap = document.getElementById('faqWrap');
  var row = document.createElement('div');
  row.className = 'sd-array-input-row';
  row.style.alignItems = 'flex-start';
  row.innerHTML = '<input type="text" name="faq_tanya[]" class="sd-form-control" style="max-width:260px" placeholder="Pertanyaan">'+
                   '<textarea name="faq_jawab[]" class="sd-form-control" rows="2" placeholder="Jawaban"></textarea>'+
                   ' <button type="button" class="sd-btn-icon" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>';
  wrap.appendChild(row);
}
</script>
@endpush