{{-- resources/views/admin/alumni/_form.blade.php --}}
@csrf
<div class="card-body">
    <div class="row">
        {{-- Kolom Kiri --}}
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-8 mb-3">
                    <label for="name" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                           id="name" name="name" 
                           value="{{ old('name', $alumni->name ?? null) }}" required>
                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-4 mb-3">
                    <label for="jenkel" class="form-label">Jenis Kelamin <span class="text-danger">*</span></label>
                    <select class="form-select @error('jenkel') is-invalid @enderror" id="jenkel" name="jenkel" required>
                        <option value="L" {{ old('jenkel', $alumni->jenkel ?? null) == 'L' ? 'selected' : '' }}>Laki-laki</option>
                        <option value="P" {{ old('jenkel', $alumni->jenkel ?? null) == 'P' ? 'selected' : '' }}>Perempuan</option>
                    </select>
                    @error('jenkel') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="nis" class="form-label">NIS <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('nis') is-invalid @enderror" 
                           id="nis" name="nis" 
                           value="{{ old('nis', $alumni->nis ?? null) }}" required>
                    @error('nis') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-6 mb-3">
                     <label for="tgl_lahir" class="form-label">Tgl. Lahir (Varchar) <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('tgl_lahir') is-invalid @enderror" 
                           id="tgl_lahir" name="tgl_lahir" 
                           value="{{ old('tgl_lahir', $alumni->tgl_lahir ?? null) }}" required placeholder="Contoh: 2015-05-25">
                    @error('tgl_lahir') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="thn_masuk" class="form-label">Tahun Masuk <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('thn_masuk') is-invalid @enderror" 
                           id="thn_masuk" name="thn_masuk" 
                           value="{{ old('thn_masuk', $alumni->thn_masuk ?? null) }}" required placeholder="Contoh: 2025">
                    @error('thn_masuk') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label for="thn_lulus" class="form-label">Tahun Lulus <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('thn_lulus') is-invalid @enderror" 
                           id="thn_lulus" name="thn_lulus" 
                           value="{{ old('thn_lulus', $alumni->thn_lulus ?? null) }}" required placeholder="Contoh: 2027">
                    @error('thn_lulus') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                    <input type="email" class="form-control @error('email') is-invalid @enderror" 
                           id="email" name="email" 
                           value="{{ old('email', $alumni->email ?? null) }}" required>
                    @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label for="telp" class="form-label">Telepon <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('telp') is-invalid @enderror" 
                           id="telp" name="telp" 
                           value="{{ old('telp', $alumni->telp ?? null) }}" required>
                    @error('telp') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="mb-3">
                <label for="alamat" class="form-label">Alamat <span class="text-danger">*</span></label>
                <textarea class="form-control @error('alamat') is-invalid @enderror" 
                          id="alamat" name="alamat" rows="3" required>{{ old('alamat', $alumni->alamat ?? null) }}</textarea>
                @error('alamat') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
        </div>

        {{-- Kolom Kanan --}}
        <div class="col-md-4">
            <div class="mb-3">
                <label class="form-label fw-bold">Status</label>
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" name="isActive" id="isActive"
                         {{ old('isActive', $alumni->isActive ?? false) ? 'checked' : '' }}>
                  <label class="form-check-label" for="isActive">Aktifkan (Data Valid)</label>
                </div>
            </div>

            <div class="mb-3">
                <label for="img_input" class="form-label fw-bold">Foto Alumni</label>
                <div class="my-2" style="height: 200px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 5px; border: 1px dashed #ddd; overflow: hidden;">
                    <img id="img_preview" src="{{ $alumni?->img ? asset('uploads/alumni/' . $alumni->img) : '' }}" alt="Pratinjau" style="height: 100%; width: 100%; object-fit: cover; {{ !$alumni?->img ? 'display: none;' : '' }}">
                    <small id="img_placeholder" style="{{ $alumni?->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">
                <small class="form-text text-muted">Kosongkan jika tidak ingin mengubah foto.</small>
                @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.alumni.index') }}" class="btn btn-secondary btn-round">Batal</a>
    <button type="submit" class="btn btn-primary btn-round">Simpan Data Alumni</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