@extends('front.index')

@section('meta_title')
    {{ trans('front.home') }}
@endsection
@section('meta_des')
    {{ trans('front.home') }}
@endsection
@section('meta_key')
    {{ trans('front.home') }}
@endsection

@section('content')

    <style>
        .add-to-cart-btn {
            display: inline-block;
            background-color: #deac6d;
            color: #fff !important;
            padding: 8px 20px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none !important;
            transition: background-color 0.2s;
            text-align: center;
            width: 100%;
        }

        .add-to-cart-btn:hover {
            background-color: #c3a241;
            color: #fff !important;
        }

        .add-to-cart-btn i {
            margin-right: 4px;
        }

        .out-of-stock-label {
            display: inline-block;
            background-color: #eee;
            color: #999;
            padding: 8px 20px;
            border-radius: 4px;
            font-size: 14px;
            text-align: center;
            width: 100%;
        }
    </style>

    <div class="main-content">
        <!--home-->

        <!--slider-->
        <section class="slider" dir="ltr">
            <div id="demo" class="carousel slide" data-bs-ride="carousel">
                <!-- The slideshow/carousel -->
                <div class="carousel-inner" style="overflow: hidden; position: relative;">
                    @if ($sliders->count() > 0)
                        @foreach ($sliders as $k_slider => $slider)
                            <div class="carousel-item {{ $k_slider == 0 ? 'active' : '' }}">
                                <img class="d-block w-100" src="{{ $slider->ImageWithBaseHome }}" alt="{{ $slider->name }}">
                            </div>
                        @endforeach
                    @endif
                </div>

                <!-- Left and right controls/icons -->
                <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
            </div>
        </section>

        <!--slider-->
        {{--        <link rel="stylesheet" href="{{asset('bootstrap-5.3.1/css/bootstrap.min.css')}}" /> --}}
        {{--        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> --}}
        {{--        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> --}}
        {{--        <script src="{{asset('bootstrap-5.3.1/js/bootstrap.bundle.min.js')}}"></script> --}}

        <!--categories-->
        <section class="categories">
            <div class="container-fluid">
                <div class="categories-content">
                    @if ($categories->count() > 0)
                        @foreach ($categories as $cateTop)
                            <div class="category-box"><a
                                    href="{{ route('front.getProducts', ['cate%5B%5D=' . $cateTop->id]) }}">
                                    <div class="category-image"><img class="img-fluid" style="object-fit: fill !important;"
                                            src="{{ $cateTop->ImageWiteBase }}" alt="{{ $cateTop->name }}"></div>
                                    <div class="category-title">
                                        <h3>{{ $cateTop->name }}</h3>
                                    </div>
                                </a></div>
                        @endforeach
                    @else
                    @endif

                </div>
            </div>
        </section>
        <!--categories-->

        <!--offers-->
        <section class="offers">
            <div class="offers-content">
                <div class="container-fluid  mt-3">
                    <div class="title">
                        <h2>{{ trans('front.productOther') }}</h2>
                    </div>
                    <div class="offers-carousel owl-carousel owl-theme">
                        @if ($productsFainlys->count() > 0)
                            @foreach ($productsFainlys as $iddds => $proFianl)
                                <div class="offer-box"><a href="{{ $proFianl->ForLink }}">
                                        <div class="offer-image">
                                            <img class="img-fluid" style="object-fit: fill !important;"
                                                src="{{ $proFianl->ImageWiteBase }}" alt="{{ $proFianl->item_name }}">
                                        </div>
                                        <div class="offer-title">
                                            <h2>{{ $proFianl->item_name }}</h2>
                                        </div>
                                        {{--                                    <div class="rating-stars"> --}}
                                        {{--                                        <div class="rating"> --}}
                                        {{--                                            @for ($i = 0; $i < $proFianl->stars; $i++) --}}
                                        {{--                                                <i class="fa fa-star voted"></i> --}}
                                        {{--                                            @endfor --}}
                                        {{--                                            @for ($i = 0; $i < 5 - $proFianl->stars; $i++) --}}
                                        {{--                                                <i class="fa fa-star"></i> --}}
                                        {{--                                            @endfor --}}

                                        {{--                                        </div> --}}
                                        {{--                                        <span class="rating-number">({{$proFianl->count_product_reviews}})</span> --}}
                                        {{--                                    </div> --}}
                                        <div class="offer-price">
                                            <div class="after"> <span class="currency"> </span>
                                                <span class="price" style="color: #000; font-size: 25px;">
                                                    @if (@$proFianl->discount != 0)
                                                        {{ @$proFianl->price_after_discount }}
                                                    @else
                                                        {{ @$proFianl->price }}
                                                    @endif {{ trans('front.KD') }}
                                                </span>
                                            </div>

                                            <div class="before"> <span class="currency"> </span>
                                                @if (@$proFianl->discount != 0)
                                                    <span class="price">{{ @$proFianl->price }}
                                                        {{ trans('front.KD') }}</span><span
                                                        class="off">{{ @$proFianl->discount }}% </span>
                                                @else
                                                    <span class="price"></span><span class="off"> </span>
                                                @endif
                                            </div>
                                            <ul style="list-style-type: none; padding:0; margin:10px 0 0 0;">
                                                <li style="margin-bottom:6px;"><a class="tooltip-1"
                                                        href="{{ route('front.favorites.store', [$proFianl->id]) }}"
                                                        data-bs-toggle="tooltip" data-bs-placement="left"
                                                        title="Add to favorites" style="color:#c3a241; font-size:13px;"><i
                                                            class="ti-heart"></i><span>
                                                            {{ trans('front.Add-to-fave') }}</span></a></li>
                                                @if ($proFianl->quantity != 0)
                                                    <li><a class="add-to-cart-btn"
                                                            href="{{ route('front.product.OneaddToCarts', [$proFianl->id, 'product_id' => $proFianl->id, 'quantity' => '1', 'qty' => '1', 'specific_id' => @$proFianl->ProductSpecificOneProduct->size_id]) }}"
                                                            title="Add to cart"><i class="ti-shopping-cart"></i>
                                                            {{ trans('front.Add-to-cart') }}</a>
                                                    @else
                                                    <li><span
                                                            class="out-of-stock-label">{{ trans('front.out_of_stock') }}</span>
                                                    </li>
                                                @endif
                                                </li>
                                            </ul>
                                        </div>
                                    </a>

                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </section>
        <!--offers-->

        <!--offers-->

        <!--offers-->

        <!--sales off-->
        <section class="offers">
            <div class="offers-content">
                <div class="container-fluid">
                    <div class="title">
                        <h2>{{ trans('front.productBestSeller') }}</h2>
                    </div>
                    <div class="offers-carousel owl-carousel owl-theme">
                        @if ($productsSpecial->count() > 0)
                            @foreach ($productsSpecial as $productsSpecia)
                                <div class="offer-box">
                                    <a href="{{ $productsSpecia->ForLink }}">
                                        <div class="offer-image">
                                            <img class="img-fluid" style="object-fit: fill !important;"
                                                src="{{ $productsSpecia->ImageWiteBase }}"
                                                alt="{{ $productsSpecia->item_name }}">
                                        </div>
                                        <div class="offer-title">
                                            <h2>{{ $productsSpecia->item_name }} </h2>
                                        </div>
                                        <div class="offer-price">
                                            <div class="after">
                                                <span class="currency"> </span>
                                                <span class="price" style="color: #000; font-size: 25px;">
                                                    @if (@$productsSpecia->discount != 0)
                                                        {{ @$productsSpecia->price_after_discount }}
                                                    @else
                                                        {{ @$productsSpecia->price }}
                                                    @endif {{ trans('front.KD') }}
                                                </span>
                                            </div>
                                            <div class="before"> <span class="currency"> </span>
                                                @if (@$productsSpecia->discount != 0)
                                                    <span class="price">{{ @$productsSpecia->price }}
                                                        {{ trans('front.KD') }} </span><span class="off"
                                                        style="color: #000;">{{ @$productsSpecia->discount }}%</span>
                                                @else
                                                    <span class="price"></span><span class="off"> </span>
                                                @endif
                                            </div>
                                            <ul style="list-style-type: none; padding:0; margin:10px 0 0 0;">
                                                <li style="margin-bottom:6px;"><a class="tooltip-1"
                                                        href="{{ route('front.favorites.store', [$productsSpecia->id]) }}"
                                                        data-bs-toggle="tooltip" data-bs-placement="left"
                                                        title="Add to favorites" style="color:#c3a241; font-size:13px;"><i
                                                            class="ti-heart"></i><span>
                                                            {{ trans('front.Add-to-fave') }}</span></a></li>
                                                @if ($productsSpecia->quantity != 0)
                                                    <li><a class="add-to-cart-btn"
                                                            href="{{ route('front.product.OneaddToCarts', [$productsSpecia->id, 'product_id' => $productsSpecia->id, 'quantity' => '1', 'qty' => '1', 'specific_id' => @$productsSpecia->ProductSpecificOneProduct->size_id]) }}"
                                                            title="Add to cart"><i class="ti-shopping-cart"></i>
                                                            {{ trans('front.Add-to-cart') }}</a>
                                                    @else
                                                    <li><span
                                                            class="out-of-stock-label">{{ trans('front.out_of_stock') }}</span>
                                                    </li>
                                                @endif
                                            </ul>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        @else
                        @endif

                    </div>
                </div>
            </div>
        </section>
        <!--sales off-->

        {{--        <!--products--> --}}
        {{--        <section class="global-products"> --}}
        {{--            <div class="products-content"> --}}
        {{--                <div class="container-fluid"> --}}
        {{--                    <div class="title"> --}}
        {{--                        <h2>{{trans('front.spaiclProduct')}}</h2> --}}
        {{--                    </div> --}}
        {{--                    <div class="products-carousel owl-carousel owl-theme"> --}}
        {{--                        @if ($productsLast->count() > 0) --}}
        {{--                            @foreach ($productsLast as $iddds => $getProduct) --}}
        {{--                        <div class="product-box"> --}}
        {{--                            <a href="{{$getProduct->ForLink}}"> --}}
        {{--                                <div class="product-image"><img class="img-fluid" src="{{$getProduct->ImageWiteBase}}" alt="{{$getProduct->name}}"></div> --}}
        {{--                                <div class="product-title"> --}}
        {{--                                    <h2>{{$getProduct->name}} </h2> --}}
        {{--                                </div> --}}
        {{--                                <div class="rating-stars"> --}}
        {{--                                    <div class="rating"> --}}
        {{--                                        @for ($i = 0; $i < $getProduct->stars; $i++) --}}
        {{--                                            <i class="fa fa-star voted"></i> --}}
        {{--                                        @endfor --}}
        {{--                                        @for ($i = 0; $i < 5 - $getProduct->stars; $i++) --}}
        {{--                                            <i class="fa fa-star"></i> --}}
        {{--                                        @endfor --}}

        {{--                                    </div> --}}
        {{--                                </div> --}}
        {{--                                <div class="product-price"> --}}
        {{--                                    <div class="after"> <span class="currency"> </span><span class="price">{{@$getProduct->price}}</span></div> --}}

        {{--                                        <div class="before"> <span class="currency"> </span> --}}
        {{--                                            @if (@$getProduct->getPriceOfProduct()['dicount'] != 0) --}}
        {{--                                                <span class="price">{{@$getProduct->getPriceOfProduct()['price']}}</span><span class="off">{{@$getProduct->getPriceOfProduct()['dicount']}}%</span> --}}
        {{--                                            @else --}}
        {{--                                                <span class="price"></span><span class="off"></span> --}}
        {{--                                            @endif --}}
        {{--                                        </div> --}}
        {{--                                </div> --}}
        {{--                            </a> --}}
        {{--                        </div> --}}

        {{--                            @endforeach --}}
        {{--                        @else --}}

        {{--                        @endif --}}

        {{--                    </div> --}}
        {{--                </div> --}}
        {{--            </div> --}}
        {{--        </section> --}}
        {{--        <!--products--> --}}

        <!--home-->
    </div>


@endsection