# Invoice Layout Switcher - Quick Layout Change

## ✅ What's Added?

A new **Layout** button has been added to the POS Pro header that allows you to quickly switch between invoice layouts without going to settings.

## 🎯 Features

### 1. Layout Button in Header
- **Location**: After Settings button, before Add Expense button
- **Icon**: 📄 (File icon)
- **Text**: Current layout name (e.g., Classic, Saudi, 80mm)

### 2. Dropdown Menu
Clicking the button opens a dropdown menu with these layouts:

#### Normal Printer Layouts (A4 Size)
- **Classic** - Traditional classic design
- **Elegant** - Beautiful professional design
- **Detailed** - Detailed invoice design
- **Saudi Invoice - فاتورة سعودية** - Saudi invoice with QR code

#### Thermal Printer Layouts
- **Saudi Thermal 80mm** - For 80mm thermal printers (Badge: 80mm)
- **Saudi Thermal 58mm** - For 58mm thermal printers (Badge: 58mm)
- **Slim (80mm)** - Standard 80mm layout
- **Slim 2 (58mm)** - Standard 58mm layout

### 3. Real-Time Switching
- Layout changes immediately upon selection
- No page reload required
- Success notification displayed

### 4. Persistent Selection
- Selected layout is saved in **localStorage**
- Selection persists after closing browser
- All new sales will print in the selected layout

## 📋 Usage Instructions

### Step 1: Open POS Pro Page
```
http://127.0.0.1:8001/pos/create
```

### Step 2: Find Layout Button in Header
- Located after Settings ⚙️ button
- Before Add Expense button
- Icon: 📄 Layout

### Step 3: Select Layout
1. Click the **Layout** button
2. Dropdown menu will open
3. Select your preferred layout
4. Success message will appear

### Step 4: Complete Sale
- When you complete a sale
- Invoice will automatically print in selected layout
- New tab will open with the invoice

## 🎨 Layout Selection Guide

### Which Layout to Use?

#### For Normal A4 Printer:
```
✅ Classic - Simple and fast
✅ Elegant - Professional look
✅ Detailed - Complete details
✅ Saudi Invoice - For Saudi VAT (with QR code)
```

#### For 80mm Thermal Printer:
```
✅ Saudi Thermal 80mm - Saudi invoice with QR code
✅ Slim - Standard thermal layout
```

#### For 58mm Thermal Printer:
```
✅ Saudi Thermal 58mm - Saudi invoice with QR code
✅ Slim 2 - Standard thermal layout
```

## 🔧 Technical Details

### Frontend (JavaScript)
```javascript
// Layout is saved in localStorage
localStorage.setItem('pos_invoice_layout', 'saudi-thermal-80mm');

// Layout parameter is added to print URL
/sells/123/print?layout=saudi-thermal-80mm
```

### Backend (PHP)
```php
// Layout parameter is handled in SellPosController.php
$layout_param = $request->input('layout');
if (!empty($layout_param)) {
    $layout = 'sale_pos.receipts.' . $layout_param;
    $receipt['html_content'] = view($layout, compact('receipt_details'))->render();
}
```

### Files Modified
1. **resources/views/sale_pos/create_pro.blade.php**
   - Added layout button to header
   - Added dropdown menu with layout options
   - Added JavaScript for layout switching
   - Added CSS for styling

2. **app/Http/Controllers/SellPosController.php**
   - Modified `printInvoice()` method
   - Added support for layout URL parameter
   - Layout override functionality

## 🎯 Benefits

### 1. Time Saving
- No need to go to Settings page
- Change layout with one click
- See results immediately

### 2. Easy to Use
- Simple dropdown interface
- Clear layout names
- Visual indicators (badges)

### 3. Flexible
- Use different layout for each sale
- Easy switch between thermal and normal printer
- Selection is automatically saved

## 🐛 Troubleshooting

### Layout Not Changing?
```bash
# Clear browser cache
Ctrl + Shift + Delete

# Or clear Laravel cache
php artisan cache:clear
php artisan view:clear
```

### Dropdown Not Opening?
```javascript
// Check in browser console
console.log(localStorage.getItem('pos_invoice_layout'));

// Check for JavaScript errors
F12 → Console tab
```

### Layout File Not Found?
```bash
# Verify layout files exist
resources/views/sale_pos/receipts/saudi-thermal-80mm.blade.php
resources/views/sale_pos/receipts/saudi-thermal-58mm.blade.php
resources/views/sale_pos/receipts/saudi-invoice.blade.php
```

## 📱 Responsive Design

### Desktop
- All buttons and text visible
- Dropdown opens at full width

### Tablet (< 1200px)
- Button text hidden
- Only icons visible
- Dropdown opens at normal size

### Mobile (< 768px)
- Header in vertical layout
- Buttons wrap
- Dropdown at full width

## 🎉 Complete!

You can now quickly change invoice layout from POS Pro page!

### Quick Test:
1. Open POS Pro page
2. Click Layout button
3. Select Saudi Thermal 80mm
4. Complete a sale
5. Invoice will print in 80mm layout! ✅

## 📝 Additional Notes

### Layout Priority
When printing an invoice, the system uses this priority:
1. **URL parameter** (from layout switcher) - Highest priority
2. Transaction's invoice_layout_id
3. Location's invoice_layout_id
4. Default layout

### Browser Compatibility
- Works in all modern browsers
- Requires localStorage support
- JavaScript must be enabled

### Performance
- No server requests when switching layouts
- Instant UI update
- Layout applied only when printing

---

**Note**: This feature works only on POS Pro page. You can also change layout from Settings page, but that will be a permanent change for all users.
