{{-- resources/views/customer/agency/sections/tours-slider.blade.php --}}
<section class="tours-slider-section" style="background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%); overflow: hidden;">
    <div class="container">
        @if($section->title || $section->subtitle)
            <div style="text-align: center; margin-bottom: 3rem;">
                @if($section->subtitle)
                    <p style="color: var(--accent); font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em;">
                        {{ $section->subtitle }}
                    </p>
                @endif

                @if($section->title)
                    <h2 style="font-size: 3rem; font-weight: 800; color: #111827; line-height: 1.2;">
                        {{ $section->title }}
                    </h2>
                @endif
            </div>
        @endif

        <div class="tours-slider-wrapper" style="position: relative;">
            <div class="tours-slider" id="toursSlider{{ $section->id }}"
                 style="display: flex; gap: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 1rem 0;">
                @php
                    $limit = $section->getConfig('tour_limit', 8);
                    $tours = \App\Models\Tour\Tour::where('agency_id', $agency->id)
                        ->active()->public()->bookable()
                        ->limit($limit)->get();
                @endphp

                @foreach($tours as $tour)
                    <div
                        style="min-width: 380px; background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.08); scroll-snap-align: start; transition: all 0.3s; position: relative;">
                        <div style="position: relative; height: 280px; overflow: hidden;">
                            @if($tour->cover_image_url)
                                <img src="{{ $tour->cover_image_url }}"
                                     alt="{{ $tour->name }}"
                                     style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s;">
                            @else
                                <div
                                    style="width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary), var(--secondary));"></div>
                            @endif

                            @if($tour->is_featured)
                                <div
                                    style="position: absolute; top: 1rem; right: 1rem; background: var(--accent); color: white; padding: 0.5rem 1rem; border-radius: 50px; font-size: 0.875rem; font-weight: 600;">
                                    <i class="fas fa-star"></i> Öne Çıkan
                                </div>
                            @endif
                        </div>

                        <div style="padding: 2rem;">
                            <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap;">
                                @if($tour->tour_type)
                                    <span
                                        style="background: #EEF2FF; color: #4F46E5; padding: 0.375rem 0.875rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600;">
                                        {{ $tour->tour_type_display_name }}
                                    </span>
                                @endif
                                @if($tour->days)
                                    <span
                                        style="background: #FEF3C7; color: #92400E; padding: 0.375rem 0.875rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600;">
                                        <i class="fas fa-calendar"></i> {{ $tour->days }}G/{{ $tour->nights }}G
                                    </span>
                                @endif
                            </div>

                            <h3 style="font-size: 1.375rem; font-weight: 700; margin-bottom: 1rem; color: #111827; line-height: 1.3; min-height: 60px;">
                                {{ Str::limit($tour->name, 50) }}
                            </h3>

                            @if($tour->short_description)
                                <p style="color: #6B7280; margin-bottom: 1.5rem; line-height: 1.7; font-size: 0.938rem;">
                                    {{ Str::limit($tour->short_description, 100) }}
                                </p>
                            @endif

                            <div
                                style="display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 2px solid #F3F4F6;">
                                <div>
                                    <span style="color: #9CA3AF; font-size: 0.813rem; display: block;">Başlangıç</span>
                                    <span style="font-size: 1.75rem; font-weight: 800; color: var(--primary);">
                                        {{ $tour->formatted_price }}
                                    </span>
                                </div>
                                <a href="{{ route('customer.agency.tours.detail', ['agency' => $agency->slug, 'type' => 'kultur-turu', 'slug' => $tour->slug]) }}"
                                   style="background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 0.875rem 1.75rem; border-radius: 50px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); transition: transform 0.2s;">
                                    Detay <i class="fas fa-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <button onclick="slideLeft{{ $section->id }}()"
                    style="position: absolute; left: -20px; top: 50%; transform: translateY(-50%); background: white; width: 48px; height: 48px; border-radius: 50%; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all 0.2s;">
                <i class="fas fa-chevron-left" style="color: var(--primary);"></i>
            </button>
            <button onclick="slideRight{{ $section->id }}()"
                    style="position: absolute; right: -20px; top: 50%; transform: translateY(-50%); background: white; width: 48px; height: 48px; border-radius: 50%; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all 0.2s;">
                <i class="fas fa-chevron-right" style="color: var(--primary);"></i>
            </button>
        </div>
    </div>
</section>

<style>
    #toursSlider{{ $section->id }}::-webkit-scrollbar {
        display: none;
    }

    .tours-slider-section img:hover {
        transform: scale(1.1);
    }

    .tours-slider-section a:hover {
        transform: scale(1.05);
    }

    .tours-slider-wrapper button:hover {
        transform: translateY(-50%) scale(1.1);
    }
</style>

<script>
    function slideLeft{{ $section->id }}() {
        document.getElementById('toursSlider{{ $section->id }}').scrollBy({left: -400, behavior: 'smooth'});
    }

    function slideRight{{ $section->id }}() {
        document.getElementById('toursSlider{{ $section->id }}').scrollBy({ left: 400, behavior: 'smooth' });
    }
</script>