@if ($Items->count() > 0)
    <div class="bg_main position-relative main_background_color " style="overflow: hidden;">
        <div class="container">
            <div class="row d-flex flex-wrap-reverse row_main">
                <div class="row">
                    <div class="col d-lg-block d-none">
                        {{-- start this for loop --}}
                                                @foreach ($Items as $item)
                            <div class="mt_main animation_left product_swiper_main product_main_large_colors getColor"
                                data-product="{{ $item->id }}" number="{{ $index++ }}">
                                <p class="subtitle_main">{{ __('website.Shop') }}</p>
                                <h1 class="title_main">
                                    @if (session()->get('locale') == 'en')
                                        {{ $item->name_en }}
                                    @else
                                        {{ $item->name_ar }}
                                    @endif
                                </h1>
                                <p class="paragragh w_75">
                                    @if (session()->get('locale') == 'en')
                                        {{ $item->desc_en }}
                                    @else
                                        {{ $item->desc_ar }}
                                    @endif
                                </p>

                                <div class="d-flex align-items-center">
                                    <div class="active_color me-2"><button type="button" id="changecolorBrown"
                                            class="btn colors colors_main_large first_color"
                                            data-image-src="{{ URL::asset($item->image) }}"></button>
                                    </div>
                                                                        @foreach ($item->ItemsColors() as $ItemsColor)
                                        <div class="me-2"><button type="button" class="btn colors colors_main_large"
                                                style="background-color:  {{ $ItemsColor->color }} !important;"
                                                data-image-src="{{ URL::asset($ItemsColor->image) }}"></button>
                                        </div>
                                                                            @endforeach
                                    <p class="mt-3 @if (session()->get('locale') == 'ar') me-2 @endif"
                                        style="color: #D6CEC1">
                                        ecru white</p>
                                </div>

                                <div class="d-flex align-items-center">
                                    <p class="price mt-3 @if (session()->get('locale') == 'ar') ms-3 @endif">
                                        {{ $item->price }}
                                        {{ __('website.EGP') }}
                                        {{-- <span class="Dec_price">.89</span> --}}
                                    </p>
                                    {{-- change data-id="1" number for any product because cart --}}
                                    <button
                                        class="cart_main d-flex align-items-center rounded-pill px-4 ms-4 add-to-cart"
                                        id="myCartRoute" data-url="{{ route('user.myCart') }}"
                                        data-id="{{ $item->id }}">
                                        <img src="{{ URL::asset('assets2/images/icons/right arrow.png') }}"
                                            width="43px"
                                            style=" @if (session()->get('locale') == 'ar') transform: rotate(180deg); @endif" />
                                        <img src="{{ URL::asset('assets2/images/icons/shopping-cart.png') }}"
                                            width="23px"
                                            class="@if (session()->get('locale') == 'ar') ms-0 me-4 @else ms-4 @endif" />
                                    </button>
                                    <button class="btn ms-3 add-to-fav" data-id="{{ $item->id }}">
                                        <img src="{{ URL::asset('assets2/images/icons/save.png') }}"
                                            style="display: block;" width="15px" id="notSave" />
                                        <img src="{{ URL::asset('assets2/images/icons/save3.png') }}"
                                            style="display: none;" width="15px" id="saved" />
                                    </button>

                                </div>
                            </div>
                            {{-- end this for loop --}}
                                                    @endforeach
                    </div>
                    <div class="col position-relative d-lg-block d-none">
                        <div class="swiper-container @if (session()->get('locale') == 'ar') swiper-container-ar @endif mt-5 d_none"
                            id="productSwiper">
                            <div class="swiper-wrapper position-relative" dir="ltr">
                                <!-- Slides -->
                                {{-- start this for loop --}}
                                                                @foreach ($Items as $item)
                                    <div class="swiper-slide product_main_large" data-number="{{ $indexx++ }}"
                                        number="{{ $index++ }}">
                                        <div class="bg_product">
                                            <img src="{{ URL::asset($item->image) }}" width="94px"
                                                class="product product_image_main_large @if (session()->get('locale') == 'ar') product-ar @endif"
                                                id="product_image" />
                                        </div>
                                        <img src="{{ URL::asset('assets2/images/home/description 1.png') }}"
                                            width="144px"
                                            class="des1 @if (session()->get('locale') == 'ar') des1_ar @endif d_none" />
                                        <div
                                            class="text-center des_all @if (session()->get('locale') == 'ar') des_all_ar @endif d_none">
                                            <p class="des_title">{{ __('website.Weight') }}</p>
                                            <p class="des fs-5">{{ $item->weight }} {{ __('website.KG') }}</p>
                                        </div>
                                        <img src="{{ URL::asset('assets2/images/home/description 3.png') }}"
                                            width="144px"
                                            class="des2 @if (session()->get('locale') == 'ar') des2_ar @endif d_none" />
                                        <div
                                            class="text-center des_all2 @if (session()->get('locale') == 'ar') des_all2_ar @endif d_none">
                                            <p class="des_title"> {{ __('website.Dimensions') }}</p>
                                            <p class="des fs-5">{{ $item->dimetion }}</p>
                                        </div>
                                        <div>
                                            <img src="{{ URL::asset('assets2/images/home/desc3.png') }}" width="194px"
                                                class="des3 @if (session()->get('locale') == 'ar') des3_ar @endif d_none" />
                                            <div
                                                class="text-center des_all3 @if (session()->get('locale') == 'ar') des_all3_ar @endif d_none">
                                                <p class="des_title"> {{ __('website.Material') }}</p>
                                                <p class="des fs-5">
                                                    @if (session()->get('locale') == 'en')
                                                        {{ $item->material->name_en }}
                                                    @else
                                                        {{ $item->material->name_ar }}
                                                    @endif
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- end this for loop --}}
                                                                    @endforeach
                            </div>

                            <div
                                class="swiper-button-next @if (session()->get('locale') == 'ar') swiper-button-next-ar @endif">
                            </div>

                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                </div>

                <div class="col position-relative">

                    <div id="carouselExampleIndicators9" class="carousel slide mt-3 d-block d-lg-none">
                        <div class="carousel-indicators">
                            {{-- change number data-bs-slide-to="0" and number aria-label="Slide 1" --}}
                                                        @foreach ($Items as $item)
                                <button type="button" data-bs-target="#carouselExampleIndicators9"
                                    data-bs-slide-to="{{ $index }}"
                                    @if ($index == 0) class="active" @endif aria-current="true"
                                    aria-label="Slide {{ $index + 1 }}"></button>
                                                            @endforeach
                        </div>
                        <div class="carousel-inner">

                            {{-- start this for loop --}}
                                                        @foreach ($Items as $item)
                                <div
                                    class="carousel-item product_main getColor @if ($index == 0) active @endif">
                                    <div class="row">
                                        <div class="col">
                                            <div class="">
                                                <div class="d-flex align-items-start">
                                                    <span class="material-symbols-outlined me-2"
                                                        style="color: #B57414;">
                                                        fiber_manual_record
                                                    </span>
                                                    <div>
                                                        <p class="des_title"> {{ __('website.Weight') }}</p>
                                                        <p class="des fs-5">{{ $item->weight }} KG</p>
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-start">
                                                    <span class="material-symbols-outlined me-2"
                                                        style="color: #B57414;">
                                                        fiber_manual_record
                                                    </span>
                                                    <div>
                                                        <p class="des_title"> {{ __('website.Dimensions') }}</p>
                                                        <p class="des fs-5"> {{ $item->dimetion }}<br /> </p>
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-start">
                                                    <span class="material-symbols-outlined me-2"
                                                        style="color: #B57414;">
                                                        fiber_manual_record
                                                    </span>
                                                    <div>
                                                        <p class="des_title"> {{ __('website.Material') }}</p>
                                                        <p class="des fs-5">
                                                            @if (session()->get('locale') == 'en')
                                                                {{ $item->material->name_en }}
                                                            @else
                                                                {{ $item->material->name_ar }}
                                                            @endif
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col position-relative">
                                            <img src="{{ URL::asset($item->image) }}" width="80px" height="150px"
                                                class="mt-3 product_image_main " id="product1_image_small" />

                                            {{-- <svg class="shadow_1" width="60" height="43" viewBox="0 0 246 43"
                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g style="mix-blend-mode:lighten" opacity="0.12"
                                                filter="url(#filter0_f_20_47)">
                                                <ellipse cx="123" cy="21.5" rx="116" ry="14.5"
                                                    fill="url(#paint0_linear_20_47)" />
                                            </g>
                                            <defs>
                                                <filter id="filter0_f_20_47" x="0" y="0" width="246" height="43"
                                                    filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix"
                                                        result="shape" />
                                                    <feGaussianBlur stdDeviation="3.5"
                                                        result="effect1_foregroundBlur_20_47" />
                                                </filter>
                                                <linearGradient id="paint0_linear_20_47" x1="123" y1="7"
                                                    x2="123" y2="36" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#CFC9BB" />
                                                    <stop offset="1" stop-color="#CFC9BB" stop-opacity="0.18" />
                                                </linearGradient>
                                            </defs>
                                        </svg> --}}

                                        </div>
                                    </div>

                                    <div class="mt_main animation_left" data-product="{{ $item->id }}">
                                        <p class="subtitle_main">{{ __('website.Shop') }}</p>
                                        <h1 class="title_main">
                                            @if (session()->get('locale') == 'en')
                                                {{ $item->name_en }}
                                            @else
                                                {{ $item->name_ar }}
                                            @endif
                                        </h1>
                                        <p class="paragragh w_75">
                                            @if (session()->get('locale') == 'en')
                                                {{ $item->desc_en }}
                                            @else
                                                {{ $item->desc_ar }}
                                            @endif
                                        </p>

                                        <div class="d-flex align-items-center">
                                            <div class="active_color me-2"><button type="button"
                                                    id="changecolorBrown" class="btn colors first_color"
                                                    data-image-src="{{ URL::asset($item->image) }}"></button>
                                            </div>
                                                                                        @foreach ($item->ItemsColors() as $ItemsColor)
                                                <div class="me-2"><button type="button" class="btn colors"
                                                        style="background-color:  {{ $ItemsColor->color }} !important;"
                                                        data-image-src="{{ URL::asset($ItemsColor->image) }}"></button>
                                                </div>
                                                                                            @endforeach

                                            <p class="mt-3 @if (session()->get('locale') == 'ar') me-2 @endif"
                                                style="color: #D6CEC1">ecru white</p>
                                        </div>

                                        <div class="d-flex align-items-center">
                                            <p class="price mt-3 @if (session()->get('locale') == 'ar') ms-3 @endif">
                                                {{ $item->price }} {{ __('website.EGP') }}
                                                {{-- <span class="Dec_price">.89</span> --}}
                                            </p>
                                            {{-- change data-id="1" number for any product because cart --}}
                                            <button
                                                class="cart_main d-flex align-items-center rounded-pill px-4 ms-4 add-to-cart"
                                                data-id="{{ $item->id }}">
                                                <img src="{{ URL::asset('assets2/images/icons/right arrow.png') }}"
                                                    width="43px"
                                                    style=" @if (session()->get('locale') == 'ar') transform: rotate(180deg); @endif" />
                                                <img src="{{ URL::asset('assets2/images/icons/shopping-cart.png') }}"
                                                    width="23px"
                                                    class="@if (session()->get('locale') == 'ar') ms-0 me-4 @else ms-4 @endif" />
                                            </button>
                                            <button class="btn ms-3 add-to-fav" data-id="{{ $item->id }}">
                                                <img src="{{ URL::asset('assets2/images/icons/save.png') }}"
                                                    style="display: block;" width="15px" id="notSave" />
                                                <img src="{{ URL::asset('assets2/images/icons/save3.png') }}"
                                                    style="display: none;" width="15px" id="saved" />
                                            </button>

                                        </div>
                                    </div>

                                </div>
                                                            @endforeach
                            {{-- end this for loop --}}
                        </div>
                        <button class="carousel-control-prev" type="button"
                            data-bs-target="#carouselExampleIndicators9" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button"
                            data-bs-target="#carouselExampleIndicators9" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>

                    <!-- Add Product Number -->
                    <p class="number_product  d_none">01</p>
                </div>
            </div>
        </div>
        <div class="bottom_texts">
            <p class="first">{{ __('website.WHERE_QUALITY') }}</p>
            <p class="last">{{ __('website.MEETS_PERFECTION') }}</p>
        </div>

    </div>
@endif