# Debug Guide: Live Preview Not Working

## What Was Implemented

Live preview functionality that shows the barcode label as you type in the form fields.

## Files Modified

1. **resources/views/labels/form.blade.php**
   - Added JavaScript with extensive console logging
   - Added event listeners for all form inputs
   - Added 500ms debounce to prevent excessive requests
   - Added error handling and loading states

2. **app/Http/Controllers/LabelController.php**
   - Added `preview()` method
   - Added logging for debugging
   - Returns rendered label-card component

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

## How to Debug

### Step 1: Open Browser Console
1. Open the form at `/labels/create`
2. Press F12 to open Developer Tools
3. Go to "Console" tab

### Step 2: Check JavaScript Loads
You should see these console messages:
```
Form script loaded
DOM Content Loaded
All form elements found
```

If you don't see these, there's a JavaScript error. Check for error messages in red.

### Step 3: Test Preview Manually
In the browser console, type:
```javascript
updateLivePreview()
```

You should see console logs like:
```
updateLivePreview called
Preview data: {company: "DEXA", product: "DBS", itemCode: "5G063TH26", ...}
Fetching preview from: http://...
Response status: 200
Preview HTML received (length): 1234
```

### Step 4: Check Network Tab
1. Go to "Network" tab in Developer Tools
2. Fill in the form fields: Company=DEXA, Product=DBS, Item Code=5G063TH26
3. Look for a request to `/labels/preview?company=DEXA&product=DBS&item_code=5G063TH26...`
4. Click on it and check:
   - Status code (should be 200)
   - Response (should be HTML with label markup)

### Step 5: Check Laravel Logs
Look at `storage/logs/laravel.log` for:
```
[timestamp] local.INFO: Preview request {"company":"DEXA",...}
[timestamp] local.INFO: Preview label data {"barcode_value":"DEXADBS5G063TH26",...}
```

If you see errors, they will show the problem.

### Step 6: Test Route Directly
Visit this URL in browser:
```
http://localhost/barcode/public/labels/preview?company=DEXA&product=DBS&item_code=5G063TH26&barcode_type=code128
```

You should see the label HTML rendered.

## Common Issues

### Issue 1: JavaScript Not Running
**Symptom**: No console logs appear
**Solution**: 
- Check if JavaScript is enabled
- Check if there are syntax errors in console
- Clear browser cache

### Issue 2: Route Not Found (404)
**Symptom**: Network tab shows 404 error
**Solution**: 
- Run `php artisan route:clear`
- Run `php artisan cache:clear`
- Check that route exists: `php artisan route:list --name=labels.preview`

### Issue 3: CSRF Token Error
**Symptom**: 419 error in Network tab
**Solution**: This shouldn't happen for GET requests, but if it does:
- Clear cookies for the site
- Reload the page

### Issue 4: PHP Version Mismatch
**Symptom**: Platform check error
**Solution**: Update XAMPP to PHP 8.4+ or adjust composer.json requirements

### Issue 5: Preview Holder Not Found
**Symptom**: Console error "Required elements not found"
**Solution**: 
- Check that `<div id="preview-holder">` exists in the HTML
- View page source to verify

## Quick Test Commands

```bash
# Check route exists
php artisan route:list --name=labels.preview

# Clear caches
php artisan cache:clear
php artisan config:clear
php artisan view:clear

# Check Laravel logs
type storage\logs\laravel.log
```

## Expected Behavior

When you type in the form:
1. After 500ms of inactivity, preview updates automatically
2. "Memuat pratinjau..." appears briefly
3. Label preview shows with barcode image
4. Preview updates every time you change company, product, or item code

## Test Data

Use these values to test:
- Company: DEXA
- Product: DBS
- Item Code: 5G063TH26

Expected output:
- Barcode value: DEXADBS5G063TH26
- Title: DEXA * DBS
- Code text: DEXADBS5G063TH26 (or "DEXA DBS 5G063TH26" depending on config)