{% extends "base.html" %}

{% block title %}BookBeach | Your Premium Beach Experience{% endblock %}

{% block content %}
<section class="hero_single version_2">
    <div class="wrapper">
        <div class="container">
            <h3>Book unique beach experiences</h3>
            <p>Explore top rated beaches, hotels and restaurants around the world</p>
            <form action="{{ url_for('main.beaches_grid') }}" method="GET">
                <div class="row g-0 custom-search-input-2">
                    <div class="col-lg-3">
                        <div class="form-group">
                            <input class="form-control" type="text" placeholder="What are you looking for..." name="search">
                            <i class="icon_search"></i>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <input class="form-control" type="text" placeholder="Country" id="country-input" list="countries-list" autocomplete="country" name="country">
                            <datalist id="countries-list">
                                <option value="Afghanistan">
                                <option value="Albania">
                                <option value="Algeria">
                                <option value="Argentina">
                                <option value="Australia">
                                <option value="Austria">
                                <option value="Bangladesh">
                                <option value="Belgium">
                                <option value="Brazil">
                                <option value="Bulgaria">
                                <option value="Canada">
                                <option value="Chile">
                                <option value="China">
                                <option value="Colombia">
                                <option value="Croatia">
                                <option value="Cyprus">
                                <option value="Czech Republic">
                                <option value="Denmark">
                                <option value="Egypt">
                                <option value="Estonia">
                                <option value="Finland">
                                <option value="France">
                                <option value="Germany">
                                <option value="Greece">
                                <option value="Hungary">
                                <option value="Iceland">
                                <option value="India">
                                <option value="Indonesia">
                                <option value="Ireland">
                                <option value="Israel">
                                <option value="Italy">
                                <option value="Japan">
                                <option value="Jordan">
                                <option value="Kenya">
                                <option value="Latvia">
                                <option value="Lithuania">
                                <option value="Luxembourg">
                                <option value="Malaysia">
                                <option value="Malta">
                                <option value="Mexico">
                                <option value="Morocco">
                                <option value="Netherlands">
                                <option value="New Zealand">
                                <option value="Norway">
                                <option value="Philippines">
                                <option value="Poland">
                                <option value="Portugal">
                                <option value="Romania">
                                <option value="Russia">
                                <option value="Singapore">
                                <option value="Slovakia">
                                <option value="Slovenia">
                                <option value="South Africa">
                                <option value="South Korea">
                                <option value="Spain">
                                <option value="Sweden">
                                <option value="Switzerland">
                                <option value="Thailand">
                                <option value="Turkey">
                                <option value="Ukraine">
                                <option value="United Arab Emirates">
                                <option value="United Kingdom">
                                <option value="United States">
                                <option value="Vietnam">
                            </datalist>
                            <i class="icon_pin_alt"></i>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <input class="form-control" type="text" placeholder="City" id="city-input" name="city">
                            <i class="icon_pin_alt"></i>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <select class="wide" name="category">
                            <option>All Categories</option>	
                            <option>Beaches</option>
                            <option>Markets</option>
                            <option>Restaurants</option>
                            <option>Adventures</option>
                        </select>
                    </div>
                    <div class="col-lg-1">
                        <input type="submit" class="btn_search" value="Search">
                    </div>
                </div>
                <!-- /row -->
            </form>
        </div>
    </div>
</section>
<!-- /hero_single -->

<div class="container container-custom margin_80_0">
    <div class="main_title_2">
        <span><em></em></span>
        <h2>Our Popular Beaches</h2>
        <p>Discover the most beautiful beaches and create unforgettable memories.</p>
    </div>
    <div id="reccomended" class="owl-carousel owl-theme" data-cue="zoomIn">
        <!-- Popular beaches will be loaded here dynamically -->
        <div class="loading-placeholder" style="text-align: center; padding: 50px;">
            <p>Loading popular beaches...</p>
        </div>
    </div>
    <!-- /carousel -->
    <p class="btn_home_align"><a href="{{ url_for('main.beaches_grid') }}" class="btn_1 rounded">View all Beaches</a></p>
    <hr class="large">
</div>
<!-- /container -->

<div class="container container-custom margin_30_95">
    <section class="add_bottom_45">
        <div class="main_title_3">
            <span><em></em></span>
            <h2>Popular Markets</h2>
            <p>Discover the best local markets and shopping experiences.</p>
        </div>
        <div id="popular-markets" class="owl-carousel owl-theme" data-cue="zoomIn">
            <!-- Popular markets will be loaded here dynamically -->
            <div class="loading-placeholder" style="text-align: center; padding: 50px;">
                <p>Loading popular markets...</p>
            </div>
        </div>
        <!-- /carousel -->
        <p class="btn_home_align"><a href="{{ url_for('main.markets_grid') }}" class="btn_1 rounded">View all Markets</a></p>
    </section>
    <!-- /section -->
    
    <section class="add_bottom_45">
        <div class="main_title_3">
            <span><em></em></span>
            <h2>Popular Adventures</h2>
            <p>Experience thrilling adventures and outdoor activities.</p>
        </div>
        <div id="popular-adventures" class="owl-carousel owl-theme" data-cue="zoomIn">
            <!-- Popular adventures will be loaded here dynamically -->
            <div class="loading-placeholder" style="text-align: center; padding: 50px;">
                <p>Loading popular adventures...</p>
            </div>
        </div>
        <!-- /carousel -->
        <p class="btn_home_align"><a href="{{ url_for('main.adventures_grid') }}" class="btn_1 rounded">View all Adventures</a></p>
    </section>
    <!-- /section -->

    <section class="add_bottom_45">
        <div class="main_title_3">
            <span><em></em></span>
            <h2>Popular Beach Restaurants</h2>
            <p>Dine with an ocean view at our featured beachfront restaurants.</p>
        </div>
        <div id="popular-restaurants-carousel" class="owl-carousel owl-theme" data-cue="zoomIn">
            <!-- Popular restaurants will be loaded here dynamically -->
            <div class="loading-placeholder" style="text-align: center; padding: 50px;">
                <p>Loading popular restaurants...</p>
            </div>
        </div>
        <!-- /carousel -->
        <p class="btn_home_align"><a href="/restaurants" class="btn_1 rounded">View all Restaurants</a></p>
    </section>
    <!-- /section -->

    <div class="banner mb-0" data-cue="zoomIn">
        <div class="wrapper d-flex align-items-center opacity-mask" data-opacity-mask="rgba(0, 0, 0, 0.3)">
            <div>
                <small>Adventure</small>
                <h3>Your Perfect<br>Beach Adventure</h3>
                <p>Water sports and beach activities</p>
                <a href="{{ url_for('main.beaches_grid') }}" class="btn_1">Explore Adventures</a>
            </div>
        </div>
        <!-- /wrapper -->
    </div>
    <!-- /banner -->

</div>
<!-- /container -->

<div class="bg_color_1">
    <div class="container margin_80_55">
        <div class="main_title_2">
            <span><em></em></span>
            <h3>News and Events</h3>
            <p>Stay updated with the latest beach destinations and travel tips.</p>
        </div>
        <div class="row" data-cues="slideInUp">
            <div class="col-lg-6">
                <a class="box_news" href="#0">
                    <figure><img src="{{ url_for('static', filename='img/news_home_1.jpg') }}" alt="">
                        <figcaption><strong>28</strong>Dec</figcaption>
                    </figure>
                    <ul>
                        <li>BookBeach Team</li>
                        <li>28.12.2024</li>
                    </ul>
                    <h4>Best Beach Destinations for 2025</h4>
                    <p>Discover the most trending beach destinations that offer exceptional experiences for your next vacation....</p>
                </a>
            </div>
            <!-- /box_news -->
            <div class="col-lg-6">
                <a class="box_news" href="#0">
                    <figure><img src="{{ url_for('static', filename='img/news_home_2.jpg') }}" alt="">
                        <figcaption><strong>25</strong>Dec</figcaption>
                    </figure>
                    <ul>
                        <li>Travel Expert</li>
                        <li>25.12.2024</li>
                    </ul>
                    <h4>Sustainable Beach Tourism</h4>
                    <p>Learn how to enjoy beautiful beaches while protecting the environment for future generations....</p>
                </a>
            </div>
            <!-- /box_news -->
            <div class="col-lg-6">
                <a class="box_news" href="#0">
                    <figure><img src="{{ url_for('static', filename='img/news_home_3.jpg') }}" alt="">
                        <figcaption><strong>20</strong>Dec</figcaption>
                    </figure>
                    <ul>
                        <li>Beach Guide</li>
                        <li>20.12.2024</li>
                    </ul>
                    <h4>Water Sports Adventure Guide</h4>
                    <p>Everything you need to know about exciting water sports activities at beach destinations....</p>
                </a>
            </div>
            <!-- /box_news -->
            <div class="col-lg-6">
                <a class="box_news" href="#0">
                    <figure><img src="{{ url_for('static', filename='img/news_home_4.jpg') }}" alt="">
                        <figcaption><strong>15</strong>Dec</figcaption>
                    </figure>
                    <ul>
                        <li>BookBeach Travel</li>
                        <li>15.12.2024</li>
                    </ul>
                    <h4>Luxury Beach Resorts Review</h4>
                    <p>An in-depth look at the most luxurious beachfront resorts around the world....</p>
                </a>
            </div>
            <!-- /box_news -->
        </div>
        <!-- /row -->
        <p class="btn_home_align"><a href="#0" class="btn_1 rounded">View all news</a></p>
    </div>
    <!-- /container -->
</div>
<!-- /bg_color_1 -->

<div class="call_section">
    <div class="container clearfix">
        <div class="col-lg-5 col-md-6 float-end wow position-relative" data-wow-offset="250">
            <div class="block-reveal">
                <div class="block-vertical"></div>
                <div class="box_1">
                    <h3>Enjoy a GREAT beach experience with us</h3>
                    <p>BookBeach connects you with the most beautiful beaches and premium accommodations worldwide. Create unforgettable memories with our carefully curated beach experiences.</p>
                    <a href="{{ url_for('auth.register') }}" class="btn_1 rounded">Get Started</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--/call_section-->

{% endblock %}

{% block extra_js %}
<style>
/* Enhanced autocomplete styling */
#country-input {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#country-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Custom dropdown indicator for country input */
#country-input[list]::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMTJMMyA3SDEzTDggMTJaIiBmaWxsPSIjNjY3ZWVhIi8+Cjwvc3ZnPgo=');
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

/* Validation styling */
.country-valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

.country-warning {
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
}

/* Popular beaches carousel image styling */
#reccomended .box_grid figure {
    height: 300px;
    overflow: hidden;
    position: relative;
}

#reccomended .box_grid figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Description text truncation to 2 lines */
#reccomended .box_grid .wrapper p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 2.8em; /* 2 lines * 1.4 line-height */
}

/* Original BookBeach carousel center effect */
#reccomended .item {
    margin: 0 4px;
}

#reccomended .owl-item {
    opacity: 1;
    transform: scale(1);
    backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    transition: all 0.3s ease-in-out 0s;
    overflow: hidden;
}

#reccomended .owl-item.active.center {
    opacity: 1;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    transform: scale(1);
}

#reccomended .owl-item.active.center .item .title h4,
#reccomended .owl-item.active.center .item .views {
    opacity: 1;
}

/* Owl dots styling */
.owl-theme .owl-dots {
    margin-top: 10px !important;
    margin-bottom: 25px;
}

@media (max-width: 767px) {
    .owl-theme .owl-dots {
        margin-top: 0 !important;
        margin-bottom: 20px;
    }
}

.owl-theme .owl-dots .owl-dot {
    outline: none;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #fc5b62 !important;
}

.owl-theme .owl-dots .owl-dot span {
    width: 13px !important;
    height: 13px !important;
}


</style>
<script>
// Location data management
class LocationManager {
    constructor() {
        this.init();
    }

    init() {
        this.checkAndFetchLocationData();
        this.loadPopularBeaches();
    }

    checkAndFetchLocationData() {
        const storedData = localStorage.getItem('locationData');
        const storedDate = localStorage.getItem('locationDataDate');
        const today = new Date().toDateString();

        if (!storedData || !storedDate || storedDate !== today) {
            this.fetchLocationData();
        } else {
            const locationData = JSON.parse(storedData);
            this.populateLocationInputs(locationData);
        }
    }

    async fetchLocationData() {
        try {
            const response = await fetch('https://ipapi.co/json/');
            if (!response.ok) {
                throw new Error('Failed to fetch location data');
            }
            
            const data = await response.json();
            const today = new Date().toDateString();
            
            // Store the data with today's date
            localStorage.setItem('locationData', JSON.stringify(data));
            localStorage.setItem('locationDataDate', today);
            
            this.populateLocationInputs(data);
        } catch (error) {
            console.error('Error fetching location data:', error);
            // Try to use cached data even if it's old
            const storedData = localStorage.getItem('locationData');
            if (storedData) {
                const locationData = JSON.parse(storedData);
                this.populateLocationInputs(locationData);
            }
        }
    }

    populateLocationInputs(data) {
        const countryInput = document.getElementById('country-input');
        const cityInput = document.getElementById('city-input');
        
        if (countryInput && data.country_name) {
            // Check if the detected country exists in our datalist
            const datalist = document.getElementById('countries-list');
            const countryOptions = datalist ? Array.from(datalist.options).map(opt => opt.value) : [];
            
            // Use the detected country if it exists in our list, otherwise keep it as is
            const countryToUse = countryOptions.includes(data.country_name) ? data.country_name : data.country_name;
            
            countryInput.value = countryToUse;
            countryInput.placeholder = countryToUse;
            
            // Add visual feedback for autocomplete
            countryInput.addEventListener('input', this.handleCountryInput.bind(this));
        }
        
        if (cityInput && data.city) {
            cityInput.value = data.city;
            cityInput.placeholder = data.city;
        }
    }

    handleCountryInput(event) {
        const input = event.target;
        const datalist = document.getElementById('countries-list');
        
        if (datalist) {
            const options = Array.from(datalist.options).map(opt => opt.value);
            const inputValue = input.value;
            
            // Check if the current input matches any option exactly
            const exactMatch = options.find(option => 
                option.toLowerCase() === inputValue.toLowerCase()
            );
            
            // Visual feedback for valid/invalid country
            if (exactMatch || inputValue === '') {
                input.style.borderColor = '#28a745';
                input.style.boxShadow = '0 0 0 0.2rem rgba(40, 167, 69, 0.25)';
            } else {
                input.style.borderColor = '#ffc107';
                input.style.boxShadow = '0 0 0 0.2rem rgba(255, 193, 7, 0.25)';
            }
        }
    }

    // Method to get location data for other parts of the application
    static getLocationData() {
        const storedData = localStorage.getItem('locationData');
        return storedData ? JSON.parse(storedData) : null;
    }

    // Method to get specific location info for registration or maps
    static getLocationForRegistration() {
        const data = this.getLocationData();
        if (!data) return null;
        
        return {
            country: data.country_name,
            countryCode: data.country_code,
            city: data.city,
            region: data.region,
            latitude: data.latitude,
            longitude: data.longitude,
            timezone: data.timezone,
            currency: data.currency,
            languages: data.languages
        };
    }

    // Method to get coordinates for Google Maps
    static getCoordinatesForMaps() {
        const data = this.getLocationData();
        if (!data) return null;
        
        return {
            lat: parseFloat(data.latitude),
            lng: parseFloat(data.longitude),
            city: data.city,
            country: data.country_name
        };
    }

    async loadPopularBeaches() {
        console.log('Loading popular beaches...');
        try {
            // Get user's country from location data
            const locationData = LocationManager.getLocationData();
            const userCountry = locationData ? locationData.country_name : '';
            console.log('User country:', userCountry);
            
            // Fetch popular beaches from API
            const apiUrl = `/api/popular-beaches?country=${encodeURIComponent(userCountry)}`;
            console.log('Fetching from:', apiUrl);
            
            const response = await fetch(apiUrl);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const result = await response.json();
            console.log('API response:', result);
            
            if (result.success && result.beaches && result.beaches.length > 0) {
                console.log(`Found ${result.beaches.length} popular beaches`);
                this.renderPopularBeaches(result.beaches);
            } else {
                console.warn('No beaches in API response, using defaults');
                this.renderDefaultBeaches();
            }
        } catch (error) {
            console.error('Error loading popular beaches:', error);
            this.renderDefaultBeaches();
        }
    }

    renderPopularBeaches(beaches) {
        const carousel = document.getElementById('reccomended');
        if (!carousel) {
            console.error('Popular beaches carousel container not found');
            return;
        }
        
        console.log('Rendering', beaches.length, 'popular beaches');
        
        // Clear loading placeholder
        carousel.innerHTML = '';
        
        if (beaches.length === 0) {
            carousel.innerHTML = '<div class="text-center p-4"><p>No popular beaches available</p></div>';
            return;
        }
        
        beaches.forEach((beach, index) => {
            const beachItem = this.createBeachItem(beach);
            carousel.appendChild(beachItem);
            console.log(`Added beach ${index + 1}: ${beach.name}`);
        });
        
        // Initialize or reinitialize owl carousel
        this.initializeCarousel(carousel);
    }

    initializeCarousel(carousel) {
        // Try to initialize Owl Carousel, fallback to flexbox if not available
        if (window.$ && window.$.fn.owlCarousel) {
            try {
                window.$(carousel).owlCarousel('destroy');
                window.$(carousel).owlCarousel({
                    loop: false,
                    items: 4,
                    margin: 8,
                    nav: false,
                    dots: true,
                    autoplay: false,
                    responsive: {
                        0: { items: 1 },
                        576: { items: 2 },
                        768: { items: 3 },
                        992: { items: 4 }
                    }
                });
                console.log('Owl Carousel initialized successfully');
            } catch (error) {
                console.error('Owl Carousel failed, using flexbox fallback:', error);
                this.useFlexboxFallback(carousel);
            }
        } else {
            console.log('Owl Carousel not available, using flexbox fallback');
            this.useFlexboxFallback(carousel);
        }
    }

    useFlexboxFallback(carousel) {
        // Apply CSS flexbox layout as fallback
        carousel.style.display = 'flex';
        carousel.style.flexWrap = 'wrap';
        carousel.style.gap = '8px';
        carousel.style.justifyContent = 'center';
        
        // Style individual items
        const items = carousel.querySelectorAll('.item');
        items.forEach(item => {
            item.style.flex = '0 0 calc(25% - 6px)';
            item.style.maxWidth = '280px';
        });
        
        console.log('Flexbox fallback applied to carousel');
    }

    createBeachItem(beach) {
        const item = document.createElement('div');
        item.className = 'item';
        
        const categoryTag = this.getBeachCategory(beach.location);
        
        item.innerHTML = `
            <div class="box_grid">
                <figure>
                    <a href="#0" class="wish_bt"></a>
                    <a href="/beach/${beach.id}">
                        <img src="${beach.image}" class="img-fluid" alt="${beach.name}" width="800" height="533" 
                             style="object-fit: cover; width: 100%; height: 300px;" 
                             onerror="this.src='/static/img/tour_1.jpg'">
                        <div class="read_more"><span>Read more</span></div>
                    </a>
                    <small>${categoryTag}</small>
                </figure>
                <div class="wrapper">
                    <h3><a href="/beach/${beach.id}">${beach.name}</a></h3>
                    <p>${beach.description}</p>
                    <span class="price">${beach.price_display}</span>
                </div>
                <ul>
                    <li><i class="icon_clock_alt"></i> Full day</li>
                    <li>
                        <div class="score">
                            <span>${this.getRatingText(beach.rating)}<em>${beach.reviews} Reviews</em></span>
                            <strong>${beach.rating.toFixed(1)}</strong>
                        </div>
                    </li>
                </ul>
            </div>
        `;
        
        return item;
    }

    getBeachCategory(location) {
        if (location.includes('Greece')) return 'Mediterranean';
        if (location.includes('Maldives') || location.includes('Thailand') || location.includes('Bali')) return 'Tropical';
        if (location.includes('Bahamas') || location.includes('Caribbean')) return 'Caribbean';
        if (location.includes('Spain') || location.includes('Italy')) return 'European';
        if (location.includes('USA') || location.includes('Hawaii')) return 'American';
        return 'Paradise';
    }

    getRatingText(rating) {
        if (rating === 0) return 'No rating';
        if (rating >= 4.5) return 'Excellent';
        if (rating >= 4.0) return 'Very Good';
        if (rating >= 3.5) return 'Good';
        if (rating >= 3.0) return 'Average';
        return 'Fair';
    }

    renderDefaultBeaches() {
        console.log('API failed - not showing fallback beaches to avoid fake image paths');
        
        // Don't show fallback beaches with fake images
        const carousel = document.getElementById('reccomended');
        if (carousel) {
            carousel.innerHTML = '<div class="text-center p-4"><p>Unable to load beaches at this time</p></div>';
        }
    }
}

// Initialize location manager when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    new LocationManager();
    
    // Load popular restaurants
    loadPopularRestaurants();
    
    // Load popular markets
    loadPopularMarkets();
    
    // Load popular adventures
    loadPopularAdventures();
    
    // Initialize country autocomplete functionality
    const countryInput = document.getElementById('country-input');
    if (countryInput) {
        // Add enhanced autocomplete behavior
        countryInput.addEventListener('focus', function() {
            this.style.borderColor = '#667eea';
            this.style.boxShadow = '0 0 0 0.2rem rgba(102, 126, 234, 0.25)';
        });
        
        countryInput.addEventListener('blur', function() {
            // Reset border if no specific validation styling
            if (!this.style.borderColor || this.style.borderColor === 'rgb(102, 126, 234)') {
                this.style.borderColor = '';
                this.style.boxShadow = '';
            }
        });
        
        // Add keyboard navigation enhancement
        countryInput.addEventListener('keydown', function(e) {
            if (e.key === 'Tab' || e.key === 'Enter') {
                const datalist = document.getElementById('countries-list');
                if (datalist) {
                    const options = Array.from(datalist.options).map(opt => opt.value);
                    const inputValue = this.value;
                    
                    // Auto-complete with first matching option
                    const match = options.find(option => 
                        option.toLowerCase().startsWith(inputValue.toLowerCase())
                    );
                    
                    if (match && inputValue.length > 0) {
                        this.value = match;
                    }
                }
            }
        });
    }
});

// Function to get rating text based on rating value
function getRatingText(rating) {
    if (rating === 0) return 'No rating';
    if (rating >= 4.5) return 'Excellent';
    if (rating >= 4.0) return 'Very Good';
    if (rating >= 3.5) return 'Good';
    if (rating >= 3.0) return 'Average';
    return 'Fair';
}

// Function to load popular restaurants
async function loadPopularRestaurants() {
    try {
        const response = await fetch('/api/popular-restaurants');
        if (!response.ok) {
            throw new Error('Failed to fetch restaurants');
        }
        
        const data = await response.json();
        const restaurants = data.restaurants || data;
        
        // Sort by popularity and rating (using the actual fields returned by the API)
        const sortedRestaurants = restaurants.sort((a, b) => {
            const aScore = (a.popularity || 0) + (a.rating || 0) * 10;
            const bScore = (b.popularity || 0) + (b.rating || 0) * 10;
            return bScore - aScore;
        }).slice(0, 4);
        
        renderPopularRestaurants(sortedRestaurants);
        
    } catch (error) {
        console.error('Error loading popular restaurants:', error);
        
    }
}

// Function to load popular markets
async function loadPopularMarkets() {
    try {
        const response = await fetch('/api/popular-markets');
        if (!response.ok) {
            throw new Error('Failed to fetch markets');
        }
        
        const data = await response.json();
        const markets = data.markets || data;
        
        // Sort by popularity and rating (using the actual fields returned by the API)
        const sortedMarkets = markets.sort((a, b) => {
            const aScore = (a.popularity || 0) + (a.rating || 0) * 10;
            const bScore = (b.popularity || 0) + (b.rating || 0) * 10;
            return bScore - aScore;
        }).slice(0, 4);
        
        renderPopularMarkets(sortedMarkets);
        
    } catch (error) {
        console.error('Error loading popular markets:', error);
        
    }
}

// Function to load popular adventures
async function loadPopularAdventures() {
    try {
        const response = await fetch('/api/popular-adventures');
        if (!response.ok) {
            throw new Error('Failed to fetch adventures');
        }
        
        const data = await response.json();
        console.log('Popular adventures data:', data); // Debug log to see what data is returned
        const adventures = data.adventures || data;
        
        // Sort by popularity and rating (using the actual fields returned by the API)
        const sortedAdventures = adventures.sort((a, b) => {
            const aScore = (a.popularity || 0) + (a.rating || 0) * 10;
            const bScore = (b.popularity || 0) + (b.rating || 0) * 10;
            return bScore - aScore;
        }).slice(0, 4);
        
        renderPopularAdventures(sortedAdventures);
        
    } catch (error) {
        console.error('Error loading popular adventures:', error);
        
    }
}

// Function to render popular markets in carousel format
function renderPopularMarkets(markets) {
    const container = document.getElementById('popular-markets');
    
    if (!container) {
        console.error('Popular markets carousel container not found');
        return;
    }
    
    // Clear loading placeholder
    container.innerHTML = '';
    
    if (markets.length === 0) {
        return;
    }
    
    // Create carousel items like beaches
    markets.forEach(market => {
        const imageUrl = market.image || market.photo_path || '/static/img/market_default.jpg';
        const rating = market.rating || 0;
        const reviewCount = market.reviews || 0;
        // Use the real price display from the API which includes the correct currency symbol
        const priceDisplay = market.price_display || '';
        
        const carouselItem = document.createElement('div');
        carouselItem.className = 'item';
        carouselItem.innerHTML = `
            <div class="box_grid">
                <figure>
                    <a href="/market/${market.id || market.market_id}">
                        <img src="${imageUrl}" class="img-fluid" alt="${market.name || market.market_name}" 
                             style="width: 100%; height: 200px; object-fit: cover;">
                    </a>
                    <small>Market</small>
                </figure>
                <div class="wrapper">
                    <h3><a href="/market/${market.id || market.market_id}">${market.name || market.market_name}</a></h3>
                    <p>${market.location || market.city || ''}</p>
                    ${priceDisplay ? `<span class="price">${priceDisplay}</span>` : ''}
                    <ul>
                        <li><div class="score"><span>${getRatingText(rating)}<em>${reviewCount} Reviews</em></span><strong>${rating.toFixed(1)}</strong></div></li>
                    </ul>
                </div>
            </div>
        `;
        container.appendChild(carouselItem);
    });
    
    // Reinitialize the owl carousel
    if (window.$ && window.$.fn.owlCarousel) {
        $(container).trigger('destroy.owl.carousel');
        $(container).owlCarousel({
            items: 4,
            loop: true,
            margin: 20,
            responsive: {
                0: { items: 1 },
                768: { items: 2 },
                992: { items: 3 },
                1200: { items: 4 }
            }
        });
    }
}

// Function to render popular adventures in carousel format
function renderPopularAdventures(adventures) {
    console.log('Rendering adventures:', adventures); // Debug log to see what data is being rendered
    const container = document.getElementById('popular-adventures');
    
    if (!container) {
        console.error('Popular adventures carousel container not found');
        return;
    }
    
    // Clear loading placeholder
    container.innerHTML = '';
    
    if (adventures.length === 0) {
        return;
    }
    
    // Create carousel items like beaches
    adventures.forEach(adventure => {
        const imageUrl = adventure.image || adventure.photo_path || '/static/img/adventure_default.jpg';
        const rating = adventure.rating || 0;
        const reviewCount = adventure.reviews || 0;
        // Use the real price display from the API which includes the correct currency symbol
        const priceDisplay = adventure.price_display || '';
        console.log('Adventure price display:', priceDisplay); // Debug log to see price display value
        
        const carouselItem = document.createElement('div');
        carouselItem.className = 'item';
        carouselItem.innerHTML = `
            <div class="box_grid">
                <figure>
                    <a href="/adventure/${adventure.id || adventure.adventure_id}">
                        <img src="${imageUrl}" class="img-fluid" alt="${adventure.name || adventure.adventure_name}" 
                             style="width: 100%; height: 200px; object-fit: cover;">
                    </a>
                    <small>Adventure</small>
                </figure>
                <div class="wrapper">
                    <h3><a href="/adventure/${adventure.id || adventure.adventure_id}">${adventure.name || adventure.adventure_name}</a></h3>
                    <p>${adventure.location || adventure.city || ''}</p>
                    ${priceDisplay ? `<span class="price">${priceDisplay}</span>` : ''}
                    <ul>
                        <li><div class="score"><span>${getRatingText(rating)}<em>${reviewCount} Reviews</em></span><strong>${rating.toFixed(1)}</strong></div></li>
                    </ul>
                </div>
            </div>
        `;
        container.appendChild(carouselItem);
    });
    
    // Reinitialize the owl carousel
    if (window.$ && window.$.fn.owlCarousel) {
        $(container).trigger('destroy.owl.carousel');
        $(container).owlCarousel({
            items: 4,
            loop: true,
            margin: 20,
            responsive: {
                0: { items: 1 },
                768: { items: 2 },
                992: { items: 3 },
                1200: { items: 4 }
            }
        });
    }
}



// Function to render popular restaurants in carousel format
function renderPopularRestaurants(restaurants) {
    const container = document.getElementById('popular-restaurants-carousel');
    
    if (!container) {
        console.error('Popular restaurants carousel container not found');
        return;
    }
    
    // Clear loading placeholder
    container.innerHTML = '';
    
    if (restaurants.length === 0) {
        
        return;
    }
    
    // Create carousel items like beaches
    restaurants.forEach(restaurant => {
        const imageUrl = restaurant.image;
        const rating = restaurant.rating || 0;
        const reviewCount = restaurant.reviews || 0;
        
        const carouselItem = document.createElement('div');
        carouselItem.className = 'item';
        carouselItem.innerHTML = `
            <div class="box_grid">
                <figure>
                    <a href="/restaurant/${restaurant.id || restaurant.restaurant_id}">
                        <img src="${imageUrl}" class="img-fluid" alt="${restaurant.name || restaurant.restaurant_name}" 
                             style="width: 100%; height: 200px; object-fit: cover;">
                    </a>
                    <small>${restaurant.cuisine_type || 'Restaurant'}</small>
                </figure>
                <div class="wrapper">
                    <h3><a href="/restaurant/${restaurant.id || restaurant.restaurant_id}">${restaurant.name || restaurant.restaurant_name}</a></h3>
                    <p>${restaurant.location || restaurant.description || ''}</p>
                    <span class="loc_open">Now Open</span>
                    <ul>
                        <li><div class="score"><span>${getRatingText(rating)}<em>${reviewCount} Reviews</em></span><strong>${rating.toFixed(1)}</strong></div></li>
                    </ul>
                </div>
            </div>
        `;
        container.appendChild(carouselItem);
    });
    
    // Reinitialize the owl carousel
    if (window.$ && window.$.fn.owlCarousel) {
        $(container).trigger('destroy.owl.carousel');
        $(container).owlCarousel({
            items: 4,
            loop: true,
            margin: 20,
            responsive: {
                0: { items: 1 },
                768: { items: 2 },
                992: { items: 3 },
                1200: { items: 4 }
            }
        });
    }
}


// Make LocationManager available globally for other scripts
window.LocationManager = LocationManager;
</script>

// Function to get rating text based on rating value
function getRatingText(rating) {
    if (rating === 0) return 'No rating';
    if (rating >= 4.5) return 'Excellent';
    if (rating >= 4.0) return 'Very Good';
    if (rating >= 3.5) return 'Good';
    if (rating >= 3.0) return 'Average';
    return 'Fair';
}

// Autocomplete (commented out for now, can be enabled later)
/*
function initMap() {
  var input = document.getElementById('autocomplete');
  var autocomplete = new google.maps.places.Autocomplete(input);
 
  autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }

    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    } 
  });
}
*/

{% endblock %}