<?php
// Enable error reporting for debugging
error_reporting(E_ALL);
ini_set('display_errors', 1);

// Use absolute path for the JSON file to ensure it's found on all servers
$jsonPath = __DIR__ . '/menu.json';

// Initialize default menu data in case JSON loading fails
$menuData = [
    'categories' => [
        [
            'name' => 'Menu Unavailable',
            'items' => [
                [
                    'name' => 'Please try again later',
                    'price' => 'N/A',
                    'description' => 'The menu is temporarily unavailable. This usually means menu.json was not uploaded or server permissions need adjustment.'
                ]
            ]
        ]
    ]
];

$error_message = '';

if (!file_exists($jsonPath)) {
    $error_message = "Error: menu.json not found at: " . $jsonPath . ". Please ensure menu.json is uploaded to the lounge/ directory.";
} else {
    $jsonContent = file_get_contents($jsonPath);
    if ($jsonContent === false) {
        $error_message = "Error: Could not read menu.json. Check file permissions - the file must be readable by the web server.";
    } else {
        $menuData = json_decode($jsonContent, true);
        if ($menuData === null) {
            $error_message = "Error: Invalid JSON syntax in menu.json.";
        }
    }
}

$drinkCategories = ['Signature Cocktails', 'Classic Cocktails', 'Wine (Bottle)', 'Wine (Glass)', 'Champagne & Sparkling', 'Ultra Premium Spirits'];
$foodCategories = ['Starters & Small Bites', 'Additional Main Dishes', 'Soups', 'Swallow'];

$drinks = [];
$food = [];

if (isset($menuData['categories']) && is_array($menuData['categories'])) {
    foreach ($menuData['categories'] as $category) {
        if (in_array($category['name'], $drinkCategories)) {
            $drinks[] = $category;
        } elseif (in_array($category['name'], $foodCategories)) {
            $food[] = $category;
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feliza Lounge & Bar | Abeokuta</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/all.min.css">
    <link href="css/aos.css" rel="stylesheet">
    <link rel="shortcut icon" href="../assets/images/favicon.png" type="image/x-icon">
    <link rel="apple-touch-icon-precomposed" href="../assets/images/favicon.png">

    <style>
        :root {
            --feliza-gold: #c5a059;
            --feliza-dark: #071c35;
        }
        .header__logo img {
            max-height: 60px;
        }
        .s-menu.p-list, .menu-main, .menu-list {
            background: none !important;
        }
        .menu-list li {
            border-bottom: none !important;
            padding-bottom: 15px !important;
            margin-bottom: 20px !important;
        }
        .menu-item-header {
            display: flex;
            align-items: baseline;
            width: 100%;
        }
        .menu-item-name {
            flex-shrink: 0;
            padding-right: 10px;
            font-family: "Audrey", sans-serif;
            font-size: 18px;
            color: var(--feliza-dark);
            text-transform: uppercase;
        }
        .menu-item-dots {
            flex-grow: 1;
            border-bottom: 2px dotted #ccc;
            margin-bottom: 5px;
        }
        .menu-item-price {
            flex-shrink: 0;
            padding-left: 10px;
            font-family: "DM Sans", sans-serif;
            font-size: 18px;
            color: var(--feliza-gold);
            font-weight: 700;
        }

        /* Tab Styling */
        .menu-tabs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 50px;
            border-bottom: 1px solid #eee;
            padding-bottom: 20px;
        }
        .menu-tab-btn {
            background: none;
            border: 2px solid var(--feliza-dark);
            color: var(--feliza-dark);
            padding: 12px 40px;
            font-size: 18px;
            font-weight: 700;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: "Audrey", sans-serif;
        }
        .menu-tab-btn.active {
            background: var(--feliza-gold);
            border-color: var(--feliza-gold);
            color: #fff;
        }
        .menu-tab-btn:hover:not(.active) {
            background: rgba(197, 160, 89, 0.1);
            border-color: var(--feliza-gold);
            color: var(--feliza-gold);
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }

        /* Mobile Responsiveness Enhancements */
        @media (max-width: 991px) {
            .menu-list {
                grid-template-columns: 1fr !important;
                gap: 20px !important;
            }
            .s-menu.p-list {
                padding-top: 60px !important;
                padding-bottom: 60px !important;
            }
            .page-title-main h2.title {
                font-size: 36px !important;
            }
            .block-text h3.title {
                font-size: 30px !important;
            }
            .category-title {
                font-size: 20px !important;
                margin-bottom: 25px !important;
            }
            .menu-item-name, .menu-item-price {
                font-size: 16px !important;
            }
            .menu-tab-btn {
                padding: 10px 25px;
                font-size: 16px;
            }
        }

        @media (max-width: 575px) {
            .menu-item-header {
                display: block;
            }
            .menu-item-dots {
                display: none;
            }
            .menu-item-name {
                display: inline;
                width: auto;
                padding-right: 8px;
                margin-bottom: 0;
            }
            .menu-item-price {
                display: inline;
                width: auto;
                padding-left: 0;
                text-align: left;
            }
            .menu-tabs {
                gap: 10px;
            }
            .menu-tab-btn {
                flex: 1;
                padding: 10px 15px;
                font-size: 14px;
            }
        }
    </style>
</head>

<body class="main header-fixed p-menu home-3">

    <div id="wrapper">
        <div id="page" class="clearfix">

            <header id="header_main" class="header style-2" style="background: #071c35; padding: 0;">
                <div class="container-fluid">
                    <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; flex-wrap: wrap; gap: 10px;">
                        <div class="header__logo">
                            <a href="../index.html"><img src="../assets/images/logo/logo-main.png" alt="Feliza Logo" style="max-height: 55px;"></a>
                        </div>
                        <!-- Mobile Toggle -->
                        <button id="loungeMenuToggle" style="display:none; background:none; border:2px solid #c5a059; color:#c5a059; padding:8px 14px; border-radius:4px; cursor:pointer; font-size:20px;">&#9776;</button>
                        <!-- Nav Menu -->
                        <nav id="loungeNav" style="display: flex; align-items: center; gap: 5px; flex-wrap: wrap;">
                            <a href="../index.html" style="color:#fff; padding:10px 14px; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; text-decoration:none; transition:color 0.3s;">Home</a>
                            <a href="../about.html" style="color:#fff; padding:10px 14px; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; text-decoration:none; transition:color 0.3s;">About</a>
                            <a href="https://felizahotel.com/event" style="color:#fff; padding:10px 14px; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; text-decoration:none;">Event Center</a>
                            <div class="lounge-dropdown" style="position:relative; display:inline-block;">
                                <a href="../reservation.html" style="color:#fff; padding:10px 14px; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; text-decoration:none;">Rooms &amp; Suites &#9662;</a>
                                <div class="lounge-submenu" style="display:none; position:absolute; top:100%; left:0; background:#071c35; min-width:200px; z-index:999; box-shadow:0 8px 20px rgba(0,0,0,0.4); border-top:2px solid #c5a059;">
                                    <a href="../room-standard.html" style="display:block; color:#fff; padding:10px 16px; font-size:13px; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.1);">Standard Room</a>
                                    <a href="../room-deluxe.html" style="display:block; color:#fff; padding:10px 16px; font-size:13px; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.1);">Deluxe Room</a>
                                    <a href="../room-super-deluxe.html" style="display:block; color:#fff; padding:10px 16px; font-size:13px; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.1);">Super Deluxe Room</a>
                                    <a href="../room-executive.html" style="display:block; color:#fff; padding:10px 16px; font-size:13px; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.1);">Executive Suite</a>
                                    <a href="../room-presidential.html" style="display:block; color:#fff; padding:10px 16px; font-size:13px; text-decoration:none;">Presidential Suite</a>
                                </div>
                            </div>
                            <a href="index.php" style="color:#c5a059; padding:10px 14px; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:700; text-decoration:none;">Lounge Menu</a>
                            <a href="../reservation.html" style="color:#fff; padding:10px 14px; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; text-decoration:none;">Reservation</a>
                            <a href="../contact.html" style="color:#fff; padding:10px 14px; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; text-decoration:none;">Contact</a>
                        </nav>
                    </div>
                </div>
                <style>
                    #header_main a:hover { color: #c5a059 !important; }
                    .lounge-dropdown:hover .lounge-submenu { display: block !important; }
                    @media (max-width: 991px) {
                        #loungeMenuToggle { display: block !important; }
                        #loungeNav { display: none; width: 100%; flex-direction: column; align-items: flex-start; background: #071c35; padding: 10px 0; }
                        #loungeNav.open { display: flex !important; }
                        .lounge-submenu { position: static !important; display: none; box-shadow: none !important; padding-left: 15px; }
                        .lounge-dropdown.open .lounge-submenu { display: block !important; }
                    }
                </style>
                <script>
                    document.getElementById('loungeMenuToggle').addEventListener('click', function(){
                        document.getElementById('loungeNav').classList.toggle('open');
                    });
                    document.querySelectorAll('.lounge-dropdown > a').forEach(function(a) {
                        a.addEventListener('click', function(e){
                            if (window.innerWidth <= 991) {
                                e.preventDefault();
                                this.parentElement.classList.toggle('open');
                            }
                        });
                    });
                </script>
            </header>


            <section class="page-title" style="background: url('images/bg-menu.jpg') no-repeat center 30% / cover; min-height: 350px; display: flex; align-items: center; position: relative;">
                <div class="page-title" style="background:none; position:absolute; inset:0; opacity:0.55; background:#071c35;"></div>
                <div class="container" style="position:relative; z-index:2;">
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-main">
                                <h2 class="title" style="color:#fff; font-size:48px; margin-bottom:12px;">Lounge Menu</h2>
                                <ul class="breacrumd" style="list-style:none; padding:0; display:flex; gap:8px;">
                                    <li><a href="../index.html" style="color:#c5a059; text-decoration:none;">Home</a></li>
                                    <li style="color:#fff;">/</li>
                                    <li style="color:#fff;">Lounge Menu</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>


            <section class="s-menu p-list" style="padding-top: 100px; padding-bottom: 100px; background: #fff !important;">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-10">
                            <?php if (!empty($error_message)): ?>
                            <div style="background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; padding: 15px; border-radius: 4px; margin-bottom: 30px;">
                                <h4 style="margin-top: 0; color: #721c24;">⚠️ Menu Loading Error</h4>
                                <p style="margin: 10px 0;"><?php echo htmlspecialchars($error_message); ?></p>
                                <p style="margin: 10px 0; font-size: 14px;"><strong>Solution:</strong> Make sure <code>menu.json</code> is uploaded to the <code>lounge/</code> folder on your server alongside this PHP file.</p>
                            </div>
                            <?php endif; ?>
                            <div class="block-text center">
                                <p class="subtitle" data-aos="fade-up">Feliza Experience</p>
                                <h3 class="title" data-aos="fade-up">Lounge & Bar Selection</h3>
                            </div>

                            <div class="menu-tabs" data-aos="fade-up">
                                <button class="menu-tab-btn active" data-tab="drinks">Drinks</button>
                                <button class="menu-tab-btn" data-tab="food">Food Items</button>
                            </div>

                            <!-- Drinks Tab -->
                            <div id="drinks" class="tab-content active">
                                <?php foreach ($drinks as $category): ?>
                                <div class="menu-category-wrap mb-60" data-aos="fade-up">
                                    <h4 class="category-title text-center" style="color: var(--feliza-dark); border-bottom: 2px solid var(--feliza-gold); display: inline-block; padding-bottom: 15px; width: 100%; margin: 80px 0;">
                                        <?php echo htmlspecialchars($category['name']); ?>
                                    </h4>
                                    <div class="menu-main">
                                        <ul class="menu-list" style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
                                            <?php if (isset($category['items'])): ?>
                                            <?php foreach ($category['items'] as $item): ?>
                                            <li>
                                                <div class="menu-item-header">
                                                    <span class="menu-item-name"><?php echo htmlspecialchars($item['name']); ?></span>
                                                    <span class="menu-item-dots"></span>
                                                    <span class="menu-item-price">₦<?php echo htmlspecialchars($item['price']); ?></span>
                                                </div>
                                                <?php if (!empty($item['description'])): ?>
                                                <p class="text" style="color: #666; font-size: 14px; margin-top: 5px;"><?php echo htmlspecialchars($item['description']); ?></p>
                                                <?php endif; ?>
                                            </li>
                                            <?php endforeach; ?>
                                            <?php endif; ?>
                                        </ul>
                                    </div>
                                </div>
                                <?php endforeach; ?>
                            </div>

                            <!-- Food Tab -->
                            <div id="food" class="tab-content">
                                <?php foreach ($food as $category): ?>
                                <div class="menu-category-wrap mb-60" data-aos="fade-up">
                                    <h4 class="category-title text-center" style="color: var(--feliza-dark); border-bottom: 2px solid var(--feliza-gold); display: inline-block; padding-bottom: 15px; width: 100%; margin: 80px 0;">
                                        <?php echo htmlspecialchars($category['name']); ?>
                                    </h4>
                                    <div class="menu-main">
                                        <ul class="menu-list" style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
                                            <?php if (isset($category['items'])): ?>
                                            <?php foreach ($category['items'] as $item): ?>
                                            <li>
                                                <div class="menu-item-header">
                                                    <span class="menu-item-name"><?php echo htmlspecialchars($item['name']); ?></span>
                                                    <span class="menu-item-dots"></span>
                                                    <span class="menu-item-price">₦<?php echo htmlspecialchars($item['price']); ?></span>
                                                </div>
                                                <?php if (!empty($item['description'])): ?>
                                                <p class="text" style="color: #666; font-size: 14px; margin-top: 5px;"><?php echo htmlspecialchars($item['description']); ?></p>
                                                <?php endif; ?>
                                            </li>
                                            <?php endforeach; ?>
                                            <?php endif; ?>
                                        </ul>
                                    </div>
                                </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <footer class="footer style-2" style="background: var(--feliza-dark); padding: 40px 0;">
                <div class="container">
                    <div class="bottom-footer">
                        <div class="row">
                            <div class="col-12 text-center">
                                <p style="color: #fff; margin-bottom: 0;">&copy; <?php echo date('Y'); ?> Feliza Hotel & Suites. All rights reserved.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>

    <a id="scroll-top"></a>

    <script src="js/jquery.min.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/swiper.js"></script>
    <script src="js/app.js"></script>
    <script src="js/jquery.easing.js"></script>
    <script src="js/aos.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function(){
            AOS.init({
                duration: 1000,
                once: true
            });

            // Tab functionality
            $('.menu-tab-btn').on('click', function(){
                const tabId = $(this).data('tab');

                // Switch button states
                $('.menu-tab-btn').removeClass('active');
                $(this).addClass('active');

                // Switch content
                $('.tab-content').fadeOut(300, function(){
                    $(this).removeClass('active');
                    $('#' + tabId).fadeIn(300).addClass('active');
                    // Refresh AOS as content height might change
                    AOS.refresh();
                });
            });
        });
    </script>
</body>

</html>