# 🧪 CARA TEST FITUR UPLOAD BUKTI TRANSFER

## ✅ PERBAIKAN SUDAH SELESAI!

Fitur upload bukti transfer sudah diperbaiki. Masalah duplicate JavaScript code sudah dihapus dari kedua file:
- ✅ `resources/views/pendaftar/dashboard_flow.blade.php` 
- ✅ `resources/views/pendaftar/hasil_seleksi.blade.php`

---

## 📋 LANGKAH TEST

### 1️⃣ Hard Refresh Browser
Tekan **Ctrl + F5** (atau **Ctrl + Shift + R**) untuk clear cache browser.

### 2️⃣ Buka Halaman Pembayaran
- Login sebagai pendaftar
- Masuk ke halaman Dashboard atau Hasil Seleksi
- Scroll ke bagian "Upload Bukti Transfer"

### 3️⃣ Buka Console (PENTING!)
- Tekan **F12** pada keyboard
- Pilih tab **Console**
- Pastikan tidak ada error merah

### 4️⃣ Cek Log di Console
Setelah halaman dimuat, Anda harus melihat log seperti ini:

```
🚀 PPDB Upload Script Loaded
🌐 Window loaded, initializing upload zones...
🔍 Checking Zone 1: Found ✅
🔍 Checking Input 1: Found ✅
⚙️ Setting up Zone 1...
✅ Zone 1 setup complete!
```

Jika Anda di halaman **hasil_seleksi** dan sudah ada pembayaran uang pangkal, akan ada Zone 2 juga:
```
🔍 Checking Zone 2: Found ✅
🔍 Checking Input 2: Found ✅
⚙️ Setting up Zone 2...
✅ Zone 2 setup complete!
```

### 5️⃣ Test Klik Upload
**Klik** pada area upload yang bertuliskan:
```
Klik atau drag & drop file ke sini
Upload bukti transfer pembayaran pendaftaran
📄 Format: JPG, PNG, atau PDF · Maksimal 20MB
```

**Yang Harus Terjadi:**
- ✅ Console log menunjukkan: `🖱️ Zone 1 CLICKED!`
- ✅ Console log menunjukkan: `📂 Opening file picker...`
- ✅ Dialog pemilihan file muncul (File Explorer)
- ✅ Pilih file JPG/PNG/PDF
- ✅ Console log menunjukkan: `✅ File selected: namafile.jpg`
- ✅ Preview file muncul dengan nama dan ukuran file

### 6️⃣ Test Drag & Drop
**Drag** file dari File Explorer ke area upload.

**Yang Harus Terjadi:**
- ✅ Saat mouse masuk area upload: border berubah warna hijau
- ✅ Console log menunjukkan: `📥 Drag enter Zone 1`
- ✅ Saat drop file: console log menunjukkan: `📁 Files dropped on Zone 1: 1`
- ✅ Console log menunjukkan: `📄 File: namafile.jpg ... bytes`
- ✅ Console log menunjukkan: `🖼️ Showing preview: namafile.jpg`
- ✅ Preview file muncul di bawah area upload

### 7️⃣ Test Submit
Setelah file terpilih, klik tombol **"Upload Bukti Transfer"**.

**Yang Harus Terjadi:**
- ✅ Form ter-submit ke server
- ✅ File terupload ke folder `storage/app/public/bukti_transfer/`
- ✅ Halaman reload dan menampilkan status "Bukti transfer sudah diunggah"

---

## ❌ TROUBLESHOOTING

### Problem: Console menunjukkan "NOT FOUND ❌"
**Penyebab:** Upload zone tidak dirender karena:
- Pembayaran belum dibuat
- Upload zone ada di dalam kondisi `@if` yang false

**Solusi:**
1. Pastikan pembayaran sudah dibuat (ada data di tabel `pembayaran`)
2. Pastikan `$pembayaran->bukti_transfer` masih NULL (belum upload)
3. Pastikan kondisi `@else` pada blade dirender

### Problem: Klik tidak membuka file picker
**Penyebab:** 
- Cache browser belum di-clear
- JavaScript error lain yang menghentikan eksekusi

**Solusi:**
1. Hard refresh dengan Ctrl + F5
2. Cek console untuk error merah
3. Clear browser cache completely
4. Restart browser

### Problem: Drag & drop tidak bekerja
**Penyebab:**
- Event listener tidak terpasang
- Ada elemen lain menutupi upload zone

**Solusi:**
1. Pastikan console log menunjukkan "setup complete"
2. Inspect element dan pastikan tidak ada overlay
3. Cek CSS untuk `pointer-events: none`

### Problem: File terpilih tapi tidak ter-submit
**Penyebab:**
- Input file tidak ter-enable saat submit
- Form action URL salah

**Solusi:**
1. Cek console saat klik submit
2. Cek Network tab untuk request
3. Pastikan route `pembayaran.upload` ada di `routes/web.php`

---

## 📱 TEST DI BERBAGAI KONDISI

### Test 1: Upload Uang Formulir (Zone 1)
- Halaman: Dashboard → Tab Pembayaran
- ID: `drop-zone-1`, `bukti-file`
- Route: `pembayaran.upload` dengan `id_pembayaran` formulir

### Test 2: Upload Uang Pangkal (Zone 2)
- Halaman: Hasil Seleksi → Section Uang Pangkal
- ID: `drop-zone-2`, `bukti-file-2`
- Route: `pembayaran.upload` dengan `id_pembayaran` pangkal

### Test 3: Multiple Uploads
- Upload di Zone 1 dulu
- Refresh halaman
- Upload di Zone 2
- Keduanya harus berfungsi independent

---

## 🎯 EXPECTED BEHAVIOR LENGKAP

### Sebelum Upload:
- Area upload menampilkan icon upload berwarna biru
- Text: "Klik atau drag & drop file ke sini"
- Cursor berubah jadi pointer saat hover

### Saat Hover:
- Border berubah warna biru
- Background gradient biru muda
- Icon membesar sedikit (scale 1.1) dan rotate 10 derajat

### Saat Drag Over:
- Border berubah solid hijau
- Background gradient hijau muda
- Icon rotate 180 derajat dan scale 1.15

### Setelah File Terpilih:
- Text berubah: "✓ Terpilih: namafile.jpg"
- Icon background jadi hijau
- Preview box muncul dengan:
  - Icon file
  - Nama file
  - Ukuran file (KB/MB)
  - Tombol remove (X)

### Saat Klik Remove:
- File di-clear dari input
- Preview box hilang
- Area upload kembali ke state awal

### Setelah Submit:
- Form POST ke server
- Server validasi file (type, size)
- File disimpan di storage
- Database diupdate
- Halaman reload
- Menampilkan status "Bukti transfer sudah diunggah ✅"

---

## 📊 VALIDASI SERVER SIDE

File yang diupload akan divalidasi:
- **Type:** image/jpeg, image/png, application/pdf
- **Size:** Maksimal 20MB (20480 KB)
- **Wajib:** required jika belum ada bukti sebelumnya

Jika validasi gagal, akan muncul error message di bawah upload zone.

---

## ✨ FITUR TAMBAHAN

### Auto-Clear Upload Zone
Jika user sudah pernah upload, upload zone tidak ditampilkan. Akan muncul box hijau:
```
✅ Bukti transfer sudah diunggah
File: nama_file.jpg
Menunggu verifikasi panitia...
```

### Visual Feedback
- Hover effect dengan animasi smooth
- Drag over effect dengan border highlight
- Loading state (bisa ditambahkan jika perlu)

### Console Logging
Semua action di-log ke console untuk debugging:
- Window load
- Element detection
- Setup process
- Click events
- Drag events
- File selection
- Preview display
- Remove action

---

## 🚀 READY TO TEST!

Upload bukti transfer sekarang sudah **fully functional**:
- ✅ Click to upload
- ✅ Drag & drop
- ✅ File preview
- ✅ Remove file
- ✅ Submit form
- ✅ No errors
- ✅ Clean code

**Selamat mencoba! 🎉**