{% block quick_product_view %}


<div class="modal fade daigram-module quick-view-product-modal" id="quick_view_product" tabindex="-1" role="dialog" aria-labelledby="#select-logo-block" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div role="tabpanel">

                <ul class="nav nav-tabs" role="tablist">
                    {% block quick_product_detail %}

                    <li role="presentation" class="active"><a href="#Product-detail" aria-controls="Product-detail" role="tab" data-toggle="tab">Product Details</a></li>

                    {% endblock quick_product_detail %}

                    {% block quick_supplier_info %}

                    <li role="presentation"><a href="#Supplier-info" aria-controls="Supplier-info" role="tab" data-toggle="tab">Supplier Information</a></li>

                    {% endblock quick_supplier_info%}

                    {% block quick_rating_review %}

                    <li role="presentation"><a href="#Rating-review" aria-controls="Rating-review" role="tab" data-toggle="tab">Rating &amp; Reviews</a></li>

                    {% endblock quick_rating_review %}
                </ul>

                <div class="tab-content">
                    {% block quick_product_detail_content %}

                    <div role="tabpanel" class="tab-pane active" id="Product-detail">
                        <div class="ob-quick-view-product">
                            <div class="product-showcase row">

                            <div class="col-lg-5 col-md-6 col-sm-12 col-xs-12">
                                <div class="product-gallery-page">
                                    <aside class="quick-view-left">
                                        <div class="product-big-image">
                                            <span class='zoom' id='ex3'>
                                                <img src="{{ asset('images/large-image-1.jpg') }}" alt="Product image" class="img-responsive" />
                                                <div class="zoom-col">
                                                    <p><i class="fa fa-search"></i>Click here to zoom in</p>
                                                </div>
                                            </span>
                                        </div>
                                        <div class="product-big-image-thumbnails quick-view-gallery">
                                            <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image1.jpg') }}" alt="product-image" /></a></div>
                                            <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image2.jpg') }}" alt="product-image" /></a></div>
                                            <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image3.jpg') }}" alt="product-image" /></a></div>
                                            <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image4.jpg') }}" alt="product-image" /></a></div>
                                            <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/large-image-1.jpg') }}" alt="product-image" /></a></div>
                                            <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image1.jpg') }}" alt="product-image" /></a></div>
                                            <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image2.jpg') }}" alt="product-image" /></a></div>
                                            <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image3.jpg') }}" alt="product-image" /></a></div>
                                            <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image4.jpg') }}" alt="product-image" /></a></div>
                                            <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/large-image-1.jpg') }}" alt="product-image" /></a></div>
                                        </div>
                                        <div class="clearfix"></div>
                                    </aside>
                                    <div class="clearfix"></div>
                                </div>
                            </div>

                            <div class="col-lg-7 col-md-6 col-sm-12 col-xs-12">
                                <div class="title-block">
                                    <h1 class="heading-2">Berkeley Hampton Polo</h1>
                                </div>
                                <div class="skuprice">
                                    <div class="col lg-4 col-md-4 col-sm-4 col-xs-12">ITEM CODE : <span>P742.041</span></div>
                                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center">Brand name:  <span>BN0I</span></div>
                                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center">
                                        <div class="product-rating-top-block">
                                            <div class="product-list-rating">
                                                <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm" >
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-description">
                                    <div class="tabbable">
                                        <div id="order" class="tab-content">
                                            <div id="order" class="tab-pane fade active in">
                                                <div class="product-section-box">
                                                    <h2 class="js-heading">Quantity Price</h2>

                                                    <div class="quantity-table">
                                                        <div class="quantity-table-title">
                                                            <div class="table-heading">Quantity</div>
                                                            <div class="table-content">Price</div>
                                                        </div>
                                                        <div class="quantity-table-disc">
                                                            <div id="quantity-table-col" class="owl-carousel owl-theme">
                                                                  <div>
                                                                    <div class="table-heading">50-99</div>
                                                                    <div class="table-content">Kr.11.30</div>
                                                                  </div>
                                                                  <div>
                                                                    <div class="table-heading">50-99</div>
                                                                    <div class="table-content">Kr.11.30</div>
                                                                  </div>
                                                                  <div>
                                                                    <div class="table-heading">50-99</div>
                                                                    <div class="table-content">Kr.11.30</div>
                                                                  </div>
                                                                  <div>
                                                                    <div class="table-heading">50-99</div>
                                                                    <div class="table-content">Kr.11.30</div>
                                                                  </div>
                                                                  <div>
                                                                    <div class="table-heading">50-99</div>
                                                                    <div class="table-content">Kr.11.30</div>
                                                                  </div>
                                                                  <div>
                                                                    <div class="table-heading">50-99</div>
                                                                    <div class="table-content">Kr.11.30</div>
                                                                  </div>
                                                                <div>
                                                                    <div class="table-heading">50-99</div>
                                                                    <div class="table-content">Kr.11.30</div>
                                                                  </div>
                                                                  <div>
                                                                    <div class="table-heading">50-99</div>
                                                                    <div class="table-content">Kr.11.30</div>
                                                                  </div>
                                                                  <div>
                                                                    <div class="table-heading">50-99</div>
                                                                    <div class="table-content">Kr.11.30</div>
                                                                  </div>
                                                                  <div>
                                                                    <div class="table-heading">50-99</div>
                                                                    <div class="table-content">Kr.11.30</div>
                                                                  </div>
                                                                  <div>
                                                                    <div class="table-heading">50-99</div>
                                                                    <div class="table-content">Kr.11.30</div>
                                                                  </div>
                                                                  <div>
                                                                    <div class="table-heading">50-99</div>
                                                                    <div class="table-content">Kr.11.30</div>
                                                                  </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="product-section-box">
                                                    <h2 class="js-heading">Colors</h2>
                                                    <div class="color-box">
                                                        <ul>
                                                            <li>
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly1">
                                                                <label style="background-color:#f00;" for="weekly1"></label>
                                                            </li>
                                                            <li>
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly2">
                                                                <label style="background-color:#000;" for="weekly2"></label>

                                                            </li>
                                                            <li class="white-box">
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly3">
                                                                <label style="background-color:#fff;" for="weekly3"></label>
                                                            </li>
                                                            <li>
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly4">
                                                                <label style="background-color:#cc6633;" for="weekly4"></label>
                                                            </li>
                                                            <li>
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly5">
                                                                <label style="background-color:#3399cc;" for="weekly5"></label>
                                                            </li>
                                                            <li>
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly6">
                                                                <label style="background-color:#cc3333;" for="weekly6"></label>
                                                            </li>
                                                            <li>
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly7">
                                                                <label style="background-color:#003399;" for="weekly7"></label>
                                                            </li>
                                                            <li>
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly8">
                                                                <label style="background-color:#006633;" for="weekly8"></label>
                                                            </li>
                                                            <li>
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly9">
                                                                <label style="background-color:#663300;" for="weekly9"></label>
                                                            </li>
                                                            <li>
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly10">
                                                                <label style="background-color:#f00;" for="weekly10"></label>
                                                            </li>
                                                            <li>
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly11">
                                                                <label style="background-color:#000;" for="weekly11"></label>

                                                            </li>
                                                            <li class="white-box">
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly12">
                                                                <label style="background-color:#fff;" for="weekly12"></label>
                                                            </li>
                                                            <li>
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly13">
                                                                <label style="background-color:#cc6633;" for="weekly13"></label>
                                                            </li>
                                                            <li>
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly14">
                                                                <label style="background-color:#3399cc;" for="weekly14"></label>
                                                            </li>
                                                            <li>
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly15">
                                                                <label style="background-color:#cc3333;" for="weekly15"></label>
                                                            </li>
                                                            <li>
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly16">
                                                                <label style="background-color:#003399;" for="weekly16"></label>
                                                            </li>
                                                            <li class="multi-checkbox">
                                                                <input type="checkbox" value="True" name="lists[weekly]" id="weekly17">
                                                                <label style="background-color:#555;" for="weekly17"></label>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="product-section-box">
                                                    <h2 class="js-heading">Quantity</h2>
                                                    <div class="quantity-table">
                                                        <ul class="quant-size white-size">
                                                            <li><span>S</span>
                                                                <input type="text" value="50">
                                                            </li>
                                                            <li><span>M</span>
                                                                <input type="text" value="100">
                                                            </li>
                                                            <li><span>L</span>
                                                                <input type="text" value="50">
                                                            </li>
                                                            <li><span>XL</span>
                                                                <input type="text" value="0">
                                                            </li>
                                                            <li><span>XXL</span>
                                                                <input type="text" value="50">
                                                            </li>
                                                            <li>White : 200</li>
                                                        </ul>
                                                    </div>
                                                </div>

                                                    <div class="total-price">
                                                        Total Kr. 2060.00
                                                    </div>
                                                    <p>Please note that stated prices exclude VAT and delivery.</p>
                                                    <div class="row">
                                                        <div class="col-lg-7 col-md-12 col-sm-8 col-xs-12">
                                                            <div class="pro-button">
                                                                <ul>
                                                                    <li><a title="" data-placement="top" data-toggle="tooltip" href="{{ url('office_brain_page_comingsoon_view') }}" data-original-title="Add to cart"><i class="fa fa-shopping-cart fa-fw"> </i> Add to cart</a>
                                                                    </li>
                                                                    <li><a title="" data-placement="top" data-toggle="tooltip" href="{{ url('office_brain_page_comingsoon_view') }}" data-original-title="Quote"><i class="fa fa-comment"><span>,,</span></i></a>
                                                                    </li>
                                                                    <li><a title="" data-placement="top" data-toggle="tooltip" href="{{ url('office_brain_page_comingsoon_view') }}" data-original-title="Wishlist"><i class="fa fa-heart-o fa-fw"> </i></a>
                                                                    </li>
                                                                    <li><a title="" data-placement="top" data-toggle="tooltip" href="javascript:void(0);" class="js-pro-compare" data-original-title="Compare"><i class="fa fa-retweet fa-fw"> </i></a>
                                                                    </li>
                                                                </ul>
                                                                <div class="clearfix"></div>
                                                            </div>

                                                        </div>
                                                        <div class="col-lg-5 col-md-12 col-sm-4 col-xs-12 text-right">
                                                            <a href="{{ url('office_brain_page_comingsoon_view') }}" class="continue-shopping-btn">Show More Details <i class="fa fa-chevron-right"></i></a>
                                                        </div>
                                                   </div>

                                                <div class="clear"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>

                    {% endblock quick_product_detail_content %}

                    {% block quick_supplier_info_content %}

                    <div role="tabpanel" class="tab-pane" id="Supplier-info">
                        <div class="ob-quick-view-product">
                            <div class="product-showcase row">

                                <div class="col-lg-5 col-md-6 col-sm-12 col-xs-12">
                                    <div class="product-gallery-page">
                                        <aside class="quick-view-left">
                                            <div class="product-big-image">
                                                <span class='zoom' id='ex3'>
                                                    <img src="{{ asset('images/large-image-1.jpg') }}" alt="Product image" class="img-responsive" />
                                                    <div class="zoom-col">
                                                        <p><i class="fa fa-search"></i>Click here to zoom in</p>
                                                    </div>
                                                </span>
                                            </div>
                                            <div class="product-big-image-thumbnails quick-view-gallery">
                                                <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image1.jpg') }}" alt="product-image" /></a></div>
                                                <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image2.jpg') }}" alt="product-image" /></a></div>
                                                <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image3.jpg') }}" alt="product-image" /></a></div>
                                                <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image4.jpg') }}" alt="product-image" /></a></div>
                                                <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/large-image-1.jpg') }}" alt="product-image" /></a></div>
                                                <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image1.jpg') }}" alt="product-image" /></a></div>
                                                <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image2.jpg') }}" alt="product-image" /></a></div>
                                                <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image3.jpg') }}" alt="product-image" /></a></div>
                                                <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/detail-image4.jpg') }}" alt="product-image" /></a></div>
                                                <div class="slide"><a href="javascript:" class="product-thumb-img-anchar"><img src="{{ asset('images/large-image-1.jpg') }}" alt="product-image" /></a></div>
                                            </div>
                                            <div class="clearfix"></div>
                                        </aside>
                                        <div class="clearfix"></div>
                                    </div>
</div>

                                <div class="col-lg-7 col-md-6 col-sm-12 col-xs-12">
                                    <div class="supplier-contact-info">
                                        <div class="title-block">
                                            <h1 class="heading-2">supplier contact information</h1>
                                        </div>
                                        <div class="supplier-detail">
                                            <div class="supplier-logo"><img src="{{ asset('images/foam-work-logo.jpg') }}" alt="" /></div>
                                            <div class="supplier-name">foamworx</div>
                                            <div class="sku-id"><b>PPPC #:990916</b></div>
                                            <p class="supplier-address">55 Bren Street<br>Cornwallis, Nova Scotia<br>Canada B0S 1H0</p>
                                            <ul class="supplier-contacts">
                                                <li><b>Telephone :</b > 902-638-8616</li>
                                                <li><b>Toll Ffree Telephone :</b> 888-633-2233</li>
                                                <li><b>Fax :</b> 902-638-8618</li>
                                                <li><b>Email Address :</b> <a href="mailto:sales@foamworx.com">sales@foamworx.com</a></li>
                                                <li><b>Website :</b> <a href="http://www.foamworx.com" target="_blank">http://www.foamworx.com</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    {% endblock quick_supplier_info_content %}

                    {% block quick_rating_review_content %}

                    <div role="tabpanel" class="tab-pane" id="Rating-review">
                         <div class="ob-quick-view-product">
                            <div class="row">
                                <div class="col-lg-4 col-md-6 col-sm-7 col-xs-12">
                                    <div class="row">
                                    <div class="col-sm-4 col-xs-12 padding-right-0">
                                        <div class="average-rating-col">
                                            <h3>Average</h3>
                                            <div class="average-rate-box">
                                                <span class="rate-count">3.5</span>
                                                <img src="{{ asset('images/star-rating.png') }}" alt="">
                                                <div class="user-count"><i class="fa fa-user"></i> 100 Total</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-8 col-xs-12">
                                        <div class="average-box">
                                            <div class="rating-col">
                                                <div class="star-count">5</div>
                                                <div class="rating-process"><span style="width:80%;"></span></div>
                                                <div class="rating-count">80</div>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="rating-col">
                                                <div class="star-count">4</div>
                                                <div class="rating-process"><span style="width:75%;"></span></div>
                                                <div class="rating-count">75</div>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="rating-col">
                                                <div class="star-count">3</div>
                                                <div class="rating-process"><span style="width:40%;"></span></div>
                                                <div class="rating-count">40</div>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="rating-col">
                                                <div class="star-count">2</div>
                                                <div class="rating-process"><span style="width:30%;"></span></div>
                                                <div class="rating-count">30</div>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="rating-col">
                                                <div class="star-count">1</div>
                                                <div class="rating-process"><span style="width:5%;"></span></div>
                                                <div class="rating-count">5</div>
                                                <div class="clearfix"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <div class="review-col">
                                                <h3>Write a Review</h3>
                                                <div class="review-box">
                                                    <form>
                                                        <div class="form-group">
                                                            <label>Title : <i class="mandatory-field">*</i></label>
                                                            <input type="text" value="" />
                                                        </div>
                                                        <div class="extra-col">
                                                            Have you ised this product? Rate it now.
                                                            <img src="{{ asset('images/star-rating.png') }}" alt="" class="pull-right">
                                                        </div>
                                                        <div class="form-group">
                                                            <label>Comment : <i class="mandatory-field">*</i></label>
                                                            <textarea></textarea>
                                                            <span class="required-field">* {{ 'req_fields'|trans({}, 'app') }}</span>
                                                        </div>
                                                        <div class="form-group">
                                                            <input type="submit" value="save" class="active-button" />
                                                            <input type="button" value="Cancel" class="active-button" />
                                                        </div>
                                                    </form>
                                                </div>
                                              </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-8 col-md-6 col-sm-5 col-xs-12">
                                    <div class="review-col ob-view-review-wrapper">
                                        <h3>view Review</h3>
                                        <div class="review-box">
                                            <div class="view-review-col">
                                                <div class="review-user">
                                                    Jenn smith
                                                    <span class="review-date">November 25, 2014</span>
                                                </div>
                                                <div class="view-rating"><img src="{{ asset('images/star-rating.png') }}" alt="" /></div>
                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took to make a type specimen book.</p>
                                            </div>
                                            <div class="view-review-col">
                                                <div class="review-user">
                                                    Jenn smith
                                                    <span class="review-date">November 25, 2014</span>
                                                </div>
                                                <div class="view-rating"><img src="{{ asset('images/star-rating.png') }}" alt="" /></div>
                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took to make a type specimen book.</p>
                                            </div>
                                            <div class="view-review-col">
                                                <div class="review-user">
                                                    Jenn smith
                                                    <span class="review-date">November 25, 2014</span>
                                                </div>
                                                <div class="view-rating"><img src="{{ asset('images/star-rating.png') }}" alt="" /></div>
                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took to make a type specimen book.</p>
                                            </div>
                                            <div class="view-review-col">
                                                <div class="review-user">
                                                    Jenn smith
                                                    <span class="review-date">November 25, 2014</span>
                                                </div>
                                                <div class="view-rating"><img src="{{ asset('images/star-rating.png') }}" alt="" /></div>
                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took to make a type specimen book.</p>
                                            </div>
                                            <div class="view-review-col">
                                                <div class="review-user">
                                                    Jenn smith
                                                    <span class="review-date">November 25, 2014</span>
                                                </div>
                                                <div class="view-rating"><img src="{{ asset('images/star-rating.png') }}" alt="" /></div>
                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took to make a type specimen book.</p>
                                            </div>
                                            <div class="view-review-col">
                                                <div class="review-user">
                                                    Jenn smith
                                                    <span class="review-date">November 25, 2014</span>
                                                </div>
                                                <div class="view-rating"><img src="{{ asset('images/star-rating.png') }}" alt="" /></div>
                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took to make a type specimen book.</p>
                                            </div>
                                            <div class="view-review-col">
                                                <div class="review-user">
                                                    Jenn smith
                                                    <span class="review-date">November 25, 2014</span>
                                                </div>
                                                <div class="view-rating"><img src="{{ asset('images/star-rating.png') }}" alt="" /></div>
                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took to make a type specimen book.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                         </div>
                    </div>

                    {% endblock quick_rating_review_content %}
                </div>
            </div>
            <a href="{{ url('office_brain_page_comingsoon_view') }}" aria-label="Close" data-dismiss="modal" class="close fa fa-close" ></a>
        </div>
    </div>
</div>

{% endblock quick_product_view %}