@if($agent->isPhone())
    @else
    @endif
<div class="slidercontainer container mb-5 {{ $sectionName }}">
    <div class="row align-items-center">
        <div class="col-md-8 col-8 text-{{ $dir == 'rtl' ? 'end' : 'start' }} py-5">
            <h2 class="fb-700">{{strtoupper(__('lang.'.$sectionName)) }}</h2>
        </div>
        <div class="col-md-4 col-4 text-{{ $dir == 'rtl' ? 'start' : 'end' }}">
            <!-- Navigation arrows -->
            <a aria-label="go to previous slide" class=" btn btn-info left" onclick="nextSlide('testw',-1)">❮</a>
            <a aria-label="go to next slide" class="btn btn-info right" onclick="nextSlide('testw',1)">❯</a>
        </div>
    </div>

    @foreach (array_chunk($lastArrivedProducts,$count)   as $products)
        <div  class="showSlide fade show">
            <div class="row">
                @foreach ($products as $key => $product)
                    <div class="col-md-3 col-6">
                        @include('includes.productCard',['product'=>$product,'sectionName'=>'testw' ])
                    </div>
                @endforeach
            </div>
        </div>
    @endforeach

</div>
@push('css')

    <style>

    .left, .right {
        font-weight: bold;
        font-size: 18px;
        /* border-radius: 0 3px 3px 0; */
    }
    .right {
        right: 0;
        /* border-radius: 3px 0 0 3px; */
    }
    .left:hover, .right:hover {
        background-color: rgba(115, 115, 115, 0.8);
    }

    </style>

@endpush
@push('js')

<script type="text/javascript">
    var slide_index = 0;
    displaySlides('testw' , slide_index);

    function nextSlide(slider,n) {
        displaySlides(slider,slide_index += n);
    }

    function currentSlide(slider,n) {
        displaySlides(slider,slide_index = n);
    }

    function displaySlides(slider,n) {
        var i;
        var slides = document.querySelectorAll("."+slider+ " .showSlide");
        if (n > slides.length) { slide_index = 1 }
        if (n < 1) { slide_index = slides.length }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slides[slide_index - 1].style.display = "block";
    }
</script>
@endpush