@extends('layouts.front')

@section('title'){{$product->meta_title ? $product->meta_title : $product->name." - ".config('app.name')}}@endsection
@section('meta-tags')<meta name="description" content="{{$product->meta_desc ? $product->meta_desc : StringHelper::truncate(trim(strip_tags($product->description)), 160)}}">
@if($product->meta_keywords)<meta name="keywords" content="{{$product->meta_keywords}}">@endif
@endsection
@section('meta-tags-og')<meta property="og:url" content="{{url()->current()}}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="{{$product->meta_title ? $product->meta_title : $product->name.' - '.config('app.name')}}" />
    <meta property="og:description" content="{{$product->meta_desc ? $product->meta_desc : StringHelper::truncate(trim(strip_tags($product->description)), 160)}}" />
    @if($product->photo)<meta property="og:image" content="{{$product->photo->name}}" />@endif
@endsection

@section('styles')
    {{-- <link rel="stylesheet" href="{{asset('css/xZoom/xzoom.css')}}">
    <link rel="stylesheet" href="{{asset('css/xZoom/magnific-popup.css')}}"> --}}

    {{-- <link rel="stylesheet" href="{{asset('css/products/css/reset.css')}}"> --}}
    <link rel="stylesheet" href="{{asset('css/products/css/defined.css')}}">
    <link rel="stylesheet" href="{{asset('css/products/css/base.css')}}">
    <link rel="stylesheet" href="{{asset('css/products/css/style.css')}}">

    <link href="{{asset('css/bootstrap-social.css')}}" rel="stylesheet">
    <style>
        body {
            background-color: #f1f3f6;
        }
        .spec-type {
            margin-bottom: 1rem;
            margin-top: 1rem;
        }
        .spec-radio {
            margin-right: 1.4rem;
        }
        .spec-radio input[type="radio"] {
          position: absolute;
          opacity: 0;
        }
        .spec-radio input[type="radio"] + .spec-radio-label:before {
          content: '';
          background: #f4f4f4;
          border-radius: 100%;
          border: 1px solid #b4b4b4;
          display: inline-block;
          width: 1.2em;
          height: 1.2em;
          position: relative;
          top: .2rem;
          margin-right: .75rem;
          vertical-align: top;
          cursor: pointer;
          text-align: center;
          transition: all 250ms ease;
        }
        .spec-radio input[type="radio"]:checked + .spec-radio-label:before {
          background-color: var(--main-color);
          box-shadow: inset 0 0 0 4px #f4f4f4;
        }
        .spec-radio input[type="radio"]:focus + .spec-radio-label:before {
          outline: none;
          border-color: #3197EE;
        }
        .spec-radio input[type="radio"]:disabled + .spec-radio-label:before {
          box-shadow: inset 0 0 0 4px #f4f4f4;
          border-color: #b4b4b4;
          background: #b4b4b4;
        }
        .spec-radio input[type="radio"] + .spec-radio-label:empty:before {
          margin-right: 0;
        }
        ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
            color: #c9c9c9;
            font-size: 14px;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:  #c9c9c9;
            opacity:  1;
            font-size: 14px;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #c9c9c9;
            opacity:  1;
            font-size: 14px;
        }
        :-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #c9c9c9;
            font-size: 14px;
        }
        ::-ms-input-placeholder { /* Microsoft Edge */
            color: #c9c9c9;
            font-size: 14px;
        }

        ::placeholder { /* Most modern browsers support this now. */
            color: #c9c9c9;
            font-size: 14px;
        }
        .btn-instagram {
            color: #e4405f;
            background-color: #ffffff;
            border: 1px solid silver;
            border-radius: 5px;
        }
        .btn-pinterest {
            color: #9f191f;
            background-color: #ffffff;
            border: 1px solid silver;
            border-radius: 5px;
        }
        .btn-facebook {
            color: #5d82d1;
            background-color: #ffffff;
            border: 1px solid silver;
            border-radius: 5px;
        }
        .btn-twitter {
            color: #40bff5;
            background-color: #ffffff;
            border: 1px solid silver;
            border-radius: 5px;
        }
        .btn-social-icon.btn-sm>:first-child {
            line-height: 35px;
            width: 28px;
            font-size: 1em;
        }
    </style>
@endsection

@section('content')
		<div class="container">
	         @if($product->category)
            <ul class="breadcrumb">
                <li><a href="{{url('/')}}">@lang('Home')</a></li>
                @if($product->category->category)
                    @include('partials.front.parent-category-product', ['category'=>$product->category->category])
                @endif
                <li><a href="{{route('front.category.show', [$product->category->slug])}}">{{$product->category->name}}</a></li>
                <li class="active">{{$product->name}}</li>
            </ul>
            @endif
		</div>

	<div class="container product-container">
    @if($product)
    <div class="cart-message">
    </div>

    <div class="row clearfix">
        <div class="col-md-12">
            <div class="xzoom-container col-md-12" style="padding-left: 0px;">
                <div class="col-md-6 image-box">
                    @if(Auth::check())
                        @if(!$product->favouritedBy(Auth::user()))
                            <a href="javascript:void(0)" class="wishlist-icon wishlistStatus" id="wishlist-{{$product->id}}" data-product="{{$product->id}}" data-route="{{ route('front.product.favourite.status', $product) }}" style="font-size: 16px;" >
                                <i class="fa fa-heart-o"></i>
                            </a>
                        @else
                            <a href="javascript:void(0)" class="wishlist-icon wishlistStatus" id="wishlist-{{$product->id}}" data-product="{{$product->id}}" data-route="{{ route('front.product.favourite.status', $product) }}" style="font-size: 16px;" >
                                <i class="fa fa-heart"></i>
                            </a>
                        @endif
                    @else
                        <a href="{{url('/login')}}" class="wishlist-icon" style="font-size: 16px;" >
                            <i class="fa fa-heart-o"></i>
                        </a>
                    @endif
                    
                    <div class="kalles-template single-product-template zoom_tp_2 header_full_true des_header_3 css_scrollbar lazy_icons btnt4_style_2 css_scrollbar template-index kalles_toolbar_true hover_img2 swatch_style_rounded swatch_list_size_small label_style_rounded wrapper_full_width header_full_true hide_scrolld_true lazyload ml-27 mob-ml-0">
                        <div class="sp-single sp-single-4 des_pr_layout_1">
                            <div class="container container_cat cat_default">
                                <div class="row product">
                                    <div class="col-md-6 col-12 thumb_bottom">
                                        <div class="row mb__50 pr_sticky_content">
                                            <div class="col-md-12 col-12 pr product-images img_action_zoom pr_sticky_img kalles_product_thumnb_slide">
                                                <div class="row theiaStickySidebar">
                                                    <div class="col-12 col_thumb">
                                                        <div class="p-thumb p-thumb_ppr images sp-pr-gallery equal_nt nt_contain ratio_imgtrue position_8 nt_slider pr_carousel" data-flickity='{"initialIndex": ".media_id_001","fade":true,"draggable":">1","cellSelector": ".p-item:not(.is_varhide)","cellAlign": "center","wrapAround": true,"autoPlay": false,"prevNextButtons":true,"adaptiveHeight": true,"imagesLoaded": false, "lazyLoad": 0,"dragThreshold" : 6,"pageDots": false,"rightToLeft": false }'>
                                                            @if($product->photo)
                                                            <div
                                                                    data-grname="not4"
                                                                    data-grpvl="ntt4"
                                                                    class="img_ptw p_ptw js-sl-item p-item sp-pr-gallery__img w__100 nt_bg_lz lazyload media_id_001"
                                                                    data-mdid="000"
                                                                    data-mdtype="image"
                                                                    data-bgset="{{ $product->photo->name}}"
                                                                    data-src="{{ $product->photo->name}}"
                                                                    data-ratio="0.7838776928422516"
                                                                    data-width="1128"
                                                                    data-height="1439"
                                                                    >
                                                            </div>
                                                            @endif
                                                            @foreach($product->photos as $key=>$photo)
                                                            <div
                                                                    data-grname="not4"
                                                                    data-grpvl="ntt4"
                                                                    class="img_ptw p_ptw js-sl-item p-item sp-pr-gallery__img w__100 nt_bg_lz lazyload media_id_001"
                                                                    data-mdid="00{{$key+1}}"
                                                                    data-mdtype="image"
                                                                    data-bgset="{{ $photo->name}}"
                                                                    data-src="{{ $photo->name}}"
                                                                    data-ratio="0.7838776928422516"
                                                                    data-width="1128"
                                                                    data-height="1439"
                                                                    >
                                                            </div>
                                                            @endforeach
                                                            
                                                        </div>
                                                        <span class="tc nt_labels pa pe_none cw"></span>
                                                        
                                                        <div class="p_group_btns pa flex">
                                                            <button class="br__40 tc flex al_center fl_center bghp show_btn_pr_gallery ttip_nt tooltip_top_left">
                                                                <i class="linearicons-zoom-in"></i><span class="tt_txt">Click to enlarge</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    @if(count($product->photos) > 0)
                                                    <div class="col-12 col_nav nav_medium">
                                                        <div class="p-nav ratio_imgtrue row equal_nt nt_cover position_8 nt_slider pr_carousel" data-flickityjs='{"cellSelector": ".n-item:not(.is_varhide)","cellAlign": "left","asNavFor": ".p-thumb","wrapAround": true,"draggable": ">1","autoPlay": 0,"prevNextButtons": 0,"percentPosition": 1,"imagesLoaded": 0,"pageDots": 0,"groupCells": true,"rightToLeft": false,"contain":  1,"freeScroll": 0}'></div>
                                                    </div>
                                                    @endif
                                                    <div class="dt_img_zoom pa t__0 r__0 dib"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 product-details-content">
                    <h1>{{$product->name}}</h1>
                    @if($product->model)
                        <p class="product_desc">Product Code {{ $product->model }}</p>
                    @endif
                    
                    @if($product->virtual && $product->downloadable && $product->file)
                        <small class="text-muted">@lang('Download access will be given after payment is done.')</small>
                    @endif
                                       
                    <div class="row category">
                        <div class="col-xs-8">
                            
                            @if($product->brand)
                            <a href="{{route('front.brand.show', [$product->brand->slug])}}"><span class="label label-success">{{$product->brand->name}}</span></a>
                            @endif
                            @if(count($product->reviews->where('approved', 1)) > 0)
                                <p><span class="label label-primary label-sm">{{$product->reviews->where('approved', 1)->where('rating', '!=', null)->avg('rating')}} <span class="glyphicon glyphicon-star" aria-hidden="true"></span></span>
                                    &nbsp;<a href="#reviews">{{count($product->reviews->where('approved', 1)->where('rating', '!=', null))}} @lang('Ratings &') {{count($product->reviews->where('approved', 1)->where('comment', '!=', null))}} @lang('Reviews')</a>
                                </p>
                            @endif
                            
                        </div>
                       
                    </div>
                    <div class="product-price-box label_product">
                        @if($product->price_with_discount() < $product->price)
                        <span class="product-price">{{currency_format($product->price_with_discount())}}</span>
                        <del class="product-price-discount text-muted">{{currency_format($product->price)}}</del>
                        @if(round($product->discount_percentage()) > 0)
                            <span class="product-price-discount label_sale1">{{round($product->discount_percentage())}}@lang('% off')</span>
                        @endif
                        @else
                        @if($product->old_price && ($product->price < $product->old_price))
                        <span class="product-price">{{currency_format($product->price)}}</span>
                        <del class="product-price-discount text-muted">{{currency_format($product->old_price)}}</del>
                            @if(round(100 * ($product->old_price - $product->price) / $product->old_price) > 0)
                                <span class="product-price-discount label_sale1">{{round(100 * ($product->old_price - $product->price) / $product->old_price)}}@lang('% off')</span>
                            @endif
                        
                        @else
                        <span class="product-price">{{currency_format($product->price)}}</span>
                        @endif
                        @endif
                        <!-- Right Column Start -->
                        <div class="view_det_link">
                            <a data-scroll href="#product-details-link" class="green-color">View product details</a>
                        </div>
                        <div class="location">
                            <img src="{{ asset('img/location.png')}}">
                            <input type="text" id="pincodetext" placeholder="Enter Delivery Pincode">
                            <span id="delivery_check">
                                <a href="javascript:void(0);"> Check</a>
                            </span> 
                            <div class="delivery-date">
                                <span itemprop="name" content="Drop shape shimmering Gold Ring"></span> 
                                <span></span>
                            </div>
                        </div>
                        <!-- Right Column End -->
                    </div>
                            
                    @if($product->in_stock < 1)
                        <h3 class='text-danger'>@lang('Out of Stock!')</h3>
                    @elseif($product->in_stock < 4)
                        <h4 class='text-danger'>@lang('Only') {{$product->in_stock}} @lang('left in Stock!')</h4>
                    @else
                        <h4 class='text-muted'>@lang('In Stock')</h4>
                    @endif
                    
                    @if($product->in_stock > 0)
                    <div class="row">
                        <div class="col-md-12">
                            {!! Form::open(['method'=>'patch', 'route'=>['front.cart.add', $product->id], 'id'=>'cart-form']) !!}
                                {!! Form::label('quantity', __('Quantity:')) !!}
                                {!! Form::number('quantity', 1, ['class'=>'quantity-pro', 'step'=>'1', 'min'=>'1', 'max'=>$product->qty_per_order]) !!}

                                @if(is_array($variants) && count($variants))
                                @foreach($variants as $key => $variant)
                                <div class="spec-type">
                                    <strong class="spec-title">{{$variant['n']}}</strong>:<br>
                                    @foreach($variant['v'] as $variant_key => $value)
                                    <span class="spec-radio">
                                        <input data-product="{{$product->id}}" data-variant="{{$key}}" class="variant_input" required id="variants-{{$key}}-{{$variant_key}}" name="variants[{{$key}}]" value="{{$variant_key}}" type="radio">
                                        <label for="variants-{{$key}}-{{$variant_key}}" class="spec-radio-label">{{$value['n']}}</label>
                                    </span>
                                    @endforeach
                                </div>
                                @endforeach
                                @endif
                                <div class="mt-14">
                                    <button class="add-to-cart-de btn btn-success" name="submit_button" type="submit"> <i class="linearicons-cart"></i> @lang('Add To Cart') </button> &nbsp;&nbsp;
                                    <a class="buy-now-de btn btn-success" href="{{route('front.buynow.add', $product->id)}}" class="btn btn-success">@lang('Buy Now') </a>
                                </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                    @endif
                
                    @if($product->vendor)
                    <br>
                    <div class="row">
                        <div class="col-md-12 well">
                            @lang('Sold By:') <a class="text-primary" href="{{url('/shop')}}/{{$product->vendor->slug}}"><strong>{{$product->vendor->shop_name}}</strong></a>
                        </div>
                    </div>
                    @endif
                    <div class="box_details">
                    @if(config('settings.whatsapp_number'))
                    <div class="watsapp-no">
                        Have Questions? <span class="mob-new-line">Whatsapp <a href="https://api.whatsapp.com/send?phone={{ str_replace(' ', '', config('settings.whatsapp_number'))}}" target="_blank"><img src="{{ asset('img/whats_app.png')}}" width="25px" height="25px" /> {{ config('settings.whatsapp_number') }}</a></span><br />
                    </div>
                    @endif
                    <div>
                        <ul class="product_return">
                            <li><img class="feat" src="{{ asset('img/certified.png')}}"/><span> 100% Certified</span></li>
                            <li><img class="feat" src="{{ asset('img/life-time.png')}}"/><span> Life Time Exchange</span></li>
                            <li><img class="feat" src="{{ asset('img/return.png')}}"/><span> 30 days Return</span></li>
                        </ul>
                    </div>
                    
                </div>
                @if(config('settings.social_share_enable'))
                        <div class="left-zero col-xs-12">
                            Share: <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(Request::fullUrl()) }}" target="_blank" class="btn btn-sm btn-social-icon btn-facebook social-share">
                                        <span class="fa fa-facebook"></span>
                                    </a>
                                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(Request::fullUrl()) }}" target="_blank" class="btn btn-sm btn-social-icon btn-twitter social-share">
                                        <span class="fa fa-twitter"></span>
                                    </a>
                                    <a href="https://www.instagram.com//share?url={{ urlencode(Request::fullUrl()) }}" target="_blank" class="btn btn-sm btn-social-icon btn-instagram social-share">
                                        <span class="fa fa-instagram"></span>
                                    </a>
                                    <a href="https://www.pinterest.com//share?url={{ urlencode(Request::fullUrl()) }}" target="_blank" class="btn btn-sm btn-social-icon btn-pinterest social-share">
                                        <span class="fa fa-pinterest"></span>
                                    </a>
                        </div>
                        @endif
                <div>
                </div>
                </div>
            </div>

            {{-- <div class="row">
                <div class="col-md-12">
                    {!! DNS1D::getBarcodeHTML($product->barcode, "C128A") !!}
                </div>
            </div> --}}

            @include('partials.front.description-reviews')
            
            @include('partials.front.related-products')

        </div>
    </div>
    @endif
</div>
@endsection

@section('scripts')
    <script src="{{asset('css/products/js/jquery.hoverIntent.min.js')}}"></script>
    <script src="{{asset('css/products/js/flickity.pkgd.min.js')}}"></script>
    <script src="{{asset('css/products/js/lazysizes.min.js')}}"></script>
    <script src="{{asset('css/products/js/js-cookie.min.js')}}"></script>
    <script src="{{asset('css/products/js/photoswipe.min.js')}}"></script>
    <script src="{{asset('css/products/js/photoswipe-ui-default.min.js')}}"></script>
    <script src="{{asset('css/products/js/drift.min.js')}}"></script>
    <script src="{{asset('css/products/js/interface.js')}}"></script>

    <script>
        (function ($) {
            $(document).ready(function() {
                

                $(document).on('change', '.variant_input', function() {
                    var product = $(this).data('product');
                    // var variant = $(this).data('variant');
                    // var value = this.value;
                    var variants = [];
                    var values = [];
                    $('.variant_input').each(function(input) {
                        if($(this).is(':checked')) {
                            var variant = $(this).data('variant');
                            var value = $(this).val();
                            variants.push(variant);
                            values.push(value);
                        }
                    });

                    $.ajax({
                        method: 'get',
                        url: APP_URL + '/ajax/product/get-variant/' + product + '/' + variants.join(',') + '/' + values.join(','),
                        success: function(response) {
                            if(response.success) {
                                $('.product-price-box').html('<span class="product-price">' + response.data + '</span>');
                            }
                        }
                    });

                });
            });

            $('input#pincodetext').attr('maxLength','6').keypress();
            jQuery('#pincodetext').keypress(function (e) {
                var regex = new RegExp("^[0-9-]+$");
                var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
                if (regex.test(str)) {
                    return true;
                }

                e.preventDefault();
                return false;
            });

            jQuery( "#delivery_check" ).click(function() {
                    var pincode = jQuery( ".location input:text" ).val();
                    if (pincode.length == 0 ) {
                        jQuery('.delivery-date').html('Please Enter Delivery Pincode');
                        jQuery(".delivery-date").css("color", "red");
                    } else {
                        var productId = "{{ $product->id }}";
                        jQuery.ajax({
                            url: APP_URL + '/ajax/pincode/delivery/' + productId + '/' + pincode,
                            cache: false
                        })
                        .done(function( response ) {
                            if (response.availability.available) {
                                if (response.availability.delivery_delay_status == 1) {
                                    jQuery(".delivery-date").html(response.availability.delivery_delay_message);
                                } else {
                                    jQuery(".delivery-date").html("Expected Delivery Date : " + response.availability.delivery_date);
                                }
                                jQuery(".delivery-date").css("color", "#05a189");
                            } else {
                                jQuery(".delivery-date").html("Sorry, currently we are not servicing your area");
                                jQuery(".delivery-date").css("color", "red");
                            }
                        });
                    }
            });
        })(jQuery);
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.add-to-cart-de').on('click',function(){
                //Scroll to top if cart icon is hidden on top
                $('html, body').animate({
                    'scrollTop' : $(".linearicons-cart-empty").position().top
                });
            });
        });
    </script>
    @include('includes.reviews-submit-script')
    @include('includes.reviews-pagination-script')
    @include('includes.cart-submit-script')
@endsection