{{-- <div class="card card_best_selling rounded-4 p-2 mt-4 ms_5 product getColor" style="width: 19rem;">
    <div class="card-body text-center" data-product="{{ $getItem->items_data->id }}">

        <button class="btn float-end mb-2 add-to-fav" data-id="4">
            <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 class="position-relative mt-3 openModal" href="#modal-center" uk-toggle>
            <img src="{{ URL::asset($getItem->items_data->image) }}" width="170px" height="100px"
                class="product_img_bestSelling mx-auto d-block mt-4 ps-2 productShape2"
                id="product1_image_bestSelling" />
            <img src="{{ URL::asset('assets2/images/bestSelling/shadow.png') }}" width="190px"
                class="position-absolute start-50 translate-middle" />
        </div>
        <div class="mt-4">
            <div class="d-flex align-items-center justify-content-center">
                <div class="active_color ">
                    <button type="button" id="changecolorBrown" class="btn colors"
                        style="background-color: #ffffff !important;background-image: linear-gradient(30deg, violet, orange, yellow, green, violet);"
                        data-image-src="{{ URL::asset($getItem->items_data->image) }}"></button>
                </div>
                                @foreach ($getItem->items_data->ItemsColors() as $ItemsColor)
                    <div class=" @if (session()->get('locale') == 'ar') me-2 @else ms-2 @endif">
                        <button type="button" id="changecolorBrown" class="btn colors"
                            style="background-color:  {{ $ItemsColor->color }} !important;"
                            data-image-src="{{ URL::asset($ItemsColor->image) }}"></button>
                    </div>
                                    @endforeach
            </div>

            <h5 class="card-title card_title fw-semibold mt-3">
                @if (session()->get('locale') == 'en')
                    {{ $getItem->items_data->name_en }}
                @else
                    {{ $getItem->items_data->name_ar }}
                @endif
            </h5>
            <div class="mt-3">
                <p class="price price_bestSelling">
                    {{ $getItem->items_data->price }}{{ __('website.EGP') }}<span class="Dec_price"></span>
                </p>
            </div>
        </div>
    </div>
</div>


<div id="modal-center" class="uk-flex-top productModal product getColor" uk-modal>
    <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical w-75 main_white_background_color">

        <a href="javascript:void(0);" style="color: #978466;"
            class="material-symbols-outlined fs-3 share-button @if (session()->get('locale') == 'ar') d-flex justify-content-start @endif"
            data-url="{{ route('user.productDetails_show', $getItem->items_data->id) }}">
            ios_share
        </a>
        <button class="uk-modal-close-default" type="button" uk-close></button>

        <div class="row">
            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="uk-position-relative uk-visible-toggle  h-100" tabindex="-1" uk-slideshow>

                    <div class="uk-slideshow-items mh-100">
                        <div>
                            <img src="{{ URL::asset('assets2/images/products/8.png') }}" width="400px"
                                class="mx-auto d-flex justify-content-center productShape2 productShapeModal" />
                        </div>
                        <div>
                            <img src="{{ URL::asset('assets2/images/products/8.png') }}" width="400px"
                                class="mx-auto d-flex justify-content-center productShape2 productShapeModal" />
                        </div>
                        <div>
                            <img src="{{ URL::asset('assets2/images/products/8.png') }}" width="400px"
                                class="mx-auto d-flex justify-content-center productShape2 productShapeModal" />
                        </div>
                    </div>

                    <a class="uk-position-center-left uk-position-small" href uk-slidenav-previous
                        uk-slideshow-item="previous">
                        <svg width="15" height="50" viewBox="0 0 19 50" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M3 24.8L16 3.99999" stroke="#715A40" stroke-width="7" stroke-linecap="round" />
                            <path d="M3 24.8L16 45.6" stroke="#715A40" stroke-width="7" stroke-linecap="round" />
                        </svg>


                    </a>
                    <a class="uk-position-center-right uk-position-small" href uk-slidenav-next
                        uk-slideshow-item="next">
                        <svg width="15" height="50" viewBox="0 0 19 50" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 25.2L3 46" stroke="#715A40" stroke-width="7" stroke-linecap="round" />
                            <path d="M16 25.2L3 4.40001" stroke="#715A40" stroke-width="7" stroke-linecap="round" />
                        </svg>

                    </a>
                </div>

            </div>
            <div class="col-lg-6 col-md-12 col-sm-12" data-product="4">
                <div class="">
                    <h2 class="title_productModal">Abstract XV</h2>
                    <p class="paragragh_productModal">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud......
                    </p>
                    <p class="price">$569<span class="Dec_price">.89</span></p>

                    <div class="d-flex align-items-center">
                        <div class="active_color me-2"><button type="button" class="btn colors first_color"
                                data-image-src="{{ URL::asset('assets2/images/products/8.png') }}"></button></div>
                        <div class="me-2"><button type="button" id="changecolorBrown"
                                class="btn colors second_color second_color_productModal"
                                data-image-src="{{ URL::asset('assets2/images/products/3.png') }}"></button></div>
                        <div class="me-2"><button type="button" class="btn colors third_color"
                                data-image-src="{{ URL::asset('assets2/images/products/1.png') }}"></button></div>
                        <div class="me-2"><button type="button" class="btn colors fourth_color"
                                data-image-src="{{ URL::asset('assets2/images/products/4.png') }}"></button></div>
                        <p class="mt-3" style="color: #D6CEC1">ecru white</p>

                        <button class="btn ms-3 add-to-fav" data-id="4">
                            <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 class="des_productModal mb-3">
                        <div class="d-flex align-items-center">
                            <p>{{ __('website.Dimensions:') }}<span>20x22x48 CM</span></p>
                            <p class="@if (session()->get('locale') == 'ar') me-3 @else ms-3 @endif"> {{ __('website.Weight:') }}<span>20 KG</span></p>
                        </div>

                        <p>{{ __('website.Material:') }}<span>Polyester & wood</span></p>
                    </div>

                    <div class="d-flex align-items-center mt-4 bottom_section_productModal">
                        <button class="cart_best d-flex align-items-center rounded-pill px-4 p-2 add-to-cart"
                            data-id="4">
                            <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/bestSelling/shopping_cart.png') }}"
                                width="23px"
                                class="@if (session()->get('locale') == 'ar') ms-0 me-2 @else ms-2 @endif" />
                        </button>
                        <a href="{{ route('user.productDetails') }}"
                            class="btn_productModal_view d-flex align-items-center p-2 px-4 @if (session()->get('locale') == 'ar') me-3 @elseif(session()->get('locale') == 'en') ms-3 @else me-3 @endif rounded-pill">
                            {{ __('website.VIEW_ALL_DETAILS') }}
                            @if (session()->get('locale') == 'ar')
                                <span class="material-symbols-outlined me-3">
                                    west
                                </span>
                            @elseif(session()->get('locale') == 'en')
                                <span class="material-symbols-outlined ms-3">
                                    east
                                </span>
                            @else
                                <span class="material-symbols-outlined me-3">
                                    west
                                </span>
                            @endif
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div> --}}

<div class="card card_best_selling rounded-4 p-2 mt-4 ms_5 product getColor" style="width: 19rem;">
    <div class="card-body text-center" data-product="{{ $getItem->items_data->id }}">

        <button class="btn float-end mb-2 add-to-fav" data-id="4">
            <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 class="position-relative mt-3 openModal" data-bs-toggle="modal" data-bs-target="#staticBackdrop{{ $getItem->items_data->id }}">
            <img src="{{ URL::asset($getItem->items_data->image) }}" width="170px" height="100px"
                class="product_img_bestSelling mx-auto d-block mt-4 ps-2 productShape2"
                id="product1_image_bestSelling" />
            <img src="{{ URL::asset('assets2/images/bestSelling/shadow.png') }}" width="190px"
                class="position-absolute start-50 translate-middle" />
        </div>
        <div class="mt-4">
            <div class="d-flex align-items-center justify-content-center">
                <div class="active_color ">
                    <button type="button" id="changecolorBrown" class="btn colors"
                        style="background-color: #ffffff !important;background-image: linear-gradient(30deg, violet, orange, yellow, green, violet);"
                        data-image-src="{{ URL::asset($getItem->items_data->image) }}"></button>
                </div>
                                @foreach ($getItem->items_data->ItemsColors() as $ItemsColor)
                    <div class=" @if (session()->get('locale') == 'ar') me-2 @else ms-2 @endif">
                        <button type="button" id="changecolorBrown" class="btn colors"
                            style="background-color:  {{ $ItemsColor->color }} !important;"
                            data-image-src="{{ URL::asset($ItemsColor->image) }}"></button>
                    </div>
                                    @endforeach
            </div>

            <h5 class="card-title card_title fw-semibold mt-3">
                @if (session()->get('locale') == 'en')
                    {{ $getItem->items_data->name_en }}
                @else
                    {{ $getItem->items_data->name_ar }}
                @endif
            </h5>
            <div class="mt-3">
                <p class="price price_bestSelling">
                    {{ $getItem->items_data->price }}{{ __('website.EGP') }}<span class="Dec_price"></span>
                </p>
            </div>
        </div>
    </div>
</div>

<div class="modal fade product getColor" id="staticBackdrop{{ $getItem->items_data->id }}" tabindex="1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 830px;">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                {{-- <a href="{{ route('user.productDetails_show', $coll->items[$in]->items_data->id) }}"
                    class="material-symbols-outlined fs-3 @if (session()->get('locale') == 'ar') d-flex justify-content-start @endif"
                    style="color: #978466;">
                    ios_share
                </a> --}}

                <a href="javascript:void(0);" style="color: #978466;"
                    class="material-symbols-outlined fs-3 share-button @if (session()->get('locale') == 'ar') d-flex justify-content-start @endif"
                    data-url="{{ route('user.productDetails_show', '4') }}">
                    ios_share
                </a>

                <button type="button"
                    class="btn-close @if (session()->get('locale') == 'ar') d-flex justify-content-end me-auto ms-0 @endif"
                    data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-0">
                <div class="row">
                    <div class="col-lg-6 col-md-12 col-sm-12">
                        <div class="position-relative  h-100">
                            <div id="carouselExampleAutoplaying3" class="carousel slide">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img src="{{ URL::asset('assets2/images/products/8.png') }}" width="400px"
                                            class="mx-auto d-flex justify-content-center productShape2 productShapeModal" />
                                    </div>
                                    <div class="carousel-item">
                                        <img src="{{ URL::asset('assets2/images/products/8.png') }}" width="400px"
                                            class="mx-auto d-flex justify-content-center productShape2 productShapeModal" />
                                    </div>
                                </div>
                                <button class="carousel-control-prev" type="button"
                                    data-bs-target="#carouselExampleAutoplaying3" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon carousel-control-prev-icon-productModal"
                                        aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button"
                                    data-bs-target="#carouselExampleAutoplaying3" data-bs-slide="next">
                                    <span class="carousel-control-next-icon carousel-control-next-icon-productModal"
                                        aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    {{-- change data-product to id product  --}}
                    <div class="col-lg-6 col-md-12 col-sm-12" data-product="4">
                        <div class="">
                            <h2 class="title_productModal">Abstract XV</h2>
                            <p class="paragragh_productModal">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut
                                labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud......
                            </p>
                            <p class="price">$569<span class="Dec_price">.89</span> {{ __('website.EGP') }}</p>

                            <div class="d-flex align-items-center">
                                <div class="active_color me-2"><button type="button" class="btn colors first_color"
                                        data-image-src="{{ URL::asset('assets2/images/products/8.png') }}"></button>
                                </div>
                                <div class="me-2"><button type="button" id="changecolorBrown"
                                        class="btn colors second_color second_color_productModal"
                                        data-image-src="{{ URL::asset('assets2/images/products/3.png') }}"></button>
                                </div>
                                <div class="me-2"><button type="button" class="btn colors third_color"
                                        data-image-src="{{ URL::asset('assets2/images/products/1.png') }}"></button>
                                </div>
                                <div class="me-2"><button type="button" class="btn colors fourth_color"
                                        data-image-src="{{ URL::asset('assets2/images/products/4.png') }}"></button>
                                </div>
                                <p class="mt-3" style="color: #D6CEC1">ecru white</p>

                                <button class="btn ms-3 add-to-fav" data-id="4">
                                    <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 class="des_productModal mb-3">
                                <div class="d-flex align-items-center">
                                    <p>{{ __('website.Dimensions:') }}<span>20x22x48 CM</span></p>
                                    <p class="@if (session()->get('locale') == 'ar') me-3 @else ms-3 @endif">
                                        {{ __('website.Weight:') }}<span>20 KG</span></p>
                                </div>

                                <p>{{ __('website.Material:') }}<span>Polyester & wood</span></p>
                            </div>

                            <div class="d-flex align-items-center mt-4 bottom_section_productModal">
                                <button class="cart_best d-flex align-items-center rounded-pill px-4 p-2 add-to-cart"
                                    data-id="4">
                                    <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/bestSelling/shopping_cart.png') }}"
                                        width="23px"
                                        class="@if (session()->get('locale') == 'ar') ms-0 me-2 @else ms-2 @endif" />
                                </button>
                                <a href="{{ route('user.productDetails_show', '4') }}"
                                    class="btn_productModal_view d-flex align-items-center p-2 px-2 @if (session()->get('locale') == 'ar') me-2 @elseif(session()->get('locale') == 'en') ms-2 @else me-2 @endif rounded-pill">
                                    {{ __('website.VIEW_ALL_DETAILS') }}
                                    @if (session()->get('locale') == 'ar')
                                        <span class="material-symbols-outlined me-3">
                                            west
                                        </span>
                                    @elseif(session()->get('locale') == 'en')
                                        <span class="material-symbols-outlined ms-3">
                                            east
                                        </span>
                                    @else
                                        <span class="material-symbols-outlined me-3">
                                            west
                                        </span>
                                    @endif
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>