# Saudi Invoice Layout Setup Guide

## Overview
I've created a professional Saudi-style invoice layout with:
- ✅ Bilingual (Arabic/English) design
- ✅ Green Saudi theme colors
- ✅ Large QR code section (ZATCA compliant)
- ✅ Professional header with logo
- ✅ Tax information prominently displayed
- ✅ Clean, modern table layout
- ✅ Payment details section
- ✅ RTL (Right-to-Left) support

## File Created
**Location:** `resources/views/sale_pos/receipts/saudi-invoice.blade.php`

## How to Use This Design

### Method 1: Set as Default Design in Invoice Layout

1. **Go to Database:**
   - Open your database management tool (phpMyAdmin, MySQL Workbench, etc.)
   - Find the `invoice_layouts` table

2. **Update Design Field:**
   ```sql
   UPDATE invoice_layouts 
   SET design = 'saudi-invoice' 
   WHERE id = YOUR_INVOICE_LAYOUT_ID;
   ```
   Replace `YOUR_INVOICE_LAYOUT_ID` with your actual invoice layout ID (usually 1)

3. **Or Update All Layouts:**
   ```sql
   UPDATE invoice_layouts 
   SET design = 'saudi-invoice';
   ```

### Method 2: Add to Invoice Layout Dropdown

1. **Edit Invoice Layout Controller:**
   - File: `app/Http/Controllers/InvoiceLayoutController.php`
   - Add 'saudi-invoice' to the design options

2. **Then Select from UI:**
   - Go to: Settings → Invoice Layouts
   - Edit your layout
   - Select "saudi-invoice" from design dropdown
   - Save

## Required Settings for Best Results

### 1. Enable Logo
- Go to: Settings → Invoice Layouts
- Check "Show Logo"
- Upload your company logo (recommended: 200x80 pixels, PNG with transparent background)

### 2. Enable QR Code
- Check "Show QR Code"
- Select QR code fields:
  - ✓ business_name
  - ✓ tax_1 (VAT number)
  - ✓ invoice_no
  - ✓ invoice_datetime
  - ✓ total_amount
  - ✓ customer_name

### 3. Set Tax Information
- Go to: Settings → Business Settings → Tax
- Set Tax Label 1: "VAT Number" or "الرقم الضريبي"
- Set Tax Number 1: Your 15-digit VAT number
- Example: 300000000000003

### 4. Configure Footer Text
- Go to: Settings → Invoice Layouts
- Add footer text (optional):
  ```
  Company Address | Email | Phone
  www.yourcompany.com
  ```

## Features of Saudi Invoice Design

### Visual Features:
- **Green Theme:** Saudi Arabia's national color (#1a5f3f)
- **Bilingual Headers:** Arabic and English throughout
- **Large QR Code:** 200x200px for easy scanning
- **Professional Layout:** Clean, organized sections
- **Tax Highlight:** Yellow banner for VAT information
- **Payment Section:** Green-themed payment details box

### Sections Included:
1. **Header:**
   - Company logo
   - Company name (bilingual)
   - Address and contact info
   - Green gradient background

2. **Invoice Title:**
   - "فاتورة ضريبية / TAX INVOICE"
   - Black background with white text

3. **Tax Banner:**
   - Yellow highlight box
   - VAT number prominently displayed

4. **Info Grid:**
   - Invoice number and date
   - Customer information
   - Tax numbers
   - Sales person

5. **Items Table:**
   - Bilingual column headers
   - Item details with variations
   - Quantity, price, discount, tax, total
   - Alternating row colors

6. **Totals Section:**
   - Subtotal, discounts, shipping
   - VAT calculation
   - Grand total (highlighted)
   - Amount in words

7. **QR Code Section:**
   - Large QR code (6x6 size)
   - Bilingual label
   - Scan instruction text

8. **Payment Details:**
   - Green-themed box
   - Payment methods and amounts
   - Total paid and due

9. **Footer:**
   - Thank you message (bilingual)
   - Electronic invoice note
   - Custom footer text

## Testing the Design

1. **Make a Test Sale:**
   - Go to POS Pro
   - Add items to cart
   - Complete sale

2. **View Invoice:**
   - Invoice will open automatically
   - Check all elements are displaying correctly

3. **Verify:**
   - ✓ Logo appears in header
   - ✓ QR code shows at bottom right
   - ✓ Colors are green theme
   - ✓ Text is bilingual
   - ✓ All sections are properly formatted

## Customization Options

### Change Colors:
Edit the CSS in `saudi-invoice.blade.php`:
```css
/* Main green color */
#1a5f3f → Your color

/* Gradient */
linear-gradient(135deg, #1a5f3f 0%, #2d8659 100%)
```

### Change QR Code Size:
Find this line:
```php
DNS2D::getBarcodePNG($receipt_details->qr_code_text, 'QRCODE', 6, 6)
```
Change `6, 6` to `8, 8` for larger or `4, 4` for smaller

### Add More Fields:
You can add custom fields in the info grid section or create new sections

## ZATCA Compliance

For full ZATCA (Zakat, Tax and Customs Authority) compliance:

1. **Enable ZATCA QR:**
   - Go to: Settings → Invoice Layouts
   - Enable "ZATCA QR Code" option
   - Select ZATCA Phase (Phase 1 or Phase 2)

2. **Required Fields:**
   - Business name (Arabic)
   - VAT registration number (15 digits)
   - Invoice date and time
   - Total amount with VAT
   - VAT amount

3. **QR Code Format:**
   - The system will generate TLV format QR code
   - Includes all required ZATCA fields
   - Base64 encoded

## Troubleshooting

### QR Code Not Showing:
1. Check "Show QR Code" is enabled
2. Verify QR code fields are selected
3. Ensure transaction status is "final"
4. Run diagnostic: `/sells/{id}/diagnostic`

### Logo Not Showing:
1. Check "Show Logo" is enabled
2. Verify logo file exists in `public/uploads/invoice_logos/`
3. Check file permissions

### Design Not Applied:
1. Clear cache: `php artisan cache:clear`
2. Clear view cache: `php artisan view:clear`
3. Verify design field in database is set to 'saudi-invoice'

### Arabic Text Issues:
1. Ensure database charset is UTF-8
2. Check browser encoding is UTF-8
3. Verify font supports Arabic characters

## Quick SQL Commands

### Check Current Design:
```sql
SELECT id, name, design FROM invoice_layouts;
```

### Set Saudi Design:
```sql
UPDATE invoice_layouts SET design = 'saudi-invoice' WHERE id = 1;
```

### Enable Logo and QR:
```sql
UPDATE invoice_layouts 
SET show_logo = 1, show_qr_code = 1 
WHERE id = 1;
```

### Set QR Code Fields:
```sql
UPDATE invoice_layouts 
SET qr_code_fields = '["business_name","tax_1","invoice_no","invoice_datetime","total_amount","customer_name"]' 
WHERE id = 1;
```

## Support

If you need help:
1. Run diagnostic tool: `/sells/{transaction_id}/diagnostic`
2. Check Laravel logs: `storage/logs/laravel.log`
3. Verify all settings are enabled
4. Test with a simple sale first

## Preview

The invoice will look like:
- **Header:** Green gradient with logo and company info
- **Title:** Black bar with "فاتورة ضريبية / TAX INVOICE"
- **Tax Banner:** Yellow box with VAT number
- **Info Grid:** Two columns with invoice and customer details
- **Table:** Clean table with bilingual headers
- **Totals:** Left side with calculations
- **QR Code:** Right side with large QR code
- **Footer:** Thank you message and notes

Enjoy your professional Saudi-style invoices! 🇸🇦
