<?php
session_start();

$jsonFile = 'menu.json';

// Simple authentication (you can expand this)
if (isset($_GET['logout'])) {
    session_destroy();
    header("Location: admin.php");
    exit;
}

if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['login'])) {
    if ($_POST['password'] == 'feliza123') { // Replace with a secure password
        $_SESSION['logged_in'] = true;
    } else {
        $error = "Invalid password";
    }
}

if (!isset($_SESSION['logged_in'])) {
    ?>
    <!DOCTYPE html>
    <html>
    <head>
        <title>Feliza Lounge Admin - Login</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body { font-family: 'Segoe UI', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #071c35; color: #fff; margin: 0; padding: 20px; box-sizing: border-box; }
            .login-box { background: #fff; color: #333; padding: 40px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); width: 100%; max-width: 400px; }
            h2 { margin-top: 0; color: #071c35; text-align: center; }
            input { display: block; width: 100%; margin: 15px 0; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 16px; }
            button { background: #c5a059; color: #fff; border: none; padding: 12px 20px; cursor: pointer; border-radius: 4px; width: 100%; font-size: 16px; font-weight: 600; transition: background 0.3s; }
            button:hover { background: #b08e4d; }
        </style>
    </head>
    <body>
        <div class="login-box">
            <h2>Lounge CMS Login</h2>
            <?php if(isset($error)) echo "<p style='color:red'>$error</p>"; ?>
            <form method="POST">
                <input type="password" name="password" placeholder="Password" required>
                <button type="submit" name="login">Login</button>
            </form>
        </div>
    </body>
    </html>
    <?php
    exit;
}

// Load data
$data = json_decode(file_get_contents($jsonFile), true);

// Handle updates
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['save_menu'])) {
    $updatedData = [
        "categories" => []
    ];
    
    foreach ($_POST['cat_name'] as $cIdx => $catName) {
        $items = [];
        if (isset($_POST['item_name'][$cIdx])) {
            foreach ($_POST['item_name'][$cIdx] as $iIdx => $itemName) {
                if (!empty($itemName)) {
                    $items[] = [
                        "name" => $itemName,
                        "price" => $_POST['item_price'][$cIdx][$iIdx],
                        "description" => $_POST['item_desc'][$cIdx][$iIdx]
                    ];
                }
            }
        }
        $updatedData["categories"][] = [
            "name" => $catName,
            "items" => $items
        ];
    }
    
    file_put_contents($jsonFile, json_encode($updatedData, JSON_PRETTY_PRINT));
    $data = $updatedData;
    $success = "Menu updated effectively!";
}

?>
<!DOCTYPE html>
<html>
<head>
    <title>Feliza Lounge CMS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f4f7f6; margin: 0; color: #333; }
        .header { background: #071c35; color: #fff; padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .header h1 { margin: 0; font-size: 20px; }
        .container { max-width: 1000px; margin: 30px auto; background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        .category-box { border: 1px solid #eee; padding: 20px; margin-bottom: 30px; border-radius: 10px; background: #ffffff; border-left: 5px solid #c5a059; }
        .item-row { display: grid; grid-template-columns: 2fr 1fr 3fr auto; gap: 12px; margin-bottom: 12px; border-bottom: 1px solid #f0f0f0; padding-bottom: 12px; align-items: center; }
        input, textarea { padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; width: 100%; box-sizing: border-box; }
        input:focus { border-color: #c5a059; outline: none; box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.1); }
        .btn { padding: 10px 18px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; font-size: 14px; gap: 8px; }
        .btn-add { background: #28a745; color: #fff; margin-top: 10px; }
        .btn-add:hover { background: #218838; }
        .btn-del { background: #fff; color: #dc3545; border: 1px solid #dc3545; }
        .btn-del:hover { background: #dc3545; color: #fff; }
        .btn-save { background: #c5a059; color: #fff; font-size: 18px; width: 100%; margin-top: 30px; padding: 15px; text-transform: uppercase; letter-spacing: 1px; }
        .btn-save:hover { background: #b08e4d; transform: translateY(-2px); }
        .btn-logout { background: rgba(255,255,255,0.1); color: #fff; font-size: 13px; }
        .btn-logout:hover { background: rgba(255,255,255,0.2); }
        h3 { margin-top: 0; color: #071c35; border-bottom: 2px solid #c5a059; padding-bottom: 5px; }
        .alert { padding: 15px; margin-bottom: 25px; border-radius: 8px; font-weight: 500; text-align: center; }
        .alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        
        @media (max-width: 768px) {
            .header { padding: 15px; }
            .header h1 { font-size: 16px; }
            .container { margin: 15px; padding: 15px; border-radius: 0; width: auto; }
            .item-row { grid-template-columns: 1fr 1fr; gap: 10px; }
            .item-row input:nth-child(1) { grid-column: span 2; font-weight: bold; }
            .item-row input:nth-child(2) { grid-column: span 1; }
            .item-row input:nth-child(3) { grid-column: span 2; }
            .item-row .btn-del { grid-column: span 1; justify-self: end; padding: 5px 10px; }
            .cat-header { flex-direction: column; align-items: flex-start !important; gap: 10px; }
            .cat-header input { width: 100% !important; }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Feliza Lounge CMS</h1>
        <a href="?logout=1" class="btn btn-logout">Logout</a>
    </div>
    
    <div class="container">
        <?php if(isset($success)) echo "<div class='alert alert-success'>$success</div>"; ?>
        
        <form method="POST">
            <div id="categories-container">
                <?php foreach ($data['categories'] as $cIdx => $category): ?>
                    <div class="category-box">
                        <div class="cat-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                            <input type="text" name="cat_name[<?=$cIdx?>]" value="<?=htmlspecialchars($category['name'])?>" style="font-weight: bold; font-size: 18px; width: 300px;" placeholder="Category Name">
                            <button type="button" class="btn btn-del" onclick="this.closest('.category-box').remove()"><i class="fa fa-trash"></i></button>
                        </div>
                        
                        <div class="items-list">
                            <?php foreach ($category['items'] as $iIdx => $item): ?>
                                <div class="item-row">
                                    <input type="text" name="item_name[<?=$cIdx?>][<?=$iIdx?>]" value="<?=htmlspecialchars($item['name'])?>" placeholder="Item Name">
                                    <input type="text" name="item_price[<?=$cIdx?>][<?=$iIdx?>]" value="<?=htmlspecialchars($item['price'])?>" placeholder="Price">
                                    <input type="text" name="item_desc[<?=$cIdx?>][<?=$iIdx?>]" value="<?=htmlspecialchars($item['description'])?>" placeholder="Description" style="flex-grow: 1;">
                                    <button type="button" class="btn btn-del btn-sm" onclick="this.parentElement.remove()">&times;</button>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        <button type="button" class="btn btn-add" onclick="addItem(this, <?=$cIdx?>)">+ Add Item</button>
                    </div>
                <?php endforeach; ?>
            </div>
            
            <button type="button" class="btn btn-add" onclick="addCategory()" style="background: #007bff; font-size: 15px;">+ Add New Category</button>
            <button type="submit" name="save_menu" class="btn btn-save">SAVE ALL CHANGES</button>
        </form>
    </div>

    <script>
        function addItem(btn, catIdx) {
            const list = btn.previousElementSibling;
            const iIdx = list.children.length;
            const row = document.createElement('div');
            row.className = 'item-row';
            row.innerHTML = `
                <input type="text" name="item_name[${catIdx}][${iIdx}]" placeholder="Item Name">
                <input type="text" name="item_price[${catIdx}][${iIdx}]" placeholder="Price">
                <input type="text" name="item_desc[${catIdx}][${iIdx}]" placeholder="Description">
                <button type="button" class="btn btn-del" onclick="this.parentElement.remove()">&times;</button>
            `;
            list.appendChild(row);
        }

        function addCategory() {
            const container = document.getElementById('categories-container');
            const catIdx = container.children.length;
            const box = document.createElement('div');
            box.className = 'category-box';
            box.innerHTML = `
                <div class="cat-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                    <input type="text" name="cat_name[${catIdx}]" value="" style="font-weight: bold; font-size: 18px; width: 300px;" placeholder="New Category Name">
                    <button type="button" class="btn btn-del" onclick="this.closest('.category-box').remove()"><i class="fa fa-trash"></i></button>
                </div>
                <div class="items-list"></div>
                <button type="button" class="btn btn-add" onclick="addItem(this, ${catIdx})">+ Add Item</button>
            `;
            container.appendChild(box);
        }
    </script>
</body>
</html>
