@section('style')
    <style>
        .blur-load{
            height: 250px;
            background-size: cover;
            background-position: center;
            aspect-ratio: 1/1;
            object-position: center;
            object-fit: cover;
            background-repeat: no-repeat;
        }
        .item-bg-image{
            position: relative!important;
            margin-top: 0!important;
        }
        .top_left_tag{
            top: 0%!important;
            width: 50px !important;
        }
        .is_sale_water_mark{
            width: 50px !important;
            right: unset!important;
        }
        .bottom_tag{
            width: 100% !important;
            bottom: -12px !important;
        }
    </style>
@endsection
@php
    if ($accessory->badges()->count()>0){
     $badgesTopLeft = $accessory->badges()->where("position","top-left")->where("is_active",1)->latest()->first();
     $badgesBottom = $accessory->badges()->where("position","bottom")->where("is_active",1)->latest()->first();
     $badgesTopRight = $accessory->badges()->where("position","top-right")->where("is_active",1)->latest()->first();

    }
@endphp
<div @if(isset($columns)) class="{{$columns}}" @else class="item" @endif>
    <div class="card accessory-item h-100" @unless(isset($columns)) style="width:260px;" @endunless>
        @if(\App\facades\IHouseFacade::isRunningSale($accessory))
            <img alt="img" loading="lazy" src="{{url(asset('images/sale.png'))}}" class="lazy is_sale_water_mark">
        @endif
        @if(isset($badgesTopLeft)??$badgesTopLeft)
            <img alt="img" loading="lazy"
                 src="https://cdn.ihouse.ps/{{$badgesTopLeft->image}}"
                 class="lazy top_left_tag" style="top: 0!important;width: 50px!important;left: 0!important;">
        @endif
        @if(isset($badgesTopRight))
            <img alt="img" loading="lazy"
                 src="https://cdn.ihouse.ps/{{$badgesTopRight->image}}"
                 class="lazy top_right_tag">
        @endif
        @if(request()->get("debug"))
            <input type="text"
                   value="{{ $accessory->image }}">
        @endif
        @php
            $selectedColor = null;


            $colors =$accessory->colors->where("is_hidden",0)->sortBy('color.order')->values();;

            $hasMatchedColor/*from request*/ = $colors->contains('color_id', request()->get('color'));

//            $is_available_only = (request()->has('available_only')||request()->has('available_only_mobile'));
//            $is_warehouse_number = !is_null(request('warehouse_id'))||!is_null(request('warehouse_id_mobile'));

            if (false&&!request()->is('accessory')&&(request('available_only')==1||request('available_only_mobile')==1)){

            foreach($colors as $color) {
                $warehouse_acc_color = $color->warehouse_accessory_color()
                    ->when($is_available_only&&!is_null(request('warehouse_id')),function ($query){
                       $query
                       ->where("warehouse_id",request('warehouse_id'))
                       ->where("stock",'>',0);
                    })->when($is_available_only&&!is_null(request('warehouse_id_mobile')),function ($query){
                        $query
                       ->where("warehouse_id",request('warehouse_id_mobile'))
                       ->where("stock",'>',0);
                    })->when($is_available_only&&!$is_warehouse_number,function ($query){
                        $query
                       ->whereIn("warehouse_id",\App\facades\IHouseFacade::warehousesSupportFilter())
                       ->where("stock",'>',0);
                    })
                    ->first();
                    if (!is_null($warehouse_acc_color)&&$is_available_only&&((request()->get('color') == $color['color_id']))){
                        $accessory_color = \App\Models\AccessoryColor::query()->where('id',$warehouse_acc_color->accessory_color_id)->first();
                        $selectedColor = $accessory_color;
                        break;
                    }elseif (!is_null($warehouse_acc_color)&&$is_available_only&&(request()->get('color') != $color['color_id'])){
                        $accessory_color = \App\Models\AccessoryColor::query()->where('id',$warehouse_acc_color->accessory_color_id)->first();
                        $selectedColor = $accessory_color;
                        break;
                    }

                }
            }

            if ($hasMatchedColor||!$selectedColor){
                 foreach($colors as $color) {
                  if($hasMatchedColor && request()->get('color') == $color['color_id']) {
                            $selectedColor = $color;
                            break;
                        } elseif(!$hasMatchedColor && \IHouse::isSelectedColor($color['code'], $colors)) {

                                $selectedColor = $color;
                            break;
                    }
                 }
            }

            if(($q = request()->get('q')) && \DB::table('accessory_colors')->where('code', $q)->exists())
            {
                foreach($colors as $color) {
                    if($color['code'] == $q)
                    {
                        $selectedColor = $color;
                        break;
                    }
                }
            }

            $routeParamsArray = [$accessory->id,'code'=>$accessory->code];

            if($selectedColor) {
                $routeParamsArray['product'] = $selectedColor['code'];
            }


            $defaultImage = ($selectedColor && ($selectedColor['image_listing'] || $selectedColor['image_default'])) ? url('https://cdn.ihouse.ps/' . ($selectedColor['image_default'] ?: $selectedColor['image_listing'])) : $accessory->image;
            $defaultQuantity = $selectedColor ? $selectedColor['quantity'] :0;
            $defaultStockStatus = $selectedColor ? $selectedColor['stock_status'] :'';
            $checked = true;
        @endphp
            <a id="accessory-link-{{$accessory->id}}" href="{{route("accessory",$routeParamsArray)}}"
               class="thumbnail item-bg-image  @if(isset($badgesBottom)) make-relative @endif"
               style="{{$thumbnailIsAutoHeight??false?'height: auto!important;':''}};background-position: initial!important;">
                <img loading="lazy" class="lazy img-responsive mx-auto blur-load" id="accessory-img-{{$accessory->id}}"
                     src="{{ asset('images/iHouse-Letters2.svg') }}" data-src="{{$defaultImage}}"
                     data-srcset="{{ $defaultImage }} 2x, {{ $defaultImage }} 1x" alt="LOADING IMAGE!">
                <!-- @TODO: CLEANUP -->
                @foreach($colors as $color)
                    <img alt="Image"
                         class="img-responsive mx-auto d-none"
                         id="image-selector-{{$accessory->id}}-{{$color->color->id}}"
                         src="{{($color->image_listing || $color->image_default) ? 'https://cdn.ihouse.ps/' . ($color->image_default ?: $color->image_listing) : $accessory->image}}">
                @endforeach
                @if(isset($badgesBottom))
                    <div class="bottom_tag"
                         @if(isset($badgesBottom)) style="width: 100% !important; bottom: -12px !important;background:{{$badgesBottom->background_color}}" @endif>
                    <span
                        @if(isset($badgesBottom)??$badgesBottom->font_color) style="color:{{isset($badgesBottom)??$badgesBottom->font_color}}" @endif>{{isset($badgesBottom)?$badgesBottom->title:''}}</span>
                    </div>
                @endif
            </a>
            <p id="accessory_card" data-code="{{$accessory->code}}"
               href="{{route("accessory",[$accessory->id,'code'=>$accessory->code])}}"
               class="render-color-code{{$accessory->id}}"
               style="font-size: xx-small;display: flex;justify-content: left;margin: 0;margin-right: 2px;color: #c6c5c5;font-weight: 400;line-height: normal;cursor: text!important;">
                {{$accessory->code?$accessory->code:$selectedColor->code??'-'}}</p>
            <a id="accessory_card"
               href="{{route("accessory",[$accessory->id,'code'=>$accessory->code])}}"
               class="text-center two-line-truncate bidi-plain"
               style="text-align: center;font-weight: 400;color: #252525;font-variant-ligatures: common-ligatures;height: 43px">{{ $accessory->name }}</a>
            <div class="card-body d-flex flex-column justify-content-between text-center"
                 data-selected-color-code="{{ $selectedColor['code'] ?? false }}" style="padding-top: 0;">
                <div class="product-color text-center mt-3">
                    <div class="clear"></div>
                    <div class="color-choose color-sm d-flex justify-content-center flex-wrap">
                        @foreach($colors as $index => $color)
                            @if($accessory->colors->where("is_hidden",0)->count())
                                @php
                                    if (false&&request()->is('accessories-listing')&&$is_warehouse_number&&$is_available_only){
                                        $stock =\App\facades\IHouseFacade::getStockWarehouses($color->id,!is_null(request()->get('warehouse_id'))?request()->get('warehouse_id'):request()->get('warehouse_id_mobile'));

                                         if (is_null($stock)){
                                             $stock= 0;
                                         }
                                    }else{
                                        $stock=$color->quantity??0;
                                    }
                            @endphp
                            <div @if(!$color->color->is_published) style="display: none" @endif class="{{$index > 3 &&count($colors)>5?"more-color-$accessory->id":''}}"
                                 style="{{$index > 3 && count($colors)>5?'display:none':''}}"
                                 data-item="{{$accessory->id}}" data-stock-status="{{$color->stock_status}}"
                                 data-special-order="{{$accessory->is_special_order}}"
                                 data-pre-order="{{$color->color->preorder}}"
                                 data-color-quantity="{{$stock??0}}" data-color-code="{{$color->code}}"
                                 data-image="{{$accessory->id}}-{{$color->color->id}}" data-color-name="{{$color->color->name??null}}" data-accessory_id="{{$color->id}}">
                                @php
                                    if($index < 4 && $selectedColor && $selectedColor['id'] == $color['id']){
                                        $checked = false;
                                    }
                                @endphp
                                <input
                                    type="radio"
                                    {!!$stock==0?'title="غير متوفر"':""!!}
                                    style="display: block; background:{{$stock==0 ? "repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 3px, rgba(0, 0, 0, 0.3) 3px, rgba(0, 0, 0, 0.3) 7px ),{$color->color->color}": $color->color->color}}"
                                    class="color-chooser {!!$stock==0?"disabled":""!!} {{($selectedColor && $selectedColor['id'] == $color['id'])?'color-selected ' . ($stock == 0 ? 'red-outline' : ''):''}}"
                                    id="{{'color-' . $color->color->id . '-' . $accessory->id }}"
                                    name="color-{{$accessory->id}}"
                                    value="{{$color->color->id}}"
                                    @if($selectedColor && $selectedColor['id'] == $color['id']) checked @endif>
                            </div>

                            @if($loop->last && $index > 3 && count($colors) > 5)
                                <div class="show-more-color" data-id="{{$accessory->id}}" data-checked="{{$checked}}">
                                    <i  class="fa fa-plus-circle" style="
                                    color: #4a90e2;
                                    cursor: pointer;
                                    border: 2px solid #fff;
                                    margin: 0 5px 5px;
                                    font-size: medium;
                                    border-radius: 50%;
                                    {{$checked?'box-shadow: 0 0 0 2px #009300 !important;':''}}
                                    "></i>
                                </div>
                            @endif
                        @endif
                    @endforeach
                </div>
                @if((optional($selectedColor->color??'')->name!='NO COLOR'))
                    <div style="margin-top: -3px!important;" class="text-center color-label" id="color-label-{{$accessory->id}}">{{optional($selectedColor->color??'')->name}}</div>
                @endif
                <div style="clear:both"></div>
            </div>


            <div class="mt-auto">
                <h6 class="stock popover-accessory h6 stock-color-{{$accessory->id}}" data-item="{{$accessory->id}}" data-color_id="{{$selectedColor?$selectedColor->id:''}}" data-stock="{{$selectedColor?$selectedColor->quantity:0}}" dir="rtl" id="stock-color-{{$accessory->id}}" style="{{$selectedColor&&$selectedColor->quantity?'cursor:pointer':''}};margin-bottom: 0!important;">
                     <span style="{{$selectedColor&&$selectedColor->quantity?'cursor:pointer':'cursor:default'}};line-height: 18px;margin:0px;color:#{{$defaultQuantity ? '8fda8f; font-weight: bold;':($defaultStockStatus=="coming-soon"?'4b90e2':($accessory->is_special_order ? "efa30c": 'fa9393'))}}">
                    <i class="fas {{$defaultQuantity ? 'fa-check-circle':($defaultStockStatus=="coming-soon" ? "fa-hourglass-half": ($accessory->is_special_order ? 'fa-check-square' : 'fa-times-circle'))}}"></i> {{$defaultQuantity ? "متوفر":($defaultStockStatus=="coming-soon"? "قريبا":($accessory->is_special_order ? "طلب خاص": "غير متوفر"))}}</span>
                </h6>


                @if(\App\facades\IHouseFacade::isRunningSale($accessory))
                    <h6 class="col-md-12 text-center unmarg--bottom" dir="rtl"
                        style="line-height: 20px;margin:0px;margin-bottom:5px">
                        <s>{{ number_format($accessory->price) }}</s> شيكل</h6>
                    <h4 class="col-md-12 text-center" dir="rtl"
                        style="line-height: 20px;margin:0px;margin-bottom:5px">{{ number_format($accessory->discount) }}
                        شيكل</h4>
                @else
                    <h4 class="col-md-12 text-center" dir="rtl"
                        style="line-height: 20px;margin:0px;margin-bottom:5px">{{ number_format($accessory->price) }}
                        شيكل</h4>
                @endif
            </div>
            @if($accessory->can_laser)
                <div>
                    <h6 style="color:#9c9c9c"><i class="fa fa-font"></i> إمكانية الحفر بالليزر</h6>
                </div>
            @endif
        </div>
    </div>
</div>


@push('js-stack')
    <script>
        $(document).ready(function() {
            $(document).on('click', '#accessory_card', function(e) {
                var text = $(this).text().replace(/\s+/g, ''); // Remove all spaces
                copyToClipboard(text, e.pageX, e.pageY);
            });

            function copyToClipboard(text, x, y) {
                // Copy text
                var tempInput = document.createElement('input');
                tempInput.style.position = 'absolute';
                tempInput.style.left = '-9999px';
                tempInput.value = text;
                document.body.appendChild(tempInput);
                tempInput.select();
                document.execCommand('copy');
                document.body.removeChild(tempInput);

                // Show visual feedback (popup near cursor)
                showCopyPopup(x, y);
            }

            function showCopyPopup(x, y) {
                var popup = $('<div class="copy-popup">!...Copied</div>');
                $('body').append(popup);
                popup.css({
                    position: 'absolute',
                    top: y + 1 + 'px',
                    left: x + 1 + 'px',
                    background: 'rgba(168,168,168,0.76)',
                    color: 'white',
                    padding: '0.5px 5px',
                    borderRadius: '5px',
                    fontSize: '9px',
                    zIndex: 9999,
                    // boxShadow: '0px 2px 6px rgba(0,0,0,0.2)'
                }).fadeIn(100);

                setTimeout(function() {
                    popup.fadeOut(100, function() {
                        $(this).remove();
                    });
                }, 300);
            }
        });
    </script>
@endpush