@if(isset($data) && is_array($data) && !empty($data))
<section class="pt-40px pb-0">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 md-mb-40px"
                data-anime='{ "translate": [0, 0], "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 150, "easing": "easeOutQuad" }'>
                <div class="row overflow-hidden position-relative">
                    <div class="col-12 position-relative product-image">
                        <div class="swiper product-image-slider"
                            data-slider-options='{ "spaceBetween": 0, "watchOverflow": true, "navigation": { "nextEl": ".slider-product-next", "prevEl": ".slider-product-prev" }, "thumbs": { "swiper": { "el": ".product-image-thumb", "slidesPerView": "5", "spaceBetween": 15 } } }'
                            data-swiper-thumb-click="1">
                            <div class="swiper-wrapper">
                                @foreach($data['gallery_items'] as $item)
                                    <div class="swiper-slide gallery-box">
                                        <a href="{{  asset($item['gallery_image']) }}" data-group="lightbox-gallery" title="{{ $item['gallery_image_title'] }}">
                                            <img class="w-100" src="{{  asset($item['gallery_image']) }}" alt="" />
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div
                            class="slider-product-next swiper-button-next border-radius-100 border border-1 border-color-extra-medium-gray">
                            <i class="fa fa-chevron-right text-dark-gray icon-very-small"></i>
                        </div>
                        <div
                            class="slider-product-prev swiper-button-prev border-radius-100 border border-1 border-color-extra-medium-gray">
                            <i class="fa fa-chevron-left text-dark-gray icon-very-small"></i>
                        </div>
                    </div>
                    <div class="col-12 position-relative mt-20px">
                        <div class="swiper-container product-image-thumb">
                            <div class="swiper-wrapper">
                                @foreach($data['gallery_items'] as $item)
                                    <div class="swiper-slide">
                                        <img class="w-100" src="{{  asset($item['gallery_image']) }}" alt="" />
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 offset-lg-1 product-info"
                data-anime='{ "translate": [0, 0], "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 150, "easing": "easeOutQuad" }'>
                <span class="fw-500 text-dark-gray d-block">{{ $data['product_title'] }}</span>
                <h5 class="alt-font text-dark-gray fw-700 mb-10px">{{ $data['product_name'] }}</h5>
                <div class="d-block d-sm-flex align-items-center mb-20px">
                    <div><span class="text-dark-gray fw-500">SKU: </span>{{ $data['product_sku'] }}</div>
                </div>

                <p>
                    {{ $data['product_description'] }}
                </p>

                <div class="d-flex align-items-center flex-column flex-sm-row mb-20px position-relative">
                    <a href="{{ $data['shop_url'] }}" target="_blank" rel="noopener noreferrer"
                        class="btn btn-cart btn-extra-large btn-switch-text btn-box-shadow btn-none-transform btn-dark-gray left-icon border-radius-5px me-15px xs-me-0 order-3 order-sm-2">
                        <span>
                            <span><i class="feather icon-feather-shopping-bag"></i></span>
                            <span class="btn-double-text" data-text="SHOP GASELL">SHOP GASELL</span>
                        </span>
                    </a>
                    <div id="wishlist"
                        class="wishlist d-flex align-items-center justify-content-center border border-radius-5px border-color-extra-medium-gray order-2 order-sm-3"
                        style="cursor: pointer;">
                        <i class="fa-regular fa-heart text-base-color" id="wishlist-nonclick"></i>
                        <i class="fa-solid fa-heart text-base-color" id="wishlist-click" style="display: none;"></i>
                    </div>
                </div>
                <div class="row mb-20px">
                    <div class="col-auto icon-with-text-style-08">
                        <div class="feature-box feature-box-left-icon-middle d-inline-flex align-middle">
                            <div class="feature-box-icon me-10px">
                                <i class="feather icon-feather-mail align-middle text-dark-gray"></i>
                            </div>
                            <div class="feature-box-content">
                                <a href="{{ $data['ask_a_question_url'] }}" class="alt-font fw-500 text-dark-gray d-block">Ask a question</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-auto icon-with-text-style-08">
                        <div class="feature-box feature-box-left-icon-middle d-inline-flex align-middle">
                            <div class="feature-box-icon me-10px">
                                <i class="feather icon-feather-share-2 align-middle text-dark-gray"></i>
                            </div>
                            <div class="feature-box-content" id="share" style="cursor: pointer;">
                                <a href="#" class="alt-font fw-500 text-dark-gray d-block">Share</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mb-20px h-1px w-100 bg-extra-medium-gray d-block"></div>
            </div>
        </div>
    </div>
</section>

<!-- Sosyal Medya Paylaşım Modalı -->
<div id="shareModal" class="share-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 9999; justify-content: center; align-items: center;">
    <div class="share-modal-content" style="background: white; padding: 50px; border-radius: 10px; max-width: 400px; width: 90%; position: relative;">
        <button id="closeShareModal" style="position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 32px; cursor: pointer;" class="text-base-color">&times;</button>
    
        
        <div class="share-buttons" style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;">
            <!-- Facebook -->
            <a href="#" id="facebookShare" target="_blank" rel="noopener noreferrer" class="share-btn" style="display: flex; align-items: center; justify-content: center; padding: 12px; background: #1877F2; color: white; text-decoration: none; border-radius: 8px; transition: all 0.3s ease;">
                <i class="fab fa-facebook-f" style="margin-right: 8px;"></i>
                Facebook
            </a>
            
            <!-- WhatsApp -->
            <a href="#" id="whatsappShare" target="_blank" rel="noopener noreferrer" class="share-btn" style="display: flex; align-items: center; justify-content: center; padding: 12px; background: #25D366; color: white; text-decoration: none; border-radius: 8px; transition: all 0.3s ease;">
                <i class="fab fa-whatsapp" style="margin-right: 8px;"></i>
                WhatsApp
            </a>
            
            <!-- Twitter -->
            <a href="#" id="twitterShare" target="_blank" rel="noopener noreferrer" class="share-btn" style="display: flex; align-items: center; justify-content: center; padding: 12px; background: #1DA1F2; color: white; text-decoration: none; border-radius: 8px; transition: all 0.3s ease;">
                <i class="fab fa-twitter" style="margin-right: 8px;"></i>
                Twitter
            </a>
            
            <!-- LinkedIn -->
            <a href="#" id="linkedinShare" target="_blank" rel="noopener noreferrer" class="share-btn" style="display: flex; align-items: center; justify-content: center; padding: 12px; background: #0077B5; color: white; text-decoration: none; border-radius: 8px; transition: all 0.3s ease;">
                <i class="fab fa-linkedin-in" style="margin-right: 8px;"></i>
                LinkedIn
            </a>
        </div>
        
        <!-- URL Kopyalama -->
        <div style="margin-top: 20px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #333;">Sayfa Linki:</label>
            <div style="position: relative;">
                <input type="text" id="shareUrl" readonly style="width: 100%; padding: 12px 45px 12px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; box-sizing: border-box;">
                <button id="copyUrl" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 8px; border-radius: 4px; transition: all 0.3s ease;">
                    <i class="fas fa-copy" style="font-size: 16px; color: #666;"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.share-modal.show {
    display: flex !important;
}

#shareUrl:focus {
    outline: none;
    border-color: #007bff;
}

#copyUrl:hover {
    background-color: #f8f9fa;
}

#copyUrl:hover i {
    color: #007bff;
}

#copyUrl.success {
    background-color: #d4edda;
}

#copyUrl.success i {
    color: #28a745;
}

#copyUrl.success i:before {
    content: "\f00c";
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const wishlistDiv = document.getElementById('wishlist');
    const wishlistNonClick = document.getElementById('wishlist-nonclick');
    const wishlistClick = document.getElementById('wishlist-click');
    
    // Share modal elementleri
    const shareDiv = document.getElementById('share');
    const shareModal = document.getElementById('shareModal');
    const closeShareModal = document.getElementById('closeShareModal');
    const shareUrl = document.getElementById('shareUrl');
    const copyUrlBtn = document.getElementById('copyUrl');
    
    // Mevcut sayfa URL'ini al
    const currentUrl = window.location.href;
    const wishlistKey = 'wishlist_pages';
    
    // Sayfa başlığını al
    const pageTitle = document.title || '{{ $data["product_name"] ?? "Ürün" }}';
    
    // Sayfa yüklendiğinde wishlist durumunu kontrol et
    function checkWishlistStatus() {
        const wishlistPages = JSON.parse(localStorage.getItem(wishlistKey) || '[]');
        const isInWishlist = wishlistPages.includes(currentUrl);
        
        if (isInWishlist) {
            wishlistNonClick.style.display = 'none';
            wishlistClick.style.display = 'inline';
        } else {
            wishlistNonClick.style.display = 'inline';
            wishlistClick.style.display = 'none';
        }
    }
    
    // Wishlist durumunu toggle et
    function toggleWishlist() {
        let wishlistPages = JSON.parse(localStorage.getItem(wishlistKey) || '[]');
        const isInWishlist = wishlistPages.includes(currentUrl);
        
        if (isInWishlist) {
            // Wishlist'ten çıkar
            wishlistPages = wishlistPages.filter(url => url !== currentUrl);
            wishlistNonClick.style.display = 'inline';
            wishlistClick.style.display = 'none';
        } else {
            // Wishlist'e ekle
            wishlistPages.push(currentUrl);
            wishlistNonClick.style.display = 'none';
            wishlistClick.style.display = 'inline';
        }
        
        localStorage.setItem(wishlistKey, JSON.stringify(wishlistPages));
    }
    
    // Sosyal medya paylaşım URL'lerini oluştur
    function createShareUrls() {
        const encodedUrl = encodeURIComponent(currentUrl);
        const encodedTitle = encodeURIComponent(pageTitle);
        
        return {
            facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
            whatsapp: `https://wa.me/?text=${encodedTitle}%20${encodedUrl}`,
            twitter: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,
            linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`
        };
    }
    
    // Share modal'ı aç
    function openShareModal() {
        shareModal.classList.add('show');
        shareUrl.value = currentUrl;
        
        // Sosyal medya linklerini güncelle
        const shareUrls = createShareUrls();
        document.getElementById('facebookShare').href = shareUrls.facebook;
        document.getElementById('whatsappShare').href = shareUrls.whatsapp;
        document.getElementById('twitterShare').href = shareUrls.twitter;
        document.getElementById('linkedinShare').href = shareUrls.linkedin;
    }
    
    // Share modal'ı kapat
    function closeShareModalFunc() {
        shareModal.classList.remove('show');
    }
    
    // URL'yi panoya kopyala
    function copyUrlToClipboard() {
        shareUrl.select();
        shareUrl.setSelectionRange(0, 99999); // Mobil cihazlar için
        
        try {
            document.execCommand('copy');
            showCopySuccess();
        } catch (err) {
            // Fallback: Modern clipboard API
            if (navigator.clipboard) {
                navigator.clipboard.writeText(currentUrl).then(() => {
                    showCopySuccess();
                }).catch(() => {
                    showCopyError();
                });
            } else {
                showCopyError();
            }
        }
    }
    
    // Kopyalama başarılı durumu
    function showCopySuccess() {
        copyUrlBtn.classList.add('success');
        
        setTimeout(() => {
            copyUrlBtn.classList.remove('success');
        }, 2000);
    }
    
    // Kopyalama hatası durumu
    function showCopyError() {
        copyUrlBtn.style.backgroundColor = '#f8d7da';
        copyUrlBtn.querySelector('i').style.color = '#dc3545';
        
        setTimeout(() => {
            copyUrlBtn.style.backgroundColor = '';
            copyUrlBtn.querySelector('i').style.color = '#666';
        }, 2000);
    }
    
    // Event listener'ları ekle
    if (wishlistDiv) {
        wishlistDiv.addEventListener('click', toggleWishlist);
    }
    
    if (shareDiv) {
        shareDiv.addEventListener('click', openShareModal);
    }
    
    if (closeShareModal) {
        closeShareModal.addEventListener('click', closeShareModalFunc);
    }
    
    if (copyUrlBtn) {
        copyUrlBtn.addEventListener('click', copyUrlToClipboard);
    }
    
    // Modal dışına tıklandığında kapat
    if (shareModal) {
        shareModal.addEventListener('click', function(e) {
            if (e.target === shareModal) {
                closeShareModalFunc();
            }
        });
    }
    
    // ESC tuşu ile kapat
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && shareModal.classList.contains('show')) {
            closeShareModalFunc();
        }
    });
    
    // Sayfa yüklendiğinde durumu kontrol et
    checkWishlistStatus();
});
</script>
@endif