@extends('layouts.lookatme')

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

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

    <!-- Feature Collection -->
    <div class="feature-collection tw-relative">
        <img class="tw-w-full" src="{{ asset($public_assets . 'assets/lookatme/images/bg_feature_collection.svg') }}" alt="">

        <div class="tw-absolute tw-left-0 tw-top-0 tw-bottom-0 tw-right-0 tw-bg-black/75">
            <div
                    class="tw-flex tw-items-center tw-content-center tw-justify-center tw-m-auto tw-h-full tw-flex-col tw-text-white">
                @include('templates.lookatme.components.head-title', [
                    'title' => 'NEW IN',
                    'fontStyle' => 'tw-text-xl md:tw-text-5xl',
                ])
                <div class="tw-text-center tw-my-6 tw-w-[300px]">

                </div>
                @include('templates.lookatme.components.button', [
                    'text' => 'Shop Now',
                    'class' => 'tw-text-white tw-border-white',
                    'link' => route('product-list.index'),
                ])
            </div>
        </div>
    </div>

    <!-- Product -->
    <div class="tw-relative">
        <div class="tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-bg-black/75 tw-h-[400px] tw-z-0"></div>
        <div class="tw-relative tw-z-30">
            <div class="tw-flex tw-justify-center tw-pt-6">
                <div class="tw-text-white">
                    @include('templates.lookatme.components.head-title', [
                        'title' => trans('message.the_latest'),
                        'fontStyle' => 'tw-text-3xl md:tw-text-5xl',
                    ])
                </div>
            </div>
            <div class="tw-mx-6 md:tw-mx-16 2xl:tw-mx-30 tw-mt-4">
                @include('templates.lookatme.components.product_slide', ['products' => $latestProducts])
            </div>
            <div class="tw-text-center tw-mt-8">
                @include('templates.lookatme.components.button', [
                    'text' => 'View All',
                    'class' => 'tw-uppercase',
                    'link' => route('product-list.index'),
                ])
            </div>
        </div>
    </div>
@endsection

@section('script')
    @parent
    <script>
        $(".carousel-slider").carousel({
            carouselContentClass: 'tw-space-x-6',
            btnClass: 'tw-border-0',
            draggable: false,
            btnIcon: [
                '<i class="tw-text-3xl icon-circle-left2"></i>',
                '<i class="tw-text-3xl icon-circle-right2"></i>',
            ],
        });
    </script>
@endsection