@extends("layout.app")
@section("styles")
    <link href="https://cdn.ihouse.ps/css/select2.min.css" rel="stylesheet" type="text/css"
          media="all"/>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.2.3/dist/select2-bootstrap4.min.css">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
    <style>
        .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
            color: #000;
            background-color: #f4f4f4;
        }
        .select2-results__option {
            border-bottom: 1px solid #333333 !important;
        }

        .select2-results__option {
            border-bottom: 1px solid #333333 !important;
        }

        .select2-results__option:last-child {
            border-bottom: 0 solid #333333 !important;
        }


        .select2-container--bootstrap4 .select2-results__option--group:not(:first-child):before {
            border-bottom: 0 solid #333333 !important;
            border-top: 0 solid #333333 !important;
            text-align: right;
        }

        .select2-container--bootstrap4 .select2-results__option {
            border-bottom: 0 solid #333333 !important;
            text-align: right;
        }

        li:hover .price-value {
            color: #fff !important;
        }
        .top_left_tag{
            top: 15%!important;
            width: 50px !important;
        }
        .is_sale_water_mark{
            width: 50px !important;
            right: unset!important;
        }
    </style>
@endsection

@section("content")
    <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-5 col-md-5 item-details text-center position-relative">
                    <div class="border--round" id="sticky">
                        <div class="slider-one owl-carousel owl-theme" style="position: relative">
                            @php
                                $bottomBadge = $item_color->item->badges()->where("position", "bottom")->where("is_active", 1)->latest()->first();
                                $topLeftBadge = $item_color->item->badges()->where("position", "top-left")->where("is_active", 1)->latest()->first();
                                $topRightBadge = $item_color->item->badges()->where("position", "top-right")->where("is_active", 1)->latest()->first();
                            @endphp

                            {{-- Main Image --}}
                            <div style="position: relative;">
                                @if($item_color->item->is_sale)
                                    <img src="{{ asset('images/sale.png') }}" class="is_sale_water_mark">
                                @endif
                                @if($topLeftBadge)
                                    <img src="https://cdn.ihouse.ps/{{ $topLeftBadge->image }}" class="top_left_tag">
                                @endif
                                @if($topRightBadge)
                                    <img src="https://cdn.ihouse.ps/{{ $topRightBadge->image }}" class="top_right_tag">
                                @endif
                                <a href="{{ url("https://cdn.ihouse.ps/$item_color->image_listing") }}" data-lightbox="gallery">
                                    <img alt="{{ $item->name }}" src="{{ url("https://cdn.ihouse.ps/$item_color->image_listing") }}"/>
                                </a>
                                @if($bottomBadge)
                                    <div class="bottom_tag"
                                         style="@if($bottomBadge->background_color) background:{{ $bottomBadge->background_color }}; @endif">
                                                <span style="@if($bottomBadge->font_color) color:{{ $bottomBadge->font_color }}; @endif">
                                                    {{ $bottomBadge->title }}
                                            </span>
                                            </div>
                                @endif
                            </div>

                            {{-- Additional Item Images --}}
                            @foreach($item->item_images()->when(!$item_color->image_listing, function($query) {
                                $query->where("is_base", 0);
                            })->orderBy("order", "asc")->get() as $image)
                                @if($image->with_colors && !in_array($item_color->color_id, $image->with_colors))
                                    @continue
                                @endif
                                <div>
                                    <a href="{{ url("https://cdn.ihouse.ps/{$image->file}") }}" data-lightbox="gallery">
                                        <img alt="{{ $item->name }}" src="{{ url("https://cdn.ihouse.ps/{$image->file}") }}"/>
                                    </a>
                                </div>
                            @endforeach

                            {{-- Item Color Additional Images --}}
                            @foreach($item_color->images as $image)
                                <div>
                                    <a href="{{ url("https://cdn.ihouse.ps/$image->file") }}" data-lightbox="gallery">
                                        <img alt="{{ $item->name }}" src="{{ url("https://cdn.ihouse.ps/$image->file") }}"/>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                        <div>
                            @php $item_colors_sorted = $item->colors->where("is_hidden",0)->sortBy(function($q) {return $q->color->order;});@endphp

                            @php $selected_color = null;@endphp
                            @foreach($item_colors_sorted as $color)
                                @if($color->quantity >0 && !$selected_color )
                                    @php $selected_color = $color; @endphp
                                @endif
                            @endforeach
                            @if(!$selected_color)
                                @php $selected_color = $item_colors_sorted->first(); @endphp
                            @endif


                            @php $item_colors_sorted = $item->colors->where("is_hidden",0)->sortBy(function($q) {return $q->color->order;});@endphp
                            @if(count($item_colors_sorted) > 0)
                                <div class="product-color text-center">
                                    <span style="color:#009300;text-align:center">
                                     @if(count($item_colors_sorted) != 1)
                                            اختر اللون لفحص التوفر
                                        @endif
                                      </span>
                                    <div class="clear"></div>
                                    <div
                                        class="color-choose row no-gutters text-center {!!$color->quantity==0??"disabled"!!}">
                                        @foreach($item_colors_sorted as $color)
                                            <div class="col" style="padding-right: 10px; padding-left: 10px;"
                                                 data-item="{{$item->id}}" data-color-quantity="{{$color->quantity}}"
                                                 data-color-code="{{$color->code}}"
                                                 data-image="{{$item->id}}-{{$color->color->id}}">
                                                <input
                                                    {!!$color->quantity==0?'title="غير متوفر"':""!!}  style="display: block; margin: 0 auto; background:{{$color->quantity==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-item-chooser {!!$color->quantity==0?"disabled":""!!}"
                                                    data-color-code="{{$color->code}}" type="radio"
                                                    id="{{$color->color->id}}" name="color-{{$item->id}}"
                                                    value="{{$color->color->id}}"
                                                    @if($color->code == request()->get("product")) checked @endif>
                                                <label
                                                    {!!$color->quantity==0?'title="غير متوفر"':""!!}  class="text-center color-label"
                                                    for="{{$color->color->color}}">
                                                    {{$color->color->name}}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div style="clear:both"></div>
                                </div>

                            @endif

                        </div>
                    </div>
                    <!--end slider-->
                </div>
                <div class="col-sm-7 col-md-7 item-details">
                    <h2>
                        @php
                            $itemName = $item->name;
                        @endphp

                        {{$item->name}}
                        @foreach($spec_categories->where("is_on_title",1) as $spec_category)
                            @if(!$spec_category->is_upgradable)