@foreach ($programs['country'] as $key => $programs)
    <div class="pg-country" id="sm-pg-cont{{ $key }}" data-tab="tab-content">
        <div class="area-pg-list">
            <div class="swiper-wrapper">
                @foreach ($programs as $program)
                    <div class="swiper-slide pg-item">
                        @include('programs.item', ['program' => $program])
                    </div>
                @endforeach
            </div>
        </div>
        <div class="swiper-controls round-style">
            <div class="swiper-controls-direction">
                <div class="swiper-button-prev swiper-button-prev-sm-pg-cont{{ $key }}"></div>
                <div class="swiper-button-next swiper-button-next-sm-pg-cont{{ $key }}"></div>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            $('.sm-programs-basic #sm-pg-cont{{ $key }} .area-pg-list').each(function() {
                new Swiper(this, {
                    loop: false,
                    slideClass: 'pg-item',
                    slidesPerView: 'auto',
                    speed: 200,
                    observer: true,
                    observeParents: true,
                    navigation: {
                        prevEl: '.swiper-button-prev-sm-pg-cont{{ $key }}',
                        nextEl: '.swiper-button-next-sm-pg-cont{{ $key }}',
                    },
                    breakpoints: {
                        768: {
                            slidesPerGroup: 4
                        }
                    }
                });
            });
        });
    </script>
@endforeach