<?php
require_once 'app/Core/init.php';

$categoryModel = new Category();
$itemModel = new Item();

// Get data using YOUR existing functions
$categories = $categoryModel->getActive(9);
$featuredItems = $itemModel->getFeatured(5);
$recentItems = $itemModel->getRecent(10);

// ADD THIS IMMEDIATELY AFTER:
// Initialize OrderRating model for real ratings
require_once __DIR__ . '/app/Models/OrderRating.php';
$ratingModel = new OrderRating();

// Get real ratings for featured items
foreach ($featuredItems as &$item) {
    $itemRating = $ratingModel->getItemAverageRating($item['id']);
    $item['item_average_rating'] = $itemRating['average'];
    $item['item_total_ratings'] = $itemRating['count'];
}

// Get real ratings for recent items
foreach ($recentItems as &$item) {
    $itemRating = $ratingModel->getItemAverageRating($item['id']);
    $item['item_average_rating'] = $itemRating['average'];
    $item['item_total_ratings'] = $itemRating['count'];
}

//Get customer favorites if logged in
$customer_favorites = [];
if (Auth::check() && Auth::userType() === 'customer') {
    $customerModel = new Customer();
    $customer = $customerModel->findByUserId(Auth::id());
    
    if ($customer) {
        $favouriteModel = new Favourite();
        $favorites = $favouriteModel->getByCustomer($customer['id']);
        
        foreach ($favorites as $fav) {
            $customer_favorites[] = $fav['item_id'];
        }
    }
}

// Helper function for images
function getItemImage($item) {
    $images = json_decode($item['images'] ?? '[]', true);
    return !empty($images) ? $images[0] : 'assets/images/default-item.jpg';
}

// Helper function for rating stars
function displayStars($rating) {
    $html = '';
    for ($i = 1; $i <= 5; $i++) {
        if ($i <= floor($rating)) {
            $html .= '<i class="fa-solid fa-star"></i>';
        } elseif ($i - 0.5 <= $rating) {
            $html .= '<i class="fa-solid fa-star-half-stroke"></i>';
        } else {
            $html .= '<i class="fa-regular fa-star"></i>';
        }
    }
    return $html;
}

// Include header template
include __DIR__ . '/templates/layouts/frontend/header.php';
?>
    <!-- start hero header (waves) -->
    <div class="hero-header-waves mx-3 overflow-hidden dark-overlay position-relative rounded-4 bg-light">
        <!-- start background header carousel -->
        <div class="header-carousel owl-carousel owl-theme position-absolute top-0 start-0 end-0 h-100">
            <img class="h-100 object-fit-cover" src="assets/images/header/lg-05.jpg" alt="Image">
            <img class="h-100 object-fit-cover" src="assets/images/header/lg-06.jpg" alt="Image">
            <img class="h-100 object-fit-cover" src="assets/images/header/lg-07.jpg" alt="Image">
        </div>
        <!-- end /. background header carousel -->
        <div class="inner-header position-relative z-2">
            <div class="container">
                <div class="row align-items-center g-4">
                    <div class="col-lg-7">
                        <h1 class="display-2 fw-bold hero-header_title mb-2 text-capitalize text-white">Want to <span class="font-caveat text-span">Visit Popular</span> Tourists Spots in a New City or Town?</h1>
                    </div>
                    <div class="col-lg-5">
                        <div class="p-4 p-sm-5 position-relative rounded-5 z-1 search-content">
                            <h2 class="h3 hero-header_title mb-2 text-capitalize text-white text-start">Find Trending Tourist Locations</h2>
                            <div class="fs-18 mb-4 text-start text-white">Visit a Unique Historical or Cultural Site</div>

                            <!-- start search content -->
                            <form action="items.php" method="GET">
                                <div class="border-0 card d-flex flex-column gap-4 position-relative rounded-4 search-wrapper">
                                    <div class="align-items-center d-flex search-field w-100">
                                        <div class="svg-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
                                            </svg>
                                        </div>
                                        <!-- start input -->
                                        <input type="text" name="search" class="form-control search-input" placeholder="What are you looking for?">
                                        <!-- end /. input -->
                                    </div>
                                    <div class="align-items-center d-flex search-field w-100">
                                        <div class="svg-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-grid-3x3-gap" viewBox="0 0 16 16">
                                                <path d="M4 2v2H2V2h2zm1 12v-2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm5 10v-2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V7a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zM9 2v2H7V2h2zm5 0v2h-2V2h2zM4 7v2H2V7h2zm5 0v2H7V7h2zm5 0h-2v2h2V7zM4 12v2H2v-2h2zm5 0v2H7v-2h2zm5 0v2h-2v-2h2z"/>
                                            </svg>
                                        </div>
                                        <!-- start select -->
                                        <select name="category" class="form-select search-select-field">
                                            <option value="">All Categories</option>
                                            <?php foreach ($categories as $cat): ?>
                                            <option value="<?= $cat['slug'] ?>"><?= htmlspecialchars($cat['name']) ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                        <!-- end /. select -->
                                    </div>
                                    <div class="align-items-center d-flex search-field w-100">
                                        <div class="svg-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
                                                <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
                                                <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                                            </svg>
                                        </div>
                                        <select name="location" class="form-select search-select-field">
                                            <option value="">All States</option>
                                            <option value="Abia">Abia</option>
                                            <option value="Adamawa">Adamawa</option>
                                            <option value="Akwa Ibom">Akwa Ibom</option>
                                            <option value="Anambra">Anambra</option>
                                            <option value="Bauchi">Bauchi</option>
                                            <option value="Bayelsa">Bayelsa</option>
                                            <option value="Benue">Benue</option>
                                            <option value="Borno">Borno</option>
                                            <option value="Cross River">Cross River</option>
                                            <option value="Delta">Delta</option>
                                            <option value="Ebonyi">Ebonyi</option>
                                            <option value="Edo">Edo</option>
                                            <option value="Ekiti">Ekiti</option>
                                            <option value="Enugu">Enugu</option>
                                            <option value="FCT">FCT</option>
                                            <option value="Gombe">Gombe</option>
                                            <option value="Imo">Imo</option>
                                            <option value="Jigawa">Jigawa</option>
                                            <option value="Kaduna">Kaduna</option>
                                            <option value="Kano">Kano</option>
                                            <option value="Katsina">Katsina</option>
                                            <option value="Kebbi">Kebbi</option>
                                            <option value="Kogi">Kogi</option>
                                            <option value="Kwara">Kwara</option>
                                            <option value="Lagos">Lagos</option>
                                            <option value="Nasarawa">Nasarawa</option>
                                            <option value="Niger">Niger</option>
                                            <option value="Ogun">Ogun</option>
                                            <option value="Ondo">Ondo</option>
                                            <option value="Osun">Osun</option>
                                            <option value="Oyo">Oyo</option>
                                            <option value="Plateau">Plateau</option>
                                            <option value="Rivers">Rivers</option>
                                            <option value="Sokoto">Sokoto</option>
                                            <option value="Taraba">Taraba</option>
                                            <option value="Yobe">Yobe</option>
                                            <option value="Zamfara">Zamfara</option>
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-primary rounded-5 mt-3 mt-md-0">
                                        <i class="fas fa-search me-2"></i>Search Items
                                    </button>
                                </div>
                            </form>
                            <!-- end /. search content -->
                             
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- waves container -->
        <div class="position-relative z-2">
            <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                <defs>
                    <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
                </defs>
                <g class="parallax">
                    <use xlink:href="#gentle-wave" x="48" y="0" />
                    <use xlink:href="#gentle-wave" x="48" y="3" />
                    <use xlink:href="#gentle-wave" x="48" y="5" />
                    <use xlink:href="#gentle-wave" x="48" y="7" />
                </g>
            </svg>
        </div>
        <!-- end /. waves container -->
    </div>
    <!-- end /. hero header (waves) -->
    <!-- start featured section -->
    <div class="py-5 position-relative overflow-hidden bg-light mx-3 mt-3 rounded-4">
        <div class="container py-4">
            <div class="row justify-content-center">
                <div class="col-sm-10 col-md-10 col-lg-8 col-xl-7">
                    <!-- start section header -->
                    <div class="section-header text-center mb-5" data-aos="fade-down">
                        <!-- start subtitle -->
                        <!-- <div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">Let’s Explore!</div> -->
                        <!-- end /. subtitle -->
                        <!-- start title -->
                        <h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Categories</h2>
                        <!-- end /. title -->
                        <!-- start description -->
                        <div class="sub-title fs-16">Discover exciting categories. <span class="text-primary fw-semibold">Find what you’re looking for.</span></div>
                        <!-- end /. description -->
                    </div>
                    <!-- end /. section header -->
                </div>
            </div>
            <div class="row g-3 g-ld-4">
            <?php foreach ($categories as $category): ?>
                <div class="col-lg-4 col-md-6 col-sm-6 d-flex">
                    <!-- start category -->
                    <div class="align-items-center border-0 card card-hover d-flex flex-fill flex-row flex-wrap p-3 p-sm-3 rounded-4 shadow-sm w-100">
                        <div class="flex-shrink-0">
                            <div class="align-items-center bg-light d-flex fs-4 justify-content-center rounded-3 text-primary category-icon-box">
                                <i class="<?= $category['icon'] ?: 'fa-solid fa-box' ?>"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-2 ms-md-3">
                            <h3 class="fs-19 fw-semibold mb-1">
                                <a href="items.php?category=<?= $category['id'] ?>"><?= htmlspecialchars($category['name']) ?></a>
                            </h3>
                            <p class="mb-0 small"><?= $category['total_items'] ?> items</p>
                        </div>
                        <a href="items.php?category=<?= $category['id'] ?>" class="align-items-center d-flex fw-semibold gap-2 link-hover">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
                            </svg>
                        </a>
                    </div>
                    <!-- end /. category -->
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
    <!-- end /. featured section -->
    <!-- start listing section -->
    <?php if (!empty($featuredItems)): ?>
    <div class="py-5 bg-light rounded-4 mx-3 mt-3 bg-size-contain js-bg-image js-bg-image-lines" data-image-src="assets/images/lines.svg">
        <div class="container">
            <div class="align-items-end row g-4 mb-5" data-aos="fade-down">
                <div class="col">
                    <!-- start section header -->
                    <div class="section-header">
                        <!-- start subtitle -->
                        <!-- <div class="font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-center text-primary text-xl-start">Top</div> -->
                        <!-- end /. subtitle -->
                        <!-- start title -->
                        <h2 class="fw-semibold mb-0 section-header__title text-capitalize text-center text-xl-start display-6">Featured Items</h2>
                        <!-- end /. title -->
                        <!-- start description -->
                        <div class="sub-title fs-16 text-center text-xl-start">Discover exciting <span class="text-primary fw-semibold">Items.</span></div>
                        <!-- end /. description -->
                    </div>
                    <!-- end /. section header -->
                </div>
                <div class="col-12 col-xl-auto">
                    <!-- start button -->
                    <a href="items.php?type=featured" class="align-items-center d-flex fs-14 fw-bold gap-2 justify-content-center justify-content-xl-end l-spacing-1 text-primary text-uppercase">
                        See All
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
                        </svg>
                    </a>
                    <!-- end /. button -->
                </div>
            </div>
            <div class="items-carousel owl-carousel owl-theme owl-nav-center">
                <!-- start listing card -->
                <?php foreach ($featuredItems as $item): 
                    $itemUrl = 'item-details.php?slug=' . $item['slug'];
                    
                    // $itemImage = getItemImage($item);
                    $rating = $item['item_average_rating'] ?? 0;
                    $total_reviews = $item['item_total_ratings'] ?? 0;
                    $location = implode(', ', array_filter([$item['city'], $item['state']]));
                ?>
                <!-- start listing card -->
                <div class="bg-transparent border-0 card card-hover-bg flex-fill overflow-hidden rounded-4 card-width">
                    <!-- start card image wrap -->
                    <div class="card-img-wrap card-image-hover overflow-hidden dark-overlay rounded-4">
                        <a href="<?= $itemUrl ?>" class="stretched-link"></a>
                        <img src="<?= upload('items/' . $item['main_image']) ?>" alt="<?= htmlspecialchars($item['title']) ?>" class="img-fluid w-100">
                        <div class="align-items-center bg-blur border-0 card-badge d-flex d-inline-block fw-semibold gap-1 position-absolute start-0 text-uppercase text-white z-2" style="background-color: rgba(0, 0, 0, 0.5);">
                            <i class="<?php echo $item['category_icon'] ?>"></i><?= htmlspecialchars($item['category_name']) ?>
                        </div>
                        <div class="align-items-center bg-blur border-0 card-badge d-flex d-inline-block fw-semibold gap-1 position-absolute start-0 text-uppercase text-white z-2" style="background-color: rgba(0, 0, 0, 0.5);">
                            <?php
                            // Calculate REAL-TIME availability for TODAY
                            $today = date('Y-m-d');

                            // Get total booked for this specific item TODAY
                            $bookedTodaySql = "SELECT COALESCE(SUM(o.quantity), 0) as booked_today
                                            FROM orders o
                                            WHERE o.item_id = ?
                                            AND o.status NOT IN ('cancelled', 'completed')
                                            AND o.payment_status = 'paid'
                                            AND ? BETWEEN o.start_date AND o.end_date";

                            $bookedResult = $db->fetch($bookedTodaySql, [$item['id'], $today]);
                            $bookedToday = $bookedResult['booked_today'];
                            
                            $totalQuantity = $item['quantity'];
                            $availableToday = $totalQuantity - $bookedToday;
                            if ($availableToday <= 0):
                                echo 'Fully Booked Today';
                            else:
                                echo $availableToday . ' Available Today';
                            endif;
                            ?>
                        </div>
                        <div class="d-flex end-0 gap-2 me-3 mt-3 position-absolute top-0 z-1">
                            <a href="item-details.php?slug=<?= $item['slug'] ?>" class="btn-icon shadow-sm d-flex align-items-center justify-content-center text-primary bg-light rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bookmark">
                                
                            </a>
                        </div>
                        <div class="d-flex end-0 gap-2 me-3 mt-3 position-absolute top-0 z-1">
                            <?php 
                            $is_favorited = in_array($item['id'], $customer_favorites);
                            $heart_class = $is_favorited ? 'bi-heart-fill text-danger' : 'bi-heart text-primary';
                            ?>
                            <a href="javascript:void(0)" 
                            class="btn-icon shadow-sm d-flex align-items-center justify-content-center bg-light rounded-circle favorite-btn" 
                            data-item-id="<?= $item['id'] ?>"
                            data-favorited="<?= $is_favorited ? 'true' : 'false' ?>">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi <?= $heart_class ?>" viewBox="0 0 16 16">
                                    <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                    <!-- end /. card image wrap -->
                    <div class="row g-1 pt-2">
                        <div class="col-sm order-sm-first">
                            <h4 class="fs-5 fw-semibold restaurant-text-truncate overflow-hidden mb-0">
                                <span><?= htmlspecialchars($item['title']) ?></span>
                            </h4>
                            <!-- Rating -->
                            <div class="text-warning mb-1">
                                <?= displayStars($rating) ?>
                                <span class="text-muted small">(<?= number_format($rating, 1) ?> • <?= $total_reviews ?> <?= $total_reviews === 1 ? 'review' : 'reviews' ?>)</span>
                            </div>
                            <!-- Location -->
                            <p class="mb-0 fs-13"><i class="fa-solid fa-location-dot me-1"></i><?= $location ?: 'Location not specified' ?></p>
                            <!-- Vendor -->
                            <p class="mb-0 fs-13"><i class="fa-solid fa-store me-1"></i><?= htmlspecialchars($item['vendor_name']) ?></p>
                        </div>
                    </div>
                    <!-- start price -->
                    <div class="fs-6 fw-bold text-primary text-uppercase mt-3">₦<?= number_format($item['price_per_day'], 0) ?>/day</div>
                    <!-- end /. price -->
                </div>
                <!-- end /. listing card -->
                <?php endforeach; ?>
                <!-- end /. listing card -->
                
            </div>
            <!-- start banner -->
            <div class="banner banne-restaurant dark-overlay mt-5 overflow-hidden position-relative rounded-4">
                <img src="assets/images/banner-bg-02.jpg" class="bg-image js-image-parallax" alt="">
                <div class="align-items-center g-4 h-100 justify-content-between p-3 p-sm-5 position-relative row text-white wrapper z-1">
                    <div class="col-md-7 col-lg-6 text-center text-md-start">
                        <div class="fs-14 l-spacing-1">SPECIAL OFFER</div>
                        <h2 class="display-5 fw-semibold lh-1">Fast Food Dishes<br> at Just $19</h2>
                        <p>Hamburger, Chips, Sausages, Beer, Chicken Fries</p>
                        <a href="grid-listing-filterscol.html" class="btn btn-primary mt-3">Reserve now !</a>
                    </div>
                    <div class="col-md-5 col-lg-4">
                        <img src="assets/images/png-img/happy-hour.png" alt="" class="img-fluid">
                    </div>
                </div>
                <!-- /wrapper -->
            </div>
            <!-- end /. banner -->
        </div>
    </div>
    <?php endif; ?>
    <!-- end /. listing section -->
     
    <!-- start popular Items -->
    <div class="py-5 bg-light rounded-4 mx-3 my-3 bg-size-contain js-bg-image js-bg-image-lines" data-image-src="assets/images/lines.svg">
        <div class="container">
            <div class="align-items-end row g-4 mb-5" data-aos="fade-down">
                <div class="col">
                    <!-- start section header -->
                    <div class="section-header">
                        <!-- start subtitle -->
                        <!-- <div class="font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-center text-primary text-xl-start">Popular</div> -->
                        <!-- end /. subtitle -->
                        <!-- start title -->
                        <h2 class="fw-semibold mb-0 section-header__title text-capitalize text-center text-xl-start display-6">Recent Items</h2>
                        <!-- end /. title -->
                        <!-- start description -->
                        <div class="sub-title fs-16 text-center text-xl-start">Discover newly listed <span class="text-primary fw-semibold">Items.</span></div>
                        <!-- end /. description -->
                    </div>
                    <!-- end /. section header -->
                </div>
                <div class="col-12 col-xl-auto">
                    <!-- start button -->
                    <a href="items.php?type=recent" class="align-items-center d-flex fs-14 fw-bold gap-2 justify-content-center justify-content-xl-end l-spacing-1 text-primary text-uppercase">
                        See All
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
                        </svg>
                    </a>
                    <!-- end /. button -->
                </div>
            </div>
            <div class="row g-4">
                <?php
                    foreach ($recentItems as $item):
                        // $itemImage = getItemImage($item);
                        $rating = $item['item_average_rating'] ?? 0;
                        $total_reviews = $item['item_total_ratings'] ?? 0;
                        $location = implode(', ', array_filter([$item['city'], $item['state']]));
                    ?>
                <div class="col-lg-6 d-flex">
                    <!-- start card list -->
                    <div class="border-0 card card-hover flex-fill overflow-hidden rounded-4 w-100">
                        <a href="item-details.php?slug=<?= $item['slug'] ?>" class="stretched-link"></a>
                        <div class="card-body p-0">
                            <div class="g-0 h-100 row">
                                <div class="bg-white col-lg-5 col-md-5 col-xxl-5 position-relative">
                                    <div class="card-image-hover dark-overlay h-100 overflow-hidden position-relative">
                                        <!-- start image -->
                                        <img src="<?= upload('items/' . $item['main_image']) ?>" alt="<?= htmlspecialchars($item['title']) ?>" class="h-100 w-100 object-fit-cover">
                                        <!-- end /. image -->
                                        <div class="align-items-center bg-blur border-0 card-badge d-flex d-inline-block fw-semibold gap-1 position-absolute start-0 text-uppercase text-white z-2" style="background-color: rgba(0, 0, 0, 0.5);">
                                            <i class="<?php echo $item['category_icon'] ?>"></i><?= htmlspecialchars($item['category_name']) ?>
                                        </div>
                                        <div class="align-items-center bg-blur border-0 card-badge d-flex d-inline-block fw-semibold gap-1 position-absolute start-0 text-uppercase text-white z-2" style="background-color: rgba(0, 0, 0, 0.5);">
                                            <?php
                                            // Calculate REAL-TIME availability for TODAY
                                            $today = date('Y-m-d');

                                            // Get total booked for this specific item TODAY
                                            $bookedTodaySql = "SELECT COALESCE(SUM(o.quantity), 0) as booked_today
                                                            FROM orders o
                                                            WHERE o.item_id = ?
                                                            AND o.status NOT IN ('cancelled', 'completed')
                                                            AND o.payment_status = 'paid'
                                                            AND ? BETWEEN o.start_date AND o.end_date";

                                            $bookedResult = $db->fetch($bookedTodaySql, [$item['id'], $today]);
                                            $bookedToday = $bookedResult['booked_today'];
                                            
                                            $totalQuantity = $item['quantity'];
                                            $availableToday = $totalQuantity - $bookedToday;
                                            if ($availableToday <= 0):
                                                echo 'Fully Booked Today';
                                            else:
                                                echo $availableToday . ' Available Today';
                                            endif;
                                            ?>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-7 col-md-7 col-xxl-7 p-3 p-lg-4 p-md-3 p-sm-4">
                                    <div class="d-flex flex-column h-100">
                                        <div class="d-flex end-0 gap-2 me-3 mt-3 position-absolute top-0 z-1">
                                            <?php 
                                            $is_favorited = in_array($item['id'], $customer_favorites);
                                            $heart_class = $is_favorited ? 'bi-heart-fill text-danger' : 'bi-heart text-primary';
                                            ?>
                                            <a href="javascript:void(0)" 
                                            class="align-items-center bg-light btn-icon d-flex justify-content-center rounded-circle favorite-btn" 
                                            data-item-id="<?= $item['id'] ?>"
                                            data-favorited="<?= $is_favorited ? 'true' : 'false' ?>">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi <?= $heart_class ?>" viewBox="0 0 16 16">
                                                    <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                                                </svg>
                                            </a>
                                        </div>
                                        <div class="align-items-center d-flex flex-wrap gap-1 text-primary  card-start mb-2">
                                            <!-- start ratings -->
                                            <?php
                                            for ($i = 1; $i <= 5; $i++):
                                                $filled = $i <= round($rating);
                                            ?>
                                                <i class="fa-solid fa-star <?= $filled ? 'text-warning' : 'text-muted' ?>"></i>
                                            <?php endfor; ?>
                                            <!-- end /. ratings -->
                                            <!-- start rating counter text -->
                                            <span class="fw-medium text-primary">
                                                <span class="fs-6 fw-semibold me-1"><?= number_format($rating, 1) ?></span> 
                                                (<?= $total_reviews ?> <?= $total_reviews === 1 ? 'review' : 'reviews' ?>)
                                            </span>
                                            <!-- end /. rating counter text -->
                                        </div>
                                        <!-- start card title -->
                                        <h4 class="fs-19 fw-semibold mb-0">
                                            <span><?= htmlspecialchars($item['title']) ?></span>
                                            
                                        </h4>
                                        <!-- end /. card title -->
                                        <!-- start card description -->
                                        <p class="mt-1 fs-14 text-muted">
                                            <!-- Location -->
                                            <i class="fa-solid fa-location-dot me-1"></i><?= $location ?: 'Location not specified' ?><br>
                                            <!-- Vendor -->
                                            <i class="fa-solid fa-store me-1"></i><?= htmlspecialchars($item['vendor_name']) ?>
                                        </p>
                                        <!-- end /. card description -->
                                        <!-- start contact content -->
                                        <div class="d-flex flex-wrap gap-3 gap-lg-2 gap-xl-3 mt-auto z-1">
                                            <!-- start price -->
                                            <div class="fs-6 fw-bold text-primary text-uppercase mt-3">₦<?= number_format($item['price_per_day'], 0) ?>/day</div>
                                            <!-- end /. price -->
                                        </div>
                                        <!-- end contact content -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end /. card list -->
                </div>
                <?php endforeach; ?>
                
            </div>
            <!-- start banner -->
            <div class="banner banne-restaurant dark-overlay mt-5 overflow-hidden position-relative rounded-4">
                <img src="assets/images/banner-bg-03.jpg" class="bg-image js-image-parallax" alt="">
                <div class="align-items-center g-4 h-100 justify-content-between p-3 p-sm-5 position-relative row text-white wrapper z-1">
                    <div class="col-md-7 col-lg-6 text-center text-md-start">
                        <div class="fs-14 l-spacing-1">SPECIAL OFFER</div>
                        <h2 class="display-5 fw-semibold lh-1">Fast Food Dishes<br class="d-none d-lg-block"> at Just $19</h2>
                        <p>Hamburger, Chips, Sausages, Beer, Chicken Fries</p>
                        <a href="grid-listing-filterscol.html" class="btn btn-primary mt-3">Reserve now !</a>
                    </div>
                    <div class="col-md-5 col-lg-4">
                        <img src="assets/images/png-img/happy-hour-02.png" alt="" class="img-fluid">
                    </div>
                </div>
                <!-- /wrapper -->
            </div>
            <!-- end /. banner -->
        </div>
    </div>
    <!-- end /. popular Items -->
    <!-- start footer -->
    <?php include __DIR__ . '/templates/layouts/frontend/footer.php'; ?>
    <!-- end /. footer -->
    <!-- Optional JavaScript -->
    <script data-cfasync="false" src="../../../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="assets/plugins/jQuery/jquery.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/plugins/aos/aos.min.js"></script>
    <script src="assets/plugins/macy/macy.js"></script>
    <script src="assets/plugins/simple-parallax/simpleParallax.min.js"></script>
    <script src="assets/plugins/OwlCarousel2/owl.carousel.min.js"></script>
    <script src="assets/plugins/theia-sticky-sidebar/ResizeSensor.min.js"></script>
    <script src="assets/plugins/theia-sticky-sidebar/theia-sticky-sidebar.min.js"></script>
    <script src="assets/plugins/waypoints/jquery.waypoints.min.js"></script>
    <script src="assets/plugins/counter-up/jquery.counterup.min.js"></script>
    <script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.ui.widget.js"></script>
    <script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fileupload.js"></script>
    <script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.iframe-transport.js"></script>
    <script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fancy-fileupload.js"></script>
    <script src="assets/plugins/ion.rangeSlider/ion.rangeSlider.min.js"></script>
    <script src="assets/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
    <script src="assets/plugins/select2/select2.min.js"></script>
    <!-- Custom script for this template -->
    <script src="assets/js/script.js"></script>


<!-- 
FIX FOR FEATURED ITEMS IMAGE CENTERING
Add this CSS just before the closing </body> tag (around line 662)
-->

<style>
/* Center Featured Items images vertically */
.card-img-wrap img,
.card-image-hover img {
    object-fit: cover;
    object-position: center center; /* Center the image both horizontally and vertically */
    height: 250px; /* Set a fixed height for consistent card sizes */
}

/* Alternative: If you want different heights for different screen sizes */
@media (max-width: 768px) {
    .card-img-wrap img,
    .card-image-hover img {
        height: 200px; /* Smaller height on mobile */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .card-img-wrap img,
    .card-image-hover img {
        height: 220px; /* Medium height on tablets */
    }
}

@media (min-width: 1025px) {
    .card-img-wrap img,
    .card-image-hover img {
        height: 250px; /* Full height on desktop */
    }
}
</style>



<script>
// Favorite functionality
document.addEventListener('DOMContentLoaded', function() {
    const favoriteButtons = document.querySelectorAll('.favorite-btn');
    
    favoriteButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const itemId = this.getAttribute('data-item-id');
            const isFavorited = this.getAttribute('data-favorited') === 'true';
            const heartIcon = this.querySelector('svg');
            
            // Check if user is logged in
            <?php if (!Auth::check() || Auth::userType() !== 'customer'): ?>
                alert('Please login as a customer to save favorites');
                window.location.href = 'login.php?redirect=' + encodeURIComponent(window.location.pathname);
                return;
            <?php endif; ?>
            
            // Disable button during request
            this.style.pointerEvents = 'none';
            
            // Send AJAX request
            fetch('ajax/toggle-favourite.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'item_id=' + itemId
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Toggle heart icon
                    if (data.is_favorited) {
                        // Added to favorites
                        heartIcon.classList.remove('bi-heart', 'text-primary');
                        heartIcon.classList.add('bi-heart-fill', 'text-danger');
                        this.setAttribute('data-favorited', 'true');
                    } else {
                        // Removed from favorites
                        heartIcon.classList.remove('bi-heart-fill', 'text-danger');
                        heartIcon.classList.add('bi-heart', 'text-primary');
                        this.setAttribute('data-favorited', 'false');
                    }
                    
                    // Optional: Show toast notification
                    // showToast(data.message);
                } else {
                    alert(data.message || 'Failed to update favorites');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred. Please try again.');
            })
            .finally(() => {
                // Re-enable button
                this.style.pointerEvents = 'auto';
            });
        });
    });
});
</script>

<style>
/* Favorite button styles */
.favorite-btn {
    cursor: pointer;
    transition: all 0.3s ease;
}

.favorite-btn:hover {
    transform: scale(1.1);
}

.favorite-btn svg {
    transition: all 0.3s ease;
}

.bi-heart-fill {
    animation: heartBeat 0.3s ease;
}

@keyframes heartBeat {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
}
</style>

</body>

</html>