{% 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 %}
	  {% 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 blue darken-2 waves-effect waves-light btn-small" href="{{app.request.requestUri}}pay-now"><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 yellow 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 %}
      {% set actions_count = actions_count+1 %}
      <li><a class="btn-floating green" 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 blue" 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 grey" 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 grey waves-effect waves-light btn-small" href="javascript:gotoPage('{{app.config.base_url}}/{{current_route}}/')"><i class="material-icons left">keyboard_backspace</i>Go Back</a>
 	
 	{% if pdf_download_enabled is defined and pdf_download_enabled %} 
			<a class="btn red waves-effect waves-light btn-small" href="{{app.request.requestUri}}download-pdf"><i class="material-icons left">picture_as_pdf</i>Download PDF</a>
	{% endif %}
	
	{% if show_payment is defined and show_payment %} 
			<a class="btn blue 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>
	<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">
		    <div class="modal-content">
		      <h4>Choose a Payment Mode <br><small>TOTAL: {{record[module_config["payment"]["amount_field"]]}} {{payment_currency_symbol}}</small></h4>
		      
		      <ul class="collection">
              
              <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>
              
            </ul>
		      
		    </div>
		    <div class="modal-footer">
		      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
		    </div>
		  </div>
	{% endif %}
	
	
 	{% if edit_enabled is defined and edit_enabled %} 		
			<a class="btn yellow darken-1 waves-effect waves-light btn-small" href="{{app.request.requestUri}}edit"><i class="material-icons left">mode_edit</i>Edit</a>		
	{% endif %}
	
	
	{% if upload_document_enabled is defined and upload_document_enabled %}
		<a class="btn green waves-effect waves-light btn-small" href="javascript:$('#uploadmodal').modal('open');"><i class="material-icons left">file_upload</i>Upload Document</a>	
		
			  <!-- Modal Structure -->
  <div id="uploadmodal" class="modal bottom-sheet">
    <div class="modal-content">
      <h4>Upload Attachment</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</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">
		      </div>
		    </div>
		   
		  <br>
		  
		  <div class="col s12  center-align">
			 <a class="btn red waves-effect waves-light btn-small" href="javascript:$('#uploadmodal').modal('close');">Cancel</a>
			<a class="btn green waves-effect waves-light btn-small" type="submit" href="javascript:submitForm('upload-attachment-form')">Upload</a>
		  </div>
		   <br><br>
		   
		   </form> 
      </p>
    </div>
  </div>
		
	{% endif %}
	
	
	
	{% if create_enabled is defined and create_enabled %} 
			<a class="btn blue 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</a>
	{% endif %}
	
	
	{% for actionbutton in action_buttons %}
	  	<a class="btn {{actionbutton.color}} waves-effect waves-light btn-small" 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>
</div>
<div class="row">
				<div class="col s12">
  	{% block detail_header %}

    {% endblock %}
      
	{% include 'themes/default/modules/PortalModule/details/details.blocks.html' %}
	
	</div>
	
	{% if inventory_block is defined and inventory_block %} 
		{% include 'themes/default/modules/PortalModule/details/details.inventory_block.html' %}
	{% endif %}
	
	
	{% if edit_enabled is defined and edit_enabled %} 
		
		<div class="col s12 right-align mt30 mb30">
			<a class="btn {{themebasiccolor}} waves-effect waves-light btn-small" href="{{app.request.requestUri}}edit"><i class="material-icons large left">mode_edit</i> Edit</a>
		</div>
	{% 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>
	$(document).ready(function(){
		
		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 "> <span class="new badge brown">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("");
			});
			
		});  
		
		$(".slide-thumb").click(function(){
			$(this).closest(".myc-slider").find(".slider-image").attr("src",$(this).attr("src"));
		})

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