{% extends 'themes/'~layout_dir~'/layout.html' %}

{% block body %}


<style>

</style>


<div class="row">
 
   <div class="fixed-action-btn horizontal click-to-toggle hide-on-med-and-up">
    <a class="btn-floating btn-large {{themebasiccolor}}">
      <i class="material-icons">menu</i>
    </a>
    <ul>
	  
	  {% for actionbutton in action_buttons %}
	  	<li><a class="btn-floating {{actionbutton.color}}" href="{{app.request.requestUri}}action/{{actionbutton.id}}">{{actionbutton.label}}{% if actionbutton.icon!="" %} <i class="material-icons large left">{{actionbutton.icon}}</i>{% endif %}</a></li>
	  {% endfor %}  
	    
	  {% set actions_count = 0 %}  
	  {% if pdf_download_enabled is defined and pdf_download_enabled and app.download_enabled %}
	  {% set actions_count = actions_count+1 %}    
      <li><a class="btn-floating red" href="{{app.request.requestUri}}download-pdf"><i class="material-icons">picture_as_pdf</i></a></li>
      {% endif %}
      {% if show_payment is defined and show_payment %} 
      {% set actions_count = actions_count+1 %}  
			<a class="btn {{themebasiccolor}} darken-2 waves-effect waves-light btn-small" href="javascript:$('#payment-mode-modal').modal('open');"><i class="material-icons left">picture_as_pdf</i>Pay Now</a>
	  {% endif %}
	
      {% if edit_enabled is defined and edit_enabled %}
      {% set actions_count = actions_count+1 %}
      <li><a class="btn-floating {{themebasiccolor}} darken-1" href="javascript:gotoPage('{{app.request.requestUri}}edit')"><i class="material-icons">mode_edit</i></a></li>
      {% endif %}
      {% if upload_document_enabled is defined and upload_document_enabled and app.upload_enabled %}
      {% set actions_count = actions_count+1 %}
      <li><a class="btn-floating {{themebasiccolor}}" href="javascript:$('#uploadmodal').modal('open');"><i class="material-icons">file_upload</i></a></li>
      {% endif %}
      {% if create_enabled is defined and create_enabled %}
      {% set actions_count = actions_count+1 %}
      <li><a class="btn-floating {{themebasiccolor}}" href="javascript:gotoPage('{{app.config.base_url}}/{{current_route}}/create')"><i class="material-icons">add</i></a></li>
      {% endif %}
      
      {% if actions_count is defined and actions_count<4 %}
      <li><a class="btn-floating {{themebasiccolor}}" href="javascript:gotoPage('{{app.config.base_url}}/{{current_route}}/')"><i class="material-icons">keyboard_backspace</i></a></li>
      {% endif %}
      
    </ul>
  </div>
  
    <div class="col s12 hide-on-small-only">
	  
	    <a class="btn {{themebasiccolor}} waves-effect waves-light btn-small" href="javascript:history.back()"><i class="material-icons left">keyboard_backspace</i>{{"Go Back"|trans}}</a>
 	
 	{% if pdf_download_enabled is defined and pdf_download_enabled and app.download_enabled %} 
			<a class="btn {{themebasiccolor}} waves-effect waves-light btn-small" href="{{app.request.requestUri}}download-pdf"><i class="material-icons left">picture_as_pdf</i>{{"Download PDF"|trans}}</a>
	{% endif %}
	
	
	{% if show_payment is defined and show_payment %} 
			<a class="btn {{themebasiccolor}} darken-2 waves-effect waves-light btn-small" href="#payment-mode-modal"><i class="material-icons left">picture_as_pdf</i>Pay Now ({{record[module_config["payment"]["amount_field"]]}} {{payment_currency_symbol}})</a>
	{% endif %}
	
 	{% if edit_enabled is defined and edit_enabled %} 		
			<a class="btn {{themebasiccolor}} darken-1 waves-effect waves-light btn-small" href="{{app.request.requestUri}}edit"><i class="material-icons left">mode_edit</i>{{"Edit"|trans}}</a>		
	{% endif %}
	
	
	
	{% if upload_document_enabled is defined and upload_document_enabled and app.upload_enabled %}
		<a class="btn {{themebasiccolor}} waves-effect waves-light btn-small" href="javascript:gotoPage('{{app.config.base_url}}/documents/create-relation/{{record['id']}}')"><i class="material-icons left">file_upload</i>{{"Upload Document"|trans}}</a>	
	{% endif %}	
	
	
	{% if create_enabled is defined and create_enabled %} 
			<a class="btn {{themebasiccolor}} waves-effect waves-light btn-small" href="javascript:gotoPage('{{app.config.base_url}}/{{current_route}}/create')"><i class="material-icons left">add</i>{{"Create New"|trans}}</a>
	{% endif %}

	{% if faq_relation_enabled is defined and faq_relation_enabled %} 
		<a class="btn {{themebasiccolor}} waves-effect waves-light btn-small" href="javascript:gotoPage('{{app.config.base_url}}/faq/create-relation/{{record['id']}}')"><i class="material-icons left">add</i>{{"Create New FAQ"|trans}}</a>
	{% endif %}
	
	{% for actionbutton in action_buttons %}
	  	<a class="btn {{actionbutton.color}} waves-effect waves-light btn-small btn-actionbutton" href="javascript:gotoPage('{{app.request.requestUri}}action/{{actionbutton.id}}/')">{{actionbutton.label}}{% if actionbutton.icon!="" %} <i class="material-icons large left">{{actionbutton.icon}}</i>{% endif %}</a>
	  {% endfor %} 
	
	
	</div>
	
	
	
	{% if upload_document_enabled is defined and upload_document_enabled and app.upload_enabled %}
	
			  <!-- Modal Structure -->
  <div id="uploadmodal" class="modal bottom-sheet">
    <div class="modal-content">
      <h4>{{"Upload Attachment"|trans}}</h4>
      <p>
	      <form id="upload-attachment-form" action="{{app.request.requestUri}}upload-attachment/" method="post" enctype="multipart/form-data">
		    <div class="file-field input-field">
		      <div class="btn {{themebasiccolor}} btn-medium ">
		        <span>{{"File"|trans}}</span>
		        <input type="file" name="attachments[]" multiple>
		      </div>
		      <div class="file-path-wrapper">
		        <input class="file-path validate" type="text" placeholder="{{'Upload one or more files'|trans}}">
		      </div>
		    </div>
		   
		  <br>
		  
		  <div class="col s12  center-align">
			 <a class="btn {{themebasiccolor}} waves-effect waves-light btn-small" href="javascript:$('#uploadmodal').modal('close');">{{"Cancel"|trans}}</a>
			<a class="btn {{themebasiccolor}} waves-effect waves-light btn-small" type="submit" href="javascript:submitForm('upload-attachment-form')">{{"Upload"|trans}}</a>
		  </div>
		   <br><br>
		   
		   </form> 
      </p>
    </div>
  </div>
		
	{% endif %}
	
	
	
	{% if show_payment is defined and show_payment %} 
	<style>
		#payment-mode-modal li:hover{
			background-color: rgba({{app.colors_map_rgb[themebasiccolor]}}, 0.5);
			cursor: pointer;
		}
	</style>
			<!-- Modal Structure -->
		  <div id="payment-mode-modal" class="modal bottom-sheet" style="max-height: 85%">
		    <div class="modal-content">
			    
			  <div class="payment-selection" >
				    
		      <h4>Choose a Payment Mode <br><small>TOTAL: {{record[module_config["payment"]["amount_field"]]}} {{payment_currency_symbol}}</small></h4>
		      
		      <ul class="collection">
              {% if app.config["payment_gateways"]["PayPal_Express"]["enabled"] %}
              <li class="collection-item avatar " onclick="jsvascript:gotoPage('{{app.request.requestUri}}pay-now/paypal-express');">
                <img src="https://www.paypalobjects.com/webstatic/paypalme/images/social/pplogo384.png" alt="" class="circle">
                <span class="title">PayPal Express Checkout</span>
                <p>Allow payment with PayPal accounts and multiple credit cards
                </p>
              </li>
              {% endif %}
              {% if app.config["payment_gateways"]["WorldPay"]["enabled"] %}
              <li class="collection-item avatar " onclick="$('.payment-selection').hide(); $('.credit-card-form').show(); $('#card-holder-name').focus()">
                <img src="https://pbs.twimg.com/profile_images/835128947260145664/AmlfT8ql_400x400.jpg" alt="" class="circle">
                <span class="title">Credit Card (WorldPay {% if app.config["payment_gateways"]["WorldPay"]["settings"]["use3Ds"] %}3D Secure{% endif %})</span>
                <p>Pay with your credit card securely through WorldPay 3D Secure payment processing
                </p>
              </li>
              {% endif %}
              
            </ul>
			</div>
            
            <div class="credit-card-form" style="display: none">
	            <h4>Credit Card Details <br><small>TOTAL: {{record[module_config["payment"]["amount_field"]]}} {{payment_currency_symbol}}</small></h4>
                <p>
	                <form method="post" action="{{app.request.requestUri}}pay-now/worldpay" id="paymentForm">
		                <div class="col s12 ">
			                <div class="card red" style="display: none">
								<div class="card-content white-text" id="paymentErrors" >
								</div>
			                </div>
		                </div>
		                <div class="col s12 m3">
			                <label for="name">Card Holder Full Name</label>
			                <input type="text" name="card-holder-name" id="card-holder-name" data-worldpay="name" >
			                <br>
		                </div>
		                
		                <div class="col s9 m3">
		                <label for="card_number">Card Number</label>
		                <input type="text" name="card_number" data-worldpay="number">
		                <br>
		                </div>
		                <div class="col s3 m2">
		                <label for="cvv">CVC</label>
		                <input type="text" name="cvc" data-worldpay="cvc">
		                </div>
		                
		                <div class="col s6 m2">
		                <label for="expire_month">Expire Month</label>
		                <select name="expire_month" data-worldpay="exp-month" class="browser-default">
			                {% for i in 1..12 %}
			                	<option value="{{i}}">{{i}}</option>
			                {% endfor %}
		                </select>
		                <br>
		                </div>
		                <div class="col s6 m2">
		                <label for="expire_year">Expire Year</label>
		                <select name="expire_year" data-worldpay="exp-year" class="browser-default">
			                {% for i in 2017..2030 %}
			                	<option value="{{i}}">{{i}}</option>
			                {% endfor %}
		                </select>
		                <br>
		                </div>
		                
	                </form>
                </p>
                <a class="btn {{themebasiccolor}}" onclick="$('.credit-card-form').hide(); $('.payment-selection').show(); ">Change Method</a>
                <a class="btn {{themebasiccolor}}" onclick="$('#paymentErrors').parent().hide(); $('#paymentForm').submit();">Pay Now</a>		      
		    </div>
		    
		    </div>
		    
		    <div class="modal-footer">
		      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">{{"Cancel"|trans}}</a>
		    </div>
		  </div>
	{% endif %}
	
	
	
	
	
	
</div>
<div class="row">
				<div class="col s12">
  	{% block detail_header %}

    {% endblock %}
      
	{% if content_field %}
		{% include 'themes/default/modules/PortalModule/details/details.content.html' %}
	{% else %}
		{% include 'themes/default/modules/PortalModule/details/details.blocks.html' %}
	{% endif %}
	</div>
	
	{% if inventory_block is defined and inventory_block %} 
		{% include 'themes/default/modules/PortalModule/details/details.inventory_block.html' %}
	{% endif %}
	
	{% include 'themes/default/modules/PortalModule/details/details.comments.html' %}

	{% block detail_related_pre %}

    {% endblock %}
 
 
	{% include 'themes/default/modules/PortalModule/details/details.related.html' %}
 
 		
	{% block detail_related_after %}

    {% endblock %}
	
	
	
	
  	
	{% block detail_footer %}

    {% endblock %}

  	
  
</div>

{% endblock %}

{% block footerscripts %}
<script type="text/javascript" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{{app.config.app_url}}/app/themes/default/resources/datatable.js"></script>
<script type="text/javascript" src="{{app.config.app_url}}/app/themes/default/resources/materialize.clockpicker.js"></script>
{% if true %}
<script src="https://cdn.worldpay.com/v1/worldpay.js"></script>
{% endif %}
<script>
	$(document).ready(function(){
		
		
		{% if app.config["payment_gateways"]["WorldPay"]["enabled"] %}
			var form = document.getElementById('paymentForm');

			Worldpay.useOwnForm({
			  'clientKey': '{{app.config["payment_gateways"]["WorldPay"]["settings"]["clientKey"]}}',
			  'form': form,
			  'reusable': false,
			  'callback': function(status, response) {
				
				$("#paymentErrors").parent().hide();  
			    document.getElementById('paymentErrors').innerHTML = '1';			    
			      console.log(response); 
			    
			    if (response.error) {         
				    console.log(response.error);  
				    var errorHtml = "";
				    if(response.error.message.constructor === Array){
					    for(errorMessage in response.error.message){
						    errorHtml+=response.error.message[errorMessage]+"<br>";
					    }
				    }
				    else errorHtml = response.error.message;
			      //Worldpay.handleError(form, document.getElementById('paymentErrors'), response.error); 
			      $("#paymentErrors").html(errorHtml).parent().show();
			    } else {
				 
			      var token = response.token;
			      payNowAjax("worldpay",{token: response.token});
			      Worldpay.formBuilder(form, 'input', 'hidden', 'token', token);
			      
			      //form.submit();
			    }
			  }
			});
		{% endif %}
		
		
		function payNowAjax(gatewayname,params){
			$(".se-pre-con").fadeIn("slow");
			if(typeof params === "undefined") params = {};
			params["card-holder-name"]=$("#card-holder-name").val();
			console.log(params);
			$.post( window.location+"pay-now/"+gatewayname+"/", params).done(function( data ) {
				var jsondata = JSON.parse(data);
				console.log(data);
	
				if(jsondata.response=="redirect"){
					
					$form = $('<form id="3DSFormRedirect"></form>');
					$form.attr("action",jsondata.redirectURL);
					$form.attr("method","POST");
					$form.append('<input type="hidden" name="PaReq" value="'+jsondata.oneTime3DsToken+'">');
					$form.append('<input type="hidden" name="TermUrl" value="'+window.location+'process-payment/'+gatewayname+'/">');
					$('body').append($form);
					$("#3DSFormRedirect").submit();
					return false;
				}
				else if(jsondata.response=="success"){
					window.location.reload();
				}				
				else{
					$("#paymentErrors").html(jsondata.full_resp.paymentStatusReason);
					$("#paymentErrors").parent().show();
					$(".se-pre-con").hide();
				}
				
			    
			}).fail(function(data) {
				console.log(data);
			    $("#paymentErrors").html("Payment Error");
				$("#paymentErrors").parent().show();
				$(".se-pre-con").hide();
			});
		}
		
		
		if($(".commentslist").length) $(".commentslist").scrollTop($(".commentslist")[0].scrollHeight);
	
	    $('.collapsible-block').collapsible({
	      accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
	    });
	    $( ".collapsible-header" ).click(function() {
		      $(".more",this).toggle()
		      $(".less", this).toggle()
		      $(this).toggleClass("{{themebasiccolor}}");
		  });
		  
		$("#send-comment").click(function(e){
			$.post( window.location+"add-comment/", 
				{ commentcontent: $("#newCommentContent").val() }).done(function( data ) {
				var jsondata = JSON.parse(data);
			    console.log(jsondata);
			    $(".commentslist").append('<li class="collection-item " data-id="'+jsondata.id+'"><span class="new badge white"><a class="delete-comment" href="javascript:void(0);">delete</a></span><span class="new badge white"><a class="edit-comment" href="javascript:void(0);">edit</a></span><span class="new badge brown">'+jsondata.customer+'</span> <span class="new badge white brown-text">Now</span> <span class="textarea1">'+jsondata.commentcontent+'</span><br></li>');
			    
			    $(".commentslist").scrollTop($(".commentslist")[0].scrollHeight);
			    
			    $("#newCommentContent").val("");
			});
			
		});  

		$(document).on('click', ".edit-comment", function(e){
			var commentRow = $(this).closest('.collection-item');
			var commentId = commentRow.attr('data-id');
			var commentMessage = commentRow.find('.textarea1').text();

			if (commentRow.find('.materialize-textarea').length) {
				commentRow.find('.textarea1').html(commentRow.find('.materialize-textarea').val().replace(/(\r\n|\r|\n)/g, '<br>$1'));
			} else {
				commentRow.find('.textarea1').html('<b>{{"Edit Comment"|trans}}</b></br><textarea class="materialize-textarea">' + commentMessage + '</textarea><br/><a href="javascript:void(0);" class="waves-effect waves-light btn btn-small black save-comment">{{"Save"|trans}}<i class="material-icons right">send</i></a></br>');
			}
		});

		$(document).on('click', ".save-comment", function(e){
			var commentRow = $(this).closest('.collection-item');
			var commentId = commentRow.attr('data-id');
			$.post( window.location+"edit-comment/" + commentId, 
				{ commentcontent: commentRow.find('.materialize-textarea').val() }).done(function( data ) {
				var jsondata = JSON.parse(data);
			    commentRow.replaceWith('<li class="collection-item " data-id="'+jsondata.id+'"><span class="new badge white"><a class="delete-comment" href="javascript:void(0);">delete</a></span><span class="new badge white"><a class="edit-comment" href="javascript:void(0);">edit</a></span><span class="new badge brown">'+jsondata.customer+'</span> <span class="new badge white brown-text">Now</span> <span class="textarea1">' + jsondata.commentcontent.replace(/(\r\n|\r|\n)/g, '<br>$1') + '</span><br></li>');
			    
			    $(".commentslist").scrollTop($(".commentslist")[0].scrollHeight);
			});
		});  
		
		$(document).on('click', ".delete-comment",function(e){
			var commentRow = $(this).closest('.collection-item');
			var commentId = commentRow.attr('data-id');
			$.post( window.location+"delete-comment/" + commentId).done(function( data ) {
				var jsondata = JSON.parse(data);
			    console.log(jsondata);
				commentRow.remove();
			    $(".commentslist").scrollTop($(".commentslist")[0].scrollHeight);
			});
			
		});  
		
		$(".slide-thumb").click(function(){
			$(this).closest(".myc-slider").find(".slider-image").attr("src",$(this).attr("src"));
		});
		
		$(document).on('click', '.btn-actionbutton', function(e) {
			$(this).addClass('disabled');
		});
		
		
		$('.datepicker').pickadate({
			formatSubmit: 'yyyy-mm-dd',
		    selectMonths: true, // Creates a dropdown to control month
		    selectYears: true // Creates a dropdown of 15 years to control year
		  });

		  
	  });
	  
	  
	  
	  
	
	  
</script>
{% endblock %}