# 🔧 Fix Log - URL Double & Photopea CORS Issue

## Tanggal: 10 Desember 2025

### 🐛 Masalah yang Diperbaiki:

#### 1. **URL Double (msjguidelines/msjguidelines)**
   - **Masalah:** Ketika user mengubah bahasa, URL menjadi double seperti:
     ```
     https://devxampp8.spunindo.com/msjguidelines/msjguidelines/visual-component
     ```
   - **Penyebab:** JavaScript `window.location.pathname` mengambil full path termasuk base path `/msjguidelines`, kemudian di-redirect ke route yang menambahkan base path lagi.
   - **Solusi:** Modifikasi fungsi `toggleLanguage()` untuk menghapus base path sebelum redirect.

#### 2. **Photopea Tidak Bisa Load Gambar**
   - **Masalah:** Gambar loading terus di Photopea saat di-deploy
   - **Penyebab:** CORS (Cross-Origin Resource Sharing) policy memblokir Photopea mengakses gambar dari server
   - **Solusi:** Menggunakan image-proxy route dengan CORS headers untuk bypass CORS restriction

---

## 📝 File yang Diubah:

### 1. **resources/views/layouts/navbars/guest/topnav.blade.php**
   ```javascript
   // SEBELUM:
   const currentPath = window.location.pathname;
   
   // SESUDAH:
   let currentPath = window.location.pathname;
   const basePath = '{{ trim(parse_url(config('app.url'), PHP_URL_PATH) ?? '', '/') }}';
   if (basePath && currentPath.startsWith('/' + basePath + '/')) {
     currentPath = currentPath.substring(basePath.length + 1);
   }
   ```
   **Penjelasan:** Menghapus base path dari URL sebelum redirect untuk mencegah URL double.

### 2. **.env**
   Menambahkan dokumentasi untuk APP_URL:
   ```env
   # Local: http://localhost or http://localhost/msjguidelines
   # Production: https://devxampp8.spunindo.com/msjguidelines
   APP_URL=http://localhost
   ```

### 3. **resources/views/guest/*.blade.php** (5 files)
   - document.blade.php
   - brand.blade.php
   - mockup.blade.php
   - typography.blade.php
   - visual-component.blade.php
   
   Mengubah fungsi `openInPhotopea()`:
   ```javascript
   // SEBELUM:
   const photopeaUrl = 'https://www.photopea.com/#' + encodeURIComponent(JSON.stringify({
     files: [imageUrl]
   }));
   
   // SESUDAH:
   const proxyUrl = '{{ route('image.proxy') }}?path=' + encodeURIComponent(imageUrl);
   const photopeaUrl = 'https://www.photopea.com/#' + encodeURIComponent(JSON.stringify({
     files: [proxyUrl]
   }));
   ```
   **Penjelasan:** Menggunakan image-proxy untuk menambahkan CORS headers.

### 4. **app/Http/Controllers/ImageProxyController.php**
   Peningkatan:
   - Menambahkan handler OPTIONS request untuk CORS preflight
   - Menambahkan header `Access-Control-Expose-Headers`
   - Menambahkan `Access-Control-Max-Age` untuk cache

### 5. **config/cors.php**
   ```php
   'paths' => ['api/', 'sanctum/csrf-cookie', 'storage/*', 'docs/*', 'image-proxy'],
   'exposed_headers' => ['Content-Length', 'Content-Type'],
   'max_age' => 86400,
   ```

### 6. **app/Http/Middleware/VerifyCsrfToken.php**
   ```php
   protected $except = [
       'image-proxy',
   ];
   ```
   **Penjelasan:** Mengecualikan image-proxy dari CSRF verification.

---

## 🚀 File Baru Dibuat:

### 1. **.env.production.example**
   Template konfigurasi untuk production dengan APP_URL yang benar.

### 2. **DEPLOYMENT_GUIDE.md**
   Panduan lengkap deployment ke production server, termasuk:
   - Cara fix URL double
   - Command untuk clear cache
   - Troubleshooting guide
   - Checklist deployment

### 3. **FIX_LOG.md** (file ini)
   Dokumentasi semua perubahan yang dilakukan.

---

## 🎯 Cara Implementasi di Server Production:

### Step 1: Upload Files
Upload semua file yang sudah diubah ke server.

### Step 2: Update .env di Server
```bash
# Edit .env
nano .env

# Ubah APP_URL menjadi:
APP_URL=https://devxampp8.spunindo.com/msjguidelines

# Set environment production:
APP_ENV=production
APP_DEBUG=false
```

### Step 3: Clear Cache
```bash
php artisan config:clear
php artisan cache:clear
php artisan route:clear
php artisan view:clear
php artisan config:cache
php artisan route:cache
```

### Step 4: Restart Web Server
```bash
sudo systemctl restart apache2
# atau
sudo systemctl restart httpd
```

### Step 5: Test
1. Buka: `https://devxampp8.spunindo.com/msjguidelines/visual-component`
2. Klik tombol ganti bahasa (EN/ID)
3. Cek URL tidak menjadi double ✓
4. Klik tombol Photopea
5. Cek gambar muncul di Photopea ✓

---

## ✅ Hasil yang Diharapkan:

- [x] URL tidak double ketika ganti bahasa
- [x] Redirect language bekerja dengan benar
- [x] Photopea bisa load dan edit gambar
- [x] Tidak ada CORS error di browser console
- [x] Aplikasi berjalan lancar di production

---

## 📊 Testing Checklist:

### Local (Development)
- [x] Test ganti bahasa di localhost
- [x] Test Photopea di localhost
- [x] Tidak ada error di console

### Production (Setelah Deploy)
- [ ] Test URL tidak double
- [ ] Test ganti bahasa EN/ID
- [ ] Test Photopea load gambar
- [ ] Test download file
- [ ] Test search functionality

---

## 💡 Tips untuk Developer:

1. **Selalu set APP_URL dengan benar:**
   - Development: `http://localhost` atau `http://localhost/msjguidelines`
   - Production: `https://domain.com/subfolder` (jika ada subfolder)

2. **Clear cache setelah update .env:**
   ```bash
   php artisan config:clear && php artisan config:cache
   ```

3. **Check route list:**
   ```bash
   php artisan route:list | grep language
   php artisan route:list | grep image-proxy
   ```

4. **Monitor error log:**
   ```bash
   tail -f storage/logs/laravel.log
   ```

---

## 🔗 Related Files:

- `DEPLOYMENT_GUIDE.md` - Panduan deployment lengkap
- `.env.production.example` - Template .env untuk production
- `routes/web.php` - Route language switching
- `app/Http/Controllers/ImageProxyController.php` - CORS proxy untuk Photopea

---

## 📞 Kontak:

Jika ada pertanyaan atau masalah:
1. Baca `DEPLOYMENT_GUIDE.md` terlebih dahulu
2. Cek error di `storage/logs/laravel.log`
3. Hubungi developer dengan screenshot error

---

**Status:** ✅ **RESOLVED**
**Tested:** ✅ **LOCAL** | ⏳ **PRODUCTION (Waiting deployment)**