<?php

$pageTitle = 'menu_title';

require_once 'includes/header.php';

$db = getDB();

// ─────────────────────────────────────────────
// FETCH MENU ITEMS
// ─────────────────────────────────────────────
$items = $db->query("
    SELECT *
    FROM menu_items
    WHERE is_available = 1
    ORDER BY id DESC
")->fetchAll();

?>

<!DOCTYPE html>

<html lang="<?= $LANG ?>"
      dir="<?= $isRTL ? 'rtl' : 'ltr' ?>">

<head>

<meta charset="UTF-8">

<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

<title>

    <?= t('menu_title') ?>

</title>

<link rel="stylesheet"
      href="assets/css/style.css">

<style>

.menu-page{
    min-height:100vh;
    padding:40px 0 80px;
}

.menu-header{
    text-align:center;
    margin-bottom:50px;
}

.menu-subtitle{
    display:inline-block;
    padding:8px 18px;
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--primary);
    font-size:13px;
    letter-spacing:.1em;
    text-transform:uppercase;
    margin-bottom:18px;
}

.menu-title{
    font-size:64px;
    line-height:1.1;
    font-family:var(--font-serif);
    margin-bottom:18px;
}

.menu-text{
    max-width:700px;
    margin:auto;
    color:var(--fg40);
    line-height:1.9;
    font-size:15px;
}

.menu-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:24px;
}

.menu-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:24px;
    overflow:hidden;
    transition:.35s;
    position:relative;
}

.menu-card:hover{
    transform:translateY(-6px);
}

.menu-image{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
}

.menu-body{
    padding:22px;
}

.menu-name{
    font-size:24px;
    font-family:var(--font-serif);
    margin-bottom:12px;
    color:#fff;
}

.menu-price{
    color:var(--primary);
    font-size:22px;
    font-weight:700;
    margin-bottom:18px;
}

.menu-btn{
    width:100%;
}

.empty-box{
    text-align:center;
    padding:120px 0;
    color:var(--fg40);
    font-size:22px;
    font-family:var(--font-serif);
}

@media(max-width:768px){

    .menu-title{
        font-size:42px;
    }

    .menu-image{
        height:220px;
    }

}

</style>

</head>

<body>

<!-- PAGE -->
<div class="menu-page">

    <div class="container">

        <!-- HEADER -->
        <div class="menu-header">

            <div class="menu-subtitle">

                <?= t('menu_sub') ?>

            </div>

            <h1 class="menu-title">

                <?= t('menu_title') ?>

            </h1>

            <div class="menu-text">

                اكتشف أفضل الأطباق والمشروبات المحضرة بعناية
                بأفضل جودة وطعم فاخر وتجربة مميزة للغاية.

            </div>

        </div>

        <!-- EMPTY -->
        <?php if (empty($items)): ?>

            <div class="empty-box">

                <?= t('noItems') ?>

            </div>

        <?php else: ?>

        <!-- MENU GRID -->
        <div class="menu-grid">

            <?php foreach ($items as $item): ?>

            <div class="menu-card">

                <!-- IMAGE -->
                <img
                    class="menu-image"

                    src="<?= e($item['image_url'] ?: 'assets/img/food-placeholder.jpg') ?>"

                    alt="<?= e($item['name']) ?>"

                    onerror="this.src='assets/img/food-placeholder.jpg'"
                >

                <!-- BODY -->
                <div class="menu-body">

                    <!-- NAME -->
                    <div class="menu-name">

                        <?= e($item['name']) ?>

                    </div>

                    <!-- PRICE -->
                    <div class="menu-price">

                        $<?= number_format($item['price'], 2) ?>

                    </div>

                    <!-- ADD TO CART -->
                    <form method="POST"
                          action="order.php">

                        <input type="hidden"
                               name="action"
                               value="add">

                        <input type="hidden"
                               name="item_id"
                               value="<?= $item['id'] ?>">

                        <button type="submit"
                                class="btn btn-primary menu-btn">

                            <?= t('add_cart') ?>

                        </button>

                    </form>

                </div>

            </div>

            <?php endforeach; ?>

        </div>

        <?php endif; ?>

    </div>

</div>

<?php require_once 'includes/footer.php'; ?>

</body>

</html>