{{-- resources/views/admin/fotos/_form.blade.php --}}
@csrf
<div class="card-body">
  <div class="row">
    <div class="col-md-8">
      {{-- Kiri: Judul & Album --}}
      <div class="mb-3">
        <label for="album_id" class="form-label">Album <span class="text-danger">*</span></label>
        <select class="form-select @error('album_id') is-invalid @enderror" id="album_id" name="album_id" required>
          <option value="" disabled selected>-- Pilih Album --</option>
          @foreach($albums as $album)
            <option value="{{ $album->id }}" 
              {{ old('album_id', $foto->album_id ?? null) == $album->id ? 'selected' : '' }}>
              {{ $album->album_name }}
            </option>
          @endforeach
        </select>
        @error('album_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
      </div>
      <div class="mb-3">
        <label for="title" class="form-label">Judul/Keterangan Foto</label>
        <input type="text" class="form-control @error('title') is-invalid @enderror" 
               id="title" name="title" 
               value="{{ old('title', $foto->title ?? null) }}">
        @error('title') <div class="invalid-feedback">{{ $message }}</div> @enderror
      </div>
    </div>
    <div class="col-md-4">
      {{-- Kanan: Upload Gambar --}}
      <div class="mb-3">
        <label for="img_input" class="form-label fw-bold">File Foto <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="{{ $foto?->img ? asset('uploads/galeri/' . $foto->img) : '' }}" 
               alt="Pratinjau Foto" 
               style="height: 100%; width: 100%; object-fit: cover; {{ !$foto?->img ? 'display: none;' : '' }}">
          <small id="img_placeholder" style="{{ $foto?->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" {{ $foto ? '' : 'required' }}>
        @if($foto)
          <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>
<div class="card-footer text-end">
  <a href="{{ route('admin.fotos.index') }}" class="btn btn-secondary btn-round">Batal</a>
  <button type="submit" class="btn btn-primary btn-round">Simpan Foto</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