@extends('frontend.layouts.master')

@section('title','Al-Bazai | '.$subcategory->title)

@section('lang')
@if(app()->getLocale() == 'ar')
<li class="last leaf toyota-color"><a
        href="{{ route(Route::currentRouteName(), array_replace(Route::getCurrentRoute()->parameters(), ['slug' => $subcategory->translate('en')->slug])) }}"
        title="English" class="langar">English</a></li>
@else
<li class="last leaf toyota-color"><a
        href="{{ route(Route::currentRouteName(), array_replace(Route::getCurrentRoute()->parameters(), ['slug' => $subcategory->translate('ar')->slug ,'lang' =>'ar' ])) }}"
        title="عربي" class="langar">عربي</a></li>
@endif
@endsection

@section('content')
<div class="overview-title">
    <div class="mid-options-menu clearfix">
    </div>
    <!-- components get models section -->
    @include('frontend.components.models',['dataModels' => $subcategory])
</div>
<!-- end title -->

<div class="mid-options-menu clearfix">
    <select class="custom-select spot-content-list select-menu-mobile">
        <!-- components get option model section -->
        @include('frontend.components.option-model',['optionModels' => $subcategory ,'optionSelect'=> 'colors'])
    </select>
</div>
<section class="cartype-spotlight is colors">
    <div class="addtopheight position-center-top">
        <div class="spot-content clearfix">
            <div class="spot-content-head">
            <!-- components get models section -->   
            @include('frontend.components.models',['dataModels' => $subcategory])
            </div>
            <!-- components li models section -->  
            @include('frontend.components.li-model',['liModels' => $subcategory ,'current'=> 'colors'])
        </div>
    </div>
</section>
<div class="oerview-wrap">
        <div id="slider_exterior" class="colors_wrap clearfix">
            @if(count($subcategory->colors->where('type','exterior')) > 0)
                <div class="galHead">
                    <h3>
                        <span class="field-content">{{ (app()->getLocale() == 'ar') ? 'الألوان الخارجية' : 'Exterior Colors' }}</span>
                    </h3>
                    <ul class="colorThumb">
                                                    @foreach($subcategory->colors->where('type','exterior') as $key => $color)
                            <li @if($loop->first) class="cl_item active" @else class="cl_item" @endif data-id="exterior_gal_it{{ $number++}}">
                                    <a href="#slider_exterior" data-target-img="{{ $color->image_car ?? '' }}">
                                        <img src="{{ $color->image_color ?? '' }}" alt="{{ $color->title ?? '' }}">
                                    </a>
                                    <span class="color_name">
                                        {{ $color->color_name ?? '' }}
                                    </span>
                            </li>
                            @endforeach
                    </ul>
                </div>
            @endif
            <div class="colorGalWrap">
        
                <img style="visibility:hidden; position:relative;" class="colorImageIT" src="{{ $subcategory->colors->where('type','exterior')->first()->image_car ?? '' }}" alt="{{ $subcategory->colors->where('type','exterior')->first()->title ?? '' }}" width="100%">
                  
            </div>
        </div>
        <div id="slider_interior" class="colors_wrap clearfix">
            @if(count($subcategory->colors->where('type','interior')) > 0)
                <div class="galHead">
                    <h3>
                        <span class="field-content">{{ (app()->getLocale() == 'ar') ? 'الألوان الداخلية' : 'Interior Colors' }}</span>
                    </h3>
                    <ul class="colorThumb">
                                                    @foreach($subcategory->colors->where('type','interior') as $key => $color)
                            <li @if($loop->first) class="cl_item active" @else class="cl_item" @endif data-id="interior_gal_it{{ $number2++}}">
                                    <a href="#slider_interior" data-target-img="{{ $color->image_car ?? '' }}">
                                        <img src="{{ $color->image_color ?? '' }}" alt="{{ $color->title ?? '' }}">
                                    </a>
                                    <span class="color_name">
                                        {{ $color->color_name ?? '' }}
                                    </span>
                            </li>
                            @endforeach
                    </ul>
                </div>
            @endif
            <div class="colorGalWrap">
                    <img style="visibility:hidden; position:relative;" class="colorImageIT" src="{{ $subcategory->colors->where('type','interior')->first()->image_car ?? '' }}" alt="{{ $subcategory->colors->where('type','interior')->first()->title ?? '' }}" width="100%">
            </div>
        </div>
</div>
@if($subcategory->id == 1)
@if(!empty($subcategory->galleryOneItem))
   @include('frontend.components.next-section-gallery',['sectionData' => $subcategory->galleryOneItem , 'modelName'=> route('web.category.gallery', $subcategory->slug)])
@endif
@else
@if(!empty($subcategory->specificationCar))
   @include('frontend.components.next-section-specifi',['sectionData' => $subcategory->specificationCar , 'modelName'=> route('web.category.specification', $subcategory->slug)])
@endif
@endif
<div class="clear"></div>
@endsection