@extends('shop.main')

@section('header')
    @include('shop.components.header')
@endsection
@section('slider')
    @include('shop.components.slider')
@endsection

@section('main')
    <div class="shop-main">
        <h2 class="section-title">Nossos Produtos!</h2>
        <section class="loop-products loop-products-mobile">
            <div class="loop-products-row">
                @php
                    $count = 1;
                @endphp
                @foreach ($products as $mainProduct)
                    @include('shop.components.loops.product-main')
                    @php
                        $count ++
                    @endphp
                    @if ($count == 3)
            </div>
            <div class="loop-products-row">
                    @php
                        $count = 1;
                    @endphp
                    @endif
                @endforeach
            </div>
        </section>

        <section class="loop-products loop-products-desktop">
            <div class="loop-products-row">
                @php
                    $count2 = 1;
                @endphp
                @foreach ($products as $mainProduct)
                    @include('shop.components.loops.product-main')
                    @php
                        $count ++
                    @endphp
                    @if ($count == 5)
            </div>
            <div class="loop-products-row">
                    @php
                        $count = 1;
                    @endphp
                    @endif
                @endforeach
            </div>


            {{-- @for ($i = 0; $i < 3; $i++)
                <div class="loop-products-row">
                    @include('shop.components.loops.product-main')
                    @include('shop.components.loops.product-main')
                    @include('shop.components.loops.product-main')
                    @include('shop.components.loops.product-main')
                </div>
            @endfor --}}
        </section>

    </div>
@endsection

@section('footer')
    @include('shop.components.footer')
@endsection
@push('css')
    <link rel="stylesheet" href="{{ asset('shop/css/shop-main.css') }}">
    <link rel="stylesheet" href="{{ asset('shop/css/product-item.css') }}">
@endpush