<?php get_header(); ?>

<!-- Hero section -->
<section class="hero" style="background-image: linear-gradient(to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.4) 30%,
    rgba(0, 0, 0, 0) 100%
), url('<?php echo esc_url(get_theme_mod('hero_background', get_theme_file_uri('images/hero.jpg'))); ?>');">
    <div class="hero-content">
        <h1><?php echo esc_html(get_theme_mod('hero_title', 'Europe Wonder')); ?></h1>
        <p><?php echo esc_html(get_theme_mod('hero_subtitle', 'Your path to unforgettable experiences')); ?></p>
    </div>
</section>

<!-- Custom Inquiry Section -->
<section class="inquiry-section" <?php if (get_theme_mod('inquiry_section_background')) : ?>style="background-image: linear-gradient(to top,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.8) 100%
), url('<?php echo esc_url(get_theme_mod('inquiry_section_background')); ?>');"<?php endif; ?>>
    <div class="container">
        <div class="inquiry-content">
            <h2><?php echo esc_html(get_theme_mod('inquiry_section_title', 'Ready to Plan Your Custom Journey?')); ?></h2>
            <p><?php echo wp_kses_post(get_theme_mod('inquiry_section_description', 'A world of moonlit forests and twisting turquoise rivers, Slovenia is a fairytale destination. Home to storybook castles, historic towns, and picturesque alpine landscapes; let us create your perfect holiday experience.')); ?></p>
            <a href="<?php echo esc_url(home_url('/inquiry/')); ?>" class="btn-inquiry"><?php echo esc_html(get_theme_mod('inquiry_button_text', 'START PLANNING')); ?></a>
        </div>
    </div>
</section>

<!-- Inquiry Form Popup -->
<div id="inquiry-popup" class="inquiry-popup">
    <div class="inquiry-popup-content">
        <span class="inquiry-close">&times;</span>
        <h3>Custom Journey Inquiry</h3>
        <form id="custom-inquiry-form" class="inquiry-form">
            <?php wp_nonce_field('custom_inquiry_nonce', 'inquiry_security'); ?>
            <input type="hidden" name="action" value="custom_inquiry_submit">
            <div class="form-group">
                <label for="name">Your Name</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group half">
                <label for="travel-date">Planned Travel Date</label>
                <input type="date" id="travel-date" name="travel_date">
            </div>
            <div class="form-group half">
                <label for="travelers">Number of Travelers</label>
                <input type="number" id="travelers" name="travelers" min="1" value="2">
            </div>
            <div class="form-group">
                <label for="destination">Preferred Destination(s)</label>
                <input type="text" id="destination" name="destination" placeholder="e.g. Slovenia, Croatia, Hungary...">
            </div>
            <div class="form-group">
                <label for="message">Your Travel Wishes</label>
                <textarea id="message" name="message" rows="4" placeholder="Tell us what you're looking for in your custom journey..."></textarea>
            </div>
            <button type="submit" class="btn-submit">Submit Inquiry</button>
        </form>
    </div>
</div>

<!-- Tours section -->
<section class="tours">
    <div class="container">
        <?php
        // Pridobi vse Experience Journeye
        $journeys = get_posts(array(
            'post_type' => 'experience_journey',
            'posts_per_page' => -1,
        ));
        
        // Pridobi uporabniško določen vrstni red journeyev
        $order = get_option('experience_journey_order', '');
        $order_array = !empty($order) ? explode(',', $order) : array();
        
        // Če imamo vrstni red, sortiraj journeye po njem
        if (!empty($order_array)) {
            $position_map = array_flip($order_array);
            usort($journeys, function($a, $b) use ($position_map) {
                $pos_a = isset($position_map[$a->ID]) ? $position_map[$a->ID] : PHP_INT_MAX;
                $pos_b = isset($position_map[$b->ID]) ? $position_map[$b->ID] : PHP_INT_MAX;
                return $pos_a - $pos_b;
            });
        }
        
        // Za vsak journey prikaži njegove ture
        foreach ($journeys as $journey) {
            // Pridobi naslov journeya
            $journey_title = get_post_meta($journey->ID, '_page_title', true);
            if (!$journey_title) {
                $journey_title = $journey->post_title;
            }
            
            // Pridobi ture za ta journey
            $saved_order = get_option('individual_tour_order_' . $journey->ID, '');
            $tour_order_array = !empty($saved_order) ? explode(',', $saved_order) : array();
            
            $args = array(
                'post_type' => 'individual_tour',
                'posts_per_page' => -1,
                'meta_query' => array(
                    array(
                        'key' => '_experience_journey',
                        'value' => $journey->ID,
                        'compare' => '='
                    )
                )
            );
            
            // Če imamo shranjen vrstni red tur, uporabi ga
            if (!empty($tour_order_array)) {
                $args['post__in'] = $tour_order_array;
                $args['orderby'] = 'post__in';
            }
            
            $tours = new WP_Query($args);
            
            // Če ima journey ture, prikaži naslov in ture
            if ($tours->have_posts()) :
            ?>
                <h3 class="journey-title"><?php echo esc_html($journey_title); ?></h3>
                <div class="tours-grid">
                <?php
                while ($tours->have_posts()) : $tours->the_post();
                    // Pridobi hero sliko
                    $hero_image_id = get_post_meta(get_the_ID(), '_hero_image', true);
                    $image = wp_get_attachment_image_url($hero_image_id, 'full');
                    // Če hero slika ne obstaja, uporabi featured image
                    if (!$image) {
                        $image = get_the_post_thumbnail_url(get_the_ID(), 'large');
                    }
                    // Če ni nobene slike, uporabi placeholder
                    if (!$image) {
                        $image = get_theme_file_uri('images/placeholder.jpg');
                    }
                    
                    $price = get_post_meta(get_the_ID(), '_tour_price', true);
                    $duration = get_post_meta(get_the_ID(), '_tour_duration', true);
                ?>
                    <div class="tour-card">
                        <div class="tour-image">
                            <img src="<?php echo esc_url($image); ?>" 
                                 alt="<?php echo esc_attr(get_the_title()); ?>" 
                                 loading="lazy">
                        </div>
                        <div class="tour-info">
                            <div>
                                <h3><?php echo esc_html(get_the_title()); ?></h3>
                            </div>
                            <div>
                                <div class="tour-details">
                                    <?php if ($price) : ?>
                                        <span class="price">€<?php echo esc_html($price); ?></span>
                                    <?php endif; ?>
                                    <?php if ($duration) : ?>
                                        <span class="duration"><?php echo esc_html($duration); ?> days</span>
                                    <?php endif; ?>
                                </div>
                                <a href="<?php echo esc_url(get_permalink()); ?>" class="btn-view">View Details</a>
                            </div>
                        </div>
                    </div>
                <?php
                endwhile;
                wp_reset_postdata();
                ?>
                </div>
            <?php
            endif;
        }
        ?>
    </div>
</section>

<style>
.tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 350px);
    gap: 2rem;
    padding: 1rem;
    justify-content: center;
}

.tour-card {
    width: 350px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    height: 420px;
    display: flex;
    flex-direction: column;
}

.tour-card:hover {
    transform: translateY(-5px);
}

.tour-card .tour-image {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.tour-card .tour-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tour-card:hover .tour-image img {
    transform: scale(1.1);
}

.tour-card .tour-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    gap: 1rem;
}

.tour-card h3 {
    margin: 0;
    color: var(--dark);
    font-size: 1.25rem;
    line-height: 1.4;
}

.tour-card p {
    color: #666;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
}

.tour-card .tour-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.tour-card .price {
    font-weight: bold;
    color: #2c3e50;
    font-size: 1.2rem;
}

.tour-card .duration {
    color: #666;
}

.tour-card .btn-view {
    display: block;
    text-align: center;
    padding: 0.8rem;
    background-color: var(--accent);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.tour-card .btn-view:hover {
    background-color: var(--accent-dark);
}

.journey-title {
    text-align: center;
    margin: 3rem 0 2rem;
    color: var(--dark);
    font-size: 2rem;
    position: relative;
    padding-bottom: 1rem;
}

.journey-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--accent);
}

.journey-title:first-of-type {
    margin-top: 0;
}

@media (max-width: 768px) {
    .tours-grid {
        grid-template-columns: 1fr;
    }

    .tour-card {
        width: 100%;
        height: auto;
        min-height: 450px;
    }

    .journey-title {
        font-size: 1.75rem;
        margin: 2rem 0 1.5rem;
    }
}
</style>

<!-- Inquiry Section CSS -->
<style>
.inquiry-section {
    background-color: #f7f7f7;
    padding: 4rem 0;
    background-size: cover;
    background-position: center;
    position: relative;
    text-align: center;
}

.inquiry-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

.inquiry-content h2 {
    color: var(--dark);
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.inquiry-content p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 2rem;
}

.btn-inquiry {
    display: inline-block;
    background-color: var(--accent);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}

.btn-inquiry:hover {
    background-color: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    color: white;
}

/* Popup Styles */
.inquiry-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.inquiry-popup.active {
    display: block;
    opacity: 1;
}

.inquiry-popup-content {
    background-color: white;
    margin: 5% auto;
    padding: 2rem;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    position: relative;
}

.inquiry-popup.active .inquiry-popup-content {
    transform: translateY(0);
}

.inquiry-close {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    font-size: 2rem;
    color: #aaa;
    cursor: pointer;
    transition: color 0.3s ease;
}

.inquiry-close:hover {
    color: var(--accent);
}

.inquiry-popup h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--dark);
    font-size: 1.8rem;
    text-align: center;
}

.inquiry-form .form-group {
    margin-bottom: 1.2rem;
}

.inquiry-form .half {
    width: 49%;
    display: inline-block;
}

.inquiry-form .form-group:nth-child(3) {
    margin-right: 2%;
}

.inquiry-form label {
    display: block;
    margin-bottom: 0.5rem;
    color: #555;
    font-weight: 500;
}

.inquiry-form input,
.inquiry-form textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.inquiry-form input:focus,
.inquiry-form textarea:focus {
    border-color: var(--accent);
    outline: none;
}

.inquiry-form .btn-submit {
    width: 100%;
    padding: 1rem;
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
    margin-top: 1rem;
}

.inquiry-form .btn-submit:hover {
    background-color: var(--accent-dark);
}

body.popup-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .inquiry-content h2 {
        font-size: 2rem;
    }
    
    .inquiry-content p {
        font-size: 1.1rem;
    }
    
    .inquiry-popup-content {
        padding: 1.5rem;
        margin: 10% auto;
        width: 95%;
    }
    
    .inquiry-form .half {
        width: 100%;
        display: block;
    }
    
    .inquiry-form .form-group:nth-child(3) {
        margin-right: 0;
    }
}
</style>

<!-- Inquiry Form JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const openInquiryBtn = document.getElementById('open-inquiry-form');
    const inquiryPopup = document.getElementById('inquiry-popup');
    const inquiryClose = document.querySelector('.inquiry-close');
    const inquiryForm = document.getElementById('custom-inquiry-form');
    
    // Zagotovimo, da je popup začetno skrit
    inquiryPopup.classList.remove('active');
    document.body.classList.remove('popup-open');
    
    // Odpri popup
    openInquiryBtn.addEventListener('click', function() {
        inquiryPopup.classList.add('active');
        document.body.classList.add('popup-open');
    });
    
    // Zapri popup (X gumb)
    inquiryClose.addEventListener('click', function() {
        inquiryPopup.classList.remove('active');
        document.body.classList.remove('popup-open');
    });
    
    // Zapri popup (klik izven obrazca)
    inquiryPopup.addEventListener('click', function(e) {
        if (e.target === inquiryPopup) {
            inquiryPopup.classList.remove('active');
            document.body.classList.remove('popup-open');
        }
    });
    
    // Zapri popup (tipka ESC)
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && inquiryPopup.classList.contains('active')) {
            inquiryPopup.classList.remove('active');
            document.body.classList.remove('popup-open');
        }
    });
    
    // Pošlji obrazec
    inquiryForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Prikaži indikator nalaganja
        const submitBtn = inquiryForm.querySelector('.btn-submit');
        const originalBtnText = submitBtn.textContent;
        submitBtn.textContent = 'Sending...';
        submitBtn.disabled = true;
        
        // Pridobi podatke iz obrazca
        const formData = new FormData(inquiryForm);
        formData.append('security', document.querySelector('#inquiry_security').value);
        
        console.log('Sending form data to AJAX endpoint...');
        
        // Pošlji AJAX zahtevek
        fetch(<?php echo json_encode(admin_url('admin-ajax.php')); ?>, {
            method: 'POST',
            body: formData
        })
        .then(response => {
            console.log('Response status:', response.status);
            if (!response.ok) {
                throw new Error('Network response was not ok: ' + response.status);
            }
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            
            // Ponastavi gumb
            submitBtn.textContent = originalBtnText;
            submitBtn.disabled = false;
            
            if (data.success) {
                // Uspešno poslano
                alert(data.data);
                inquiryForm.reset();
                inquiryPopup.classList.remove('active');
                document.body.classList.remove('popup-open');
            } else {
                // Napaka
                console.error('Form submission error:', data);
                alert(data.data || 'There was an error sending your inquiry. Please try again.');
            }
        })
        .catch(error => {
            // Ponastavi gumb
            submitBtn.textContent = originalBtnText;
            submitBtn.disabled = false;
            
            console.error('Error during form submission:', error);
            alert('There was an error sending your inquiry: ' + error.message);
        });
    });
});
</script>

<!-- Video section -->
<section class="video-section">
    <div class="container">
        <div style="padding:75% 0 0 0;position:relative;">
            <iframe src="<?php echo esc_url(get_theme_mod('video_url', 'https://player.vimeo.com/video/1061260497?h=7fb6d020c3')); ?>&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" 
                    frameborder="0" 
                    allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media" 
                    style="position:absolute;top:0;left:0;width:100%;height:100%;" 
                    title="EU-Wonder_30sec">
            </iframe>
        </div>
        <script src="https://player.vimeo.com/api/player.js"></script>
    </div>
</section>

<!-- Customer Reviews section -->
<section class="reviews-section">
    <div class="container">
        <h2 class="section-title">What Our Customers Say</h2>
        <div class="reviews-container">
            <!-- Elfsight Google Reviews | Untitled Google Reviews -->
            <script src="https://static.elfsight.com/platform/platform.js" async></script>
            <div class="elfsight-app-2b69875e-3d29-4d62-bd00-e8f5c51b40d3" data-elfsight-app-lazy></div>
        </div>
    </div>
</section>

<!-- CSS za Reviews sekcijo -->
<style>
.reviews-section {
    padding: 4rem 0;
    background-color: #f9f9f9;
}

.reviews-container {
    margin-top: 2rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .reviews-section {
        padding: 3rem 0;
    }
}
</style>

<?php get_footer(); ?> 