@extends('frontend.layout.master')
@section('content')
<style>
/*p span {*/
/*    font-family: "Tajawal", sans-serif !important;*/
/*}*/

/*p font {*/
/*       font-family: "Tajawal", sans-serif !important;*/
/*}*/
    a.btn.btn-primary {
        border-radius:4px;
    background-color:#005da9 !important;
    margin: 12px 0 0 0;
    padding: 5px 40px 5px 40px;
    font-size: 12px;
    font-weight: 600;
}

.btn-color {
    border:none !important;
    margin:10px 0;
    border-radius: 1px;
    font-weight: 500;
    background: linear-gradient(176deg, rgb(153 227 19) 0%, rgba(137, 171, 77, 1) 100%);
   !important;
    margin: 12px 0 0 0;
    padding: 6px 25px 6px 25px;
    font-size: 12px;
    font-weight: 600;
    color:white;
    border-radius:4px;
}

/*img.contact-eizo {*/
/*    margin: 10px 0;*/
/*}*/
</style>
<div id="main-box">
    <div id="content">
        <div id="main_visual" class="product_finder_main_visual">
                <!--@if($category->estore_availibility==1)-->
                <!--@else-->
                <!--// CHANGE CONTACT US BANNERS HERE !-->
                <!--    @if(app()->getLocale()=='en')-->
                <!--        <span class="main_visual_item tab-0" style="display: inline"><img alt="FlexScan" src="{{asset('uploads/category/estore_null/banner-en.jpg')}}" width="960" height="315"></span>-->
                <!--    @else-->
                <!--        <span class="main_visual_item tab-0" style="display: inline"><img alt="FlexScan" src="{{asset('uploads/category/estore_null/banner-ar.png')}}" width="960" height="315"></span>-->
                <!--    @endif-->
                <!--@endif-->
                @if(app()->getLocale()=='en')
                    <span class="main_visual_item tab-0" style="display: inline"><img alt="FlexScan" src="{{asset('uploads/category/'.$category->banner)}}" width="960" height="315"></span>
                @else
                    <span class="main_visual_item tab-0" style="display: inline"><img alt="FlexScan" src="{{asset('uploads/category/'.($category->bannerar != ''?$category->bannerar : $category->banner))}}" width="960" height="315"></span>
                @endif
            </div>
     <div id="reset-div">
        <div class="clearfix product_finder_contents" id="center">
            <div id="side">
                <form id="product_finder_query" action="#">
                    <div id="spec_filter" class="filter-section">
                        <h4>{{__('translation.specifications.specifications')}}</h4>
                        <input type="hidden" id="category_filter" value="{{$category->id}}">
                        <input type="hidden" id="sub_category_filter" value="{{ $sub_category->id ?? '' }}">
                        <ul id="tab_filter">
                            <li id="tab_filter_all" class="active"><a href="{{route('web.product.category.products',$category->alias)}}"><span class="tab_name">ALL</span></a></li>
                            @foreach($category->childs as $key => $child)
                                <li><a href="{{route('web.product.sub.category.products',[$category->alias,$child->alias])}}" class="tab-44"><span class="tab_name">{{ app()->getLocale()=="en" ? $child->name : $child->nameae}}</span></a></li>
                            @endforeach
                        </ul>
                        <div class="filter-control">
                            @if(count($panel_sizes)>0)
                                <div class="level0 first-level0 pt-3">{{__('translation.specifications.panelsize')}}</div>
                                @foreach($panel_sizes as $i => $panel_size)
                                    <label class="level1 checkbox clearfix" for="product-finder-label-11">
                                        <input name="panel_size" class="panel_size" type="radio" value="{{$panel_size->panel_size}}" onChange="filterFunc()" />
                                        <span class="text">{{ Illuminate\Support\Str::before($panel_size->panel_size, '(') }}</span>
                                    </label>
                                @endforeach
                            @endif
                            @if(count($panel_resolutions)>0)
                                <div class="level0 pt-3">{{__('translation.specifications.resolution')}}</div>
                                @foreach($panel_resolutions as $i => $panel_resolution)
                                    <label class="level1 checkbox clearfix" for="product-finder-label-11">
                                        <input name="panel_resolution" class="panel_resolution" type="radio" value="{{$panel_resolution->panel_resolution}}" onChange="filterFunc()" />
                                        <span class="text">{{ Illuminate\Support\Str::before($panel_resolution->panel_resolution, '(') }}</span>
                                    </label>
                                @endforeach
                            @endif
                            </div>
                    </div>
                    @if(count($panel_resolutions)>0 || count($panel_sizes)>0)
                        <a href="javascript:void(0)" onclick="resetFilterForm()"><img src="https://www.eizoglobal.com/common/images/side/pf_reset.gif" width="159" height="19" alt="Clear All" /></a>
                    @endif
                </form>
            </div>
            <!-- main -->
            @if($category->estore_availibility==1)
                <!--<div class="row">-->
                <!--    <div class="col-lg-12 rouded-2 py-5 mb-5" style="background-image: url('{{ asset('https://laravel11.wpstaging.a2zcreatorz.com/eizo/public/uploads/general/media/media_file1730359464.png') }}');background-size: cover;background-position: center;">-->
                <!--        <a href="{{route('web.store.list')}}" ><h1 class="text-center fw-bold" style="color: black;font-size: 30px;"><span class="fs-2">Visit the E-Store</span>  Shop Now  </h1></a>-->
                <!--    </div>-->
                <!--</div>-->
            @else
                <div class="row">
                    <div class="col-lg-12 rouded-2 py-5 mb-5" style="background-image: url('{{ asset('https://laravel11.wpstaging.a2zcreatorz.com/eizo/public/uploads/general/media/media_file1730359464.png') }}');background-size: cover;background-position: center;">
                        <a href="{{route('web.contact')}}"><h1 class="text-center fw-bold" style="color: black;font-size: 30px;"><span class="fs-2">Contact Us</span></h1></a>
                    </div>
                </div>
            @endif
            <div id="main" style="">
                <div id="product_finder_result">
                    <div class="models clearfix">
                        <div class="models clearfix">
                            @if(count(GetProductsByCategory($sub_category->id)['products'])>0)
                                <h1 id="cst-id" class="mt-5">{{app()->getLocale()=="en" ? $sub_category->name : $sub_category->nameae}}</h1>
                                @foreach(GetProductsByCategory($sub_category->id)['products'] as $i => $product)
                                    @if(($i+1) % 2 == 0)
                                        <div class="item right" id="s2_1107">
                                            <div class="clearfix">
                                                <div class="picture">
                                                    <a href="{{route('web.product.showcase.product',$product->alias??'none')}}">
                                                        <img class="transparent" src="{{asset('/uploads/product/'.$product->image)}}" width="180" height="180" alt="EV4340X" style="opacity: 1;">
                                                  
                                                    </a>
                                                    @if($category->estore_availibility==1)
                                                     @if($product->status=='1')
                                                            <!--<a href="{{route('web.store.products.show',$product->alias??'none')}}" class="btn btn-primary">E-Store</a>-->
                                                       @else
                                                         <a class="btn contactBtn" href="{{route('web.contact')}}">Contact EIZO</a>
                                                        @endif
                                                        @endif
                                                </div>
                                                <div class="detail">
                                                    <div class="product_name">
                                                        <a href="{{route('web.product.showcase.product',$product->alias??'none')}}">{{app()->getLocale()=='en'?$product->name:$product->nameae}}</a>
                                                    </div>
                                                    <div class="product_spec">
                                                        <p>
                                                            {!! app()->getLocale()=='en'?$product->content:$product->contentar !!}
                                                        </p>
                                                        <!--<a href="javascript:void(0);" prodId="{{$product->id}}" class="btn btn-dark buyNowBtn"><i class="fas fa-shopping-cart"></i>&nbsp; Add To Cart</a>-->
                                                      
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="border-btm pt-5">
                                            <img src="https://www.eizoglobal.com/common/images/border/border_w720.gif" width="740" height="1">
                                        </div>
                                    @else
                                        <div class="item left" id="s2_1107">
                                            <div class="clearfix">
                                                <div class="picture">
                                                    <a href="{{route('web.product.showcase.product',$product->alias??'none')}}">
                                                        <img class="transparent" src="{{asset('/uploads/product/'.$product->image)}}" width="180" height="180" alt="EV4340X" style="opacity: 1;">
                                                    </a>
                                                    @if($category->estore_availibility==1)
                                                   @if($product->status=='1')
                                                            <!--<a href="{{route('web.store.products.show',$product->alias??'none')}}" class="btn btn-primary">E-Store</a>-->
                                                       @else
                                                         <a class="btn contactBtn" href="{{route('web.contact')}}">Contact EIZO</a>
                                                        @endif
                                                        @endif
                                                        
                                                </div>
                                                <div class="detail">
                                                    <div class="product_name">
                                                        <a href="{{route('web.product.showcase.product',$product->alias??'none')}}">{{app()->getLocale()=='en'?$product->name:$product->nameae}}</a>
                                                    </div>
                                                    <div class="product_spec">
                                                        <p>
                                                            {!! app()->getLocale()=='en'?$product->content:$product->contentar !!}
                                                        </p>
                                                        
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            @endif
                            </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
@endsection
@push('custom-css')  
    <link rel="stylesheet" type="text/css" href="{{asset('website/css/productsfinder2.css')}}" media="all">
    <link rel="stylesheet" type="text/css" href="{{asset('website/css/layout.css')}}" media="all">
    <link rel="stylesheet" type="text/css" href="{{asset('website/css/common.css')}}" media="all">
    <link rel="stylesheet" type="text/css" href="{{asset('website/css/style.css')}}" media="all">
    <link rel="stylesheet" type="text/css" href="{{asset('css/main.css')}}" media="all">
     <style>
        .loader {
          border: 16px solid #f3f3f3;
          border-radius: 50%;
          border-top: 16px solid #3498db;
          width: 120px;
          height: 120px;
          -webkit-animation: spin 2s linear infinite; /* Safari */
          animation: spin 2s linear infinite;
        }
        
        /* Safari */
        @-webkit-keyframes spin {
          0% { -webkit-transform: rotate(0deg); }
          100% { -webkit-transform: rotate(360deg); }
        }
        
        @keyframes  spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
    </style>
@endpush
@push('custom-script')
<script>
    $(document).ready(function(){
        
    });
</script>
@endpush