{% extends 'OfficeBrainCustomBundleThemeBundle:IdmeTheme:themeBase.html.twig' %}
{% block seo_meta_title %}{{ seo_meta_title|raw }}{% endblock seo_meta_title %}
{% block seo_meta_description %}{{ seo_meta_description }}{% endblock seo_meta_description %}
{% block seo_meta_keywords %}{{ seo_meta_keywords }}{% endblock seo_meta_keywords %}
{% block main_content %}
<style>
.product-details-tags label {
    margin-right: 5px;
}
div#product_detail_product-description-tab-block .inner-tab-content ul,
.product-info-text ul {list-style: disc;padding-left: 30px;margin-top: 5px;}
div#product_detail_product-description-tab-block .inner-tab-content ul li,
.product-info-text ul li {list-style: disc;}
div#product_detail_product-description-tab-block .inner-tab-content * {font-family: 'Montserrat', sans-serif !important;font-size: 16px !important;font-weight: 400;color: #000 !important;}
.recommeded-product-sliders .js-product-box.product-box {border: 0px;padding: 0;margin: 10px 0 20px 0px;}
.recommeded-product-sliders .js-product-box.product-box:hover {box-shadow: 0 6px 10px rgb(140 152 164 / 10%);cursor: pointer !important;}
.recommeded-product-sliders .js-product-box.product-box:hover .pro-box:hover {box-shadow: none;}
</style>
<div class='container'>
	<div class='row'>
		<div class="col-xs-12 col-12">
			{% use 'OfficeBrainCustomBundleThemeBundle:IdmeTheme:BaseUIElements/breadCrumb.html.twig' %}
			{% block bread_crumb %} {{ parent() }} {% endblock bread_crumb %}
			{# <div class="product-title">{{basic_information.title}}</div> #}
			{# <label class="made-usa text-center ">Made in USA</label> #}
			{# <div class="product-sku">SKU: {{basic_information.sku_number}}</div> #}
		</div>
		<div class="col-md-5 col-xs-12 col-12 ob-product-detail-left">
			{{ include('OfficeBrainCustomBundleThemeBundle:IdmeTheme:ProductDetail/Elements/imageGallery.html.twig') }}
			<div class="product-stap-box">
				<div class="product-titles">
					<strong> What Happens Next</strong> <br>
					Get your promos fast and easy!
				</div>
				<div class="product-stape">
					<div class="product-stape-info">
						<span class="product-counts">1</span> <br>
						<strong>Place Order</strong><br>
						Select all your base products
					</div>
					<div class="product-stape-info">
						<span class="product-counts">2</span> <br>
						<strong>We’ll Reach Out</strong><br>
						To get all the artwork
					</div>
					<div class="product-stape-info">
						<span class="product-counts">3</span> <br>
						<strong>You Review</strong><br>
						We’ll send you a virtual
					</div>
					<div class="product-stape-info">
						<span class="product-counts">4</span> <br>
						<strong>Production</strong><br>
						Enjoy your promotional items!
					</div>
				</div>
			</div>


			<div class="product-gallery-view ob-product-gallery prod-detail-left-top">

				<div class="clearfix"></div>
				{{
				include('OfficeBrainCustomBundleThemeBundle:IdmeTheme:ProductDetail/Elements/socialSharing.html.twig')
				}}
				{# <div class="product-section-box">
					{{
					include('OfficeBrainCustomBundleThemeBundle:IdmeTheme:ProductDetail/Elements/actionList.html.twig')
					}}
				</div> #}
				{{
				include('OfficeBrainCustomBundleThemeBundle:IdmeTheme:ProductDetail/Elements/configurationSummary.html.twig')
				}}
			</div>
			<div class=" js-extra-hidden-height">

			</div>
		</div>

		<div class="col-md-7 col-xs-12 col-12 ob-product-detail-right js-product-transaction-box">
			<div class="product-details-info">
				<div class="product-title"><h1>{{basic_information.title|raw}}</h1></div>
				<div class="product-sku">SKU: {{basic_information.sku_number}}</div>
				<div class="product-details-tags">

					{% if product_tags_detail.private_tag is defined and product_tags_detail.private_tag|length > 0 %}
						{% for tag in product_tags_detail.private_tag %}
						<label class="made-usa text-center ">
							{% if tag.tagClass!="" %}
								<i class="{{tag.tagClass}}"></i>
							{% endif %}
							{% if tag.tagIcon!="" %}
								<img src="{{asset('images/uploads/product-tag/featured-icon/'~tag.tagIcon)}}" width="30" height="30"></i>
							{% endif %}
							{{tag.tagName}}
						  </label>
					{% endfor %}
					{% endif %}
				</div>
				  <div class="product-info-text ellipse-desc">
					{{
						basic_information.description|striptags('<ul><li>') | raw }} <br>
					<a href="javascript:void(0);" class="js-view-full-description">View Full Description</a>
				  </div>
				  {{ include('OfficeBrainCustomBundleThemeBundle:IdmeTheme:ProductDetail/Elements/transactionPanel.html.twig') }}
			</div>
		</div>
	</div>
</div>
<div class="product-drip">
	<div class="container">
		<div class="row">
			<div class="col-xs-12" id="product-detail-tab">
				{{
				include('OfficeBrainCustomBundleThemeBundle:IdmeTheme:ProductDetail/Elements/informationTab.html.twig')
				}}

			</div>
		</div>
	</div>
</div>
<div class='container'>
	
	{{ render(controller('OfficeBrainCustomBundleProductBundle:Product:customRelatedProduct',{'productId': product_id}))}}

	<div class="row">
		{# {% if ob_project_search_configuration_rule.product_detail.recommended_product.status == '1' %}#}
		{# <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" id="recommended_products"
			data-attribute="{{ product_id }}"></div>#}
		{# {% endif %}#}

		{% if ob_project_search_configuration_rule.product_detail.recently_viewed_product.status == '1' %}
		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="recent_products" data-attribute="{{ product_id }}">
		</div>
		{% endif %}
	</div>
</div>

 <!-- Modal -->
 <div class="modal fade" id="questions_about_your" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body questions_about_modal">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <div class="about-modal-title">
            Questions About Your Artwork? <br>
            <span>Get your promos fast and easy!</span>
          </div>
          <div class="about-modal-contact">
            <span>
              <strong><u>Is your artwork ready?</u></strong>
              You can upload your artwork file(s) at checkout.
            </span>
            <span>
              <strong><u>Is your artwork NOT ready?</u></strong>
              Don’t worry!  You will have the option to select "contact me later for my artwork" at checkout.
            </span>
            <span>
              <strong><u>Can I see a mockup before production ?</u></strong>
              To help you get what you expect, we will email a digital mockup to you after checkout.  Your credit card will not be charged until we receive your approval of the mockup.
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

{% endblock main_content %}

{% block footer_js %}
{{ parent() }}
{% javascripts '@OfficeBrainCustomBundleThemeBundle/Resources/public/IdmeTheme/js/jquery.zoom.js'
'@OfficeBrainCustomBundleThemeBundle/Resources/public/IdmeTheme/js/jquery.elevatezoom.js'
'@OfficeBrainCustomBundleThemeBundle/Resources/public/IdmeTheme/js/transaction-custom.js'
'@OfficeBrainPageBundle/Resources/public/js/bundle/close_btn.js'
'@OfficeBrainPageBundle/Resources/public/js/bundle/plusminus-dropdown.js'
'@OfficeBrainPageBundle/Resources/public/js/bundle/product_detail.js'
'@OfficeBrainPageBundle/Resources/public/js/bundle/print.js'
'@OfficeBrainProductBundle/Resources/public/js/common.js'
'@OfficeBrainCustomBundleThemeBundle/Resources/public/IdmeTheme/javascript/thum_slider.js'
'@OfficeBrainProductBundle/Resources/public/js/review.js'
output = 'js/IdmeTheme/product_detail.js'
%}
<script src="{{ asset_url }}" type='text/javascript'></script>
{% endjavascripts %}
{% if ob_project_virtual_access_rule.status == 1 %}
<script type="text/javascript" src="{{virtual_site_url}}/js/virtualintegration.js"></script>
{% endif %}
{#
<script
	type="text/javascript">stLight.options({ publisher: "2c09b640-d455-4fbb-a9c9-1046dc187914", doNotHash: false, doNotCopy: false, hashAddressBar: false });</script>
#}
<script type="text/javascript">
	var productTransactionAction = new transactionActions();
	$(document).ready(function () {
		if ($('.js-product-transaction-box #js_tab_list li').length > 0) {
			productTransactionAction.loadSubTabContent($('.js-product-transaction-box #js_tab_list').find('li.active'));
		}
		if ($(window).width() <= 767) {
			$(".test1").insertAfter(".test2");
		}
		// view full description
		$(".js-view-full-description").click(function(){
			$(this).hide()
			$(this).parent().removeClass("ellipse-desc");
			$('html, body').animate({
        scrollTop: $("#product-detail-tab").offset().top-120
    }, 1000);
		})
	});
</script>  
{% endblock footer_js %}