# Invoice Layout Switcher - فوری لے آؤٹ تبدیل کریں

## ✅ کیا شامل کیا گیا؟

POS Pro header میں ایک نیا **Layout** button شامل کیا گیا ہے جو آپ کو فوری طور پر invoice layout تبدیل کرنے کی سہولت دیتا ہے۔

## 🎯 خصوصیات

### 1. Header میں Layout Button
- **مقام**: Settings button کے بعد، Add Expense button سے پہلے
- **آئیکن**: 📄 (File icon)
- **ٹیکسٹ**: موجودہ layout کا نام (مثلاً: Classic, Saudi, 80mm)

### 2. Dropdown Menu
Button پر کلک کرنے سے ایک dropdown menu کھلتا ہے جس میں یہ layouts ہیں:

#### Normal Printer Layouts (A4 Size)
- **Classic** - پرانا کلاسک ڈیزائن
- **Elegant** - خوبصورت ڈیزائن
- **Detailed** - تفصیلی ڈیزائن
- **Saudi Invoice - فاتورة سعودية** - سعودی انوائس (QR code کے ساتھ)

#### Thermal Printer Layouts
- **Saudi Thermal 80mm** - 80mm thermal printer کے لیے (Badge: 80mm)
- **Saudi Thermal 58mm** - 58mm thermal printer کے لیے (Badge: 58mm)
- **Slim (80mm)** - عام 80mm layout
- **Slim 2 (58mm)** - عام 58mm layout

### 3. Real-Time Switching
- Layout منتخب کرنے پر فوری طور پر تبدیل ہو جاتا ہے
- کوئی page reload کی ضرورت نہیں
- Success notification دکھائی دیتی ہے

### 4. Persistent Selection
- منتخب layout **localStorage** میں محفوظ ہو جاتا ہے
- Browser بند کرنے کے بعد بھی selection یاد رہتی ہے
- ہر نئی sale اسی layout میں print ہوگی

## 📋 استعمال کی ہدایات

### Step 1: POS Pro Page کھولیں
```
http://127.0.0.1:8001/pos/create
```

### Step 2: Header میں Layout Button تلاش کریں
- Settings ⚙️ button کے بعد
- Add Expense button سے پہلے
- آئیکن: 📄 Layout

### Step 3: Layout منتخب کریں
1. **Layout** button پر کلک کریں
2. Dropdown menu کھل جائے گا
3. اپنی پسند کا layout منتخب کریں
4. Success message دکھائی دے گا

### Step 4: Sale Complete کریں
- جب آپ sale complete کریں گے
- Invoice automatically منتخب layout میں print ہوگا
- نیا tab کھلے گا invoice کے ساتھ

## 🎨 Layout Selection Guide

### کون سا Layout استعمال کریں؟

#### Normal A4 Printer کے لیے:
```
✅ Classic - سادہ اور تیز
✅ Elegant - پیشہ ورانہ look
✅ Detailed - مکمل تفصیلات
✅ Saudi Invoice - سعودی VAT کے لیے (QR code)
```

#### 80mm Thermal Printer کے لیے:
```
✅ Saudi Thermal 80mm - سعودی انوائس (QR code)
✅ Slim - عام thermal layout
```

#### 58mm Thermal Printer کے لیے:
```
✅ Saudi Thermal 58mm - سعودی انوائس (QR code)
✅ Slim 2 - عام thermal layout
```

## 🔧 Technical Details

### Frontend (JavaScript)
```javascript
// Layout localStorage میں محفوظ ہوتا ہے
localStorage.setItem('pos_invoice_layout', 'saudi-thermal-80mm');

// Print URL میں layout parameter شامل ہوتا ہے
/sells/123/print?layout=saudi-thermal-80mm
```

### Backend (PHP)
```php
// SellPosController.php میں layout parameter handle ہوتا ہے
$layout_param = $request->input('layout');
if (!empty($layout_param)) {
    $layout = 'sale_pos.receipts.' . $layout_param;
    $receipt['html_content'] = view($layout, compact('receipt_details'))->render();
}
```

## 🎯 فوائد

### 1. وقت کی بچت
- Settings page پر جانے کی ضرورت نہیں
- ایک کلک میں layout تبدیل کریں
- فوری طور پر نتیجہ دیکھیں

### 2. آسان استعمال
- سادہ dropdown interface
- واضح layout names
- Visual indicators (badges)

### 3. لچکدار
- ہر sale کے لیے مختلف layout استعمال کریں
- Thermal اور Normal printer کے درمیان آسانی سے switch کریں
- Selection automatically محفوظ ہو جاتی ہے

## 🐛 Troubleshooting

### Layout تبدیل نہیں ہو رہا؟
```bash
# Browser cache صاف کریں
Ctrl + Shift + Delete

# یا Laravel cache صاف کریں
php artisan cache:clear
php artisan view:clear
```

### Dropdown نہیں کھل رہا؟
```javascript
// Browser console میں check کریں
console.log(localStorage.getItem('pos_invoice_layout'));

// JavaScript errors check کریں
F12 → Console tab
```

### Layout file نہیں مل رہی؟
```bash
# Check کریں کہ layout file موجود ہے
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
- تمام buttons اور text نظر آتے ہیں
- Dropdown full width میں کھلتا ہے

### Tablet (< 1200px)
- Button text چھپ جاتا ہے
- صرف icons نظر آتے ہیں
- Dropdown normal size میں کھلتا ہے

### Mobile (< 768px)
- Header vertical layout میں
- Buttons wrap ہو جاتے ہیں
- Dropdown full width میں

## 🎉 مکمل!

اب آپ POS Pro page سے فوری طور پر invoice layout تبدیل کر سکتے ہیں!

### Quick Test:
1. POS Pro page کھولیں
2. Layout button پر کلک کریں
3. Saudi Thermal 80mm منتخب کریں
4. ایک sale complete کریں
5. Invoice 80mm layout میں print ہوگا! ✅

---

**نوٹ**: یہ feature صرف POS Pro page پر کام کرتا ہے۔ Settings page سے بھی layout تبدیل کر سکتے ہیں لیکن وہ permanent change ہوگا۔
