@extends('frontend.app')

@section('content')


    <section class="page-section bg-dark text-white">
        <div class="container-fluid">
            @php
                $counter = 5;
                $rowcounter = 1;
            @endphp
            @foreach(array_chunk($products, 6) as $key=>$items)
                <div class="rowfcosuable p-4" id="row-{{$rowcounter+$key}}">
                    @foreach($items as $product)

                        <div class="col-lg-2 moviecol">
                            <a href="/product?id={{$product['id']}}" class="item movie fcosuable"
                               id="{{ $counter }}">
                                <div class="verticalImage">
                                    <div class="loader hideloading"></div>
                                    <img src="{{$product['thumb']}}"
                                         alt=""></div>
                                <div class="movie-title">
                                    <div class="titletext">{{$product['name']}}</div>
                                </div>
                            </a>
                        </div>
                        @php $counter++; @endphp

                    @endforeach

                </div>
                @php $lastRowID = $rowcounter+$key+1 @endphp
            @endforeach


            <nav aria-label="Page navigation" class="rowfcosuable" id="row-{{$lastRowID}}">
                <ul class="pagination">
                    @if($page != 1)
                    <li class="page-item pl-1">
                        <a id="{{ $counter }}" class="page-link page-linkcustom fcosuable"
                           href="/products/?{{$prevpage}}" tabindex="-1">صفحه
                            قبل</a>
                    </li>
                    @php $counter++; @endphp
                    @endif
                        @if(($page * 24) < $listCount)
                        <li class="page-item pr-1">
                            <a id="{{ $counter }}" href="/products/?{{$nextpage}}"
                               class="page-link page-linkcustom fcosuable">صفحه بعد</a>
                        </li>
                    @endif
                </ul>
            </nav>
        </div>

    </section>


@endsection
@section('style')
    <style>
        .titletext {
            font-size: 15px !important;
        }
    </style>
    {{--
        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
    --}}

@endsection
@section('script')
    <script src="/dist/js/app.js"></script>

    <script>
        $(".fcosuable").first().addClass('activeFocus').focus();

    </script>
@endsection
