@extends('frontend.layout.master')
@section('content')
<div id="main-box my-5 py-5">
  <div id="content">
    <div id="main_visual">
      <div class="row">
        <div class="col-lg-6">
          <div id="spec_area">
            <div class="copy pt-5 mt-5">{{ app()->getLocale() == 'en' ? $product->name : $product->nameae }}</div>
            {!! app()->getLocale() == 'en' ? $product->description : $product->descriptionar !!}
            <div>
              <ul class="clearfix" id="direct">
                <!--@if($product->status=='1')-->
                <!--    <li>-->
                      <!--<a href="{{route('web.store.products.show',$product->alias??'none')}}" class="btn btn-dark" style="padding: 6px;  width: 118px;">Purchase</a>-->
                <!--    </li>-->
                <!--@endif-->
                @if($product->is_software == '1')
                    <li>
                      <a href="{{$product->url ?? 'javascript:void(0)'}}" class="btn btn-dark" style="padding: 6px;  width: 118px;">Download</a>
                    </li>
                @else
                <a class="btn contactBtn" href="{{route('web.contact')}}">Contact EIZO</a>
                @endif
                
              </ul>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="card mb-10">
            <div class="product-info">
              <div class="product-gallery">
                <div class="product-gallery-featured">
                  <img src="{{asset('/uploads/product/'.$product->gallery[0]->image)}}" class="transparent" height="410"  width="400">
                </div>
                <div class="product-gallery-thumbnails">

                  <div class="thumbnails-list">
                      @foreach($product->gallery as $i => $image)
                        <img src="{{asset('/uploads/product/'.$image->image)}}" class="img-fluid" alt="">
                    @endforeach
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <ul class="nav nav-fill nav-tabs pt-5 mt-5" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="fill-tab-0" data-bs-toggle="tab" href="#fill-tabpanel-0" role="tab"
                aria-controls="fill-tabpanel-0" aria-selected="true">{{__('translation.features')}}
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="fill-tab-1" data-bs-toggle="tab" href="#fill-tabpanel-1" role="tab"
                aria-controls="fill-tabpanel-1" aria-selected="false">{{__('translation.specifications')}}
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="fill-tab-2" data-bs-toggle="tab" href="#fill-tabpanel-2" role="tab"
                aria-controls="fill-tabpanel-2" aria-selected="false">{{__('translation.documents')}}
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="fill-tab-3" data-bs-toggle="tab" href="#fill-tabpanel-3" role="tab"
                aria-controls="fill-tabpanel-3" aria-selected="false">{{__('translation.accessories')}}
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="fill-tab-4" data-bs-toggle="tab" href="#fill-tabpanel-4" role="tab"
                aria-controls="fill-tabpanel-4" aria-selected="true">{{__('translation.awards&reviews')}}
            </a>
        </li>
    </ul>
    <div class="border mt-5 pt-5 tab-content bg-white" id="tab-content">
      <div class="tab-pane active" id="fill-tabpanel-0" role="tabpanel" aria-labelledby="fill-tab-0">
          @if($product->features)
          {!! app()->getLocale() == 'en' ? $product->features : $product->featuresar !!}
          @else
          <center>No Data Added!</center>
          @endif
      </div>
      <div class="tab-pane" id="fill-tabpanel-1" role="tabpanel" aria-labelledby="fill-tab-1">
          @if($product->specifications || $product->specificationsar)
            @if(app()->getLocale()=='en')
                {!! $product->specifications ?? '' !!}
            @else
                {!! strip_tags($product->specificationsar) != '' ? $product->specificationsar : 'NO ARABIC SPECIFICATION' !!}
            @endif
          @else
              <center>No Data Added!</center>
          @endif
            
          </div>
      <div class="tab-pane" id="fill-tabpanel-2" role="tabpanel" aria-labelledby="fill-tab-2">
          <h2>Brochures</h2>
            <div class="row">
                @if(count($product->brochures)>0)
                    @foreach($product->brochures as $i => $brochure)
                        <div class="col-lg-3 mt-3">
                            <div class="card" style="width: 18rem;">
                                <div class="card-body">
                                    <img src="https://www.eizoglobal.com/support/db/files/images/Icons/pdf.png" alt="" style="max-width: 45px">
                                    <h5 class="card-title">{{$brochure->name}}</h5>
                                    <p class="card-title">{{number_format($brochure->size,2)}} MB</p>
                                    <a target="__blank" href="{{asset('uploads/product/brochure/'.$brochure->document)}}" class="btn btn-dark">Download</a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
      </div>
      <div class="tab-pane" id="fill-tabpanel-3" role="tabpanel" aria-labelledby="fill-tab-3">
        <div class="border-bottom py-5 row">
            @if(isset($product->accessories))
                @foreach($product->accessories->accessoryProducts() as $key => $accessory)
                    <div class="col-lg-3 col-md-3 col-12"><a href="{{route('web.product.showcase.product',$accessory->alias??'none')}}"><img src="{{asset('uploads/product/'.$accessory->image)}}" class="img-fluid"></a></div>
                    <div class="col-lg-3 col-md-3 col-12 pr-20">
                        <h3 class="fs-4 fw-bold"><a href="{{route('web.product.showcase.product',$accessory->alias??'none')}}">{{app()->getLocale()=='en'?$accessory->name:$accessory->nameae}}</a></h3>
                        {!! app()->getLocale()=='en'?$accessory->content:$accessory->contentar !!}
                    </div>
                @endforeach
            @else
            No Accessories For This Product!
            @endif
        </div>
      </div>
      <div class="tab-pane" id="fill-tabpanel-4" role="tabpanel" aria-labelledby="fill-tab-4">
        <div class="border-bottom py-5 row">
            {!! app()->getLocale() == 'en' ? $product->awards : $product->awardsar !!}
        </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">
  <link rel="stylesheet" type="text/css" href="{{asset('css/tab.css')}}" media="all">
  <link rel="stylesheet" type="text/css" href="{{asset('css/fancybox.css')}}" media="all">
  <link rel="stylesheet" type="text/css" href="{{asset('css/slide.css')}}" media="all">
  <style>
.nav-tabs .nav-link.active {
    background-color: #5f5f5f;
    color: #ffffff;
    border-radius: 4px;
}
  </style>
  @endpush
  @push('custom-script')
  <script async="" src="{{asset('js/tab.js')}}"></script>
  <script>
    // select all thumbnails
    const galleryThumbnail = document.querySelectorAll(".thumbnails-list img");
    // select featured image
    const galleryFeatured = document.querySelector(".product-gallery-featured img");

    // loop all items
    galleryThumbnail.forEach((item) => {
      item.addEventListener("mouseover", function () {
        let image = item.src;
        galleryFeatured.src = image;
      });
    });
  </script>
  @endpush