@extends('layouts.admin')
@section('title', 'Visi & Misi – Admin')

@section('admin-content')
<div class="sd-admin-topbar">
  <div>
    <p class="sd-admin-eyebrow">Profil Sekolah</p>
    <h1 class="sd-admin-title">Visi &amp; Misi</h1>
  </div>
</div>

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

    <div class="sd-form-group">
      <label>Visi (satu baris kalimat)</label>
      <textarea name="visi" class="sd-form-control" rows="2" required>{{ old('visi', $data->visi ?? '') }}</textarea>
    </div>

    <div class="sd-form-group">
      <label>Misi (bernomor 1, 2, 3, dst.)</label>
      <div id="misiWrap">
        @forelse(old('misi', $data->misi ?? ['']) as $i => $m)
        <div class="sd-array-input-row">
          <input type="text" name="misi[]" class="sd-form-control" value="{{ $m }}" placeholder="Misi ke-{{ $i+1 }}" required>
          <button type="button" class="sd-btn-icon" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>
        </div>
        @empty
        <div class="sd-array-input-row">
          <input type="text" name="misi[]" class="sd-form-control" placeholder="Misi ke-1" required>
          <button type="button" class="sd-btn-icon" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>
        </div>
        @endforelse
      </div>
      <button type="button" class="sd-btn-add-row" onclick="addRow('misiWrap','misi[]','Misi')"><i class="bi bi-plus-lg"></i> Tambah Misi</button>
    </div>

    <div class="sd-form-group">
      <label>Tujuan Umum</label>
      <textarea name="tujuan_umum" class="sd-form-control" rows="3" required>{{ old('tujuan_umum', $data->tujuan_umum ?? '') }}</textarea>
    </div>

    <div class="sd-form-group">
      <label>Tujuan Khusus (a, b, c, dst.)</label>
      <div id="tujuanWrap">
        @forelse(old('tujuan_khusus', $data->tujuan_khusus ?? ['']) as $i => $t)
        <div class="sd-array-input-row">
          <input type="text" name="tujuan_khusus[]" class="sd-form-control" value="{{ $t }}" placeholder="Tujuan khusus {{ chr(97+$i) }}" required>
          <button type="button" class="sd-btn-icon" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>
        </div>
        @empty
        <div class="sd-array-input-row">
          <input type="text" name="tujuan_khusus[]" class="sd-form-control" placeholder="Tujuan khusus a" required>
          <button type="button" class="sd-btn-icon" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>
        </div>
        @endforelse
      </div>
      <button type="button" class="sd-btn-add-row" onclick="addRow('tujuanWrap','tujuan_khusus[]','Tujuan khusus')"><i class="bi bi-plus-lg"></i> Tambah Tujuan Khusus</button>
    </div>

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

@push('scripts')
<script>
function addRow(wrapId, name, label){
  const wrap = document.getElementById(wrapId);
  const row = document.createElement('div');
  row.className = 'sd-array-input-row';
  row.innerHTML = '<input type="text" name="'+name+'" class="sd-form-control" placeholder="'+label+'"> <button type="button" class="sd-btn-icon" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>';
  wrap.appendChild(row);
}
</script>
@endpush