{{-- resources/views/admin/slider-alumni/_form.blade.php --}}
@csrf
<div class="card-body">
    <div class="row">
        <div class="col-md-8">
            <div class="mb-3">
                <label for="name" class="form-label">Nama Alumni <span class="text-danger">*</span></label>
                <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name', $slider->name ?? null) }}" required>
                @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
            <div class="mb-3">
                <label for="desc" class="form-label">Testimoni/Deskripsi <span class="text-danger">*</span></label>
                <textarea class="form-control @error('desc') is-invalid @enderror" id="desc" name="desc" rows="5" required>{{ old('desc', $slider->desc ?? null) }}</textarea>
                @error('desc') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
            <div class="mb-3">
                <label for="ordering" class="form-label">Urutan</label>
                <input type="number" class="form-control @error('ordering') is-invalid @enderror" id="ordering" name="ordering" value="{{ old('ordering', $slider->ordering ?? 10000) }}">
            </div>
        </div>
        <div class="col-md-4">
            <label for="img_input" class="form-label fw-bold">Foto Alumni <span class="text-danger">*</span></label>
            <div class="my-2" style="height: 150px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 5px; border: 1px dashed #ddd; overflow: hidden;">
                <img id="img_preview" src="{{ $slider?->img ? asset('uploads/slider-alumni/' . $slider->img) : '' }}" alt="Pratinjau" style="height: 100%; width: 100%; object-fit: cover; {{ !$slider?->img ? 'display: none;' : '' }}">
                <small id="img_placeholder" style="{{ $slider?->img ? 'display: none;' : '' }}">Tidak ada gambar</small>
            </div>
            <input type="file" class="form-control @error('img') is-invalid @enderror" id="img_input" name="img" accept="image/png, image/jpeg, image/webp" {{ $slider ? '' : 'required' }}>
            @if($slider) <small class="form-text text-muted">Kosongkan jika tidak ingin mengubah foto.</small> @endif
            @error('img') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
        </div>
    </div>
</div>
<div class="card-footer text-end">
    <a href="{{ route('admin.slider-alumni.index') }}" class="btn btn-secondary btn-round">Batal</a>
    <button type="submit" class="btn btn-primary btn-round">Simpan Testimoni</button>
</div>
@push('scripts')
<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';
          placeholder.style.display = 'none';
        }
        reader.readAsDataURL(this.files[0]);
      }
    });
  }
  $(document).ready(function() {
    setupImagePreview('img_input', 'img_preview', 'img_placeholder');
  });
</script>
@endpush