@php
    $popularTourContent = getContent('popular_tour.content', true);
    // Fixed tour packages data
    $fixedPackages = [
        [
            'id' => 'fixed-2',
            'title' => 'Ramayana Tour – (11 Days)',
            'duration' => '11 Days',
            'price' => 'Price varies by package',
            'image' => 'ramayanatour.jpeg',
            'description' => 'Spiritual journey through Ramayana sites across Sri Lanka - Experience the ancient epic in its sacred locations',
            'route' => 'fixed-package-ramayana'
        ],
        [
            'id' => 'fixed-3',
            'title' => '12 Nights, 13 Days',
            'duration' => '13 Days',
            'price' => 'Price varies by package',
            'image' => '6days.png',
            'description' => 'Ultimate Sri Lanka adventure covering Negombo, Sigiriya, Kandy, Nuwara Eliya, Ella, Yala, and Mirissa with comprehensive cultural and wildlife experiences',
            'route' => 'fixed-package-12nights-13days'
        ],
        [
            'id' => 'fixed-4',
            'title' => '06 Nights, 07 Days',
            'duration' => '7 Days',
            'price' => 'Price varies by package',
            'image' => 'gocelone1.png',
            'description' => 'Experience the best of Sri Lanka in 7 days - from cultural sites in Kandy to scenic tea plantations in Nuwara Eliya, beautiful Ella, and relaxing beaches in Mirissa with whale watching',
            'route' => 'fixed-package-06nights-7days'
        ],
         [
            'id' => 'fixed-5',
            'title' => '04 Nights, 05 Days',
            'duration' => '5 Days',
            'price' => 'Price varies by package',
            'image' => '4nights.png',
            'description' => 'Perfect short getaway exploring Colombo city life and beautiful Mirissa beaches with whale watching and nightlife experiences',
            'route' => 'fixed-package-04nights-5days'
        ]
    ];
@endphp
<section class="feature--section position-relative py-100" id="popular-tours-section">
    <div class="bg--element position-absolute">
        <!--<img src="{{ asset($activeTemplateTrue . 'images/shape/dash-line.png') }}" alt="image">-->
    </div>

    <div class="bg--element-two position-absolute top_image_bounce">
        <!--<img src="{{ asset($activeTemplateTrue . 'images/shape/whychoose-bg3.png') }}" alt="image">-->
    </div>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="section-content mb-50">
                    <div class="title-wrap">
                        <h6 class="heading third--font text-center fs--32 fw--700 text--base mb-0 scroll-animate">
                            {{ __($popularTourContent->data_values->title) }}</h6>
                        <h2 class="title text-center mb-3 fs--40 fw--800 splite-text scroll-animate"
                            data-splitting>Fixed Packages Tour
                        </h2>
                        <p class="subtitle text-center fs-16 fw--400 scroll-animate">{{ __($popularTourContent->data_values->sub_heading) }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-center gy-4">
            @forelse ($fixedPackages as $item)
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="tour-package-card" style="background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.12); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; border: 1px solid #e9ecef;">
                    <!-- Hover Effect Border -->
                    <div style="position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #D4AF35, #B8941F); transform: scaleX(0); transition: transform 0.3s ease;"></div>
                    
                    <!-- Image Container -->
                    <div class="tour-image-container" style="position: relative; width: 100%; height: 220px; overflow: hidden;">
                        <a href="{{ route('fixed.package.details', $item['route']) }}" style="display: block; width: 100%; height: 100%;">
                            <img class="tour-image" 
                                 src="{{ asset('assets/images/destinations/' . $item['image']) }}?v={{ time() }}" 
                                 alt="{{ $item['title'] }}" 
                                 style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;">
                        </a>
                        
                        <!-- Image Overlay -->
                        <div class="image-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: flex-end; padding: 20px;">
                            <h6 style="color: white; font-size: 1rem; font-weight: 600; margin: 0;">View Details</h6>
                        </div>
                        
                        <!-- Badge -->
                        <div style="position: absolute; top: 15px; right: 15px; background: linear-gradient(135deg, #D4AF35, #B8941F); color: white; padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; box-shadow: 0 4px 12px rgba(212, 175, 53, 0.3);">
                            POPULAR
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="tour-content" style="padding: 25px;">
                        <!-- Location & Duration -->
                        <div class="tour-meta mb-3" style="display: flex; justify-content: space-between; align-items: center;">
                            <div style="display: flex; align-items: center; gap: 8px; color: #6c757d; font-size: 0.9rem;">
                                <i class="fas fa-map-marker-alt" style="color: #D4AF35;"></i>
                                <span>Sri Lanka</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 8px; color: #6c757d; font-size: 0.9rem;">
                                <i class="fas fa-clock" style="color: #D4AF35;"></i>
                                <span>{{ $item['duration'] }}</span>
                            </div>
                        </div>

                        <!-- Title -->
                        <a href="{{ route('fixed.package.details', $item['route']) }}" style="text-decoration: none; color: inherit; display: block;">
                            <h6 class="tour-title" style="font-size: 1.1rem; font-weight: 600; color: #2d3748; line-height: 1.4; margin-bottom: 15px; min-height: 50px; display: flex; align-items: center; transition: color 0.3s ease;">
                                {{ $item['title'] }}
                            </h6>
                        </a>

                        <!-- Features -->
                        <!--<div class="tour-features mb-4" style="display: flex; gap: 10px; flex-wrap: wrap;">-->
                        <!--    <span style="background: rgba(212, 175, 53, 0.1); color: #D4AF35; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 500;">-->
                        <!--        <i class="fas fa-star me-1"></i>4.8-->
                        <!--    </span>-->
                        <!--</div>-->

                        <!-- Button -->
                        <div class="tour-button">
                            <a href="{{ route('fixed.package.details', $item['route']) }}" 
                               class="view-details-btn" 
                               style="display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 20px; background: linear-gradient(135deg, #D4AF35, #B8941F); color: white; text-decoration: none; border-radius: 12px; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(212, 175, 53, 0.3);">
                                <i class="fas fa-eye"></i>
                                <span>View Details</span>
                                <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <style>
                .tour-package-card:hover {
                    transform: translateY(-12px);
                    box-shadow: 0 20px 50px rgba(212, 175, 53, 0.2);
                    border-color: #D4AF35;
                }
                
                .tour-package-card:hover > div:first-child > div:first-child {
                    transform: scaleX(1);
                }
                
                .tour-package-card:hover .tour-image {
                    transform: scale(1.1);
                }
                
                .tour-package-card:hover .image-overlay {
                    opacity: 1;
                }
                
                .tour-package-card:hover .tour-title {
                    color: #D4AF35;
                }
                
                .tour-package-card:hover .view-details-btn {
                    transform: translateY(-2px);
                    box-shadow: 0 8px 25px rgba(212, 175, 53, 0.4);
                }
                </style>
            </div>
            @empty
                <p class="text-center">No packages found</p>
            @endforelse
        </div>
    </div>
</section>

<script>
    // Smooth scroll function to Popular Tours section
    function scrollToPopularTours(event) {
        event.preventDefault();
        
        const targetSection = document.getElementById('popular-tours-section');
        if (targetSection) {
            // Calculate offset for header height if there's a fixed header
            const headerHeight = document.querySelector('header')?.offsetHeight || 0;
            const offsetPosition = targetSection.offsetTop - headerHeight - 20;
            
            window.scrollTo({
                top: offsetPosition,
                behavior: 'smooth'
            });
        }
    }

    function addToWishlist(element) {
        "use strict";

        var isAddingToWishlist = false;
        var isLoggedIn = {{ Auth::check() ? 'true' : 'false' }};

        if (!isAddingToWishlist && isLoggedIn) {
            isAddingToWishlist = true;
            var tourPackageId = $(element).data('tour_package_id');
            var url = $(element).data('url');

            $.ajax({
                url: url,
                type: 'get',
                data: {
                    tourPackageId: tourPackageId,
                },
                complete: function() {
                    isAddingToWishlist = false;
                },
                success: function(response) {
                    if (response.hasOwnProperty('message')) {
                        Toast.fire({
                            icon: 'success',
                            title: response.message
                        });
                        var heartIcon = $(element).find('i');
                        if (response.message.includes('added')) {
                            heartIcon.removeClass('far fa-heart').addClass('fas fa-heart text--base');
                        } else if (response.message.includes('removed')) {
                            heartIcon.removeClass('fas fa-heart text--base').addClass('far fa-heart');
                        }
                    } else {
                        Toast.fire({
                            icon: 'warning',
                            title: response.error
                        });
                    }
                },
                error: function(xhr, status, error) {
                    var errorMessage = 'Error occurred while updating the wishlist.';
                    Toast.fire({
                        icon: 'error',
                        title: errorMessage
                    });
                }
            });
        } else if (!isLoggedIn) {
            var errorMessage = 'Please log in to manage your wishlist.';
            Toast.fire({
                icon: 'warning',
                title: errorMessage
            });
        }
    }
</script>