<?php
declare(strict_types=1);
require_once 'db/config.php';

// Handle POST Requests
$message = '';
if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['action']) && $_GET['action'] === 'search_items') {
    header('Content-Type: application/json');
    $q = $_GET['q'] ?? '';
    $stmt = db()->prepare("SELECT id, name_en, name_ar, sku, sale_price, purchase_price, stock_quantity FROM stock_items WHERE name_en LIKE ? OR name_ar LIKE ? OR sku LIKE ? LIMIT 10");
    $stmt->execute(["%$q%", "%$q%", "%$q%"]);
    echo json_encode($stmt->fetchAll());
    exit;
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['add_customer'])) {
        $name = $_POST['name'] ?? '';
        $email = $_POST['email'] ?? '';
        $phone = $_POST['phone'] ?? '';
        $balance = (float)($_POST['balance'] ?? 0);
        $type = $_POST['type'] ?? 'customer';
        if ($name) {
            $stmt = db()->prepare("INSERT INTO customers (name, email, phone, balance, type) VALUES (?, ?, ?, ?, ?)");
            $stmt->execute([$name, $email, $phone, $balance, $type]);
            $message = ucfirst($type) . " added successfully!";
        }
    }

    if (isset($_POST['edit_customer'])) {
        $id = (int)$_POST['id'];
        $name = $_POST['name'] ?? '';
        $email = $_POST['email'] ?? '';
        $phone = $_POST['phone'] ?? '';
        $balance = (float)($_POST['balance'] ?? 0);
        if ($id && $name) {
            $stmt = db()->prepare("UPDATE customers SET name = ?, email = ?, phone = ?, balance = ? WHERE id = ?");
            $stmt->execute([$name, $email, $phone, $balance, $id]);
            $message = "Record updated successfully!";
        }
    }

    if (isset($_POST['delete_customer'])) {
        $id = (int)$_POST['id'];
        if ($id) {
            $stmt = db()->prepare("DELETE FROM customers WHERE id = ?");
            $stmt->execute([$id]);
            $message = "Record deleted successfully!";
        }
    }

    if (isset($_POST['add_category'])) {
        $name_en = $_POST['name_en'] ?? '';
        $name_ar = $_POST['name_ar'] ?? '';
        if ($name_en && $name_ar) {
            $stmt = db()->prepare("INSERT INTO stock_categories (name_en, name_ar) VALUES (?, ?)");
            $stmt->execute([$name_en, $name_ar]);
            $message = "Category added successfully!";
        }
    }

    if (isset($_POST['add_unit'])) {
        $name_en = $_POST['name_en'] ?? '';
        $name_ar = $_POST['name_ar'] ?? '';
        $short_en = $_POST['short_en'] ?? '';
        $short_ar = $_POST['short_ar'] ?? '';
        if ($name_en && $name_ar) {
            $stmt = db()->prepare("INSERT INTO stock_units (name_en, name_ar, short_name_en, short_name_ar) VALUES (?, ?, ?, ?)");
            $stmt->execute([$name_en, $name_ar, $short_en, $short_ar]);
            $message = "Unit added successfully!";
        }
    }

    if (isset($_POST['add_item'])) {
        $cat_id = $_POST['category_id'] ?: null;
        $unit_id = $_POST['unit_id'] ?: null;
        $supplier_id = $_POST['supplier_id'] ?: null;
        $name_en = $_POST['name_en'] ?? '';
        $name_ar = $_POST['name_ar'] ?? '';
        $sku = $_POST['sku'] ?? '';
        $p_price = (float)($_POST['purchase_price'] ?? 0);
        $s_price = (float)($_POST['sale_price'] ?? 0);
        $qty = (float)($_POST['stock_quantity'] ?? 0);
        $min_stock = (float)($_POST['min_stock_level'] ?? 0);
        $expiry = $_POST['expiry_date'] ?: null;
        
        $image_path = null;
        if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
            $ext = pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION);
            $filename = uniqid('item_') . '.' . $ext;
            $target = 'uploads/items/' . $filename;
            if (move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
                $image_path = $target;
            }
        }

        if ($name_en && $name_ar) {
            $stmt = db()->prepare("INSERT INTO stock_items (category_id, unit_id, supplier_id, name_en, name_ar, sku, purchase_price, sale_price, stock_quantity, min_stock_level, expiry_date, image_path) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
            $stmt->execute([$cat_id, $unit_id, $supplier_id, $name_en, $name_ar, $sku, $p_price, $s_price, $qty, $min_stock, $expiry, $image_path]);
            $message = "Item added successfully!";
        }
    }

    if (isset($_POST['delete_item'])) {
        $id = (int)$_POST['id'];
        // Optional: delete image file
        $item = db()->prepare("SELECT image_path FROM stock_items WHERE id = ?");
        $item->execute([$id]);
        $path = $item->fetchColumn();
        if ($path && file_exists($path)) {
            unlink($path);
        }
        
        $stmt = db()->prepare("DELETE FROM stock_items WHERE id = ?");
        $stmt->execute([$id]);
        $message = "Item deleted successfully!";
    }

    if (isset($_POST['edit_item'])) {
        $id = (int)$_POST['id'];
        $cat_id = $_POST['category_id'] ?: null;
        $unit_id = $_POST['unit_id'] ?: null;
        $supplier_id = $_POST['supplier_id'] ?: null;
        $name_en = $_POST['name_en'] ?? '';
        $name_ar = $_POST['name_ar'] ?? '';
        $sku = $_POST['sku'] ?? '';
        $p_price = (float)($_POST['purchase_price'] ?? 0);
        $s_price = (float)($_POST['sale_price'] ?? 0);
        $qty = (float)($_POST['stock_quantity'] ?? 0);
        $min_stock = (float)($_POST['min_stock_level'] ?? 0);
        $expiry = $_POST['expiry_date'] ?: null;

        $stmt = db()->prepare("SELECT image_path FROM stock_items WHERE id = ?");
        $stmt->execute([$id]);
        $image_path = $stmt->fetchColumn();

        if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
            // Delete old image
            if ($image_path && file_exists($image_path)) {
                unlink($image_path);
            }
            $ext = pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION);
            $filename = uniqid('item_') . '.' . $ext;
            $target = 'uploads/items/' . $filename;
            if (move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
                $image_path = $target;
            }
        }

        if ($name_en && $name_ar) {
            $stmt = db()->prepare("UPDATE stock_items SET category_id = ?, unit_id = ?, supplier_id = ?, name_en = ?, name_ar = ?, sku = ?, purchase_price = ?, sale_price = ?, stock_quantity = ?, min_stock_level = ?, expiry_date = ?, image_path = ? WHERE id = ?");
            $stmt->execute([$cat_id, $unit_id, $supplier_id, $name_en, $name_ar, $sku, $p_price, $s_price, $qty, $min_stock, $expiry, $image_path, $id]);
            $message = "Item updated successfully!";
        }
    }

    if (isset($_POST['import_items'])) {
        if (isset($_FILES['excel_file']) && $_FILES['excel_file']['error'] === UPLOAD_ERR_OK) {
            $file = $_FILES['excel_file']['tmp_name'];
            $handle = fopen($file, 'r');
            $header = fgetcsv($handle); // Skip header row
            
            $count = 0;
            while (($row = fgetcsv($handle)) !== FALSE) {
                // Mapping: sku, eng name, arabic name, sale price, cost price
                if (count($row) < 5) continue;
                
                $sku = trim($row[0]);
                $name_en = trim($row[1]);
                $name_ar = trim($row[2]);
                $sale_price = (float)trim($row[3]);
                $purchase_price = (float)trim($row[4]);
                
                if ($name_en && $name_ar) {
                    // Check if SKU exists to update or insert
                    $existingId = null;
                    if ($sku !== "") {
                        $check = db()->prepare("SELECT id FROM stock_items WHERE sku = ?");
                        $check->execute([$sku]);
                        $existingId = $check->fetchColumn();
                    }
                    
                    if ($existingId) {
                        $stmt = db()->prepare("UPDATE stock_items SET name_en = ?, name_ar = ?, sale_price = ?, purchase_price = ? WHERE id = ?");
                        $stmt->execute([$name_en, $name_ar, $sale_price, $purchase_price, $existingId]);
                    } else {
                        $stmt = db()->prepare("INSERT INTO stock_items (sku, name_en, name_ar, sale_price, purchase_price) VALUES (?, ?, ?, ?, ?)");
                        $stmt->execute([$sku, $name_en, $name_ar, $sale_price, $purchase_price]);
                    }
                    $count++;
                }
            }
            fclose($handle);
            $message = "$count items processed successfully!";
        }
    }

    if (isset($_POST['import_customers']) || isset($_POST['import_suppliers'])) {
        $type = isset($_POST['import_customers']) ? 'customer' : 'supplier';
        if (isset($_FILES['excel_file']) && $_FILES['excel_file']['error'] === UPLOAD_ERR_OK) {
            $file = $_FILES['excel_file']['tmp_name'];
            $handle = fopen($file, 'r');
            $header = fgetcsv($handle);
            $count = 0;
            while (($row = fgetcsv($handle)) !== FALSE) {
                if (count($row) < 4) continue;
                $name = trim($row[0]);
                $email = trim($row[1]);
                $phone = trim($row[2]);
                $balance = (float)trim($row[3]);
                if ($name) {
                    $stmt = db()->prepare("INSERT INTO customers (name, email, phone, balance, type) VALUES (?, ?, ?, ?, ?)");
                    $stmt->execute([$name, $email, $phone, $balance, $type]);
                    $count++;
                }
            }
            fclose($handle);
            $message = "$count " . ($type === 'customer' ? 'customers' : 'suppliers') . " imported successfully!";
        }
    }

    if (isset($_POST['import_categories'])) {
        if (isset($_FILES['excel_file']) && $_FILES['excel_file']['error'] === UPLOAD_ERR_OK) {
            $file = $_FILES['excel_file']['tmp_name'];
            $handle = fopen($file, 'r');
            $header = fgetcsv($handle);
            $count = 0;
            while (($row = fgetcsv($handle)) !== FALSE) {
                if (count($row) < 2) continue;
                $name_en = trim($row[0]);
                $name_ar = trim($row[1]);
                if ($name_en && $name_ar) {
                    $stmt = db()->prepare("INSERT INTO stock_categories (name_en, name_ar) VALUES (?, ?)");
                    $stmt->execute([$name_en, $name_ar]);
                    $count++;
                }
            }
            fclose($handle);
            $message = "$count categories imported successfully!";
        }
    }

    if (isset($_POST['import_units'])) {
        if (isset($_FILES['excel_file']) && $_FILES['excel_file']['error'] === UPLOAD_ERR_OK) {
            $file = $_FILES['excel_file']['tmp_name'];
            $handle = fopen($file, 'r');
            $header = fgetcsv($handle);
            $count = 0;
            while (($row = fgetcsv($handle)) !== FALSE) {
                if (count($row) < 4) continue;
                $name_en = trim($row[0]);
                $name_ar = trim($row[1]);
                $short_en = trim($row[2]);
                $short_ar = trim($row[3]);
                if ($name_en && $name_ar) {
                    $stmt = db()->prepare("INSERT INTO stock_units (name_en, name_ar, short_name_en, short_name_ar) VALUES (?, ?, ?, ?)");
                    $stmt->execute([$name_en, $name_ar, $short_en, $short_ar]);
                    $count++;
                }
            }
            fclose($handle);
            $message = "$count units imported successfully!";
        }
    }

    if (isset($_POST['add_invoice'])) {
        $customer_id = $_POST['customer_id'] ?: null;
        $invoice_date = $_POST['invoice_date'] ?: date('Y-m-d');
        $type = $_POST['type'] ?? 'sale'; // 'sale' or 'purchase'
        $payment_type = $_POST['payment_type'] ?? 'cash';
        $item_ids = $_POST['item_ids'] ?? [];
        $quantities = $_POST['quantities'] ?? [];
        $prices = $_POST['prices'] ?? [];
        
        if (!empty($item_ids)) {
            $db = db();
            $db->beginTransaction();
            try {
                $total_amount = 0;
                foreach ($item_ids as $index => $item_id) {
                    $total_amount += (float)$quantities[$index] * (float)$prices[$index];
                }

                $stmt = $db->prepare("INSERT INTO invoices (customer_id, invoice_date, type, payment_type, total_amount) VALUES (?, ?, ?, ?, ?)");
                $stmt->execute([$customer_id, $invoice_date, $type, $payment_type, $total_amount]);
                $invoice_id = $db->lastInsertId();

                foreach ($item_ids as $index => $item_id) {
                    $qty = (float)$quantities[$index];
                    $price = (float)$prices[$index];
                    $total_price = $qty * $price;

                    $stmt = $db->prepare("INSERT INTO invoice_items (invoice_id, item_id, quantity, unit_price, total_price) VALUES (?, ?, ?, ?, ?)");
                    $stmt->execute([$invoice_id, $item_id, $qty, $price, $total_price]);

                    // Update stock level
                    if ($type === 'sale') {
                        $stmt = $db->prepare("UPDATE stock_items SET stock_quantity = stock_quantity - ? WHERE id = ?");
                    } else {
                        $stmt = $db->prepare("UPDATE stock_items SET stock_quantity = stock_quantity + ? WHERE id = ?");
                    }
                    $stmt->execute([$qty, $item_id]);
                }

                $db->commit();
                $message = ucfirst($type) . " invoice created successfully!";
            } catch (Exception $e) {
                $db->rollBack();
                $message = "Error creating invoice: " . $e->getMessage();
            }
        }
    }

    if (isset($_POST['add_payment_method'])) {
        $name_en = $_POST['name_en'] ?? '';
        $name_ar = $_POST['name_ar'] ?? '';
        if ($name_en && $name_ar) {
            $stmt = db()->prepare("INSERT INTO payment_methods (name_en, name_ar) VALUES (?, ?)");
            $stmt->execute([$name_en, $name_ar]);
            $message = "Payment method added successfully!";
        }
    }

    if (isset($_POST['edit_payment_method'])) {
        $id = (int)$_POST['id'];
        $name_en = $_POST['name_en'] ?? '';
        $name_ar = $_POST['name_ar'] ?? '';
        if ($id && $name_en && $name_ar) {
            $stmt = db()->prepare("UPDATE payment_methods SET name_en = ?, name_ar = ? WHERE id = ?");
            $stmt->execute([$name_en, $name_ar, $id]);
            $message = "Payment method updated successfully!";
        }
    }

    if (isset($_POST['delete_payment_method'])) {
        $id = (int)$_POST['id'];
        if ($id) {
            $stmt = db()->prepare("DELETE FROM payment_methods WHERE id = ?");
            $stmt->execute([$id]);
            $message = "Payment method deleted successfully!";
        }
    }
}

// Routing & Data Fetching
$page = $_GET['page'] ?? 'dashboard';
$data = [];

// Global data for modals
$data['categories'] = db()->query("SELECT * FROM stock_categories ORDER BY name_en ASC")->fetchAll();
$data['units'] = db()->query("SELECT * FROM stock_units ORDER BY name_en ASC")->fetchAll();
$data['suppliers'] = db()->query("SELECT * FROM customers WHERE type = 'supplier' ORDER BY name ASC")->fetchAll();

switch ($page) {
    case 'suppliers':
        $data['customers'] = db()->query("SELECT * FROM customers WHERE type = 'supplier' ORDER BY id DESC")->fetchAll();
        break;
    case 'customers':
        $data['customers'] = db()->query("SELECT * FROM customers WHERE type = 'customer' ORDER BY id DESC")->fetchAll();
        break;
    case 'categories':
        // Already fetched globally
        break;
    case 'units':
        // Already fetched globally
        break;
    case 'items':
        $data['items'] = db()->query("SELECT i.*, c.name_en as cat_en, c.name_ar as cat_ar, u.short_name_en as unit_en, u.short_name_ar as unit_ar, s.name as supplier_name 
                                      FROM stock_items i 
                                      LEFT JOIN stock_categories c ON i.category_id = c.id 
                                      LEFT JOIN stock_units u ON i.unit_id = u.id 
                                      LEFT JOIN customers s ON i.supplier_id = s.id
                                      ORDER BY i.id DESC")->fetchAll();
        break;
    case 'payment_methods':
        $data['payment_methods'] = db()->query("SELECT * FROM payment_methods ORDER BY id DESC")->fetchAll();
        break;
    case 'sales':
    case 'purchases':
        $type = ($page === 'sales') ? 'sale' : 'purchase';
        $data['invoices'] = db()->query("SELECT v.*, c.name as customer_name 
                                         FROM invoices v 
                                         LEFT JOIN customers c ON v.customer_id = c.id 
                                         WHERE v.type = '$type' 
                                         ORDER BY v.id DESC")->fetchAll();
        $data['items_list'] = db()->query("SELECT id, name_en, name_ar, sale_price, purchase_price, stock_quantity FROM stock_items ORDER BY name_en ASC")->fetchAll();
        $data['customers_list'] = db()->query("SELECT id, name FROM customers WHERE type = '" . ($type === 'sale' ? 'customer' : 'supplier') . "' ORDER BY name ASC")->fetchAll();
        break;
    default:
        $data['customers'] = db()->query("SELECT * FROM customers WHERE type = 'customer' ORDER BY id DESC LIMIT 5")->fetchAll();
        // Dashboard stats
        $data['stats'] = [
            'total_customers' => db()->query("SELECT COUNT(*) FROM customers WHERE type = 'customer'")->fetchColumn(),
            'total_items' => db()->query("SELECT COUNT(*) FROM stock_items")->fetchColumn(),
        ];
        break;
}

$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
?>
<!doctype html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title data-en="Accounting Admin" data-ar="لوحة التحكم المحاسبية">Accounting Admin</title>
    <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
    <style>
        @media print {
            .sidebar, .topbar, .d-print-none, .btn, .modal-header, .modal-footer {
                display: none !important;
            }
            .main-content {
                margin-left: 0 !important;
                padding: 0 !important;
            }
            .modal {
                position: absolute;
                left: 0;
                top: 0;
                margin: 0;
                padding: 0;
                visibility: visible;
                overflow: visible !important;
                display: block !important;
            }
            .modal-dialog {
                max-width: 100% !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                box-shadow: none !important;
            }
            .modal-content {
                border: none !important;
                box-shadow: none !important;
            }
            body {
                background: white !important;
            }
        }
    </style>
</head>
<body>

<div class="sidebar">
    <div class="sidebar-header" data-en="Accounting" data-ar="المحاسبة">Accounting</div>
    <nav class="mt-4">
        <!-- General Section -->
        <a href="index.php?page=dashboard" class="nav-link <?= !isset($_GET['page']) || $_GET['page'] === 'dashboard' ? 'active' : '' ?>">
            <i class="bi bi-speedometer2"></i> <span data-en="Dashboard" data-ar="لوحة القيادة">Dashboard</span>
        </a>

        <!-- Operations Section -->
        <div class="nav-section-title px-4 mt-3 mb-1 text-uppercase small text-muted" data-en="Operations" data-ar="العمليات">Operations</div>
        <a href="index.php?page=sales" class="nav-link <?= isset($_GET['page']) && $_GET['page'] === 'sales' ? 'active' : '' ?>">
            <i class="bi bi-cart"></i> <span data-en="Sales Invoices" data-ar="فواتير المبيعات">Sales Invoices</span>
        </a>
        <a href="index.php?page=purchases" class="nav-link <?= isset($_GET['page']) && $_GET['page'] === 'purchases' ? 'active' : '' ?>">
            <i class="bi bi-bag"></i> <span data-en="Purchase Invoices" data-ar="فواتير المشتريات">Purchase Invoices</span>
        </a>
        <a href="#" class="nav-link">
            <i class="bi bi-wallet2"></i> <span data-en="Expenses" data-ar="المصروفات">Expenses</span>
        </a>

        <!-- Inventory Section -->
        <div class="nav-section-title px-4 mt-3 mb-1 text-uppercase small text-muted" data-en="Inventory" data-ar="المخزون">Inventory</div>
        <a href="index.php?page=items" class="nav-link <?= isset($_GET['page']) && $_GET['page'] === 'items' ? 'active' : '' ?>">
            <i class="bi bi-box-seam"></i> <span data-en="Items" data-ar="الأصناف">Items</span>
        </a>
        <a href="index.php?page=categories" class="nav-link <?= isset($_GET['page']) && $_GET['page'] === 'categories' ? 'active' : '' ?>">
            <i class="bi bi-tags"></i> <span data-en="Categories" data-ar="الفئات">Categories</span>
        </a>
        <a href="index.php?page=units" class="nav-link <?= isset($_GET['page']) && $_GET['page'] === 'units' ? 'active' : '' ?>">
            <i class="bi bi-calculator"></i> <span data-en="Units" data-ar="الوحدات">Units</span>
        </a>

        <!-- People Section -->
        <div class="nav-section-title px-4 mt-3 mb-1 text-uppercase small text-muted" data-en="Relationships" data-ar="العلاقات">Relationships</div>
        <a href="index.php?page=customers" class="nav-link <?= isset($_GET['page']) && $_GET['page'] === 'customers' ? 'active' : '' ?>">
            <i class="bi bi-people"></i> <span data-en="Customers" data-ar="العملاء">Customers</span>
        </a>
        <a href="index.php?page=suppliers" class="nav-link <?= isset($_GET['page']) && $_GET['page'] === 'suppliers' ? 'active' : '' ?>">
            <i class="bi bi-truck"></i> <span data-en="Suppliers" data-ar="الموردون">Suppliers</span>
        </a>

        <!-- Configuration Section -->
        <div class="nav-section-title px-4 mt-3 mb-1 text-uppercase small text-muted" data-en="Configuration" data-ar="الإعدادات">Configuration</div>
        <a href="index.php?page=payment_methods" class="nav-link <?= isset($_GET['page']) && $_GET['page'] === 'payment_methods' ? 'active' : '' ?>">
            <i class="bi bi-credit-card"></i> <span data-en="Payment Methods" data-ar="طرق الدفع">Payment Methods</span>
        </a>
        <a href="#" class="nav-link">
            <i class="bi bi-person-badge"></i> <span data-en="HR" data-ar="الموارد البشرية">HR</span>
        </a>
    </nav>
</div>

<div class="main-content">
    <header class="topbar">
        <h4 class="m-0">
            <?php 
            $titles = [
                'dashboard' => ['en' => 'Dashboard', 'ar' => 'لوحة القيادة'],
                'customers' => ['en' => 'Customers', 'ar' => 'العملاء'],
                'suppliers' => ['en' => 'Suppliers', 'ar' => 'الموردون'],
                'categories' => ['en' => 'Stock Categories', 'ar' => 'فئات المخزون'],
                'units' => ['en' => 'Stock Units', 'ar' => 'وحدات المخزون'],
                'items' => ['en' => 'Stock Items', 'ar' => 'أصناف المخزون'],
                'payment_methods' => ['en' => 'Payment Methods', 'ar' => 'طرق الدفع'],
                'sales' => ['en' => 'Sales Invoices', 'ar' => 'فواتير المبيعات'],
                'purchases' => ['en' => 'Purchase Invoices', 'ar' => 'فواتير المشتريات'],
            ];
            $currTitle = $titles[$page] ?? $titles['dashboard'];
            ?>
            <span data-en="<?= $currTitle['en'] ?>" data-ar="<?= $currTitle['ar'] ?>"><?= $currTitle['en'] ?></span>
        </h4>
        <div class="d-flex align-items-center">
            <button id="langToggle" class="btn btn-outline-secondary btn-sm me-3">
                <i class="bi bi-translate"></i> <span data-en="العربية" data-ar="English">العربية</span>
            </button>
            <div class="dropdown">
                <button class="btn btn-link dropdown-toggle text-dark text-decoration-none" type="button" data-bs-toggle="dropdown">
                    <i class="bi bi-person-circle"></i> Admin
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#" data-en="Profile" data-ar="الملف الشخصي">Profile</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#" data-en="Logout" data-ar="تسجيل الخروج">Logout</a></li>
                </ul>
            </div>
        </div>
    </header>

    <?php if ($message): ?>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <?= $message ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <?php endif; ?>

    <?php if ($page === 'dashboard'): ?>
    <div class="row g-4 mb-4">
        <div class="col-md-3">
            <div class="card p-3 border-start border-primary border-4">
                <div class="text-muted small" data-en="Total Sales" data-ar="إجمالي المبيعات">Total Sales</div>
                <div class="h4 m-0">$24,500</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card p-3 border-start border-success border-4">
                <div class="text-muted small" data-en="Total Customers" data-ar="إجمالي العملاء">Total Customers</div>
                <div class="h4 m-0"><?= $data['stats']['total_customers'] ?></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card p-3 border-start border-info border-4">
                <div class="text-muted small" data-en="Total Items" data-ar="إجمالي الأصناف">Total Items</div>
                <div class="h4 m-0"><?= $data['stats']['total_items'] ?></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card p-3 border-start border-warning border-4">
                <div class="text-muted small" data-en="Net Profit" data-ar="صافي الربح">Net Profit</div>
                <div class="h4 m-0">$20,300</div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="card p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="m-0" data-en="Recent Customers" data-ar="العملاء الحاليين">Recent Customers</h5>
                    <a href="index.php?page=customers" class="btn btn-outline-primary btn-sm">
                        <span data-en="View All" data-ar="عرض الكل">View All</span>
                    </a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead>
                            <tr>
                                <th data-en="Name" data-ar="الاسم">Name</th>
                                <th data-en="Phone" data-ar="الهاتف">Phone</th>
                                <th data-en="Balance" data-ar="الرصيد" class="text-end">Balance</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($data['customers'] as $c): ?>
                            <tr>
                                <td><?= htmlspecialchars($c['name']) ?></td>
                                <td><?= htmlspecialchars($c['phone']) ?></td>
                                <td class="text-end">$<?= number_format((float)$c['balance'], 2) ?></td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card p-4">
                <h5 class="mb-4" data-en="Quick Links" data-ar="روابط سريعة">Quick Links</h5>
                <div class="list-group list-group-flush">
                    <button class="list-group-item list-group-item-action border-0 px-0" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
                        <i class="bi bi-person-plus text-primary"></i> <span data-en="Add Customer" data-ar="إضافة عميل">Add Customer</span>
                    </button>
                    <button class="list-group-item list-group-item-action border-0 px-0" data-bs-toggle="modal" data-bs-target="#addItemModal">
                        <i class="bi bi-box-seam text-success"></i> <span data-en="Add Item" data-ar="إضافة صنف">Add Item</span>
                    </button>
                    <button class="list-group-item list-group-item-action border-0 px-0" data-bs-toggle="modal" data-bs-target="#importItemsModal">
                        <i class="bi bi-file-earmark-excel text-success"></i> <span data-en="Import Items" data-ar="استيراد أصناف">Import Items</span>
                    </button>
                    <a href="index.php?page=sales" class="list-group-item list-group-item-action border-0 px-0">
                        <i class="bi bi-cart text-primary"></i> <span data-en="Sales Invoices" data-ar="فواتير المبيعات">Sales Invoices</span>
                    </a>
                    <a href="index.php?page=purchases" class="list-group-item list-group-item-action border-0 px-0">
                        <i class="bi bi-bag text-warning"></i> <span data-en="Purchase Invoices" data-ar="فواتير المشتريات">Purchase Invoices</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <?php elseif ($page === 'customers' || $page === 'suppliers'): ?>
    <div class="card p-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="m-0" data-en="<?= $currTitle['en'] ?> Management" data-ar="إدارة <?= $currTitle['ar'] ?>"><?= $currTitle['en'] ?> Management</h5>
            <div>
                <button class="btn btn-outline-success me-2" data-bs-toggle="modal" data-bs-target="<?= $page === 'suppliers' ? '#importSuppliersModal' : '#importCustomersModal' ?>">
                    <i class="bi bi-file-earmark-excel"></i> <span data-en="Import Excel" data-ar="استيراد من اكسل">Import Excel</span>
                </button>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
                    <i class="bi bi-plus-lg"></i> <span data-en="Add <?= $currTitle['en'] ?>" data-ar="إضافة <?= $currTitle['ar'] ?>">Add <?= $currTitle['en'] ?></span>
                </button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th data-en="Name" data-ar="الاسم">Name</th>
                        <th data-en="Email" data-ar="البريد">Email</th>
                        <th data-en="Phone" data-ar="الهاتف">Phone</th>
                        <th data-en="Balance" data-ar="الرصيد" class="text-end">Balance</th>
                        <th data-en="Actions" data-ar="الإجراءات" class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($data['customers'] as $c): ?>
                    <tr>
                        <td><?= htmlspecialchars($c['name']) ?></td>
                        <td><?= htmlspecialchars($c['email']) ?></td>
                        <td><?= htmlspecialchars($c['phone']) ?></td>
                        <td class="text-end">$<?= number_format((float)$c['balance'], 2) ?></td>
                        <td class="text-end">
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-outline-primary" title="Edit" data-bs-toggle="modal" data-bs-target="#editCustomerModal<?= $c['id'] ?>"><i class="bi bi-pencil"></i></button>
                                <form method="POST" class="d-inline" onsubmit="return confirm('Are you sure?')">
                                    <input type="hidden" name="id" value="<?= $c['id'] ?>">
                                    <button type="submit" name="delete_customer" class="btn btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
                                </form>
                            </div>

                            <!-- Edit Customer Modal -->
                            <div class="modal fade" id="editCustomerModal<?= $c['id'] ?>" tabindex="-1">
                                <div class="modal-dialog">
                                    <div class="modal-content border-0 shadow text-start">
                                        <div class="modal-header">
                                            <h5 class="modal-title">
                                                <span data-en="Edit <?= $currTitle['en'] ?>" data-ar="تعديل <?= $currTitle['ar'] ?>">Edit <?= $currTitle['en'] ?></span>
                                            </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <form method="POST">
                                            <input type="hidden" name="id" value="<?= $c['id'] ?>">
                                            <div class="modal-body">
                                                <div class="mb-3">
                                                    <label class="form-label" data-en="Name" data-ar="الاسم">Name</label>
                                                    <input type="text" name="name" class="form-control" value="<?= htmlspecialchars($c['name']) ?>" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label" data-en="Email" data-ar="البريد الإلكتروني">Email</label>
                                                    <input type="email" name="email" class="form-control" value="<?= htmlspecialchars($c['email'] ?? '') ?>">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label" data-en="Phone" data-ar="الهاتف">Phone</label>
                                                    <input type="text" name="phone" class="form-control" value="<?= htmlspecialchars($c['phone'] ?? '') ?>">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label" data-en="Balance" data-ar="الرصيد">Balance</label>
                                                    <input type="number" step="0.01" name="balance" class="form-control" value="<?= (float)$c['balance'] ?>">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                                                <button type="submit" name="edit_customer" class="btn btn-primary" data-en="Update" data-ar="تحديث">Update</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <?php elseif ($page === 'categories'): ?>
    <div class="card p-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="m-0" data-en="Stock Categories" data-ar="فئات المخزون">Stock Categories</h5>
            <div>
                <button class="btn btn-outline-success me-2" data-bs-toggle="modal" data-bs-target="#importCategoriesModal">
                    <i class="bi bi-file-earmark-excel"></i> <span data-en="Import Excel" data-ar="استيراد من اكسل">Import Excel</span>
                </button>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
                    <i class="bi bi-plus-lg"></i> <span data-en="Add Category" data-ar="إضافة فئة">Add Category</span>
                </button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th data-en="ID" data-ar="المعرف">ID</th>
                        <th data-en="Name (EN)" data-ar="الاسم (إنجليزي)">Name (EN)</th>
                        <th data-en="Name (AR)" data-ar="الاسم (عربي)">Name (AR)</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($data['categories'] as $cat): ?>
                    <tr>
                        <td><?= $cat['id'] ?></td>
                        <td><?= htmlspecialchars($cat['name_en']) ?></td>
                        <td><?= htmlspecialchars($cat['name_ar']) ?></td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <?php elseif ($page === 'units'): ?>
    <div class="card p-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="m-0" data-en="Stock Units" data-ar="وحدات المخزون">Stock Units</h5>
            <div>
                <button class="btn btn-outline-success me-2" data-bs-toggle="modal" data-bs-target="#importUnitsModal">
                    <i class="bi bi-file-earmark-excel"></i> <span data-en="Import Excel" data-ar="استيراد من اكسل">Import Excel</span>
                </button>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUnitModal">
                    <i class="bi bi-plus-lg"></i> <span data-en="Add Unit" data-ar="إضافة وحدة">Add Unit</span>
                </button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th data-en="Name (EN)" data-ar="الاسم (إنجليزي)">Name (EN)</th>
                        <th data-en="Short (EN)" data-ar="الاختصار (إنجليزي)">Short (EN)</th>
                        <th data-en="Name (AR)" data-ar="الاسم (عربي)">Name (AR)</th>
                        <th data-en="Short (AR)" data-ar="الاختصار (عربي)">Short (AR)</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($data['units'] as $u): ?>
                    <tr>
                        <td><?= htmlspecialchars($u['name_en']) ?></td>
                        <td><?= htmlspecialchars($u['short_name_en']) ?></td>
                        <td><?= htmlspecialchars($u['name_ar']) ?></td>
                        <td><?= htmlspecialchars($u['short_name_ar']) ?></td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <?php elseif ($page === 'items'): ?>
    <div class="card p-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="m-0" data-en="Stock Items" data-ar="أصناف المخزون">Stock Items</h5>
            <div>
                <button class="btn btn-outline-success me-2" data-bs-toggle="modal" data-bs-target="#importItemsModal">
                    <i class="bi bi-file-earmark-excel"></i> <span data-en="Import Excel" data-ar="استيراد من اكسل">Import Excel</span>
                </button>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addItemModal">
                    <i class="bi bi-plus-lg"></i> <span data-en="Add Item" data-ar="إضافة صنف">Add Item</span>
                </button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th data-en="Image" data-ar="الصورة">Image</th>
                        <th data-en="SKU" data-ar="الباركود">SKU</th>
                        <th data-en="Name" data-ar="الاسم">Name</th>
                        <th data-en="Category" data-ar="الفئة">Category</th>
                        <th data-en="Supplier" data-ar="المورد">Supplier</th>
                        <th data-en="Stock Level" data-ar="المخزون">Stock Level</th>
                        <th data-en="Expiry" data-ar="تاريخ الانتهاء">Expiry</th>
                        <th data-en="Actions" data-ar="الإجراءات">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($data['items'] as $item): ?>
                    <tr>
                        <td>
                            <?php if ($item['image_path']): ?>
                                <img src="<?= htmlspecialchars($item['image_path']) ?>" alt="item" style="width: 40px; height: 40px; object-fit: cover;" class="rounded">
                            <?php else: ?>
                                <div class="bg-light rounded d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                    <i class="bi bi-image text-muted"></i>
                                </div>
                            <?php endif; ?>
                        </td>
                        <td><?= htmlspecialchars($item['sku']) ?></td>
                        <td>
                            <div class="fw-bold"><?= htmlspecialchars($item['name_en']) ?></div>
                            <div class="small text-muted"><?= htmlspecialchars($item['name_ar']) ?></div>
                        </td>
                        <td><span data-en="<?= htmlspecialchars($item['cat_en']) ?>" data-ar="<?= htmlspecialchars($item['cat_ar']) ?>"><?= htmlspecialchars($item['cat_en']) ?></span></td>
                        <td><?= htmlspecialchars($item['supplier_name'] ?? '---') ?></td>
                        <td>
                            <div class="text-end">
                                <strong><?= number_format((float)$item['stock_quantity'], 2) ?></strong>
                                <div class="small text-muted">Min: <?= number_format((float)$item['min_stock_level'], 2) ?></div>
                                <?php if ($item['stock_quantity'] <= $item['min_stock_level']): ?>
                                    <span class="badge bg-danger" data-en="Low Stock" data-ar="مخزون منخفض">Low Stock</span>
                                <?php endif; ?>
                            </div>
                        </td>
                        <td><?= $item['expiry_date'] ?: '---' ?></td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-outline-info" title="View" data-bs-toggle="modal" data-bs-target="#viewItemModal<?= $item['id'] ?>"><i class="bi bi-eye"></i></button>
                                <button class="btn btn-outline-primary" title="Edit" data-bs-toggle="modal" data-bs-target="#editItemModal<?= $item['id'] ?>"><i class="bi bi-pencil"></i></button>
                                <form method="POST" class="d-inline" onsubmit="return confirm('Are you sure?')">
                                    <input type="hidden" name="id" value="<?= $item['id'] ?>">
                                    <button type="submit" name="delete_item" class="btn btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
                                </form>
                            </div>

                            <!-- Edit Item Modal -->
                            <div class="modal fade" id="editItemModal<?= $item['id'] ?>" tabindex="-1">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content border-0 shadow">
                                        <div class="modal-header">
                                            <h5 class="modal-title" data-en="Edit Item" data-ar="تعديل الصنف">Edit Item</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <form method="POST" enctype="multipart/form-data">
                                            <input type="hidden" name="id" value="<?= $item['id'] ?>">
                                            <div class="modal-body">
                                                <div class="row g-3">
                                                    <div class="col-md-6">
                                                        <label class="form-label" data-en="Name (EN)" data-ar="الاسم (إنجليزي)">Name (EN)</label>
                                                        <input type="text" name="name_en" class="form-control" value="<?= htmlspecialchars($item['name_en']) ?>" required>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label" data-en="Name (AR)" data-ar="الاسم (عربي)">Name (AR)</label>
                                                        <input type="text" name="name_ar" class="form-control" value="<?= htmlspecialchars($item['name_ar']) ?>" required>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label class="form-label" data-en="Category" data-ar="الفئة">Category</label>
                                                        <select name="category_id" class="form-select">
                                                            <option value="">---</option>
                                                            <?php foreach ($data['categories'] ?? [] as $c): ?>
                                                            <option value="<?= $c['id'] ?>" <?= $item['category_id'] == $c['id'] ? 'selected' : '' ?>><?= htmlspecialchars($c['name_en']) ?> / <?= htmlspecialchars($c['name_ar']) ?></option>
                                                            <?php endforeach; ?>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label class="form-label" data-en="Unit" data-ar="الوحدة">Unit</label>
                                                        <select name="unit_id" class="form-select">
                                                            <option value="">---</option>
                                                            <?php foreach ($data['units'] ?? [] as $u): ?>
                                                            <option value="<?= $u['id'] ?>" <?= $item['unit_id'] == $u['id'] ? 'selected' : '' ?>><?= htmlspecialchars($u['short_name_en']) ?> / <?= htmlspecialchars($u['short_name_ar']) ?></option>
                                                            <?php endforeach; ?>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label class="form-label" data-en="Supplier" data-ar="المورد">Supplier</label>
                                                        <select name="supplier_id" class="form-select">
                                                            <option value="">---</option>
                                                            <?php foreach ($data['suppliers'] ?? [] as $s): ?>
                                                            <option value="<?= $s['id'] ?>" <?= $item['supplier_id'] == $s['id'] ? 'selected' : '' ?>><?= htmlspecialchars($s['name']) ?></option>
                                                            <?php endforeach; ?>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label" data-en="SKU / Barcode" data-ar="الباركود">SKU / Barcode</label>
                                                        <div class="input-group">
                                                            <input type="text" name="sku" class="form-control" value="<?= htmlspecialchars($item['sku']) ?>">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="form-label" data-en="Sale Price" data-ar="سعر البيع">Sale Price</label>
                                                        <input type="number" step="0.01" name="sale_price" class="form-control" value="<?= (float)$item['sale_price'] ?>">
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label class="form-label" data-en="Purchase Price" data-ar="سعر الشراء">Purchase Price</label>
                                                        <input type="number" step="0.01" name="purchase_price" class="form-control" value="<?= (float)$item['purchase_price'] ?>">
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label class="form-label" data-en="Stock Quantity" data-ar="الكمية">Stock Quantity</label>
                                                        <input type="number" step="0.01" name="stock_quantity" class="form-control" value="<?= (float)$item['stock_quantity'] ?>">
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label class="form-label" data-en="Min Stock Level" data-ar="الحد الأدنى للمخزون">Min Stock Level</label>
                                                        <input type="number" step="0.01" name="min_stock_level" class="form-control" value="<?= (float)$item['min_stock_level'] ?>">
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label class="form-label" data-en="Change Picture" data-ar="تغيير الصورة">Change Picture</label>
                                                        <input type="file" name="image" class="form-control" accept="image/*">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-check form-switch mt-4">
                                                            <input class="form-check-input hasExpiryToggleEdit" type="checkbox" id="hasExpiryToggle<?= $item['id'] ?>" <?= $item['expiry_date'] ? 'checked' : '' ?>>
                                                            <label class="form-check-label" for="hasExpiryToggle<?= $item['id'] ?>" data-en="Has Expiry Date?" data-ar="هل له تاريخ انتهاء؟">Has Expiry Date?</label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 expiryDateContainerEdit" style="<?= $item['expiry_date'] ? 'display: block;' : 'display: none;' ?>">
                                                        <label class="form-label" data-en="Expiry Date" data-ar="تاريخ الانتهاء">Expiry Date</label>
                                                        <input type="date" name="expiry_date" class="form-control" value="<?= $item['expiry_date'] ?>">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                                                <button type="submit" name="edit_item" class="btn btn-primary" data-en="Update Item" data-ar="تحديث الصنف">Update Item</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <!-- View Item Modal -->
                            <div class="modal fade" id="viewItemModal<?= $item['id'] ?>" tabindex="-1">
                                <div class="modal-dialog">
                                    <div class="modal-content border-0 shadow">
                                        <div class="modal-header">
                                            <h5 class="modal-title"><?= htmlspecialchars($item['name_en'] ) ?> / <?= htmlspecialchars($item['name_ar']) ?></h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body text-start">
                                            <div class="text-center mb-4">
                                                <?php if ($item['image_path']): ?>
                                                    <img src="<?= htmlspecialchars($item['image_path']) ?>" class="img-fluid rounded shadow-sm" style="max-height: 200px;">
                                                <?php else: ?>
                                                    <div class="bg-light py-5 rounded"><i class="bi bi-image h1 text-muted"></i></div>
                                                <?php endif; ?>
                                            </div>
                                            <div class="row g-3">
                                                <div class="col-6"><small class="text-muted d-block">SKU</small> <?= htmlspecialchars($item['sku'] ?: '---') ?></div>
                                                <div class="col-6"><small class="text-muted d-block">Category</small> <?= htmlspecialchars($item['cat_en'] ?: '---') ?></div>
                                                <div class="col-6"><small class="text-muted d-block">Supplier</small> <?= htmlspecialchars($item['supplier_name'] ?? '---') ?></div>
                                                <div class="col-6"><small class="text-muted d-block">Unit</small> <?= htmlspecialchars($item['unit_en'] ?: '---') ?></div>
                                                <div class="col-4"><small class="text-muted d-block">Purchase Price</small> $<?= number_format((float)$item['purchase_price'], 2) ?></div>
                                                <div class="col-4"><small class="text-muted d-block">Sale Price</small> $<?= number_format((float)$item['sale_price'], 2) ?></div>
                                                <div class="col-4"><small class="text-muted d-block">Stock</small> <?= number_format((float)$item['stock_quantity'], 2) ?></div>
                                                <div class="col-6"><small class="text-muted d-block">Min Stock</small> <?= number_format((float)$item['min_stock_level'], 2) ?></div>
                                                <div class="col-6"><small class="text-muted d-block">Expiry Date</small> <?= $item['expiry_date'] ?: '---' ?></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
    <?php elseif ($page === 'sales' || $page === 'purchases'): ?>
    <div class="card p-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="m-0" data-en="<?= $currTitle['en'] ?>" data-ar="<?= $currTitle['ar'] ?>"><?= $currTitle['en'] ?></h5>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addInvoiceModal">
                <i class="bi bi-plus-lg"></i> <span data-en="Create New Invoice" data-ar="إنشاء فاتورة جديدة">Create New Invoice</span>
            </button>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th data-en="Invoice #" data-ar="رقم الفاتورة">Invoice #</th>
                        <th data-en="Date" data-ar="التاريخ">Date</th>
                        <th data-en="<?= $page === 'sales' ? 'Customer' : 'Supplier' ?>" data-ar="<?= $page === 'sales' ? 'العميل' : 'المورد' ?>"><?= $page === 'sales' ? 'Customer' : 'Supplier' ?></th>
                        <th data-en="Total Amount" data-ar="إجمالي المبلغ" class="text-end">Total Amount</th>
                        <th data-en="Actions" data-ar="الإجراءات" class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php 
                    foreach ($data['invoices'] as $inv): 
                        // Fetch items for this invoice
                        $items = db()->prepare("SELECT ii.*, i.name_en, i.name_ar 
                                                FROM invoice_items ii 
                                                JOIN stock_items i ON ii.item_id = i.id 
                                                WHERE ii.invoice_id = ?");
                        $items->execute([$inv['id']]);
                        $inv['items'] = $items->fetchAll(PDO::FETCH_ASSOC);
                    ?>
                    <tr>
                        <td>INV-<?= str_pad((string)$inv['id'], 5, '0', STR_PAD_LEFT) ?></td>
                        <td><?= $inv['invoice_date'] ?></td>
                        <td><?= htmlspecialchars($inv['customer_name'] ?? '---') ?></td>
                        <td class="text-end fw-bold">$<?= number_format((float)$inv['total_amount'], 2) ?></td>
                        <td class="text-end">
                            <button class="btn btn-sm btn-outline-info view-invoice-btn" 
                                    data-json='<?= json_encode($inv, JSON_HEX_APOS | JSON_HEX_QUOT) ?>' 
                                    data-bs-toggle="modal" data-bs-target="#viewInvoiceModal">
                                <i class="bi bi-printer"></i> <span data-en="View & Print" data-ar="عرض وطباعة">View & Print</span>
                            </button>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Add Invoice Modal -->
    <div class="modal fade" id="addInvoiceModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content border-0 shadow">
                <div class="modal-header">
                    <h5 class="modal-title" data-en="Create <?= $page === 'sales' ? 'Sales' : 'Purchase' ?> Invoice" data-ar="إنشاء فاتورة <?= $page === 'sales' ? 'مبيعات' : 'مشتريات' ?>">Create <?= $page === 'sales' ? 'Sales' : 'Purchase' ?> Invoice</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="POST">
                    <input type="hidden" name="type" value="<?= $page === 'sales' ? 'sale' : 'purchase' ?>">
                    <div class="modal-body">
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label class="form-label" data-en="<?= $page === 'sales' ? 'Customer' : 'Supplier' ?>" data-ar="<?= $page === 'sales' ? 'العميل' : 'المورد' ?>"><?= $page === 'sales' ? 'Customer' : 'Supplier' ?></label>
                                <select name="customer_id" class="form-select" required>
                                    <option value="">--- Select ---</option>
                                    <?php foreach ($data['customers_list'] as $c): ?>
                                    <option value="<?= $c['id'] ?>"><?= htmlspecialchars($c['name']) ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" data-en="Invoice Date" data-ar="تاريخ الفاتورة">Invoice Date</label>
                                <input type="date" name="invoice_date" class="form-control" value="<?= date('Y-m-d') ?>" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" data-en="Payment Type" data-ar="نوع الدفع">Payment Type</label>
                                <select name="payment_type" class="form-select" required>
                                    <option value="cash" data-en="Cash" data-ar="نقداً">Cash</option>
                                    <option value="credit" data-en="Credit" data-ar="آجل">Credit</option>
                                </select>
                            </div>
                        </div>

                        <div class="mb-4 position-relative">
                            <label class="form-label fw-bold" data-en="Search Product (SKU / Name)" data-ar="بحث عن صنف (باركود / اسم)">Search Product (SKU / Name)</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-search"></i></span>
                                <input type="text" id="productSearchInput" class="form-control" placeholder="Search by SKU, Name EN or AR..." data-en="Search by SKU, Name EN or AR..." data-ar="ابحث بالباركود، الاسم الإنجليزي أو العربي...">
                            </div>
                            <div id="searchSuggestions" class="list-group position-absolute w-100 shadow-lg" style="z-index: 1050; display: none;"></div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered" id="invoiceItemsTable">
                                <thead class="bg-light">
                                    <tr>
                                        <th style="width: 40%;" data-en="Item" data-ar="الصنف">Item</th>
                                        <th data-en="Quantity" data-ar="الكمية">Quantity</th>
                                        <th data-en="Unit Price" data-ar="سعر الوحدة">Unit Price</th>
                                        <th data-en="Total" data-ar="الإجمالي">Total</th>
                                        <th style="width: 50px;"></th>
                                    </tr>
                                </thead>
                                <tbody id="invoiceItemsTableBody">
                                    <!-- Rows added dynamically via search -->
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="3" class="text-end fw-bold" data-en="Grand Total" data-ar="الإجمالي الكلي">Grand Total</td>
                                        <td class="fw-bold" id="grandTotal">$0.00</td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                        <button type="submit" name="add_invoice" class="btn btn-success" data-en="Save Invoice" data-ar="حفظ الفاتورة">Save Invoice</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- View Invoice Modal (Printable) -->
    <div class="modal fade" id="viewInvoiceModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content border-0 shadow">
                <div class="modal-header d-print-none">
                    <h5 class="modal-title" data-en="Invoice Details" data-ar="تفاصيل الفاتورة">Invoice Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-5" id="printableInvoice">
                    <!-- Loaded via AJAX or static content populated by JS -->
                    <div class="text-center mb-5">
                        <h2 class="fw-bold text-uppercase" data-en="INVOICE" data-ar="فاتورة">INVOICE</h2>
                        <div id="invoiceTypeLabel" class="badge bg-primary text-uppercase"></div>
                    </div>
                    
                    <div class="row mb-4">
                        <div class="col-6">
                            <h6 class="text-muted text-uppercase small" data-en="Billed To" data-ar="فاتورة إلى">Billed To</h6>
                            <h5 id="invCustomerName" class="mb-1"></h5>
                            <div id="invCustomerInfo" class="text-muted small"></div>
                        </div>
                        <div class="col-6 text-end">
                            <h6 class="text-muted text-uppercase small" data-en="Invoice Details" data-ar="تفاصيل الفاتورة">Invoice Details</h6>
                            <div><strong data-en="Invoice #" data-ar="رقم الفاتورة">Invoice #</strong> <span id="invNumber"></span></div>
                            <div><strong data-en="Date" data-ar="التاريخ">Date:</strong> <span id="invDate"></span></div>
                            <div><strong data-en="Payment" data-ar="الدفع">Payment:</strong> <span id="invPaymentType"></span></div>
                        </div>
                    </div>

                    <table class="table table-bordered mb-4">
                        <thead class="bg-light">
                            <tr>
                                <th data-en="Description" data-ar="الوصف">Description</th>
                                <th class="text-center" data-en="Qty" data-ar="الكمية">Qty</th>
                                <th class="text-end" data-en="Price" data-ar="السعر">Price</th>
                                <th class="text-end" data-en="Total" data-ar="الإجمالي">Total</th>
                            </tr>
                        </thead>
                        <tbody id="invItemsBody">
                            <!-- Items populated by JS -->
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3" class="text-end fw-bold" data-en="Total" data-ar="الإجمالي">Total</td>
                                <td class="text-end fw-bold" id="invGrandTotal"></td>
                            </tr>
                        </tfoot>
                    </table>

                    <div class="mt-5 pt-5 border-top text-center text-muted small">
                        <p data-en="Thank you for your business!" data-ar="شكراً لتعاملكم معنا!">Thank you for your business!</p>
                    </div>
                </div>
                <div class="modal-footer d-print-none">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Close" data-ar="إغلاق">Close</button>
                    <button type="button" class="btn btn-primary" onclick="window.print()">
                        <i class="bi bi-printer"></i> <span data-en="Print Invoice" data-ar="طباعة الفاتورة">Print Invoice</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <?php elseif ($page === 'payment_methods'): ?>
    <div class="card p-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="m-0" data-en="Payment Methods" data-ar="طرق الدفع">Payment Methods</h5>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPaymentMethodModal">
                <i class="bi bi-plus-lg"></i> <span data-en="Add Payment Method" data-ar="إضافة طريقة دفع">Add Payment Method</span>
            </button>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th data-en="ID" data-ar="المعرف">ID</th>
                        <th data-en="Name (EN)" data-ar="الاسم (EN)">Name (EN)</th>
                        <th data-en="Name (AR)" data-ar="الاسم (AR)">Name (AR)</th>
                        <th data-en="Actions" data-ar="الإجراءات" class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($data['payment_methods'] as $pm): ?>
                    <tr>
                        <td><?= $pm['id'] ?></td>
                        <td><?= htmlspecialchars($pm['name_en'] ?? '') ?></td>
                        <td><?= htmlspecialchars($pm['name_ar'] ?? '') ?></td>
                        <td class="text-end">
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-outline-primary" title="Edit" data-bs-toggle="modal" data-bs-target="#editPaymentMethodModal<?= $pm['id'] ?>"><i class="bi bi-pencil"></i></button>
                                <form method="POST" class="d-inline" onsubmit="return confirm('Are you sure?')">
                                    <input type="hidden" name="id" value="<?= $pm['id'] ?>">
                                    <button type="submit" name="delete_payment_method" class="btn btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
                                </form>
                            </div>

                            <!-- Edit Payment Method Modal -->
                            <div class="modal fade" id="editPaymentMethodModal<?= $pm['id'] ?>" tabindex="-1">
                                <div class="modal-dialog">
                                    <div class="modal-content border-0 shadow text-start">
                                        <div class="modal-header">
                                            <h5 class="modal-title" data-en="Edit Payment Method" data-ar="تعديل طريقة الدفع">Edit Payment Method</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <form method="POST">
                                            <input type="hidden" name="id" value="<?= $pm['id'] ?>">
                                            <div class="modal-body">
                                                <div class="mb-3">
                                                    <label class="form-label" data-en="Name (EN)" data-ar="الاسم (EN)">Name (EN)</label>
                                                    <input type="text" name="name_en" class="form-control" value="<?= htmlspecialchars($pm['name_en'] ?? '') ?>" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label" data-en="Name (AR)" data-ar="الاسم (AR)">Name (AR)</label>
                                                    <input type="text" name="name_ar" class="form-control" value="<?= htmlspecialchars($pm['name_ar'] ?? '') ?>" required>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                                                <button type="submit" name="edit_payment_method" class="btn btn-primary" data-en="Update" data-ar="تحديث">Update</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Add Payment Method Modal -->
    <div class="modal fade" id="addPaymentMethodModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content border-0 shadow">
                <div class="modal-header">
                    <h5 class="modal-title" data-en="Add Payment Method" data-ar="إضافة طريقة دفع">Add Payment Method</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="POST">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label" data-en="Name (EN)" data-ar="الاسم (EN)">Name (EN)</label>
                            <input type="text" name="name_en" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" data-en="Name (AR)" data-ar="الاسم (AR)">Name (AR)</label>
                            <input type="text" name="name_ar" class="form-control" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                        <button type="submit" name="add_payment_method" class="btn btn-primary" data-en="Save" data-ar="حفظ">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <?php endif; ?>
</div>

<!-- Add Customer Modal -->
<div class="modal fade" id="addCustomerModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header">
                <h5 class="modal-title">
                    <?php if ($page === 'suppliers'): ?>
                        <span data-en="Add New Supplier" data-ar="إضافة مورد جديد">Add New Supplier</span>
                    <?php else: ?>
                        <span data-en="Add New Customer" data-ar="إضافة عميل جديد">Add New Customer</span>
                    <?php endif; ?>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST">
                <input type="hidden" name="type" value="<?= $page === 'suppliers' ? 'supplier' : 'customer' ?>">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label" data-en="Name" data-ar="الاسم">Name</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" data-en="Email" data-ar="البريد الإلكتروني">Email</label>
                        <input type="email" name="email" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" data-en="Phone" data-ar="الهاتف">Phone</label>
                        <input type="text" name="phone" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" data-en="Initial Balance" data-ar="الرصيد الافتتاحي">Initial Balance</label>
                        <input type="number" step="0.01" name="balance" class="form-control" value="0.00">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                    <button type="submit" name="add_customer" class="btn btn-primary" data-en="Save" data-ar="حفظ">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Item Modal -->
<div class="modal fade" id="addItemModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header">
                <h5 class="modal-title" data-en="Add New Item" data-ar="إضافة صنف جديد">Add New Item</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label" data-en="Name (EN)" data-ar="الاسم (إنجليزي)">Name (EN)</label>
                            <input type="text" name="name_en" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" data-en="Name (AR)" data-ar="الاسم (عربي)">Name (AR)</label>
                            <input type="text" name="name_ar" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" data-en="Category" data-ar="الفئة">Category</label>
                            <select name="category_id" class="form-select">
                                <option value="">---</option>
                                <?php foreach ($data['categories'] ?? [] as $c): ?>
                                <option value="<?= $c['id'] ?>"><?= htmlspecialchars($c['name_en']) ?> / <?= htmlspecialchars($c['name_ar']) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" data-en="Unit" data-ar="الوحدة">Unit</label>
                            <select name="unit_id" class="form-select">
                                <option value="">---</option>
                                <?php foreach ($data['units'] ?? [] as $u): ?>
                                <option value="<?= $u['id'] ?>"><?= htmlspecialchars($u['short_name_en']) ?> / <?= htmlspecialchars($u['short_name_ar']) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" data-en="Supplier" data-ar="المورد">Supplier</label>
                            <select name="supplier_id" class="form-select">
                                <option value="">---</option>
                                <?php foreach ($data['suppliers'] ?? [] as $s): ?>
                                <option value="<?= $s['id'] ?>"><?= htmlspecialchars($s['name']) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" data-en="SKU / Barcode" data-ar="الباركود">SKU / Barcode</label>
                            <div class="input-group">
                                <input type="text" name="sku" id="skuInput" class="form-control">
                                <button class="btn btn-outline-secondary" type="button" id="suggestSkuBtn" data-en="Suggest" data-ar="اقتراح">Suggest</button>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" data-en="Sale Price" data-ar="سعر البيع">Sale Price</label>
                            <input type="number" step="0.01" name="sale_price" class="form-control" value="0.00">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" data-en="Purchase Price" data-ar="سعر الشراء">Purchase Price</label>
                            <input type="number" step="0.01" name="purchase_price" class="form-control" value="0.00">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" data-en="Initial Stock" data-ar="المخزون الحالي">Initial Stock</label>
                            <input type="number" step="0.01" name="stock_quantity" class="form-control" value="0.00">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" data-en="Min Stock Level" data-ar="الحد الأدنى للمخزون">Min Stock Level</label>
                            <input type="number" step="0.01" name="min_stock_level" class="form-control" value="0.00">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" data-en="Item Picture" data-ar="صورة الصنف">Item Picture</label>
                            <input type="file" name="image" class="form-control" accept="image/*">
                        </div>
                        <div class="col-md-6">
                            <div class="form-check form-switch mt-4">
                                <input class="form-check-input" type="checkbox" id="hasExpiryToggle">
                                <label class="form-check-label" for="hasExpiryToggle" data-en="Has Expiry Date?" data-ar="هل له تاريخ انتهاء؟">Has Expiry Date?</label>
                            </div>
                        </div>
                        <div class="col-md-6" id="expiryDateContainer" style="display: none;">
                            <label class="form-label" data-en="Expiry Date" data-ar="تاريخ الانتهاء">Expiry Date</label>
                            <input type="date" name="expiry_date" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                    <button type="submit" name="add_item" class="btn btn-primary" data-en="Save Item" data-ar="حفظ الصنف">Save Item</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Import Items Modal -->
<div class="modal fade" id="importItemsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow text-start">
            <div class="modal-header">
                <h5 class="modal-title" data-en="Import Items from Excel (CSV)" data-ar="استيراد الأصناف من اكسل (CSV)">Import Items from Excel (CSV)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="alert alert-info py-2">
                        <small data-en="Please upload a CSV file with the following columns: SKU, English Name, Arabic Name, Sale Price, Cost Price." data-ar="يرجى رفع ملف CSV بالأعمدة التالية: الباركود، الاسم الإنجليزي، الاسم العربي، سعر البيع، سعر التكلفة.">
                            Please upload a CSV file with the following columns: SKU, English Name, Arabic Name, Sale Price, Cost Price.
                        </small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" data-en="Choose CSV File" data-ar="اختر ملف CSV">Choose CSV File</label>
                        <input type="file" name="excel_file" class="form-control" accept=".csv" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                    <button type="submit" name="import_items" class="btn btn-success" data-en="Import Now" data-ar="استيراد الآن">Import Now</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Import Customers Modal -->
<div class="modal fade" id="importCustomersModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow text-start">
            <div class="modal-header">
                <h5 class="modal-title" data-en="Import Customers from Excel (CSV)" data-ar="استيراد العملاء من اكسل (CSV)">Import Customers from Excel (CSV)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="alert alert-info py-2">
                        <small data-en="Please upload a CSV file with the following columns: Name, Email, Phone, Balance." data-ar="يرجى رفع ملف CSV بالأعمدة التالية: الاسم، البريد الإلكتروني، الهاتف، الرصيد.">
                            Please upload a CSV file with the following columns: Name, Email, Phone, Balance.
                        </small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" data-en="Choose CSV File" data-ar="اختر ملف CSV">Choose CSV File</label>
                        <input type="file" name="excel_file" class="form-control" accept=".csv" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                    <button type="submit" name="import_customers" class="btn btn-success" data-en="Import Now" data-ar="استيراد الآن">Import Now</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Import Suppliers Modal -->
<div class="modal fade" id="importSuppliersModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow text-start">
            <div class="modal-header">
                <h5 class="modal-title" data-en="Import Suppliers from Excel (CSV)" data-ar="استيراد الموردين من اكسل (CSV)">Import Suppliers from Excel (CSV)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="alert alert-info py-2">
                        <small data-en="Please upload a CSV file with the following columns: Name, Email, Phone, Balance." data-ar="يرجى رفع ملف CSV بالأعمدة التالية: الاسم، البريد الإلكتروني، الهاتف، الرصيد.">
                            Please upload a CSV file with the following columns: Name, Email, Phone, Balance.
                        </small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" data-en="Choose CSV File" data-ar="اختر ملف CSV">Choose CSV File</label>
                        <input type="file" name="excel_file" class="form-control" accept=".csv" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                    <button type="submit" name="import_suppliers" class="btn btn-success" data-en="Import Now" data-ar="استيراد الآن">Import Now</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Import Categories Modal -->
<div class="modal fade" id="importCategoriesModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow text-start">
            <div class="modal-header">
                <h5 class="modal-title" data-en="Import Categories from Excel (CSV)" data-ar="استيراد الفئات من اكسل (CSV)">Import Categories from Excel (CSV)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="alert alert-info py-2">
                        <small data-en="Please upload a CSV file with the following columns: Name (EN), Name (AR)." data-ar="يرجى رفع ملف CSV بالأعمدة التالية: الاسم (إنجليزي)، الاسم (عربي).">
                            Please upload a CSV file with the following columns: Name (EN), Name (AR).
                        </small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" data-en="Choose CSV File" data-ar="اختر ملف CSV">Choose CSV File</label>
                        <input type="file" name="excel_file" class="form-control" accept=".csv" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                    <button type="submit" name="import_categories" class="btn btn-success" data-en="Import Now" data-ar="استيراد الآن">Import Now</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Import Units Modal -->
<div class="modal fade" id="importUnitsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow text-start">
            <div class="modal-header">
                <h5 class="modal-title" data-en="Import Units from Excel (CSV)" data-ar="استيراد الوحدات من اكسل (CSV)">Import Units from Excel (CSV)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="alert alert-info py-2">
                        <small data-en="Please upload a CSV file with the following columns: Name (EN), Name (AR), Short (EN), Short (AR)." data-ar="يرجى رفع ملف CSV بالأعمدة التالية: الاسم (إنجليزي)، الاسم (عربي)، الاختصار (إنجليزي)، الاختصار (عربي).">
                            Please upload a CSV file with the following columns: Name (EN), Name (AR), Short (EN), Short (AR).
                        </small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" data-en="Choose CSV File" data-ar="اختر ملف CSV">Choose CSV File</label>
                        <input type="file" name="excel_file" class="form-control" accept=".csv" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                    <button type="submit" name="import_units" class="btn btn-success" data-en="Import Now" data-ar="استيراد الآن">Import Now</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Category Modal -->
<div class="modal fade" id="addCategoryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header">
                <h5 class="modal-title" data-en="Add Category" data-ar="إضافة فئة">Add Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label" data-en="Name (EN)" data-ar="الاسم (إنجليزي)">Name (EN)</label>
                        <input type="text" name="name_en" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" data-en="Name (AR)" data-ar="الاسم (عربي)">Name (AR)</label>
                        <input type="text" name="name_ar" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                    <button type="submit" name="add_category" class="btn btn-primary" data-en="Save" data-ar="حفظ">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Unit Modal -->
<div class="modal fade" id="addUnitModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header">
                <h5 class="modal-title" data-en="Add Unit" data-ar="إضافة وحدة">Add Unit</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label" data-en="Name (EN)" data-ar="الاسم (إنجليزي)">Name (EN)</label>
                            <input type="text" name="name_en" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" data-en="Short Name (EN)" data-ar="الاختصار (إنجليزي)">Short (EN)</label>
                            <input type="text" name="short_en" class="form-control" required placeholder="e.g. Kg">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" data-en="Name (AR)" data-ar="الاسم (عربي)">Name (AR)</label>
                            <input type="text" name="name_ar" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" data-en="Short Name (AR)" data-ar="الاختصار (عربي)">Short (AR)</label>
                            <input type="text" name="short_ar" class="form-control" required placeholder="مثلاً: كجم">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
                    <button type="submit" name="add_unit" class="btn btn-primary" data-en="Save" data-ar="حفظ">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/main.js?v=<?= time() ?>"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const hasExpiryToggle = document.getElementById('hasExpiryToggle');
    const expiryDateContainer = document.getElementById('expiryDateContainer');
    const suggestSkuBtn = document.getElementById('suggestSkuBtn');
    const skuInput = document.getElementById('skuInput');

    // Toggle Expiry Date visibility
    if (hasExpiryToggle && expiryDateContainer) {
        hasExpiryToggle.addEventListener('change', function() {
            expiryDateContainer.style.display = this.checked ? 'block' : 'none';
            if (!this.checked) {
                expiryDateContainer.querySelector('input').value = '';
            }
        });
    }

    // SKU Suggestion
    if (suggestSkuBtn && skuInput) {
        const existingSkus = <?= json_encode(db()->query("SELECT sku FROM stock_items WHERE sku IS NOT NULL AND sku != ''")->fetchAll(PDO::FETCH_COLUMN)) ?>;
        
        suggestSkuBtn.addEventListener('click', function() {
            let sku;
            let attempts = 0;
            do {
                sku = Math.floor(10000000 + Math.random() * 90000000).toString();
                attempts++;
            } while (existingSkus.includes(sku) && attempts < 100);
            
            skuInput.value = sku;
        });
    }

    // Handle Expiry toggle in Edit Modals
    document.querySelectorAll('.hasExpiryToggleEdit').forEach(toggle => {
        toggle.addEventListener('change', function() {
            const container = this.closest('.row').querySelector('.expiryDateContainerEdit');
            if (container) {
                container.style.display = this.checked ? 'block' : 'none';
                if (!this.checked) {
                    container.querySelector('input').value = '';
                }
            }
        });
    });

    // Invoice Form Logic
    const productSearchInput = document.getElementById('productSearchInput');
    const searchSuggestions = document.getElementById('searchSuggestions');
    const itemsTableBody = document.getElementById('invoiceItemsTableBody');
    const grandTotalEl = document.getElementById('grandTotal');
    const invoiceType = '<?= $page === "sales" ? "sale" : ($page === "purchases" ? "purchase" : "") ?>';

    if (productSearchInput && itemsTableBody) {
        let timeout = null;
        productSearchInput.addEventListener('input', function() {
            clearTimeout(timeout);
            const q = this.value.trim();
            if (q.length < 1) {
                searchSuggestions.style.display = 'none';
                return;
            }

            timeout = setTimeout(() => {
                fetch(`index.php?action=search_items&q=${encodeURIComponent(q)}`)
                    .then(res => res.json())
                    .then(data => {
                        searchSuggestions.innerHTML = '';
                        if (data.length > 0) {
                            data.forEach(item => {
                                const btn = document.createElement('button');
                                btn.type = 'button';
                                btn.className = 'list-group-item list-group-item-action';
                                btn.innerHTML = `
                                    <div class="d-flex justify-content-between">
                                        <span><strong>${item.sku}</strong> - ${item.name_en} / ${item.name_ar}</span>
                                        <span class="text-muted small">Stock: ${item.stock_quantity}</span>
                                    </div>
                                `;
                                btn.onclick = () => addItemToInvoice(item);
                                searchSuggestions.appendChild(btn);
                            });
                            searchSuggestions.style.display = 'block';
                        } else {
                            searchSuggestions.style.display = 'none';
                        }
                    });
            }, 300);
        });

        // Close suggestions when clicking outside
        document.addEventListener('click', function(e) {
            if (!productSearchInput.contains(e.target) && !searchSuggestions.contains(e.target)) {
                searchSuggestions.style.display = 'none';
            }
        });

        function addItemToInvoice(item) {
            searchSuggestions.style.display = 'none';
            productSearchInput.value = '';
            
            // Check if item already exists in the table
            const existingRow = Array.from(itemsTableBody.querySelectorAll('.item-id-input')).find(input => input.value == item.id);
            if (existingRow) {
                const row = existingRow.closest('tr');
                const qtyInput = row.querySelector('.item-qty');
                qtyInput.value = parseFloat(qtyInput.value) + 1;
                calculateTotals();
                return;
            }

            const row = document.createElement('tr');
            row.className = 'item-row';
            const price = invoiceType === 'sale' ? item.sale_price : item.purchase_price;
            
            row.innerHTML = `
                <td>
                    <input type="hidden" name="item_ids[]" class="item-id-input" value="${item.id}">
                    <div><strong>${item.name_en}</strong></div>
                    <div class="small text-muted">${item.name_ar} (${item.sku})</div>
                </td>
                <td><input type="number" step="0.01" name="quantities[]" class="form-control item-qty" value="1" required></td>
                <td><input type="number" step="0.01" name="prices[]" class="form-control item-price" value="${price}" required></td>
                <td><input type="number" step="0.01" class="form-control item-total" value="${price}" readonly></td>
                <td><button type="button" class="btn btn-outline-danger btn-sm remove-row"><i class="bi bi-trash"></i></button></td>
            `;
            
            itemsTableBody.appendChild(row);
            attachRowListeners(row);
            calculateTotals();
        }

        function calculateTotals() {
            let grandTotal = 0;
            itemsTableBody.querySelectorAll('.item-row').forEach(row => {
                const qty = parseFloat(row.querySelector('.item-qty').value) || 0;
                const price = parseFloat(row.querySelector('.item-price').value) || 0;
                const total = qty * price;
                row.querySelector('.item-total').value = total.toFixed(2);
                grandTotal += total;
            });
            grandTotalEl.textContent = '$' + grandTotal.toFixed(2);
        }

        function attachRowListeners(row) {
            row.querySelector('.item-qty').addEventListener('input', calculateTotals);
            row.querySelector('.item-price').addEventListener('input', calculateTotals);
            row.querySelector('.remove-row').addEventListener('click', function() {
                row.remove();
                calculateTotals();
            });
        }
    }

    // View Invoice Logic
    document.querySelectorAll('.view-invoice-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const data = JSON.parse(this.dataset.json);
            document.getElementById('invNumber').textContent = 'INV-' + data.id.toString().padStart(5, '0');
            document.getElementById('invDate').textContent = data.invoice_date;
            document.getElementById('invPaymentType').textContent = data.payment_type ? data.payment_type.toUpperCase() : 'CASH';
            document.getElementById('invCustomerName').textContent = data.customer_name || '---';
            document.getElementById('invoiceTypeLabel').textContent = data.type;
            document.getElementById('invoiceTypeLabel').className = 'badge text-uppercase ' + (data.type === 'sale' ? 'bg-success' : 'bg-warning');
            
            const body = document.getElementById('invItemsBody');
            body.innerHTML = '';
            data.items.forEach(item => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${item.name_en} / ${item.name_ar}</td>
                    <td class="text-center">${item.quantity}</td>
                    <td class="text-end">$${parseFloat(item.unit_price).toFixed(2)}</td>
                    <td class="text-end">$${parseFloat(item.total_price).toFixed(2)}</td>
                `;
                body.appendChild(tr);
            });
            document.getElementById('invGrandTotal').textContent = '$' + parseFloat(data.total_amount).toFixed(2);
        });
    });
});
</script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
</body>
</html>