{{ xheader }}
{% if custom_css %} 
<style type="text/css">
{{ custom_css }}
</style>
{% endif %} 
{% if custom_js %} 
<script type="text/javascript">
{{ custom_js }}
</script>
{% endif %} 
<div class="bg_gray">
	<div class="container">	
		<div id="top_heading" class="row">
			<div class="col-md-8 col-xs-12 col-sm-12">
			{% if show_heading %} 
			<div class="order-title">{{ title }}</div>
			{% endif %}
			{% if show_description %} 
			{% if show_heading %} 
			<hr/>
			{% endif %} 
			{{ sub_des }}
			{% endif %} 
			</div>
			<div class="col-md-4 col-xs-12 col-sm-12 total_top_head">
				<div class="total_top_block">
				{{ entry_order_total }} <span class="total_top">{{ total_balance }}</span>
				</div>
			</div>
		</div>
		<div id="address_row" class="row bg_white">
			{% if user_details %} 
				<div class="{{ address  and  shipping_method?'col-md-6': 'col-md-12'}}">
					<div class="block">
						<h4>{{ entry_your_information  }}</h4>
						<hr />
						<p>
						{% if firstname  or  lastname%} 
						<i class="fa fa-user"></i> <b>{{ firstname ~ '  ' ~ lastname }}</b>
						<br />
						{% endif %} 						 
						<i class="fa fa-envelope fa-1x"></i> {{ email }}
						<br /> 
						{% if telephone%} 
						<i class="fa fa-mobile-phone"></i> {{ telephone }}
						{% endif %} 
						</p>
						
					</div>
				</div>
				{% endif %} 
				{% if address  and  shipping_method %} 
				<div class="col-md-6">
					<div class="block">
						<h4>{{ entry_shipping_address }}</h4>
						<hr />
						<p>
					{% if shipping_address %} 
					{{ shipping_address }}
					{% endif %} 	<br/>
					{% if shipping_method %} 
             		<b>{{ shipping_method }} - {{ shipping_rate }}</b>
              		{% endif %} 					
					</p>
					</div>
				</div>
				{% endif %} 
			{% if address %} 
				<div class="col-md-6">
					<div class="block">
						<h4>{{ entry_payment_address }}</h4>
						<hr />
						<p>
					{% if payment_address %} 
					{{ payment_address }}
					{% endif %} 	
					</p>
					</div>
				</div>
				{% endif %} 
				{% if order_method %} 
				<div class="col-md-6">
					<div class="block">
						<h4>
						<div class="floatleft">{{ entry_payment_method }}</div>{% if payment_image%} <div class="floatright"><img class="payment_method_img" src="{{ 'image/'~payment_image }}"/></div>{% endif %} 
						<div class="clearfix"></div>
						</h4>
						<hr />
						<p>
					{% if payment_method %} 
					{{ payment_method }}
					{% if payment_method_content%} 
					{{ payment_method_content }}
					{% endif %} 
					{% endif %} 	
					</p>
					</div>
				</div>				
				{% endif %} 
		 {% if comment  and  order_comment%} 
		<div class="col-md-12">
     	<div class="block"><h4>{{ text_comment }}</h4>
     	<hr />
         <p>{{ order_comment }}</p>
         </div>
		</div>	           
      {% endif %} 
		<div id="xcart" class="col-md-12">
		<div class="block row">
		<div class="col-md-6">
            {% if ordered_products %} 
            <div class="panel panel-green1 xcart cartpanel">
            <div class="panel-heading"><i class="fa fa-shopping-cart" aria-hidden="true"></i>&nbsp;{{ total_products }}</div>
            <div id="xcart-content" class="panel-body">
            <div class="cartproducts">
            {% set countOptions = 1 %} {% for product in products %} 
            <div class="cartelement">
            <div class="media">
              <div class="media-left">
               <a target="_newtab" href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-thumbnail" /></a>
              </div>
              <div class="media-body">
              	<div class="">
                <div class="media-heading"><a target="_newtab" href="{{ product.href }}">{{ product.name }}
                </a></div>
                <a class="optionLink pointer text-right" onclick="toggleOptions('xoptions{{ countOptions }}')"><i class="fa fa-info-circle" aria-hidden="true"></i></a>
              	<div class="clearfix"></div>
              	<div class="text-left width50"><span class="is_amount text-muted">{{ product.quantity }} &times; {{ product.price }}</span></div><div class="text-right width50"><span class="is_total">{{ product.total }}</span></div>
               	<div class="clearfix"></div>   
              	<div class="text-left"><div class="text-muted">      	
                   	<div style="display: none;" id="xoptions{{ countOptions }}">
                    	<div class="text-left"><span>{{ column_model}}: </span><span class="text-muted">{{ product.model }}</span></div>  
                    	{% for option in product.option %} 
                    		<div class="xgray">{{ option.name }}: {{ option.value }}</div>        		
                    	{% endfor %} 
                   		</div>
                   	</div> 
              	</div> 
              	<div class="clearfix"></div>  
               </div> 
               </div>
            </div>
            </div>
            {% set countOptions = countOptions + 1 %}  
            {% endfor %} 
            {% for voucher in vouchers %}
            <div class="cartelement">
            <div class="media">
            <div class="media-left">
               <span><img src="{{ voucher_image }}" alt="{{ voucher.description }}" class="img-thumbnail" /></span>
              </div>
            <div class="media-body">
              	<div class="col-xs-12">
                <div class="media-heading">{{ text_gift_voucher }}</div>
                <a class="optionLink pointer text-right" onclick="toggleOptions('xoptions{{ countOptions }}')"><i class="fa fa-info-circle" aria-hidden="true"></i></a>
                <div class="clearfix"></div>  	
              	<div class="text-left width50"><span class="is_total">{{ voucher.amount }}</span></div>
              	
               <div class="clearfix"></div>  
               <div class="text-left"><div class="text-muted">      	
               <div style="display: none;" id="xoptions{{ countOptions }}">
               <div class="text-left"><span>{{ voucher.description }}</span></div>
               </div>
               </div> 
               </div> 
               <div class="clearfix"></div>			
            </div>
            </div>
            </div>
            </div>
            {% set countOptions = countOptions + 1 %} 
            {% endfor %}
            </div>
            </div>
            </div>
             {% endif %}
			</div>		
			<div class="col-md-6">
				<div class="panel panel-green1 totalspanel">              
				<div class="panel-heading"><i class="fa fa-money" aria-hidden="true"></i>&nbsp;{{ text_totals }}- {{ total_balance }}</div>
				<div id="xtotals-content">    
				<table class="table total_payment">
	            {% for total in totals %} 
    	            <tr>
    					<td class="text-left">{{ total.title }}</td>
    					<td class="text-right"><b>{{ total.text }}</b></td>
    				</tr>
	             {% endfor %}
	          	</table>
				</div>
				</div>	
			</div>
    		{% if display_continue %} 	
    		<div class="col-md-12">
    		<div class="buttons">
    					<a href="{{ continue }}" class="btn btn-success width100">{{ button_continue }}</a>
    				</div>
    		</div>
    		{% endif %} 	
		</div>
		</div>	
		</div>
	</div>
</div>
<script type="text/javascript">
function toggleOptions(id){
	$('#'+id).toggle();	
}
$(document).delegate('.agree', 'click', function(e) {
	e.preventDefault();
	$('#modal-agree').remove();
	var element = this;
	$.ajax({
		url: $(element).attr('href'),
		type: 'get',
		dataType: 'html',
		beforeSend: function() {
			$(element).append(' <i class="fa fa-circle-o-notch fa-spin"></i>');
		},
		success: function(data) {
			html  = '<div id="modal-agree" class="modal xmargin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
			html += '  <div class="modal-dialog">';
			html += '    <div class="modal-content">';
			html += '      <div class="modal-header">';
			html += '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
			html += '        <h4 class="modal-title">' + $(element).text() + '</h4>';
			html += '      </div>';
			html += '      <div class="modal-body">' + data + '</div>';
			html += '    </div';
			html += '  </div>';
			html += '</div>';
			$('body').append(html);
			$('#modal-agree').modal('show');
			$('.fa-spin').remove();
		}
	});
});
</script>
{{ xfooter }}