@foreach($data['programs'] as $program)
    <div class="swiper-slide card-wrap">
        <div class="card">
            <a class="image" href="{{ $program['url'] }}">
                <img class="placeholder-image"
                    src="{{ $program['images'][0] ?? 'https://www.ithra.com/application/files/cache/thumbnails/3bdaf04335bb1378edfe2e415302da9a.jpg' }}"
                    alt="{{ $program['title'] }}">
            </a>
            @if(!empty($program['audio_tour_tag']))
                
                <div class="audio-tour-badge">
                    <div class="icon">
                        <svg width="15" height="15" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14.3907 8.80078V7.75028C14.3907 4.73007 11.9614 2.30078 8.94122 2.30078C5.92102 2.30078 3.49172 4.73007 3.49172 7.75028V8.80078C1.98162 9.06341 0.799805 10.3765 0.799805 11.9523C0.799805 13.725 2.24425 15.2351 4.08263 15.2351C4.54223 15.2351 5.00182 15.1038 5.46142 14.9068C5.46142 14.9068 5.52708 14.9068 5.52708 14.8412C5.59273 14.7755 5.65839 14.7099 5.65839 14.5786V9.26038C5.65839 9.19472 5.59273 9.06341 5.52708 8.99775C5.52708 8.99775 5.52708 8.93209 5.46142 8.93209H5.26445C5.26445 8.93209 5.19879 8.93209 5.19879 8.86644C5.13314 8.86644 5.06748 8.80078 5.00182 8.80078C4.93617 8.80078 4.87051 8.80078 4.80485 8.73513V7.68462C4.80485 5.38664 6.64324 3.54826 8.94122 3.54826C11.2392 3.54826 13.0776 5.38664 13.0776 7.68462V8.73513C13.0119 8.73513 12.9463 8.73513 12.8806 8.80078C12.815 8.80078 12.7493 8.86644 12.6836 8.86644C12.6836 8.86644 12.618 8.86644 12.618 8.93209C12.5523 8.93209 12.4867 8.99775 12.421 8.99775C12.421 8.99775 12.3554 8.99775 12.3554 9.06341C12.2897 9.12906 12.224 9.19472 12.224 9.32603V14.6442C12.224 14.7755 12.2897 14.8412 12.3554 14.9068C12.3554 14.9068 12.421 14.9068 12.421 14.9725C12.8806 15.1695 13.2746 15.3008 13.7998 15.3008C15.6382 15.3008 17.0826 13.8563 17.0826 12.018C17.017 10.3765 15.9008 9.06341 14.3907 8.80078Z" fill="white"></path>
                        </svg>
                    </div>
                    <p>{{ $program['audio_tour_tag']['label'] }}</p>
                </div>
                
            @endif
            <div class="content">
                <div class="top-row">
                    <div class="left">
                        <div class="tags" style="position: relative;">
                            @if(!empty($program['tags']))
                                @foreach(array_slice($program['tags'], 0, 2) as $tag) <!-- Adjust the number here to control how many tags are displayed -->
                                    <a href="https://ithra.com/en/tags?tags={{ urlencode($tag['label']) }}">
                                        <span
                                            class="{{ is_array($tag) ? strtolower($tag['label'] ?? '') : strtolower($tag) }}"
                                            style="background: {{ $tag['background_color'] }}; color: {{ $tag['font_color'] }};">
                                            {{ is_array($tag) ? ($tag['label'] ?? '') : $tag }}
                                        </span>
                                    </a>
                                @endforeach
                            @endif

                            @if (count($program['tags']) > 2) <!-- Update this condition to match the number of tags you want to display initially -->
                                <a href="javascript:void(0);" class="popover-trigger">
                                    <span style="background: #ccc; color: #333;">
                                        + {{ count($program['tags']) - 2 }} <!-- Update this subtraction to match the number of initially displayed tags -->
                                    </span>
                                </a>
                                <div class="popover-content" style="display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #ccc; padding: 10px; z-index: 1000;">
                                    @foreach(array_slice($program['tags'], 2) as $tag) <!-- Update this to start slicing from the tag after the last one displayed -->
                                        <a href="https://ithra.com/en/tags?tags={{ urlencode($tag['label']) }}" style="display: block; margin-bottom: 5px;">
                                            <span
                                                class="{{ is_array($tag) ? strtolower($tag['label'] ?? '') : strtolower($tag) }}"
                                                style="background: {{ $tag['background_color'] }}; color: {{ $tag['font_color'] }}; padding: 0px 20px 0; border-radius: 3px; display: block;">
                                                {{ is_array($tag) ? ($tag['label'] ?? '') : $tag }}
                                            </span>
                                        </a>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="right">
                        <div class="favorite">
                            <span class="icon-heart"></span>
                        </div>
                    </div>
                </div>
                <a href="{{ $program['url'] }}" class="title">
                    <p>{{ $program['title'] }}</p>
                </a>
                <div class="bottom-row auto-height">
                    <div class="ic-list">

                        @foreach($program['more_info'] as $info)
                        @if ($info['icon']!='')


                        <div class="item">
                            <span class="icon">
                                <img src="{{ $info['icon'] }}" alt="icon">
                            </span>
                            <p>{{ $info['title'] }}</p>
                        </div>
                        @endif
                        @endforeach
                    </div>
                    <div style="width: 100%;">
                        @foreach($program['more_info'] as $info)
                        @if($loop->last && strpos($info['title'], 'sessions') !== false)
                        <a class="more-sessions" href="{{ $program['url'] }}">
                            <p style="color: {{ $info['title_color'] ?? '#000' }};">
                                {{ $info['title'] }}
                            </p>
                        </a>
                        @endif
                        @endforeach
                        {{-- @if($program['enableButton']) --}}
                        <a class="primary-btn" href="{{ $program['url'] }}">
                            <span class="icon-coupon"></span>
                            {{ $program['buttonText'] }}
                        </a>
                        {{-- @endif --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
 
<script type="text/javascript">
    var swiper = new Swiper(".slider", {
        spaceBetween: 15,
        slidesOffsetAfter: 0,
        centeredSlides: false,
        freeMode: false,
        // initialSlide: 3,
        slidesPerView: 4,
        // touchEventsTarget: "slider-date",
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
        },
        breakpoints: {
            500: {
                slidesPerView: 3
            },
            700: {
                slidesPerView: 3
            }
        }
    });
</script>
    <script type="text/javascript">
        var swiper = new Swiper(".slider-data", {
        slidesPerView: 3.6,
        spaceBetween: 35,
        slidesOffsetAfter: 0,
        centeredSlides: false,
        freeMode: false,
        // initialSlide: 3,
        touchEventsTarget: "date-slider",
        // touchEventsTarget: "slider-date",
        pagination: {
            el: '.swiper-pagination',
            type: 'progressbar'
        },
        navigation: {
            nextEl: ".swiper-button-next1",
            prevEl: ".swiper-button-prev1"
        },
        breakpoints: {
            500: {
                slidesPerView: 1.2
            },
            700: {
                slidesPerView: 2
            }
        }
    });
</script>