@extends('frontend.layout.master')
@section('content')
<style>
.detail p {
    text-align: left !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=""><span class="tab_name">{{app()->getLocale()=='en'?'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">
                            @foreach($category->childs as $i => $childCategory)
                            <div class="models clearfix">
                                @if(count(GetProductsByCategory($childCategory->id)['products'])>0)
                                    <h1 class="mt-5">{{app()->getLocale()=='en'?$childCategory->name:$childCategory->nameae}}</h1>
                                    @foreach(GetProductsByCategory($childCategory->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>
                                                        </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>
                            @endforeach
                    </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