@extends("layout.app")
@section("content")
    <style type="text/css">
        .image-icon-block{
            width: auto;
            margin: 0px;
            padding: 0;
            height: 60px;
            margin-bottom: 0px;
        }
        .flickity-slider{
            white-space: nowrap;
        }
        .details-bar.pos-fixed{
            top: 64px !important;
            padding: 10px 0px 10px 0px!important;
            box-shadow: 0px 15px 10px 0px rgba(0, 0, 0, 0.05) !important;
        }
    </style>
    <div class="text-center cta cta-4 border--bottom bg--dark">
        <div class="container">
            <div class="row">
                @if( $agent->isMobile() )
                    <div class="col">
                        <div class="slider slider--inline-arrows slider--arrows-hover text-center" data-arrows="true"
                             data-autoplay="false" data-paging="false">
                            <ul class="slides">
                                @foreach($sub_categories_tab as $menu_sub_category)
                                    <li class="col-md-6 col-6">
                                        <a href="{{ url("$category->slug/$menu_sub_category->slug") }}">
                                            <div class="tab__title text-center">
                                                @if($menu_sub_category->image)
                                                    <img
                                                        src="{{url("https://cdn.ihouse.ps/$menu_sub_category->image")}}"
                                                        class="image-icon-block">
                                                @else
                                                    <i class="ihouse-{{$menu_sub_category->icon}} block"></i>
                                                @endif
                                                <span class="h5"
                                                      style="font-size:10px;margin:0">{{$menu_sub_category->title}}</span>
                                                @if($menu_sub_category->is_new)
                                                    <h5 class="color--error"
                                                        style="font-size: 9px; color: #ff919f !important; line-height: 0px;padding-bottom:10px">
                                                        جديد</h5>
                                                @endif
                                            </div>
                                        </a>
                                        <!--end feature-->
                                    </li>
                                @endforeach
                                @if($category->with_accessories)
                                    <li class="col-md-6 col-6">
                                        <a href="{{route("accessories")}}">
                                            @include('partial.accessory_nav_item', ['category' => $category])
                                        </a>
                                    </li>
                                @endif
                                @if($category->with_compare)
                                    <li class="col-md-6 col-6">
                                        <a href="{{url("/$category->slug")}}/compare">
                                            <div class="tab__title text-center">
                                                <img src="{{url("https://cdn.ihouse.ps/$category->compare_icon")}}"
                                                     class="image-icon-block">
                                                <span class="h5" style="margin:0">مقارنة</span>
                                            </div>
                                        </a>

                                    </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                @else
                    <div class="col-sm-12">
                        <div class="tabs-container" data-content-align="left">
                            <ul class="tabs nav">
                                @foreach($sub_categories as $menu_sub_category)
                                    <li>
                                        <a href="{{url("$category->slug/$menu_sub_category->slug")}}">
                                            <div class="tab__title text-center">
                                                @if($menu_sub_category->image)
                                                    <img
                                                        src="{{url("https://cdn.ihouse.ps/$menu_sub_category->image")}}"
                                                        class="image-icon-block">
                                                @else
                                                    <i class="ihouse-{{$menu_sub_category->icon}} block"></i>
                                                @endif
                                                <span class="h5" style="margin:0">{{$menu_sub_category->title}} </span>
                                                @if($menu_sub_category->is_new)
                                                    <h5 class="color--error"
                                                        style="font-size: 11px; color: #ff919f !important; line-height: 0px;">
                                                        جديد</h5>
                                                @endif
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                                @if($category->with_accessories)
                                    <li><a href="{{route("accessories")}}">
                                            @include('partial.accessory_nav_item', ['category' => $category])
                                            0 </a>
                                    </li>
                                @endif
                                @if($category->with_compare)
                                    <li><a href="{{url("/$category->slug")}}/compare">
                                            <div class="tab__title text-center">
                                                <img src="{{url("https://cdn.ihouse.ps/$category->compare_icon")}}"
                                                     class="image-icon-block">
                                                <span class="h5" style="margin:0">مقارنة</span>
                                            </div>
                                        </a>

                                    </li>
                                @endif


                            </ul>
                        </div>
                    </div>
                @endif
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </div>

    <section class="text-center bg--white mtb-20 ptb-20">
        <div class="container  boxed boxed--lg boxed--border">
            <div class="row mb--1">
                <div class="col-md-12">
                    <h1 class="text-center">مقارنة اجهزة ال {{$category->title}}</h1>
                </div>
            </div>
            <div class="row  mb--1">
                <div class="col-md-12">
                    <form id="compare-form" action="{{route("compare",$category->slug)}}">
                        <div class="container bar compare-bar"  data-scroll-class='306px:pos-fixed'>
                            <div class="row">
                                <div class="col-md-4 col-xs-6">
                                    <select dir="ltr" class="compare form-control" name="c1">
                                        @foreach($c_items as $item)
                                            <option @if(request()->get("c1") ? request()->get("c1") ==$item->title :  $loop->index==0) selected @endif  value="{{$item->title}}">{{$item->title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4 col-xs-6">
                                    <select dir="ltr" class="compare form-control" name="c2">
                                        @foreach($c_items as $item)
                                            <option @if(request()->get("c2") ? request()->get("c2") ==$item->title :  $loop->index==1) selected @endif  value="{{$item->title}}">{{$item->title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @if($agent->isDesktop() )

                                <div class="col-md-4 col-xs-6">
                                    <select dir="ltr" class="compare form-control" name="c3">
                                        @foreach($c_items as $item)
                                            <option @if(request()->get("c3") ? request()->get("c3") ==$item->title :  $loop->index==2) selected @endif  value="{{$item->title}}">{{$item->title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @endif
                            </div>
                        </div>
                        <div class="container mt--1">

                            <div class="row">
                                <div class="col-md-4 col-xs-6">
                                    @php
                                        $latest_item = \App\Models\Spec::where("title",request()->get("c1")??$c_items[0]->title)->first()->items()->latest()->first();
                                        $sub_category_1 = $latest_item->category;
                                    @endphp
                                    <div>
                                        @php $item_colors_sorted = $latest_item->colors->sortBy(function($q) {return $q->color->order;});@endphp
                                        <img class="active"
                                             height="300px"
                                             id="c1-current-image-{{$latest_item->id}}"
                                             data-c1-image="{{$item_colors_sorted->first()->image_default}}"
                                             src="{{url("https://cdn.ihouse.ps/{$item_colors_sorted->first()->image_default}")}}"
                                             alt="">
                                        @foreach($latest_item->item_colors as $color)
                                            <img height="300px" style="display:none"
                                                 id="c1-image-selector-{{$latest_item->id}}-{{$color->color->id}}"
                                                 src="{{url("https://cdn.ihouse.ps/".$color->image_default)}}">
                                        @endforeach
                                        @php $item_colors_sorted = $latest_item->colors->sortBy(function($q) {return $q->color->order;});@endphp
                                        @if(count($item_colors_sorted) > 0)
                                            <div class="product-color">
                                                <div class="color-choose">
                                                    @foreach($item_colors_sorted as $color)
                                                        <div id="cs-1" class="col-xs-3"
                                                             style="padding-right: 0; padding-left: 0;"
                                                             data-c1-item="{{$latest_item->id}}"
                                                             data-color-quantity="{{$color->quantity}}"
                                                             data-c1-color-code="{{$color->code}}"
                                                             data-c1-image="{{$latest_item->id}}-{{$color->color->id}}">
                                                            <input
                                                                {!!$color->quantity==0?'title="غير متوفر"':""!!}  style="display: block; margin: 0 auto; background:{{$color->color->color}}"
                                                                class="color-chooser" type="radio"
                                                                id="c1-{{$color->color->id}}"
                                                                name="c1-color-{{$latest_item->id}}"
                                                                value="{{$color->color->id}}"
                                                                @if($loop->index==0) 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>
                                <div class="col-md-4 col-xs-6">
                                    @php
                                        $latest_item = \App\Models\Spec::where("title",request()->get("c2")??$c_items[1]->title)->first()->items()->latest()->first();
                                        $sub_category_2 = $latest_item->category;
                                    @endphp
                                    <div>
                                        @php $item_colors_sorted = $latest_item->colors->sortBy(function($q) {return $q->color->order;});@endphp
                                        <img class="active"
                                             height="300px"
                                             id="c2-current-image-{{$latest_item->id}}"
                                             data-c2-image="{{$item_colors_sorted->first()->image_default}}"
                                             src="{{url("images/{$item_colors_sorted->first()->image_default}")}}"
                                             alt="">
                                        @foreach($latest_item->item_colors as $color)
                                            <img height="300px" style="display:none"
                                                 id="c2-image-selector-{{$latest_item->id}}-{{$color->color->id}}"
                                                 src="{{url("https://cdn.ihouse.ps/".$color->image_default)}}">
                                        @endforeach
                                        @php $item_colors_sorted = $latest_item->colors->sortBy(function($q) {return $q->color->order;});@endphp
                                        @if(count($item_colors_sorted) > 0)
                                            <div class="product-color">
                                                <div class="color-choose">
                                                    @foreach($item_colors_sorted as $color)
                                                        <div id="cs-2" class="col-xs-3"
                                                             style="padding-right: 0; padding-left: 0;"
                                                             data-c2-item="{{$latest_item->id}}"
                                                             data-color-quantity="{{$color->quantity}}"
                                                             data-c2-color-code="{{$color->code}}"
                                                             data-c2-image="{{$latest_item->id}}-{{$color->color->id}}">
                                                            <input
                                                                {!!$color->quantity==0?'title="غير متوفر"':""!!}  style="display: block; margin: 0 auto; background:{{$color->color->color}}"
                                                                class="color-chooser" type="radio"
                                                                id="c2-{{$color->color->id}}"
                                                                name="c2-color-{{$latest_item->id}}"
                                                                value="{{$color->color->id}}"
                                                                @if($loop->index==0) 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>
                                @if($agent->isDesktop())
                                <div class="col-md-4 col-xs-6">

                                    @php
                                        $latest_item = \App\Models\Spec::where("title",request()->get("c3")??$c_items[2]->title)->first()->items()->latest()->first();
                                        $sub_category_3 = $latest_item->category;
                                    @endphp
                                    <div>
                                        @php $item_colors_sorted = $latest_item->colors->sortBy(function($q) {return $q->color->order;});@endphp
                                        <img class="active"
                                             height="300px"
                                             id="c3-current-image-{{$latest_item->id}}"
                                             data-c3-image="{{$item_colors_sorted->first()->image_default}}"
                                             src="{{url("images/{$item_colors_sorted->first()->image_default}")}}"
                                             alt="">
                                        @foreach($latest_item->item_colors as $color)
                                            <img height="300px" style="display:none"
                                                 id="c3-image-selector-{{$latest_item->id}}-{{$color->color->id}}"
                                                 src="{{url("https://cdn.ihouse.ps/".$color->image_default)}}">
                                        @endforeach
                                        @php $item_colors_sorted = $latest_item->colors->sortBy(function($q) {return $q->color->order;});@endphp
                                        @if(count($item_colors_sorted) > 0)
                                            <div class="product-color">
                                                <div class="color-choose">
                                                    @foreach($item_colors_sorted as $color)
                                                        <div id="cs-3" class="col-xs-3"
                                                             style="padding-right: 0; padding-left: 0;"
                                                             data-c3-item="{{$latest_item->id}}"
                                                             data-color-quantity="{{$color->quantity}}"
                                                             data-c3-color-code="{{$color->code}}"
                                                             data-c3-image="{{$latest_item->id}}-{{$color->color->id}}">
                                                            <input
                                                                {!!$color->quantity==0?'title="غير متوفر"':""!!}  style="display: block; margin: 0 auto; background:{{$color->color->color}}"
                                                                class="color-chooser" type="radio"
                                                                id="c3-{{$color->color->id}}"
                                                                name="c3-color-{{$latest_item->id}}"
                                                                value="{{$color->color->id}}"
                                                                @if($loop->index==0) 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>
                                @endif
                            </div>

                            <div class="row mt--1 bar details-bar"  data-scroll-class='306px:pos-fixed'>
                                @php $tab_1 = \App\Models\Spec::where("title",request()->get("c1")??$c_items[0]->title)->first() ;@endphp
                                <div class="col-md-4 col-xs-6">
                                    @if($sub_category_1->is_active)
                                        <a href="{{url("$category->slug"."/".$sub_category_1->slug)}}#{{$tab_1->id}}" id="url-1" class="btn btn-success btn-block">
                            اطلب
                                        </a>
                                    @endif
                                </div>
                                @php $tab_2 = \App\Models\Spec::where("title",request()->get("c2")??$c_items[1]->title)->first() ;@endphp
                                <div class="col-md-4 col-xs-6">
                                    @if($sub_category_2->is_active)
                                        <a href="{{url("$category->slug"."/".$sub_category_2->slug)}}#{{$tab_2->id}}" id="url-2" class="btn btn-success btn-block">
                            اطلب
                                        </a>
                                    @endif
                                </div>
                                @if($agent->isDesktop())

                                @php $tab_3 = \App\Models\Spec::where("title",request()->get("c3")??$c_items[2]->title)->first() ;@endphp
                                <div class="col-md-4">
                                    @if($sub_category_3->is_active)
                                        <a href="{{url("$category->slug"."/".$sub_category_3->slug)}}#{{$tab_3->id}}" id="url-3" class="btn btn-success btn-block">
                            اطلب
                                        </a>
                                    @endif
                                </div>
                                    @endif
                            </div>
                            </div>
                    </form>

                </div>
            </div>
            @foreach($spec_categories as $spec_category)
                <div class="row">
                    <div class="col-md-12 boxed">
                        <h2 class="text-right">{{$spec_category->title}}</h2>
                    </div>
                </div>
                                                
                <div class="row text-right" dir="rtl">

                    @php
                        $spec_1 = \App\Models\Spec::where("title",request()->get("c1") ??$c_items[0]->title)->first();
                        $items_1 = $spec_1->items->pluck("id");
                    @endphp

                    @if($spec_category->is_upgradable)