@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 !!}
                        <p>Price: {{number_format($product->price,2)}} SAR</p>
                        <p>Stock: {{number_format($product->qty)}}</p>
                        <h2>Product Variations</h2>
                        @if(count($product->variations)>0)
                            @foreach($product->variations as $key => $variation)
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="Variations" id="flexRadioDefault{{$key}}" value="{{$variation->content}}" checked>
                                    <label class="form-check-label" for="flexRadioDefault1">
                                        {{$variation->content}}
                                    </label>
                                </div>
                            @endforeach
                        @else
                            No Variations Added!
                        @endif
                        <div>
                            <ul class="clearfix" id="direct">
                                @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>
                                @endif
                                @if($product->status=='1')
                                    <li>
                                        <a href="javascript:void(0);" prodId="{{$product->id}}" class="btn btn-dark buyNowBtn" style="padding: 6px;  width: 118px;"><i class="fas fa-shopping-cart"></i>&nbsp; Add To Cart</a>
                                    </li>
                                @else
                                <a href="{{route('web.contact')}}"><img alt="Contact EIZO" height="28" src="//www.eizoglobal.com/products/images/btn/contact_large.gif" width="120"></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->image)}}" class="transparent" height="410"  width="400">
                                </div>
                                <div class="product-gallery-thumbnails">
                                    <div class="thumbnails-list">
                                        <img src="{{asset('/uploads/product/'.$product->image)}}" class="img-fluid" alt="">
                                        @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">Product Details</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">Product Specifications</a>
            </li>
        </ul>
        <div class="border mt-5 pt-5 tab-content bg-light" id="tab-content">
            <div class="tab-pane active" id="fill-tabpanel-0" role="tabpanel" aria-labelledby="fill-tab-0">
                <div class="copy">
                    {{ app()->getLocale() == 'en' ? $product->name : $product->nameae }}
                </div>
                {!! app()->getLocale() == 'en' ? $product->description : $product->descriptionar !!}
                <a href="{{route('web.product.showcase.product',$product->alias??'none')}}" class="btn btn-dark" style="padding: 6px;">View Complete Product Page</a>
            </div>
            <div class="tab-pane" id="fill-tabpanel-1" role="tabpanel" aria-labelledby="fill-tab-1">
                @if($product->specifications)
                    {!! $product->specifications !!}
                @else
                    <center>No Data Added!</center>
                @endif
            </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>
.form-check-input:checked {
background-color: black;
border-color: black;
}

</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