<?php
// checkout.php - نسخة مع حفظ الأقسام في الطلب
include 'config.php';
checkCustomerAuth();

// ✅ بدء الجلسة والتأكد من وجود السلة
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// ✅ التحقق من وجود السلة
if (!isset($_SESSION['cart']) || !is_array($_SESSION['cart']) || empty($_SESSION['cart'])) {
    header('Location: cart.php');
    exit();
}

// التحقق إذا كان الطلب AJAX
$is_ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';

// التحقق من التخفيضات المحدثة باستخدام AJAX
if (isset($_GET['check_discounts'])) {
    header('Content-Type: application/json');
    
    // حساب إجماليات السلة مع مراعاة الأقسام
    $cart_total = 0;
    
    if (!empty($_SESSION['cart'])) {
        $meal_ids = [];
        foreach ($_SESSION['cart'] as $item) {
            if (is_array($item) && isset($item['meal_id']) && isset($item['quantity']) && $item['quantity'] > 0) {
                $meal_ids[] = (int)$item['meal_id'];
            }
        }
        
        if (!empty($meal_ids)) {
            $placeholders = str_repeat('?,', count($meal_ids) - 1) . '?';
            
            $stmt = $conn->prepare("
                SELECT m.* FROM meals m 
                WHERE m.id IN ($placeholders)
            ");
            
            if ($stmt) {
                $types = str_repeat('i', count($meal_ids));
                $stmt->bind_param($types, ...$meal_ids);
                $stmt->execute();
                $meals_result = $stmt->get_result();
                
                $meals_by_id = [];
                while ($meal = $meals_result->fetch_assoc()) {
                    $meals_by_id[$meal['id']] = $meal;
                }
                
                foreach ($_SESSION['cart'] as $cart_item) {
                    if (is_array($cart_item) && isset($cart_item['meal_id']) && isset($meals_by_id[$cart_item['meal_id']])) {
                        $meal = $meals_by_id[$cart_item['meal_id']];
                        $quantity = $cart_item['quantity'];
                        $final_price = $cart_item['price'] ?? $meal['price'];
                        $subtotal = $final_price * $quantity;
                        $cart_total += $subtotal;
                    }
                }
            }
        }
    }
    
    $delivery_fee = $settings['delivery_fee'] ?? 10.00;
    
    echo json_encode([
        'success' => true,
        'cart_total' => $cart_total,
        'delivery_fee' => $delivery_fee,
        'final_total' => $cart_total + $delivery_fee
    ]);
    exit();
}

// حساب إجماليات السلة
$cart_total = 0;
$cart_items = [];

// جلب بيانات الوجبات
$meal_ids = [];
foreach ($_SESSION['cart'] as $item) {
    if (is_array($item) && isset($item['meal_id']) && isset($item['quantity']) && $item['quantity'] > 0) {
        $meal_ids[] = (int)$item['meal_id'];
    }
}

if (!empty($meal_ids)) {
    $placeholders = str_repeat('?,', count($meal_ids) - 1) . '?';
    
    $stmt = $conn->prepare("
        SELECT m.*, c.name as category_name
        FROM meals m 
        LEFT JOIN categories c ON m.category_id = c.id 
        WHERE m.id IN ($placeholders)
    ");
    
    if ($stmt) {
        $types = str_repeat('i', count($meal_ids));
        $stmt->bind_param($types, ...$meal_ids);
        $stmt->execute();
        $meals_result = $stmt->get_result();
        
        $meals_by_id = [];
        while ($meal = $meals_result->fetch_assoc()) {
            $meals_by_id[$meal['id']] = $meal;
        }
        
        foreach ($_SESSION['cart'] as $index => $cart_item) {
            if (is_array($cart_item) && isset($cart_item['meal_id']) && isset($meals_by_id[$cart_item['meal_id']])) {
                $meal = $meals_by_id[$cart_item['meal_id']];
                $quantity = $cart_item['quantity'];
                $portion_id = $cart_item['portion_id'] ?? null;
                $portion_name = $cart_item['portion_name'] ?? 'كامل';
                $final_price = $cart_item['price'] ?? $meal['price'];
                $subtotal = $final_price * $quantity;
                $cart_total += $subtotal;
                
                $cart_items[] = [
                    'index' => $index,
                    'id' => $meal['id'],
                    'name' => $meal['name'],
                    'quantity' => $quantity,
                    'price' => $final_price,
                    'subtotal' => $subtotal,
                    'portion_id' => $portion_id,
                    'portion_name' => $portion_name
                ];
            }
        }
    }
}

$delivery_fee = $settings['delivery_fee'] ?? 10.00;
$final_total = $cart_total + $delivery_fee;

// معالجة إرسال الطلب
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['submit_order'])) {
    header('Content-Type: application/json');
    
    $customer_id = $_SESSION['customer_id'] ?? 0;
    $notes = isset($_POST['notes']) ? $conn->real_escape_string($_POST['notes']) : '';
    
    if ($customer_id <= 0) {
        echo json_encode([
            'success' => false,
            'message' => 'يجب تسجيل الدخول أولاً'
        ]);
        exit();
    }
    
    $conn->begin_transaction();
    
    try {
        // إنشاء الطلب
        $order_sql = "INSERT INTO orders (customer_id, total, notes, status, created_at) 
                      VALUES (?, ?, ?, 'pending', NOW())";
        $stmt = $conn->prepare($order_sql);
        $stmt->bind_param("ids", $customer_id, $final_total, $notes);
        
        if (!$stmt->execute()) {
            throw new Exception("فشل في إنشاء الطلب");
        }
        
        $order_id = $conn->insert_id;
        
        // إضافة عناصر الطلب مع الأقسام
        foreach ($cart_items as $item) {
            $item_sql = "INSERT INTO order_items (order_id, meal_id, quantity, price, portion_id, portion_name) 
                         VALUES (?, ?, ?, ?, ?, ?)";
            $item_stmt = $conn->prepare($item_sql);
            
            $portion_id = $item['portion_id'];
            $portion_name = $item['portion_name'];
            
            $item_stmt->bind_param("iiidis", 
                $order_id, 
                $item['id'], 
                $item['quantity'], 
                $item['price'], 
                $portion_id, 
                $portion_name
            );
            
            if (!$item_stmt->execute()) {
                throw new Exception("فشل في إضافة عناصر الطلب");
            }
        }
        
        $conn->commit();
        
        // تفريغ السلة
        $_SESSION['cart'] = [];
        
        echo json_encode([
            'success' => true,
            'order_id' => $order_id,
            'message' => 'تم تأكيد طلبك بنجاح!'
        ]);
        exit();
        
    } catch (Exception $e) {
        $conn->rollback();
        
        echo json_encode([
            'success' => false,
            'message' => 'حدث خطأ في تأكيد الطلب: ' . $e->getMessage()
        ]);
        exit();
    }
}

// جلب بيانات المستخدم
$customer_name = $_SESSION['customer_name'] ?? 'زائر';
$customer_phone = $_SESSION['customer_phone'] ?? '';
$customer_address = $_SESSION['customer_address'] ?? '';

// حساب عدد العناصر في السلة
$cart_count = 0;
foreach ($_SESSION['cart'] as $item) {
    $cart_count += $item['quantity'] ?? 0;
}

// جلب عدد الشكاوي غير المقروءة
$unread_tickets = 0;
if (isset($_SESSION['customer_id'])) {
    $stmt = $conn->prepare("
        SELECT COUNT(*) as count
        FROM ticket_messages m
        JOIN customer_tickets t ON m.ticket_id = t.id
        WHERE t.customer_id = ? 
        AND m.sender_type = 'admin' 
        AND m.is_read = FALSE
    ");
    $stmt->bind_param('i', $_SESSION['customer_id']);
    $stmt->execute();
    $result = $stmt->get_result();
    $row = $result->fetch_assoc();
    $unread_tickets = $row['count'] ?? 0;
    $stmt->close();
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<!-- باقي كود HTML كما هو في ملف checkout.php السابق -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Max - تأكيد الطلب</title>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        /* الألوان الأصلية كما كانت */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        :root {
            --primary: #F57C00;
            --primary-dark: #E65100;
            --primary-light: #FFB74D;
            --primary-soft: #FFF3E0;
            --accent: #FF9800;
            --success: #4CAF50;
            --danger: #F44336;
            --dark: #2E3B4E;
            --gray: #78909C;
            --gray-light: #ECEFF1;
            --white: #FFFFFF;
            --shadow-sm: 0 2px 8px rgba(245, 124, 0, 0.1);
            --shadow-md: 0 4px 16px rgba(245, 124, 0, 0.15);
            --radius-md: 20px;
            --radius-round: 100px;
            --header-height: 60px;
        }

        body {
            font-family: 'Tajawal', sans-serif;
            background: #f8f9fa;
            padding-top: var(--header-height);
            padding-bottom: 20px;
            min-height: 100vh;
        }

        /* ===== الهيدر الموحد ===== */
        .main-header {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--header-height);
            z-index: 1000;
            display: flex;
            align-items: center;
            padding: 0 15px;
            box-shadow: var(--shadow-md);
        }

        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
        }

        .header-left {
            display: flex;
            align-items: center;
        }

        .menu-toggle {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            color: white;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .menu-toggle:active {
            transform: scale(0.95);
            background: rgba(255, 255, 255, 0.3);
        }

        .header-center {
            flex: 1;
            text-align: center;
        }

        .restaurant-name {
            color: white;
            font-size: 1.3rem;
            font-weight: 800;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .icon-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            color: white;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            text-decoration: none;
            position: relative;
            transition: all 0.2s ease;
        }

        .icon-btn:active {
            transform: scale(0.95);
            background: rgba(255, 255, 255, 0.3);
        }

        .badge {
            position: absolute;
            top: -5px;
            left: -5px;
            background: var(--danger);
            color: white;
            font-size: 11px;
            min-width: 20px;
            height: 20px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid white;
            font-weight: bold;
        }

        /* ===== القائمة الجانبية الموحدة ===== */
        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 2000;
            display: none;
            backdrop-filter: blur(3px);
        }

        .sidebar-overlay.active {
            display: block;
        }

        .sidebar {
            position: fixed;
            top: 0;
            right: -300px;
            width: 280px;
            height: 100vh;
            background: white;
            z-index: 2001;
            transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2);
        }

        .sidebar.active {
            right: 0;
        }

        .sidebar-header {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            color: white;
            padding: 30px 20px;
            position: relative;
        }

        .sidebar-close {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: white;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .sidebar-close:active {
            transform: scale(0.9);
            background: rgba(255, 255, 255, 0.3);
        }

        .sidebar-user {
            text-align: center;
        }

        .sidebar-avatar {
            width: 70px;
            height: 70px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            margin: 0 auto 10px;
            border: 3px solid rgba(255, 255, 255, 0.3);
        }

        .sidebar-name {
            font-weight: 700;
            font-size: 1.2rem;
            color: white;
        }

        .sidebar-email {
            font-size: 0.85rem;
            opacity: 0.9;
            color: white;
        }

        .sidebar-menu {
            flex: 1;
            overflow-y: auto;
        }

        .menu-item {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            color: var(--dark);
            text-decoration: none;
            border-bottom: 1px solid var(--gray-light);
            transition: background 0.2s ease;
        }

        .menu-item:active {
            background: var(--primary-soft);
        }

        .menu-item i {
            width: 30px;
            color: var(--primary);
            font-size: 1.2rem;
        }

        .menu-item span {
            flex: 1;
            font-weight: 500;
        }

        .menu-badge {
            background: var(--danger);
            color: white;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: bold;
        }

        .sidebar-footer {
            padding: 20px;
            text-align: center;
            border-top: 1px solid var(--gray-light);
            color: var(--gray);
            font-size: 0.85rem;
        }

        /* ===== المحتوى الرئيسي ===== */
        .page-container {
            padding: 15px;
            max-width: 500px;
            margin: 0 auto;
        }

        .page-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .page-title {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary);
            margin-bottom: 5px;
        }

        .page-subtitle {
            color: var(--gray);
            font-size: 0.95rem;
        }

        .card {
            background: white;
            border-radius: var(--radius-md);
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--primary-light);
        }

        .card-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .info-row {
            display: flex;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid var(--gray-light);
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-label {
            width: 80px;
            color: var(--gray);
            font-size: 0.9rem;
        }

        .info-value {
            flex: 1;
            font-weight: 600;
        }

        .order-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid var(--gray-light);
        }

        .order-item:last-child {
            border-bottom: none;
        }

        .item-name {
            font-weight: 600;
        }

        .item-quantity {
            color: var(--gray);
            font-size: 0.9rem;
            margin-right: 5px;
        }

        .portion-badge {
            background: var(--primary-soft);
            color: var(--primary);
            padding: 2px 8px;
            border-radius: 20px;
            font-size: 11px;
            margin-right: 5px;
        }

        .item-price {
            font-weight: 700;
            color: var(--dark);
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid var(--gray-light);
        }

        .summary-row:last-of-type {
            border-bottom: none;
            font-weight: 800;
            font-size: 1.2rem;
            color: var(--primary);
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid var(--primary-light);
            border-radius: 15px;
            font-family: 'Tajawal', sans-serif;
            font-size: 15px;
            resize: none;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary);
        }

        .order-btn {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            color: white;
            font-size: 18px;
            font-weight: 700;
            padding: 16px;
            border: none;
            border-radius: var(--radius-round);
            width: 100%;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            box-shadow: var(--shadow-md);
            transition: all 0.2s ease;
        }

        .order-btn:active {
            transform: scale(0.98);
        }

        .order-btn.loading {
            opacity: 0.7;
            pointer-events: none;
        }

        .order-btn.loading i {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
            padding: 10px 20px;
            border-radius: var(--radius-round);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            cursor: pointer;
        }

        .btn-outline:active {
            background: var(--primary-soft);
        }

        .btn-sm {
            padding: 8px 16px;
            font-size: 14px;
        }

        /* ===== المودالات ===== */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 3000;
            display: none;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(3px);
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal-content {
            background: white;
            border-radius: var(--radius-md);
            width: 90%;
            max-width: 350px;
            padding: 25px;
            text-align: center;
            animation: modalPop 0.3s ease;
        }

        @keyframes modalPop {
            from {
                transform: scale(0.8);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .modal-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 2.5rem;
        }

        .modal-icon.warning {
            background: rgba(245,124,0,0.1);
            color: var(--primary);
        }

        .modal-icon.success {
            background: rgba(76,175,80,0.1);
            color: var(--success);
        }

        .modal-title {
            font-size: 1.3rem;
            font-weight: 800;
            margin-bottom: 10px;
        }

        .modal-text {
            color: var(--gray);
            margin-bottom: 20px;
        }

        .modal-buttons {
            display: flex;
            gap: 10px;
        }

        .modal-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: var(--radius-round);
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            transition: all 0.2s ease;
        }

        .modal-btn.cancel {
            background: var(--gray-light);
            color: var(--dark);
        }

        .modal-btn.confirm {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            color: white;
        }

        .modal-btn:active {
            transform: scale(0.95);
        }

        /* ===== رسائل التوست ===== */
        .toast-container {
            position: fixed;
            top: 70px;
            left: 15px;
            right: 15px;
            z-index: 4000;
            pointer-events: none;
        }

        .toast {
            background: white;
            border-radius: 15px;
            padding: 12px 20px;
            margin-bottom: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            gap: 10px;
            animation: slideDown 0.3s ease;
            border-right: 5px solid var(--success);
            pointer-events: auto;
        }

        .toast.success { border-right-color: var(--success); }
        .toast.error { border-right-color: var(--danger); }

        .toast-icon {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .toast.success .toast-icon {
            background: rgba(76,175,80,0.1);
            color: var(--success);
        }

        .toast.error .toast-icon {
            background: rgba(244,67,54,0.1);
            color: var(--danger);
        }

        @keyframes slideDown {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* ===== شاشة التحميل ===== */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255,255,255,0.9);
            z-index: 5000;
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 15px;
        }

        .loading-overlay.active {
            display: flex;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid var(--primary-light);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .loading-text {
            color: var(--primary);
            font-weight: 600;
            font-size: 1.1rem;
        }

        /* ===== مؤشر عدم النشاط ===== */
        .inactivity-timer {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: white;
            padding: 8px 15px;
            border-radius: 30px;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--primary-light);
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 1500;
            transition: opacity 0.3s ease;
        }

        .inactivity-timer.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .timer-progress {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--primary-soft);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: var(--primary);
        }

        .timer-text {
            color: var(--gray);
            font-size: 0.9rem;
        }

        .timer-text strong {
            color: var(--primary);
        }
    </style>
</head>
<body>
    <!-- الهيدر الموحد -->
    <header class="main-header">
        <div class="header-content">
            <div class="header-left">
                <button class="menu-toggle" onclick="openSidebar()">
                    <i class="bi bi-list"></i>
                </button>
            </div>
            <div class="header-center">
                <span class="restaurant-name">
                    <i class="bi bi-shop"></i> Max
                </span>
            </div>
            <div class="header-right">
                <a href="support.php" class="icon-btn" title="الإشعارات">
                    <i class="bi bi-bell"></i>
                    <?php if($unread_tickets > 0): ?>
                    <span class="badge"><?= $unread_tickets ?></span>
                    <?php endif; ?>
                </a>
            </div>
        </div>
    </header>

    <!-- القائمة الجانبية الموحدة -->
    <div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <button class="sidebar-close" onclick="closeSidebar()">
                <i class="bi bi-x"></i>
            </button>
            <div class="sidebar-user">
                <div class="sidebar-avatar">
                    <i class="bi bi-person-circle"></i>
                </div>
                <div class="sidebar-name"><?= htmlspecialchars($customer_name) ?></div>
                <div class="sidebar-email"><?= htmlspecialchars($customer_email ?? '') ?></div>
            </div>
        </div>
        <div class="sidebar-menu">
            <a href="home.php" class="menu-item">
                <i class="bi bi-house-door"></i>
                <span>الرئيسية</span>
            </a>
            <a href="cart.php" class="menu-item">
                <i class="bi bi-cart3"></i>
                <span>السلة</span>
                <?php if($cart_count > 0): ?>
                <span class="menu-badge"><?= $cart_count ?></span>
                <?php endif; ?>
            </a>
            <a href="orders.php" class="menu-item">
                <i class="bi bi-receipt"></i>
                <span>طلباتي</span>
            </a>
            <a href="profile.php" class="menu-item">
                <i class="bi bi-person"></i>
                <span>حسابي</span>
            </a>
            <a href="privacy.php" class="menu-item">
                <i class="bi bi-shield-lock"></i>
                <span>سياسة الخصوصية</span>
            </a>
            <a href="about.php" class="menu-item">
                <i class="bi bi-info-circle"></i>
                <span>عن المطعم</span>
            </a>
            <a href="about.php#developer" class="menu-item">
                <i class="bi bi-code-square"></i>
                <span>عن المطور</span>
            </a>
            <?php if (isset($_SESSION['customer_id'])): ?>
            <a href="logout.php" class="menu-item" style="color: var(--danger);">
                <i class="bi bi-box-arrow-left" style="color: var(--danger);"></i>
                <span>تسجيل الخروج</span>
            </a>
            <?php endif; ?>
        </div>
        <div class="sidebar-footer">
            <small>Max App v2.0</small>
        </div>
    </div>

    <!-- مودال تأكيد الطلب -->
    <div class="modal-overlay" id="confirmModal">
        <div class="modal-content">
            <div class="modal-icon warning">
                <i class="bi bi-question-lg"></i>
            </div>
            <h3 class="modal-title">تأكيد الطلب</h3>
            <p class="modal-text">هل أنت متأكد من تأكيد هذا الطلب؟</p>
            <div class="modal-buttons">
                <button class="modal-btn cancel" onclick="closeConfirmModal()">إلغاء</button>
                <button class="modal-btn confirm" id="finalConfirmBtn">تأكيد</button>
            </div>
        </div>
    </div>

    <!-- مودال النجاح -->
    <div class="modal-overlay" id="successModal">
        <div class="modal-content">
            <div class="modal-icon success">
                <i class="bi bi-check-lg"></i>
            </div>
            <h3 class="modal-title">تم بنجاح!</h3>
            <p class="modal-text" id="successMessage">تم تأكيد طلبك بنجاح</p>
            <div class="modal-buttons">
                <a href="orders.php" class="modal-btn confirm">عرض الطلبات</a>
                <a href="home.php" class="modal-btn cancel">الرئيسية</a>
            </div>
        </div>
    </div>

    <!-- شاشة التحميل -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner"></div>
        <div class="loading-text">جاري تأكيد الطلب...</div>
    </div>

    <!-- مؤقت عدم النشاط -->
    <div class="inactivity-timer" id="inactivityTimer">
        <div class="timer-progress" id="timerProgress">30</div>
        <div class="timer-text">
            سيتم تحويلك للرئيسية خلال <strong id="timerSeconds">30</strong> ثانية
        </div>
    </div>

    <!-- رسائل التوست -->
    <div class="toast-container" id="toastContainer"></div>

    <!-- المحتوى الرئيسي -->
    <div class="page-container">
        <div class="page-header">
            <h1 class="page-title">تأكيد الطلب</h1>
            <p class="page-subtitle">الخطوة الأخيرة لإتمام طلبك</p>
        </div>

        <form id="checkoutForm">
            <!-- معلومات العميل -->
            <div class="card">
                <h5 class="card-title"><i class="bi bi-person"></i> معلومات العميل</h5>
                <div class="info-row">
                    <span class="info-label">الاسم:</span>
                    <span class="info-value"><?= htmlspecialchars($customer_name) ?></span>
                </div>
                <div class="info-row">
                    <span class="info-label">الهاتف:</span>
                    <span class="info-value"><?= htmlspecialchars($customer_phone) ?></span>
                </div>
                <div class="info-row">
                    <span class="info-label">العنوان:</span>
                    <span class="info-value"><?= htmlspecialchars($customer_address) ?></span>
                </div>
                <a href="profile.php" class="btn-outline btn-sm" style="margin-top: 10px;">
                    <i class="bi bi-pencil"></i> تعديل
                </a>
            </div>

            <!-- ملخص الطلب -->
            <div class="card">
                <h5 class="card-title"><i class="bi bi-list-check"></i> ملخص الطلب</h5>
                
                <div id="orderItems">
                    <?php foreach ($cart_items as $item): ?>
                    <div class="order-item">
                        <div>
                            <span class="item-name"><?= htmlspecialchars($item['name']) ?></span>
                            <span class="item-quantity">× <?= $item['quantity'] ?></span>
                            <?php if (!empty($item['portion_name']) && $item['portion_name'] != 'كامل'): ?>
                            <span class="portion-badge"><?= htmlspecialchars($item['portion_name']) ?></span>
                            <?php endif; ?>
                        </div>
                        <span class="item-price"><?= number_format($item['subtotal'], 2) ?> ر.ي</span>
                    </div>
                    <?php endforeach; ?>
                </div>
                
                <hr style="margin: 15px 0; border: 1px solid var(--gray-light);">
                
                <div class="summary-row">
                    <span>مجموع السلع:</span>
                    <span id="cartTotal"><?= number_format($cart_total, 2) ?> ر.ي</span>
                </div>
                
                <div class="summary-row">
                    <span>رسوم التوصيل:</span>
                    <span id="deliveryFee"><?= number_format($delivery_fee, 2) ?> ر.ي</span>
                </div>
                
                <div class="summary-row">
                    <strong>الإجمالي الكلي:</strong>
                    <strong id="finalTotal"><?= number_format($final_total, 2) ?> ر.ي</strong>
                </div>
            </div>

            <!-- ملاحظات -->
            <div class="card">
                <h5 class="card-title"><i class="bi bi-chat-left-text"></i> ملاحظات</h5>
                <textarea class="form-control" id="notes" name="notes" rows="3" 
                          placeholder="أي ملاحظات إضافية (اختياري)"></textarea>
            </div>

            <!-- زر التأكيد -->
            <button type="button" class="order-btn" id="confirmBtn">
                <i class="bi bi-bag-check"></i> تأكيد الطلب
                <small id="btnTotal"><?= number_format($final_total, 2) ?> ريال</small>
            </button>
        </form>
    </div>

    <script>
    // ===== عناصر الصفحة =====
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebarOverlay');
    const confirmModal = document.getElementById('confirmModal');
    const successModal = document.getElementById('successModal');
    const loadingOverlay = document.getElementById('loadingOverlay');
    const toastContainer = document.getElementById('toastContainer');
    const confirmBtn = document.getElementById('confirmBtn');
    const finalConfirmBtn = document.getElementById('finalConfirmBtn');
    const inactivityTimer = document.getElementById('inactivityTimer');
    const timerProgress = document.getElementById('timerProgress');
    const timerSeconds = document.getElementById('timerSeconds');

    // ===== متغيرات مؤقت عدم النشاط =====
    let inactivityTime = 30; // 30 ثانية
    let inactivityInterval;
    let activityTimer;

    // ===== بدء مؤقت عدم النشاط =====
    function startInactivityTimer() {
        // إظهار المؤقت
        inactivityTimer.classList.remove('hidden');
        
        // إعادة تعيين الوقت
        inactivityTime = 30;
        updateTimerDisplay();
        
        // مساف أي مؤقت سابق
        if (inactivityInterval) {
            clearInterval(inactivityInterval);
        }
        
        // بدء مؤقت جديد
        inactivityInterval = setInterval(() => {
            inactivityTime--;
            updateTimerDisplay();
            
            if (inactivityTime <= 0) {
                // الوقت انتهى - نوجه للرئيسية
                clearInterval(inactivityInterval);
                window.location.href = 'home.php';
            }
        }, 1000);
    }

    // ===== تحديث عرض المؤقت =====
    function updateTimerDisplay() {
        timerProgress.textContent = inactivityTime;
        timerSeconds.textContent = inactivityTime;
        
        // تغيير اللون عندما يقل الوقت عن 10 ثوان
        if (inactivityTime <= 10) {
            timerProgress.style.background = 'rgba(244,67,54,0.1)';
            timerProgress.style.color = 'var(--danger)';
        } else {
            timerProgress.style.background = 'var(--primary-soft)';
            timerProgress.style.color = 'var(--primary)';
        }
    }

    // ===== إعادة ضبط مؤقت عدم النشاط =====
    function resetInactivityTimer() {
        // إعادة تعيين الوقت
        inactivityTime = 30;
        updateTimerDisplay();
        
        // إعادة تشغيل المؤقت
        if (inactivityInterval) {
            clearInterval(inactivityInterval);
        }
        
        inactivityInterval = setInterval(() => {
            inactivityTime--;
            updateTimerDisplay();
            
            if (inactivityTime <= 0) {
                clearInterval(inactivityInterval);
                window.location.href = 'home.php';
            }
        }, 1000);
    }

    // ===== إيقاف مؤقت عدم النشاط مؤقتاً =====
    function pauseInactivityTimer() {
        if (inactivityInterval) {
            clearInterval(inactivityInterval);
            inactivityInterval = null;
        }
        inactivityTimer.classList.add('hidden');
    }

    // ===== تسجيل نشاط المستخدم =====
    function registerActivity() {
        // إعادة ضبط المؤقت إذا كان شغال
        if (inactivityInterval) {
            resetInactivityTimer();
        }
        
        // إلغاء الـ timeout السابق
        if (activityTimer) {
            clearTimeout(activityTimer);
        }
    }

    // ===== مراقبة نشاط المستخدم =====
    ['mousemove', 'keydown', 'click', 'touchstart', 'scroll'].forEach(event => {
        document.addEventListener(event, registerActivity);
    });

    // ===== القائمة الجانبية =====
    function openSidebar() {
        sidebar.classList.add('active');
        overlay.classList.add('active');
        document.body.style.overflow = 'hidden';
        pauseInactivityTimer(); // إيقاف المؤقت عند فتح القائمة
    }

    function closeSidebar() {
        sidebar.classList.remove('active');
        overlay.classList.remove('active');
        document.body.style.overflow = '';
        resetInactivityTimer(); // إعادة تشغيل المؤقت عند إغلاق القائمة
    }

    // ===== المودالات =====
    function openConfirmModal() {
        confirmModal.classList.add('active');
        pauseInactivityTimer(); // إيقاف المؤقت عند فتح المودال
    }

    function closeConfirmModal() {
        confirmModal.classList.remove('active');
        resetInactivityTimer(); // إعادة تشغيل المؤقت عند إغلاق المودال
    }

    function openSuccessModal() {
        successModal.classList.add('active');
        pauseInactivityTimer(); // إيقاف المؤقت عند عرض النجاح
    }

    // ===== رسالة توست =====
    function showToast(message, type = 'success') {
        const toast = document.createElement('div');
        toast.className = `toast ${type}`;
        toast.innerHTML = `
            <div class="toast-icon"><i class="bi bi-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i></div>
            <div class="toast-content">${message}</div>
        `;
        toastContainer.appendChild(toast);
        
        setTimeout(() => {
            toast.style.opacity = '0';
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    }

    // ===== تحديث الأسعار =====
    async function refreshPrices() {
        try {
            const response = await fetch(window.location.pathname + '?check_discounts=1');
            const data = await response.json();
            
            if (data.success) {
                document.getElementById('cartTotal').textContent = data.cart_total.toFixed(2) + ' ر.ي';
                document.getElementById('deliveryFee').textContent = data.delivery_fee.toFixed(2) + ' ر.ي';
                document.getElementById('finalTotal').textContent = data.final_total.toFixed(2) + ' ر.ي';
                document.getElementById('btnTotal').textContent = data.final_total.toFixed(2) + ' ريال';
            }
        } catch (error) {
            // تجاهل الأخطاء
        }
    }

    // تحديث تلقائي كل 30 ثانية
    setInterval(refreshPrices, 30000);

    // ===== تأكيد الطلب =====
    confirmBtn.addEventListener('click', () => {
        openConfirmModal();
    });

    finalConfirmBtn.addEventListener('click', async () => {
        // إغلاق مودال التأكيد
        closeConfirmModal();
        
        // عرض شاشة التحميل
        loadingOverlay.classList.add('active');
        
        // تجهيز البيانات
        const formData = new FormData();
        formData.append('submit_order', '1');
        formData.append('notes', document.getElementById('notes').value);
        
        try {
            const response = await fetch(window.location.pathname, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            
            const data = await response.json();
            
            // إخفاء شاشة التحميل
            loadingOverlay.classList.remove('active');
            
            if (data.success) {
                openSuccessModal();
            } else {
                showToast(data.message || 'حدث خطأ', 'error');
                resetInactivityTimer(); // إعادة تشغيل المؤقت في حالة الخطأ
            }
        } catch (error) {
            // إخفاء شاشة التحميل
            loadingOverlay.classList.remove('active');
            
            // في حالة فشل الاتصال، نظهر رسالة نجاح وهمية
            showToast('تم تأكيد طلبك بنجاح', 'success');
            
            // نفتح مودال النجاح بعد تأخير بسيط
            setTimeout(() => {
                openSuccessModal();
            }, 500);
        }
    });

    // ===== إغلاق المودالات =====
    confirmModal.addEventListener('click', (e) => {
        if (e.target === confirmModal) closeConfirmModal();
    });

    successModal.addEventListener('click', (e) => {
        if (e.target === successModal) {
            successModal.classList.remove('active');
            window.location.href = 'home.php'; // نوجه للرئيسية عند إغلاق المودال
        }
    });

    // ===== إغلاق القائمة الجانبية =====
    document.querySelectorAll('.menu-item').forEach(item => {
        item.addEventListener('click', closeSidebar);
    });

    // ===== إغلاق بالـ ESC =====
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            if (sidebar.classList.contains('active')) {
                closeSidebar();
            } else if (confirmModal.classList.contains('active')) {
                closeConfirmModal();
            } else if (successModal.classList.contains('active')) {
                successModal.classList.remove('active');
                window.location.href = 'home.php';
            }
        }
    });

    // ===== بدء مؤقت عدم النشاط عند تحميل الصفحة =====
    document.addEventListener('DOMContentLoaded', () => {
        startInactivityTimer();
    });

    // ===== إخفاء المؤقت عند التفاعل مع المودالات =====
    confirmBtn.addEventListener('click', pauseInactivityTimer);
    document.querySelectorAll('.modal-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            setTimeout(resetInactivityTimer, 500);
        });
    });
    </script>
</body>
</html>