@extends('frontend.layouts.app')
@section('title-suffix')
    {{ __('welcome.title') }}
@endsection
@section('main-content')
    <section class="banner_part header-color">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <div class="banner_slider owl-carousel">
                        <div class="single_banner_slider">
                            <div class="row">
                                <div class="col-lg-5 col-md-8">
                                    <div class="banner_text">
                                        <div class="banner_text_iner">
                                            <h1>{{ __('welcome.hero-1-txt') }}</h1>
                                            <p>{{ __('welcome.hero-txt-2') }}</p>
                                            <a href="#buyNow" class="btn_2">{{ __('welcome.hero-btn') }}</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="banner_img d-none d-lg-block">
                                    <img src="{{ asset('assets/images/frontend/hero-1.png') }}" alt="hero-slider-1">
                                </div>
                            </div>
                        </div>
                        <div class="single_banner_slider">
                            <div class="row">
                                <div class="col-lg-5 col-md-8">
                                    <div class="banner_text">
                                        <div class="banner_text_iner">
                                            <h1>{{ __('welcome.hero-2-txt') }}</h1>
                                            <p>{{ __('welcome.hero-txt-2') }}</p>
                                            <a href="#buyNow" class="btn_2">{{ __('welcome.hero-btn') }}</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="banner_img d-none d-lg-block">
                                    <img src="{{ asset('assets/images/frontend/hero-2.png') }}" alt="hero-slider-2">
                                </div>
                            </div>
                        </div>
                        <div class="single_banner_slider">
                            <div class="row">
                                <div class="col-lg-5 col-md-8">
                                    <div class="banner_text">
                                        <div class="banner_text_iner">
                                            <h1>{{ __('welcome.hero-3-txt') }}</h1>
                                            <p>{{ __('welcome.hero-txt-2') }}</p>
                                            <a href="#buyNow" class="btn_2">{{ __('welcome.hero-btn') }}</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="banner_img d-none d-lg-block">
                                    <img src="{{ asset('assets/images/frontend/hero-3.png') }}" alt="hero-slider-3">
                                </div>
                            </div>
                        </div>

                    </div>
                    {{-- <div class="slider-counter"></div> --}}
                </div>
            </div>
        </div>
    </section>


    <section class="feature_part padding_top">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="section_tittle text-center">
                        <h2>{{ __('welcome.categories-featured') }}</h2>
                    </div>
                </div>
            </div>
            <div class="row align-items-center justify-content-between">
                @php
                    /* script to render the categories columns as rows of  7/12 - 5/12, and then 5/12 - 7/12 ... */
                    $counter = 1; // the counter
                    $width1 = 'col-lg-7'; // largeur 1
                    $width2 = 'col-lg-5'; // largeur 2
                @endphp
                @foreach ($categories as $key => $category)
                    @php
                        $class = $key % 2 === 0 ? $width1 : $width2; // the key is odd or even ?

                        if ($counter > 1) {
                            [$width1, $width2] = [$width2, $width1]; // if counter reach 2 exchange the values of the widths

                            $counter = 1; // reinitialize counter to 1
                        } else {
                            $counter++; // else increment counter
                        }
                    @endphp
                    @if (count($category->products))
                        <div class="{{ $class }} col-sm-6">
                            <div class="single_feature_post_text">
                                <p class="styled-category-name">{{ $category->name }}</p>

                                @if ($category->photo != '')
                                    <a href="{{ route('category.slug', ['category_slug' => $category->slug]) }}"
                                        class="feature_btn">{{ __('welcome.categories-explore') }}<i
                                            class="fas fa-play"></i></a>
                                    <img src="{{ asset($category->photo) }}" alt="{{ $category->name }}"
                                        class="img-fluid img-responsive">
                                @else
                                    <h3>{{ $category->products[0]->name }}</h3>
                                    <a href="{{ route('category.slug', ['category_slug' => $category->slug]) }}"
                                        class="feature_btn">{{ __('welcome.categories-explore') }}<i
                                            class="fas fa-play"></i></a>
                                    <img src="{{ asset($category->products[0]->image) }}"
                                        alt="{{ $category->products[0]->name }}" class="img-fluid img-responsive">
                                @endif
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </section>


    <section class="product_list section_padding">
        <div class="container" id="buyNow">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <div class="section_tittle text-center">
                        <h2>{{ __('welcome.products') }}</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    @foreach ($products_chunk as $products)
                        <div class="product_list_slider owl-carousel">

                            <div class="single_product_list_slider">
                                <div class="row align-items-center justify-content-between">
                                    @foreach ($products as $key => $product)
                                        <div class="col-lg-3 col-sm-6">
                                            <div class="single_product_item">
                                                <a
                                                    href="{{ route('single-product.slug', ['product_slug' => $product->slug]) }}">
                                                    <img src="{{ asset($product->image) }}"
                                                        alt="Image - {{ $product->name }}">
                                                </a>
                                                <div class="single_product_text">
                                                    <h4>{{ $product->name }}</h4>
                                                    <h3>{{ $product->selling_price }}&nbsp;FCFA</h3>

                                                    <div class="add_cart">
                                                        <a
                                                            href="{{ route('cart.add', $product->code) }}">{{ __('welcome.add-to-cart') }}</a>
                                                        <span>
                                                            <a href="{{ route('wishlist.add', $product->code) }}">
                                                                @if (in_array($product->code, $wishlistProductCodes))
                                                                    <i class="fa-solid fa-heart"></i>
                                                                @else
                                                                    <i class="fa-regular fa-heart"></i>
                                                                @endif
                                                            </a>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>


                        </div>
                    @endforeach
                </div>
                    {{-- <div class="row">
                    <div class="col-lg-12">
                        <div class="product_list_slider owl-carousel">
                            @php
                                $counter = 1;
                                $key = 0;
                                $length = (int) ceil(count($products) / 8);
                            @endphp
                            @for ($i = 0; $i < $length; $i++)
                                <div class="single_product_list_slider">
                                    <div class="row align-items-center justify-content-between">
                                        @for ($key; $key < count($products); $key++)
                                            <div class="col-lg-3 col-sm-6">
                                                <div class="single_product_item">
                                                    <a
                                                        href="{{ route('single-product.slug', ['product_slug' => $products[$key]->slug]) }}">
                                                        <img src="{{ asset($products[$key]->image) }}" alt="Image - {{ $products[$key]->name }}">
                                                    </a>
                                                    <div class="single_product_text">
                                                        <h4>{{ $products[$key]->name }}</h4>
                                                        <h3>{{ $products[$key]->selling_price }}&nbsp;FCFA</h3>
                                                        
                                                        <div class="add_cart">
                                                            <a
                                                                href="{{ route('cart.add', $products[$key]->code) }}">{{ __('welcome.add-to-cart') }}</a>
                                                            <span>
                                                                <a href="{{ route('wishlist.add', $products[$key]->code) }}">
                                                                    @if (in_array($products[$key]->code, $wishlistProductCodes))
                                                                        <i class="fa-solid fa-heart"></i>
                                                                    @else
                                                                        <i class="fa-regular fa-heart"></i>
                                                                    @endif
                                                                </a>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @if ($key == 7)
                                                @php
                                                    $key++;
                                                @endphp
                                            @break
                                        @endif
                                    @endfor
                                </div>
                            </div>
                        @endfor
                    </div>
                </div> --}}
            </div>
        </div>
    </section>


    <section class="our_offer section_padding">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-lg-6 col-md-6">
                    <div class="offer_img">
                        <img src="{{ asset('assets/images/frontend/offer_img.webp') }}" alt="">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="offer_text">
                        <h2>{{ __('welcome.our-offer') }}</h2>
                        <!-- countdown managed by public/assets/frontend/js/custom.js/makeTimer() -->
                        <div class="date_countdown">
                            <div id="timer">
                                <div id="days" class="date"></div>
                                <div id="hours" class="date"></div>
                                <div id="minutes" class="date"></div>
                                <div id="seconds" class="date"></div>
                            </div>
                        </div>
                        <form action="#">
                            <div class="input-group">
                                <input type="text" class="form-control"
                                    placeholder="{{ __('welcome.email-placeholder') }}" aria-label="Recipient's username"
                                    aria-describedby="basic-addon2">
                                <div class="input-group-append">
                                    <a href="#" class="input-group-text btn_2"
                                        id="basic-addon2">{{ __('welcome.booking') }}</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Best sellers section -->
    @include('frontend.partials.featured')
    <!-- End Best sellers section -->


    <section class="subscribe_area section_padding">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-7">
                    <div class="subscribe_area_text text-center">
                        <h5>{{ __('welcome.newsletter') }}</h5>
                        <h2>{{ __('welcome.newsletter-subscribe') }}</h2>
                        <form action="#">
                            <div class="input-group">
                                <input type="text" class="form-control"
                                    placeholder="{{ __('welcome.email-placeholder') }}" aria-label="Recipient's username"
                                    aria-describedby="basic-addon2">
                                <div class="input-group-append">
                                    <a href="#" class="input-group-text btn_2"
                                        id="basic-addon2">{{ __('welcome.newsletter-btn') }}</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="client_logo padding_top">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    @if ($brands)
                        @foreach ($brands as $brand)
                            <div class="single_client_logo">
                                <a href="{{ route('brand.slug', $brand->slug) }}"><img src="{{ asset($brand->logo) }}"
                                        alt="{{ $brand->title }}"></a>
                            </div>
                        @endforeach
                    @else
                        <div class="single_client_logo">
                            <img src="{{ asset('assets/images/defaults/brand-image.png') }}" alt="brand default">
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection