{{-- resources/views/admin/slider-prestasi/_form.blade.php --}}
@csrf
<div class="card-body">
    <div class="row">
        <div class="col-md-8">
            <div class="mb-3">
                <label for="title" class="form-label">Judul <span class="text-danger">*</span></label>
                <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" value="{{ old('title', $slider->title ?? null) }}" required>
                @error('title') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
            <div class="mb-3">
                <label for="desc" class="form-label">Deskripsi Singkat</label>
                <textarea class="form-control @error('desc') is-invalid @enderror" id="desc" name="desc" rows="3">{{ old('desc', $slider->desc ?? null) }}</textarea>
            </div>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="action_title" class="form-label">Teks Tombol</label>
                    <input type="text" class="form-control @error('action_title') is-invalid @enderror" id="action_title" name="action_title" value="{{ old('action_title', $slider->action_title ?? null) }}">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="action" class="form-label">URL Tombol (Link)</label>
                    <input type="text" class="form-control @error('action') is-invalid @enderror" id="action" name="action" value="{{ old('action', $slider->action ?? null) }}" placeholder="https://...">
                </div>
            </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">Gambar Slide <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-prestasi/' . $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 gambar.</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-prestasi.index') }}" class="btn btn-secondary btn-round">Batal</a>
    <button type="submit" class="btn btn-primary btn-round">Simpan Slide</button>
</div>
@push('scripts')
<script>
  // Helper function (bisa di-copy-paste, atau idealnya ditaruh di layout jika sering dipakai)
  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