@extends('frontend.layout.master')
@section('content')
<div id="main-box">
    <div id="content">
        @if($banner)
            <div id="main_visual" class="product_finder_main_visual">
                <span class="main_visual_item tab-0" style="display: inline"><img alt="FlexScan" src="{{asset('uploads/banner/'.$banner->banner)}}" width="960" height="315"></span>
            </div>
        @endif
        
        <div class="clearfix product_finder_contents" id="center">
            <div id="side">
                <form id="product_finder_query" action="#">
                    <input name="bid" type="hidden" value="lcd" />
                    <input name="tid" type="hidden" value="" />
                    <div id="spec_filter" class="filter-section">
                        <h4>{{__('translation.specifications.specifications')}}</h4>
                        <div class="filter-control">
                            <div class="level0 first-level0">{{__('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">{{$panel_size->panel_size}}</span>
                                </label>
                            @endforeach
                            <div class="level0">{{__('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">{{$panel_resolution->panel_resolution}}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                    <a href="{{route('web.store.list')}}"><img src="https://www.eizoglobal.com/common/images/side/pf_reset.gif" width="159" height="19" alt="Clear All" /></a>
                </form>
            </div>
            <!-- main -->
          <div class="row flex">
              <h1 class="fw-bold fs-1 pb-5 text-center " >{{__('translation.productcategories')}}</h1>
              <div class="col-md-6">
                  <a href="{{route('web.store.category.products.store','flexscan')}}">
                      <div class="p-4 shadow" 
                      @isset($category)
                          @if($category->alias == 'flexscan')
                              style="background-color: #33a5ff;"
                          @endif
                      @endisset
                      >
                        <p class="text-black">{{__('translation.businessmoniters')}}</p>
                        <h1 class="fw-bold">FlexScan</h1>
                     </div></a>
              </div>
              
              <div class="col-md-6 mb-5">
                     <a href="{{route('web.store.category.products.store','coloredge')}}">
                         <div class="p-4 shadow rounded-2" 
                            @isset($category)
                            @if($category->alias == 'coloredge')
                                style="background-color: #33a5ff;"
                            @endif
                            @endisset
                         >
                        <p class="text-black">{{__('translation.colors')}}</p>
                        <h1 class="text-black fw-bold">ColorEdge</h1>  
                    </div></a>
                  
              </div>
        </div>
            <div id="main" style="">
                <div id="product_finder_result">
                    <div class="models clearfix">
                        @foreach($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.store.products.show',$product->alias??'none')}}">
                                                <img class="transparent" src="{{asset('/uploads/product/'.$product->image)}}" width="180" height="180" alt="EV4340X" style="opacity: 1;">
                                            </a>
                                        </div>
                                        <div class="detail">
                                            <div class="product_name">
                                                <a href="{{route('web.store.products.show',$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>
                                    <p class="mt-1 fw-bold">
                                        Price: {{number_format($product->price,2)}} SAR
                                    </p>
                                </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.store.products.show',$product->alias??'none')}}">
                                                <img class="transparent" src="{{asset('/uploads/product/'.$product->image)}}" width="180" height="180" alt="EV4340X" style="opacity: 1;">
                                            </a>
                                        </div>
                                        <div class="detail">
                                            <div class="product_name">
                                                <a href="{{route('web.store.products.show',$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>
                                    <p class="mt-1 fw-bold">
                                        Price: {{number_format($product->price,2)}} SAR
                                    </p>
                                </div>
                            @endif
                        @endforeach
                    </div>
                    <div class="mt-5">
                        {!! $products->links('pagination::bootstrap-4') !!}
                    </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