@extends('layouts.app')

@section('content')

<div class="container is-fluid" style="padding-top: 2%;" id="main-container">
    <div class="columns">
        <div class="column is-3">
            @include('partials._categories-menu')
        </div>
        <div class="column">

            <div class="content">
                <h4 class="has-text-weight-bold is-capitalized">
                    <span class="color-is-maroon">{{str_replace("-"," ",$main)}}</span>
                    /
                    <span>{{str_replace("-"," ",$sub)}}</span></h4>
            </div>
            @if(count($products))

                @foreach($products->chunk(4) as $chunk)
                    <div class="columns">
                        @foreach($chunk as $product)
                            <div class="column is-3">
                                @include('partials._product-card',['product' => $product])

                            </div>
                        @endforeach
                    </div>
                @endforeach

                @else
                <div class="hero is-light">
                    <div class="hero-body has-text-centered">
                        <div class="content">
                            <h3>There is no product in this category yet</h3>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection
@section('js')
    <script>
       $(document).ready(function () {
           $('html, body').animate({
               scrollTop: $("#main-container").offset().top
           },1000);
       });
    </script>
@endsection