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


{% block body %}
<link type="text/css" rel="stylesheet" href="{{app.config.app_url}}/app/themes/default/resources/materialize.clockpicker.css"/>

<div class="row">
	{% include 'themes/default/modules/PortalModule/module.actions.html' %}
</div>

<div class="row">
 	
  	{% block create_header %}
    {% endblock %}
     
    <form method="post" id="submit_form">
	
	{% if record["id"] is defined %}<input type="hidden" name="record[id]" value="{{record['id']}}">{% endif %}
	    
  	{% if create_structure is defined and  create_structure|length > 0 %}
  	
	  	{% for block in create_structure %}
	          	<div class="col s12 m{{block.size}}">
			  	  <div class="card orange">
				  	  <ul class="collection with-header ">
				        <li class="collection-header"><b>{{block.label|trans}}</b></li>
				        {% for fieldname in block.fields %}
			            	<li class="collection-item"><b>{{fieldname|trans}}:</b> {{record[fieldname]|trans}}</li>
			            {% endfor %}
				      </ul>
			  	  </div>
			  	</div>
	    {% endfor %}
	    
    {% else %}
   	
   	
   	
   	
   	 <ul class="collapsible-block popout detailstab" data-collapsible="expandable">
   	  
	    {% for block,fields in modlayout %}
	    	
	    	{% set totvisiblefields = '0' %}
	    	
	    	{% for fieldname in fields %}
				{% if create_fields[fieldname] is defined %} 
					{% set totvisiblefields = totvisiblefields + 1%}
				{% endif %}
			{% endfor %}
			
	        {% if totvisiblefields > 0 %}
		        <li>
					<div class="col s12 m12"> 
						<h4>{{block|trans|raw}}</h4>
					</div>
				  	{% set issetEven = false %}
				  	
				  	{% if fields|length > 1 %} {% set colsize = '6' %} {% else %} {% set colsize = '12' %} {% endif %}

				  	<div class="col s12 m{{colsize}}">
				  	  <div class="card">
					  	  <ul class="collection"  style="overflow: visible">
						  	 
					        {% for fieldname,finfo in create_fields %}
					        
					        	{% if loop.index is odd and fieldname in fields %}
					        		<li class="collection-item "> 
					        		{% set vars = {'fieldinfo': create_fields[fieldname]} %}
				            		{% include 'themes/default/modules/PortalModule/create_edit_fields.html' with vars %}	
					        		</li>
				            	{% else %}
				            		{% set issetEven = true %}
				            	{% endif %}
					        
				            {% endfor %}
					      </ul>
				  	  </div>
				  	</div>
				  	
				  	{% if issetEven %}
				  	<div class="col s12 m{{colsize}} ">
				  	  <div class="card">
					  	  <ul class="collection" style="overflow: visible">
						  	  
					        {% for fieldname,finfo in create_fields %}
				            	{% if loop.index is even and fieldname in fields %}
				            		<li class="collection-item "> 
				            		{% set vars = {'fieldinfo': create_fields[fieldname]} %}
				            		{% include 'themes/default/modules/PortalModule/create_edit_fields.html' with vars %}	
				            		</li>				            				
				            		{% endif %}
				            {% endfor %}
				            
					      </ul>
				  	  </div>
				  	</div> 
				  	{% endif %}
	
					<div class="clearfix"></div>
					       
		        </li>		        
			{% endif %}
	    {% endfor %}
		
		</ul>

   			
	{% endif %}
	
	<div class="col s12 m12 center-align">
		<a class="btn {{themebasiccolor}} waves-effect waves-light btn-medium" href="javascript:gotoPage('{{app.config.base_url}}/{{current_route}}/')">{{"Cancel"|trans}}</a>
		<a class="btn {{themebasiccolor}} waves-effect waves-light btn-medium" id="submit_form_btn">
		{% if record["id"] is defined %}{{"Save"|trans}}{% else %}{{"Create"|trans}}{% endif %}</a>
	</div>
	
    </form>
	  	
	{% block create_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>


<script>
	

	$(document).ready(function(){
		
		
		$("#submit_form_btn").click(function(){
			
			var isValid = true;
			
			$("#submit_form").find("input:required,select:required,textarea:required").each(function(){
				if($(this).attr("type")!="checkbox" && ($(this).val()=="" || $(this).val()===undefined)){
					$(this).addClass("invalid");
					isValid = false;
				}
				else if($(this).attr("type")=="checkbox" && ($(this).attr("checked")==false || $(this).attr("checked")==undefined)){
					$(this).addClass("invalid");
					isValid = false;
				}
				else $(this).removeClass("invalid");
			});
			
			if(isValid){
				$("#submit_form_btn").attr("disabled","disabled").addClass("disabled");
				$(".se-pre-con").fadeIn("fast");				
				$("#submit_form").submit();
			}
			else {
				Materialize.toast('{{"LBL_ALL_FIELDS_REQUIRED"|trans}}', 2000, 'rounded error-toast');
			}
			
		});
		
		
		$('.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
		  });
		  
		  $('.timepicker').pickatime({});
  
  
$('.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()
		  });
		  
	  });
	  
</script>
{% endblock %}