# Troubleshooting: Live Preview Feature

## Overview

The live preview feature has been fully implemented with:
- ✅ JavaScript with debouncing and error handling
- ✅ Preview endpoint (`GET /labels/preview`)
- ✅ Support for both single and bulk input modes
- ✅ Comprehensive logging and debugging

## Quick Test Steps

### 1. Test PHP Backend (Test if preview endpoint works)

Open in browser: `http://localhost/barcode/public/test-preview-direct.php`

**Expected Result:**
- Shows "ALL TESTS PASSED" in green
- Displays a barcode preview
- Shows label data (barcode_value, title, etc.)

**If this fails:** The issue is with PHP/Laravel configuration. Check error message.

### 2. Test JavaScript (Test if JS code runs)

Open in browser: `http://localhost/barcode/public/test-js.html`

**Expected Result:**
- Form fields are pre-filled
- Console log shows messages
- Preview updates when you type
- Shows "JavaScript is working!" message

**If this fails:** The issue is with JavaScript. Check browser console for errors.

### 3. Test Full Integration (Test the actual form)

1. Go to: `http://localhost/barcode/public/labels/create`
2. Press F12 to open Developer Tools
3. Click "Console" tab
4. Fill in the form:
   - Company: DEXA
   - Product: DBS
   - Item Code: 5G063TH26

**Expected Console Output:**
```
Form script loaded
DOM Content Loaded
All form elements found
updateLivePreview called
Preview data: {company: "DEXA", product: "DBS", itemCode: "5G063TH26", ...}
Fetching preview from: http://...
Response status: 200
Preview HTML received (length): 1234
```

**Expected Visual Result:**
- Preview section updates automatically after typing
- Shows barcode with "DEXADBS5G063TH26"
- Shows title "DEXA * DBS"

## Common Issues & Solutions

### Issue 1: Preview stays "Isi form untuk melihat pratinjau"

**Symptoms:**
- No console logs appear when typing
- Preview never updates

**Solutions:**
1. Clear browser cache: Ctrl+Shift+Delete
2. Hard reload: Ctrl+F5
3. Check if JavaScript is enabled
4. Look for JavaScript errors in console (red text)

### Issue 2: Console shows "Required elements not found"

**Symptoms:**
- Console log shows error about missing elements
- Preview doesn't update

**Solutions:**
1. Check if all form fields have correct IDs:
   - `f-company`
   - `f-product`
   - `f-item-single`
   - `f-item-bulk`
   - `f-barcode`
   - `f-title`
   - `f-type`
   - `preview-holder`
2. View page source to verify IDs exist
3. Clear view cache: `php artisan view:clear`

### Issue 3: Network error / 404 / 500

**Symptoms:**
- Console shows "Response status: 404" or "Response status: 500"
- Preview shows error message

**Solutions:**
1. Clear Laravel cache:
   ```bash
   php artisan cache:clear
   php artisan config:clear
   php artisan route:clear
   php artisan view:clear
   ```

2. Verify route exists:
   ```bash
   php artisan route:list --name=labels.preview
   ```
   Should show: `GET|HEAD  labels/preview ... labels.preview › LabelController@preview`

3. Check Laravel logs:
   ```bash
   type storage\logs\laravel.log
   ```

4. Test endpoint directly in browser:
   ```
   http://localhost/barcode/public/labels/preview?company=DEXA&product=DBS&item_code=5G063TH26&barcode_type=code128
   ```

### Issue 4: PHP Version Error

**Symptoms:**
- Error message: "Your Composer dependencies require a PHP version >= 8.4.1"
- Application doesn't load

**Solution:**
This is a composer configuration issue. Either:
1. Update PHP to 8.4.1+, OR
2. Adjust `composer.json` to match your PHP version:
   ```json
   "require": {
       "php": "^8.1"
   }
   ```
   Then run: `composer update`

### Issue 5: Blank preview or no barcode image

**Symptoms:**
- Preview updates but shows empty or broken content
- No barcode SVG visible

**Solutions:**
1. Check if Picqer\Barcode library is installed:
   ```bash
   composer show | findstr barcode
   ```
   Should show: `picqer/php-barcode-generator`

2. Test barcode generation directly:
   ```
   http://localhost/barcode/public/test-preview-direct.php
   ```

3. Check barcode config file exists: `config/barcode.php`

### Issue 6: Preview doesn't update in bulk mode

**Symptoms:**
- Preview works in single mode
- Doesn't work when "Bulk Input" checkbox is checked

**Solutions:**
1. Check console logs to see which input field is being read
2. Verify bulk textarea has ID: `f-item-bulk`
3. The preview uses the FIRST code from bulk input
4. Make sure codes are separated by spaces, commas, or newlines

## Manual Testing Checklist

- [ ] PHP test passes (test-preview-direct.php)
- [ ] JavaScript test passes (test-js.html)
- [ ] Console shows "Form script loaded"
- [ ] Console shows "DOM Content Loaded"
- [ ] Console shows "All form elements found"
- [ ] Typing in Company field triggers preview
- [ ] Typing in Product field triggers preview
- [ ] Typing in Item Code field triggers preview
- [ ] Preview shows "Memuat pratinjau..." briefly
- [ ] Preview displays barcode image
- [ ] Preview displays correct barcode value
- [ ] Preview displays correct title
- [ ] Bulk mode toggle works
- [ ] Preview works in bulk mode

## Debug Commands

```bash
# Check Laravel routes
php artisan route:list --name=labels

# Clear all caches
php artisan optimize:clear

# View Laravel logs
type storage\logs\laravel.log

# Check PHP version
php -v

# Check composer packages
composer show

# Test database connection
php artisan tinker
>>> \App\Models\Label::count()
```

## Files Modified

1. **resources/views/labels/form.blade.php**
   - Added comprehensive JavaScript with logging
   - Event listeners for all inputs
   - 500ms debounce
   - Error handling

2. **app/Http/Controllers/LabelController.php**
   - Added `preview()` method
   - Added logging for debugging
   - Error handling with try-catch

3. **routes/web.php**
   - Added `GET /labels/preview` route

## Test Files Created

1. **public/test-preview-direct.php** - Test PHP backend
2. **public/test-js.html** - Test JavaScript
3. **DEBUG_PREVIEW.md** - Debug guide

## Still Not Working?

If you've tried everything above and it still doesn't work:

1. Take a screenshot of:
   - Browser console (F12 → Console tab)
   - Network tab showing the preview request
   - The form page

2. Check Laravel logs for any errors

3. Verify your environment:
   - PHP version: `php -v`
   - Laravel version: Check `composer.json`
   - Browser version: Check Help → About

4. Try a different browser (Chrome, Firefox, Edge)

5. Restart Apache/XAMPP

## Success Criteria

When working correctly, you should see:
- ✅ Preview updates automatically as you type
- ✅ Smooth typing experience (no lag)
- ✅ Barcode image appears in preview
- ✅ Correct barcode value displayed
- ✅ Correct title displayed
- ✅ Works in both single and bulk modes
- ✅ No console errors
- ✅ No network errors