@extends('layouts.lookatme')

@section('title',trans('message.home'))

@section('content')
    <!-- Slider -->
    <div class="">
        @include('templates.lookatme.partials.slide',[
            'data' => $promotions,
            'hasNextPrev' => true
        ])
    </div>

    <div class="tw-mx-8">
        <div class="tw-flex tw-justify-center divider">
            <div class="navbar-light bg-light">
                <ul class="navbar-nav tw-flex-row tw-space-x-4">
                    @foreach($product_groups as $group)
                        <li class="nav-item">
                            <a href="{{ route('sale-promotion.index',['product_group' => urlencode($group->title)]) }}" class="nav-link">
                                {{ $group->name }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>

        <!-- Product -->
        <div class="tw-grid md:tw-grid-cols-3 tw-auto-rows-auto lg:tw-grid-cols-4 2xl:tw-grid-cols-5 tw-gap-8 tw-mt-6">
            @if(!$products->isEmpty())
                @foreach($products as $product)
                    @include('templates.lookatme.components.card',[
                        'title' => $product->name,
                        'price' => $product->price_text,
                        'src' => $product->picture_url,
                        'is_new' => $product->is_new_arrived,
                        'link' => route('product.detail',['id' => $product->id,'product_group' => request('product_group')]),
                        'discount' => $product->id_discount ? $product->discount_amount : false,
                    ])
                @endforeach
            @endif
        </div>
    </div>
@endsection

@section('script')
    @parent
    <script>
        $(".carousel-slider").carousel({
            carouselContentClass: 'tw-space-x-6',
            btnIcon: [
                '<i class="tw-text-3xl icon-circle-left2"></i>',
                '<i class="tw-text-3xl icon-circle-right2"></i>',
            ],
            responsive: {
                0: {
                    items: 1,
                },
                768: {
                    items: 2
                },
                1280: {
                    items: 4,
                },
                1600: {
                    items: 5
                }

            }
        });
    </script>
@endsection