# Invoice Header Background Color Implementation

## Overview
This implementation adds the ability to customize the table header background color for invoices through the font settings interface.

## Changes Made

### 1. Database Schema Update
**File:** `add-header-bgcolor.sql`
- Added `TableHeaderBgColor` column to `tblfont_settings` table
- Data Type: VARCHAR(20)
- Default Value: '#f0f0f0' (light gray)
- Position: After `TableHeaderWeight` column

**SQL Execution:**
```powershell
Get-Content "add-header-bgcolor.sql" | & "C:\wamp64\bin\mysql\mysql8.0.21\bin\mysql.exe" -u root uzrs-inventorydb
```

### 2. Form Interface Update
**File:** `invoice-font-settings.php`
- Added new form field for Table Header Background Color
- Color picker input type for easy color selection
- Default value: #f0f0f0
- Located in the "Product Table" section after the Table Header Weight field

**Changes:**
- Changed "Table Header Color" label to "Text Color" for clarity
- Added new row with "Header Background Color" field

### 3. Backend Processing Update
**File:** `index.php` (StoreSettings)

**Variables Added:**
```php
$tableHeaderBgColor = mysqli_real_escape_string($con, $_POST['tableHeaderBgColor'] ?? '#f0f0f0');
```

**UPDATE Query Modified:**
- Added `TableHeaderBgColor = '$tableHeaderBgColor'` in the UPDATE statement

**INSERT Query Modified:**
- Added `TableHeaderBgColor` to column list
- Added `'$tableHeaderBgColor'` to values list

### 4. Invoice Template Update
**File:** `Sales/templates/sale-invoice-template1.php`

**CSS Changes:**
```css
table th {
    background: <?php echo $fontSettings['TableHeaderBgColor'] ?? '#f0f0f0'; ?>;
}
```

Changed from hardcoded `background: #f0f0f0;` to dynamic PHP value.

## Usage

### How to Change Header Background Color:

1. Navigate to **Store Settings** page
2. Click on **Invoice Font Settings** tab
3. Scroll to **Product Table** section
4. Find **Header Background Color** field
5. Click on the color picker
6. Select your desired color
7. Click **Save Font Settings**

### Color Recommendations:
- Light colors work best for readability
- Ensure good contrast with text color
- Default: #f0f0f0 (Light Gray)
- Suggested alternatives:
  - #e3f2fd (Light Blue)
  - #fff3e0 (Light Orange)
  - #f1f8e9 (Light Green)
  - #fce4ec (Light Pink)

## Testing

### Test Steps:
1. ✅ Database column added successfully
2. ✅ Form displays color picker
3. ✅ Form saves selected color
4. ✅ Invoice template applies selected color
5. ✅ Default value works when no setting exists

### Test Cases:
- [ ] Change to a light color and verify on invoice
- [ ] Change to a dark color and verify text readability
- [ ] Reset to default (#f0f0f0)
- [ ] Test with existing invoices
- [ ] Test with new invoices

## Files Modified

1. **Database:**
   - `add-header-bgcolor.sql` (NEW)

2. **Settings Interface:**
   - `StoreSettings/invoice-font-settings.php` (MODIFIED)
   - `StoreSettings/index.php` (MODIFIED)

3. **Invoice Template:**
   - `Sales/templates/sale-invoice-template1.php` (MODIFIED)

4. **Documentation:**
   - `HEADER_BGCOLOR_IMPLEMENTATION.md` (NEW - This file)

## Rollback Instructions

If you need to rollback these changes:

```sql
-- Remove the column
ALTER TABLE `tblfont_settings` DROP COLUMN `TableHeaderBgColor`;
```

Then revert the file changes using version control or backups.

## Future Enhancements

Potential future improvements:
- Add section title background color option
- Add border color customization
- Add gradient background support
- Add preset color themes

## Notes

- All changes are backward compatible
- Existing invoices will use default color if setting not found
- Color picker is HTML5 native (supported in all modern browsers)
- No JavaScript required for basic functionality

## Support

For issues or questions:
- Check database connection settings
- Verify column was added successfully: `DESCRIBE tblfont_settings;`
- Clear browser cache if color doesn't update
- Check PHP error logs for any issues

---
**Implementation Date:** November 5, 2025
**Version:** 1.0
**Author:** System Administrator
