document.addEventListener('DOMContentLoaded', function() {
    // ---------- MOBILNI MENI ----------
    const mainNav = document.querySelector('.main-nav');
    const body = document.body;
    
    // Ustvari overlay element
    const overlay = document.createElement('div');
    overlay.className = 'menu-overlay';
    document.body.appendChild(overlay);
    
    if (menuToggle && mainNav) {
        menuToggle.addEventListener('click', function() {
            menuToggle.classList.toggle('active');
            mainNav.classList.toggle('active');
            overlay.classList.toggle('active');
            body.classList.toggle('menu-open');
        });
        
        // Zapri meni ob kliku na overlay
        overlay.addEventListener('click', function() {
            menuToggle.classList.remove('active');
            mainNav.classList.remove('active');
            overlay.classList.remove('active');
            body.classList.remove('menu-open');
        });
        
        // Zapri meni ob kliku na povezavo
        mainNav.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', function() {
                menuToggle.classList.remove('active');
                mainNav.classList.remove('active');
                overlay.classList.remove('active');
                body.classList.remove('menu-open');
            });
        });
    }
    
    // Zapri meni ob resize-u okna
    window.addEventListener('resize', function() {
        if (window.innerWidth > 768) {
            menuToggle.classList.remove('active');
            mainNav.classList.remove('active');
            overlay.classList.remove('active');
            body.classList.remove('menu-open');
        }
    });
    
    // ---------- PLAVAJOČI GUMB ZA POVPRAŠEVANJE ----------
    // Ustvarimo nov HTML element za plavajoči gumb
    const floatingButton = document.createElement('a');
    floatingButton.className = 'floating-inquiry-btn';
    floatingButton.href = '/inquiry/';
    floatingButton.innerHTML = '<i class="fas fa-comment-alt"></i> Custom Journey Inquiry';
    
    // Dodamo gumb v body
    document.body.appendChild(floatingButton);
    
    // Če obstaja popup element na strani, bomo uporabili ta obstoječi element
    let inquiryPopup = document.getElementById('inquiry-popup');
    
    // Če popup ne obstaja na trenutni strani, ga ustvarimo
    if (!inquiryPopup) {
        // Ustvarimo nov popup
        inquiryPopup = document.createElement('div');
        inquiryPopup.id = 'inquiry-popup';
        inquiryPopup.className = 'inquiry-popup';
        
        // Vsebina popupa
        inquiryPopup.innerHTML = `
            <div class="inquiry-popup-content">
                <span class="inquiry-close">&times;</span>
                <h3>Custom Journey Inquiry</h3>
                <form id="custom-inquiry-form" class="inquiry-form">
                    <input type="hidden" name="action" value="custom_inquiry_submit">
                    <input type="hidden" name="inquiry_security" id="inquiry_security" value="">
                    <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>
        `;
        
        // Dodamo style, če ga še ni
        if (!document.getElementById('inquiry-popup-styles')) {
            const popupStyles = document.createElement('style');
            popupStyles.id = 'inquiry-popup-styles';
            popupStyles.textContent = `
                /* 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-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;
                    }
                }
            `;
            document.head.appendChild(popupStyles);
        }
        
        // Dodamo popup v body
        document.body.appendChild(inquiryPopup);
        
        // Pridobimo varnostni nonce preko AJAX klica
        fetch(inquiry_ajax_object.ajax_url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'action=get_inquiry_nonce'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('inquiry_security').value = data.data;
            }
        })
        .catch(error => {
            console.error('Error fetching nonce:', error);
        });
    }
    
    // Poskrbimo, da je popup začetno skrit
    inquiryPopup.classList.remove('active');
    document.body.classList.remove('popup-open');
    
    // Dodamo "click" poslušalec za odpiranje popupa
    floatingButton.addEventListener('click', function() {
        inquiryPopup.classList.add('active');
        document.body.classList.add('popup-open');
    });
    
    // Pridobimo referenco na elemente v popupu
    const inquiryClose = inquiryPopup.querySelector('.inquiry-close');
    const inquiryForm = inquiryPopup.querySelector('#custom-inquiry-form');
    
    // 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);
        const nonce = document.getElementById('inquiry_security').value;
        formData.append('security', nonce);
        
        console.log('Sending form data to AJAX endpoint...');
        
        // Pošlji AJAX zahtevek
        fetch(inquiry_ajax_object.ajax_url, {
            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);
        });
    });
});