@extends('layouts.web_app')
@section('head')

	
@endsection
@section('breadcrumb')
<!-- CONTENT + SIDEBAR -->
<!-- <div class="tt-breadcrumb">
   <div class="container">
    <ul>
        <li><a href="{{route('frontpage')}}">Home</a></li>
        <li>Product</li>
    </ul>
  </div>
</div> -->
@endsection
@section('content')






<div  class="container" style="margin-top:20px;margin-bottom:20px" ng-init="getproductbyid()" ng-cloak>
        <input type="text" id="productrandomid" value="{{ $searchkeyword }}" hidden>
           <input type="text" id="productpriceid" value="{{ $price_id }}" hidden>
        <!-- mobile product slider  -->
       <!--  <div class="tt-mobile-product-layout visible-xs">
            <div class="tt-mobile-product-slider arrow-location-center ">

                <div ng-repeat = "productimage in detailviewproduct.product_images"><img  src="assets/products{$productimage.product_image$}" ng-click="imagechange(productimage)" alt=""></div>
            </div>
        </div> -->
        <!-- /mobile product slider  -->
        <div class="container container-fluid-mobile">
            <div class="row">
                <div class="col-sm-6 col-12 ">
                    <div class="tt-product-vertical-layout">
                        <div class="tt-product-single-img">
                            <div class="text-center">
                                <button class="tt-btn-zomm tt-top-right"><i class="icon-f-86"></i></button>
                                <img class="zoom-product jzoom" src="assets/products{$detailviewproduct.display_image$}" data-zoom-image="assets/products{$detailviewproduct.display_image$}" alt="">
                            </div>
                        </div>
                        <slick class="tt-product-single-carousel-vertical tt-slick-button-vertical  slick-animated-show-js" settings="slickProductConfig2" ng-if="slickConfig1">
                            <div ng-repeat="product in detailviewproduct.product_images" >
                                <div class="" ng-include="'smallgallery_tpl.html'"></div>
                            </div>
                        </slick>
                                <script type="text/ng-template" id="smallgallery_tpl.html">
                                    <a href="#" data-image="assets/products{$product.product_image$}" data-zoom-image="assets/products{$product.product_image$}"><img width="100px " height="100px " ng-src="{$ 'assets/products'+product.product_image $}" ng-click="imagechange(product)" alt=""></a>
                                </script>
                    </div>
                </div>
                <div class="col-6">
                    <div class="tt-product-single-info">
                        <div class="tt-add-info">
                            <ul>
                                <li><span>SKU:</span> {$detailviewproduct.product_sku$}</li>
                            </ul>
                        </div>
                        <h1 class="tt-title">{$detailviewproduct.product_name$}</h1>
                        <div class="tt-price" ng-if="detailviewproduct.actual_selling_amount > 0">
                            <span style="font-size: small;font-weight: 100;" ng-if="detailviewproduct.actual_selling_amount > 0" class="old-price">SAR {$detailviewproduct.price$}</span>
                            <span>SAR {$detailviewproduct.actual_selling_amount$} ({$detailviewproduct.quantity$} {$detailviewproduct.product_quantity.display_name$})<span ng-if="detailviewproduct.discount > 0"><h6>You Save:{$detailviewproduct.discount$}%</h6></span></span><span><h6> (Inclusive of all taxes)</h6></span>
                        </div>
                        <div class="tt-price" ng-if="detailviewproduct.actual_selling_amount == 0">
                            <span>SAR {$detailviewproduct.price$} ({$detailviewproduct.quantity$} {$detailviewproduct.product_quantity.display_name$})<span ng-if="detailviewproduct.discount > 0"><h6>You Save:{$detailviewproduct.discount$}%</h6></span></span><span><h6> (Inclusive of all taxes)</h6></span>
                        </div>
                        <p ng-if="detailviewproduct.product_price[0].market_price > 0">Other Market Price - SAR {$detailviewproduct.product_price[0].market_price$}</p>
                        <div class="tt-review">
                                    <div class="tt-rating">
                                        <i class="icon-star" ng-class="(1 <= detailviewproduct.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                                        <i class="icon-star" ng-class="(2 <= detailviewproduct.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                                        <i class="icon-star" ng-class="(3 <= detailviewproduct.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                                        <i class="icon-star" ng-class="(4 <= detailviewproduct.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                                        <i class="icon-star" ng-class="(5 <= detailviewproduct.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                                        ({$detailviewproduct.totalreviewers$} Ratings)
                                    </div>
                                    
                        </div>
                        <div class="tt-wrapper">
                            {$detailviewproduct.description$}
                        </div>
                        <div class="tt-wrapper">
                            <div class="tt-row-custom-01">
                                <div class="col-item">
                                    <div class="tt-input-counter style-01">
                                        <span class="minus-btn" ng-click="cartqunatitychange(detailviewproduct,'0','list')"></span>
                                        <input type="text" ng-model="detailviewproduct.cartquantity" ng-change="cartqunatitychange(detailviewproduct,'2','list')" value="1" size="5">
                                        <span class="plus-btn" ng-click="cartqunatitychange(detailviewproduct,'1','list')"></span>
                                    </div>
                                </div>
                                <div class="col-item" ng-if="detailviewproduct.cartid == undefined" ng-click=addtocart(detailviewproduct)>
                                    <button class="btn btn-lg"><i class="icon-f-39"></i>ADD TO CART</button>
                                </div>
                                <div class="col-item" ng-if="detailviewproduct.cartid != undefined" ng-click=removecartitem(detailviewproduct)>
                                    <button style="background-color:#f44336" class="btn btn-lg"><i class="icon-h-02"></i>REMOVE CART</button>
                                </div>
                            </div>
                        </div>
                        <div class="tt-wrapper">
                            <ul class="tt-list-btn">
                                <li>
                                    <a class="btn-link" ng-if="detailviewproduct.wishlistid == undefined" ng-click="addtowishlist('add',detailviewproduct)"><i class="icon-n-072"></i>ADD TO WISH LIST</a>
                                    <a class="btn-link" ng-click="removewishlistitem(detailviewproduct)" ng-if="detailviewproduct.wishlistid != undefined"><i class="icon-n-072"></i>REMOVE FROM WISH LIST</a>
                                </li>
                            </ul>
                        </div>
                        <div class="tt-collapse-block">
                            <div class="tt-item">
                                <div class="tt-poin-comments">REVIEWS</div>
                                    <div class="tt-review-block">
                                        <div class="tt-row-custom-02">
                                            <div class="col-item">
                                            </div>
                                            <div class="col-item">
                                                <a href="#" ng-click="writeareview()">Write a review</a>
                                            </div>
                                        </div>
                                        <div class="tt-review-comments">
                                            <div class="tt-item" ng-repeat="review in detailviewproduct.product_review">
                                                <div class="tt-avatar">
                                                    <a href="#"><img ng-if="review.customer.profice_pic_url != null" width="75" height="75" src="{{ asset('assets/users/profile_pic/{$review.customer.profice_pic_url$}') }}" alt=""><img ng-if="review.customer.profice_pic_url == null" width="100" height="100" src="{{ asset('assets/img/dummyproficpic.jpg') }}" alt=""></a>
                                                </div>
                                                <div class="tt-content">
                                                    <div class="tt-rating">
                                                        <i class="icon-star" ng-class="(1 <= review.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                                                        <i class="icon-star" ng-class="(2 <= review.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                                                        <i class="icon-star" ng-class="(3 <= review.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                                                        <i class="icon-star" ng-class="(4 <= review.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                                                        <i class="icon-star" ng-class="(5 <= review.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                                                    </div>
                                                    <div class="tt-comments-info">
                                                        <span class="username">by <span>{$review.customer.first_name$} {$review.customer.last_name$}</span></span>
                                                        <span class="time">{$review.updated_at$}</span>
                                                    </div>
                                                    <div class="tt-comments-title">{$review.headline$}</div>
                                                    <p>
                                                       {$review.comment$}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div class="container-indent">
        <script type="text/ng-template" id="product2_tpl.html">
        
            <div class="tt-product thumbprod-center">
            <div class="tt-image-box">
                <a href="#" class="tt-btn-quickview" data-toggle="modal"  data-tooltip="Quick View" data-tposition="left" ng-click="getprod(product)"></a>
                <a href="#" class="tt-btn-wishlist" data-tooltip="Add to Wishlist" ng-if="product.wishlistid == undefined" ng-click="addtowishlist('add',product)" data-tposition="left"></a>
                <a href="#" class="tt-btn-wishlist" data-tooltip="Remove From Wishlist" ng-click="removewishlistitem(product)" ng-if="product.wishlistid != undefined" data-tposition="left"></a>
                <a href="#">
                    <span class="tt-img"><img ng-src="{$ 'assets/products'+product.display_image $}" ng-click="detailview(product)" alt="" onerror="this.src='images/default_product.png' "></span>
                    <span class="tt-img-roll-over"><img ng-src="{$ 'assets/products'+product.display_image $}" ng-click="detailview(product)" alt="" onerror="this.src='images/default_product.png' "></span>
                    <span ng-if="product.discount > 0" class="tt-label-location">
                        <span class="tt-label-sale">GET {$product.discount$}% OFF</span>
                    </span>
                </a>
            </div>
            <div class="tt-description">
                
                <h2 class="tt-title"><a href="#" ng-click="detailview(product)">{$product.product_name$}</a></h2>
                <div class="tt-price" ng-if="product.actual_selling_amount > 0">
                    <span style="font-size: small;font-weight: 100;" ng-if="product.actual_selling_amount > 0" class="old-price">SAR {$product.price$}</span>
                    <span>SAR {$product.actual_selling_amount$} ({$product.quantity$} {$product.product_quantity.display_name$})
                    </span>
                </div>
                <div class="tt-price" ng-if="product.actual_selling_amount == 0">
                    <span>SAR {$product.price$} ({$product.quantity$} {$product.product_quantity.display_name$})</span>
                </div>
                <p class="no-margin {$product.product_price[0].market_price > 0 ? 'visible':'invisible'$}">Other Market Price - SAR {$product.product_price[0].market_price$}</p>
                <div class="tt-row">
                    <div class="tt-rating">
                        <i class="icon-star" ng-class="(1 <= product.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                        <i class="icon-star" ng-class="(2 <= product.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                        <i class="icon-star" ng-class="(3 <= product.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                        <i class="icon-star" ng-class="(4 <= product.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                        <i class="icon-star" ng-class="(5 <= product.rating_star) ? 'icon-star' : 'icon-star-empty'"></i>
                    </div>
                </div>
                <div class="">
                    <div class="tt-row-btn no-margin">
                        <div class="tt-wrapper">
                            <div class="tt-row-custom-01 row">
                                <div class="col-12 col-md-5">
                                    <div class="tt-input-counter style-01 small">
                                        <span class="minus-btn" ng-click="cartqunatitychange(product,'0','list')"></span>
                                        <input type="text" ng-change="cartqunatitychange(product,'2','list')" ng-model="product.cartquantity" value="1" size="5" class="small">
                                        <span class="plus-btn" ng-click="cartqunatitychange(product,'1','list')"></span>
                                    </div>
                                </div>
                                <div class="col-12 col-md-7" ng-if="product.cartid == undefined" ng-click=addtocart(product)>
                                    <button class="btn btn-xs cart-btn"><i class="icon-f-39"></i>ADD TO CART</button>
                                </div>
                                <div class="col-12 col-md-7" ng-if="product.cartid != undefined" ng-click=removecartitem(product)>
                                    <button style="background-color:#f44336" class="btn btn-xs cart-btn"><i class="icon-h-02"></i>REMOVE CART</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tt-row-btn no-margin">
                        <a href="#" class="tt-btn-quickview" data-toggle="modal" ng-click="getprod(product)"></a>
                        <a href="#" class="tt-btn-wishlist" data-tooltip="Add to Wishlist" ng-if="product.wishlistid == undefined" ng-click="addtowishlist('add',product)" data-tposition="left"></a>
                        <a href="#" class="tt-btn-wishlist" data-tooltip="Remove From Wishlist" ng-click="removewishlistitem(product)" ng-if="product.wishlistid != undefined" data-tposition="left"></a>
                    </div>
                </div>
            </div>
        </div>
        </script>
        <div class="container container-fluid-custom-mobile-padding">
            <div class="tt-block-title text-left">
                <h3 class="tt-title-small">RELATED PRODUCT</h3>
            </div>
            <slick class="tt-carousel-products row arrow-location-tab tt-alignment-img tt-layout-product-item slick-animated-show-js" settings="slickProductConfig"  ng-if="slickConfig1Loaded">
                <div class="" ng-repeat="product in similarproducts">
                    <div class="" ng-include="'product2_tpl.html'"></div>
                </div>
            </slick>
        </div>
    </div>
<style>
.ng-scope.slick-slide.slick-active {
    width:100% !important;
}
</style>
<script>
$('.jzoom').jzoom();
    </script>

</div>
  @include('customer.footer')
  @endsection