<?php
include("../config/db.php");

/* Filters */
$search = $_GET['search'] ?? '';
$type = $_GET['type'] ?? '';
$cat = $_GET['category'] ?? '';

$where = "WHERE 1";

if ($search)
    $where .= " AND m.item_name LIKE '%$search%'";

if ($type)
    $where .= " AND m.type='$type'";

if ($cat)
    $where .= " AND m.category_id='$cat'";

/* Categories */
$categories = $conn->query("SELECT * FROM categories ORDER BY name");

/* Menu Items */
$data = $conn->query("
    SELECT m.*, c.name AS category
    FROM menu_items m
    JOIN categories c ON m.category_id=c.id
    $where
");
?>

<!DOCTYPE html>
<html>
<head>
<title>Our Menu</title>

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

<style>

body{
background:#f4f4f4;
}

/* App Header */
.menu-header{
background:#231f20;
color:#fffbd5;
padding:15px;
position:sticky;
top:0;
z-index:1000;
}

/* Search Bar */
.search-box{
background:#fff;
border-radius:30px;
padding:8px 15px;
box-shadow:0 5px 15px rgba(0,0,0,.15);
}

/* Food Card */
.food-card{
border:none;
border-radius:18px;
overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,.15);
transition:.3s;
height:100%;
}

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

.food-card img{
height:180px;
object-fit:cover;
}

/* Badge */
.badge-veg{
background:#198754;
}

.badge-nonveg{
background:#dc3545;
}

/* Price */
.price{
color:#b37f24;
font-weight:600;
}

/* Mobile spacing */
@media(max-width:768px){
.food-card img{
height:140px;
}
}

</style>

</head>

<body>

<!-- APP HEADER -->
<div class="menu-header text-center">
<h4>🍽 Our Menu</h4>

<form class="search-box mt-3" method="get">

<div class="row g-2">

<div class="col-12">
<input class="form-control" name="search" placeholder="Search food..." value="<?= $search ?>">
</div>

<div class="col-4">
<select name="category" class="form-select">
<option value="">Category</option>
<?php while($c=$categories->fetch_assoc()): ?>
<option value="<?= $c['id'] ?>" <?= $cat==$c['id']?'selected':'' ?>>
<?= $c['name'] ?>
</option>
<?php endwhile; ?>
</select>
</div>

<div class="col-4">
<select name="type" class="form-select">
<option value="">All</option>
<option value="veg" <?= $type=='veg'?'selected':'' ?>>Veg</option>
<option value="nonveg" <?= $type=='nonveg'?'selected':'' ?>>NonVeg</option>
</select>
</div>

<div class="col-4 d-grid">
<button class="btn btn-warning">
<i class="fa fa-search"></i>
</button>
</div>

</div>

</form>
</div>

<!-- MENU ITEMS -->
<div class="container mt-4 mb-5">

<div class="row g-4">

<?php if($data->num_rows==0): ?>
<div class="text-center">No Items Found</div>
<?php endif; ?>

<?php while($row=$data->fetch_assoc()): ?>

<div class="col-6 col-md-4">

<div class="card food-card">

<img src="../uploads/menu/<?= $row['image'] ?>">

<div class="card-body">

<h6><?= htmlspecialchars($row['item_name']) ?></h6>

<span class="badge <?= $row['type']=='veg'?'badge-veg':'badge-nonveg' ?>">
<?= $row['type']=='veg'?'VEG':'NON VEG' ?>
</span>

<p class="small text-muted mb-1"><?= $row['category'] ?></p>

<div class="price">₹<?= $row['price'] ?></div>

</div>
</div>

</div>

<?php endwhile; ?>

</div>
</div>

</body>
</html>
