<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
      {% block head %}
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="{{app.config.app_url}}/app/themes/default/resources/materialize/css/materialize.min.css"  media="screen,projection"/>
			{% include 'themes/default/resources/style.css.html' %}
      
      
      <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css"  media="screen,projection"/>
      <link type="text/css" rel="stylesheet" href="{{app.config.app_url}}/app/themes/default/resources/sweetalert2/sweetalert2.min.css" />

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <title>Configuration - MYC Customer Portal</title>
      
      <style >
	.collection {
    overflow: visible;
  }
  
  .iconselect{
	  padding: 10px !important;
	  cursor: pointer;
  }
  .iconselect:hover{	  
	  background-color: lightgray;
  }
    
  .iconselect.selected{
	 background-color: lightgray; 
  }
  .general-settings-tab .collection-item{
	  min-height: 68px;
  }
  .saved-condition{
	  
  }
  
  .details_content{
	  width: 95%;
  }
  .details_content a{
	  margin-bottom: 5px;  
  }
  
</style>
      
      {% endblock %}
    </head>

    <body>
    <header>
      {% block navigation %}
      
      <nav class="{{themebasiccolor}} top-nav" >	    
	    <div class="nav-wrapper" style="margin:0px 10px 0px 10px;">
	      <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
	      <a href="#" class="brand-logo light">
		  	{{page_title}}
		  </a>
		  
	      <ul id="nav-mobile" class="right hide-on-med-and-down">      
	        <li>{{app["config"]["admin_email"]}}</li>
	        <li><a href="{{app.config.base_url}}/myc-config/logout">{{'LBL_SIGN_OUT'|trans}}</a></li>
	      </ul>
	    </div>
	  </nav>


<ul id="slide-out" class="side-nav fixed" style="width:240px" >
      <div class="valign-wrapper side-logo logo "><a class="brand-logo valign" href="#!"><img src="{{app.config.app_url}}/app/themes/default/resources/images/logo-myc.png"></a></div>
      <li class="diff {% if page_id == "general" %}active{% endif %}" ><a style="font-size: 1.1rem; font-weight: 300;" class="btn-sidenav waves-effect waves-{{app.config.theme_admin_color}}" href="javascript:gotoPage('{{app.config.base_url}}/myc-config/')">
	      <i style="font-size: 1.5rem" class="material-icons small">settings</i>&nbsp;&nbsp;General Configuration</a></li>
	  
	  {% if app.licensed %}
	  <li class="diff {% if page_id == "customer-profile" %}active{% endif %}" ><a style="font-size: 1.1rem; font-weight: 300;" class="btn-sidenav waves-effect waves-{{app.config.theme_admin_color}}" href="javascript:gotoPage('{{app.config.base_url}}/myc-config/customer-profile/')">
	      <i style="font-size: 1.5rem" class="material-icons small">account_circle</i>&nbsp;&nbsp;Customer Profile</a></li>
	      
	  	      
      {% for route,moduleinfo in configured_modules %}
	  		<li  class="{% if route == page_id %}active{% endif %}" >
	  			<a style="font-size: 1.1rem; font-weight: 300;"  class="btn-sidenav waves-effect waves-{{themebasiccolor}}" href="javascript:gotoPage('{{app.config.base_url}}/myc-config/{{route}}/')" >
	  			{% if moduleinfo.icon is defined %}
	  				<i style="font-size: 1.5rem" class="material-icons small">{{moduleinfo.icon}}</i>&nbsp;&nbsp;
	  			{% endif %}
	  			{{ moduleinfo.route.label|trans }}	
	  			</a>
	  		</li>
	  {% endfor %}
	  
	  <div class="col s-12 center-align">
		<a href="#module_config_modal" class="modal-trigger waves-effect waves-light btn green btn-small"><i class="material-icons small left">add</i>Add Module</a>
	</div>
     {% endif %}
    </ul>
	
    </header>   
     
     
      {% endblock %}
    <main >
      
      <div style="margin:0px 10px 0px 10px;">
      
      {% for message in app.session.getFlashBag.get('error_message') %}
      	<div class="row" style="margin-bottom:0px">
	        <div class="col s12 m12">
		        <div class="card red">
		            <div class="card-content white-text">
				    	{{ message | raw}}
		            </div>
		        </div>
	        </div>
      	</div>
	  {% endfor %}
	  
	  {% for message in app.session.getFlashBag.get('info_message') %}
      	<div class="row" style="margin-bottom:0px">
	        <div class="col s12 m12">
		        <div class="card blue">
		            <div class="card-content white-text">
				    	{{ message | raw }}
		            </div>
		        </div>
	        </div>
      	</div>
	  {% endfor %}
	  
	  {% for message in app.session.getFlashBag.get('success_message') %}
      	<div class="row" style="margin-bottom:0px">
	        <div class="col s12 m12">
		        <div class="card green">
		            <div class="card-content white-text">
				    	{{ message | raw }}
		            </div>
		        </div>
	        </div>
      	</div>
	  {% endfor %}
	  
	  <div class="bodyContent">
      {% block body %} {% endblock %}
	  </div>
      
      
      </div>
      
      <style>
	      .mycloader{
		      position: fixed;
		      top: 0;
		      left: 0;
		      bottom: 0px;
		      height: 100%;
		      width: 100%;
		      z-index: 99999;
		      background-color: black;
		      opacity: 0.7;
	      }
	      .mycloader > div{
		      left: 45%;
	      }
	      .side-nav li .btn-sidenav i{
		      line-height: 64px;
	      }
	      
	      .side-nav li{
		      padding: 0px;
	      }
	      
	      .brand-logo i, .button-collapse i {
		      line-height: 122px !important;
		      height: 122px !important;
	      }
	      
	      .side-nav .btn-sidenav {
		      padding: 0 12px !important;
	      }
	      .side-nav li .btn-sidenav i{
		      margin: 0px !important;
	      }
	      
	      .side-nav li.active {
			    background-color: rgba(0,0,0,0.12);
		  }
		  
		  
		   {% if view_name is defined and view_name=="popup" %}
	      		.side-nav{
		      		display: none;
	      		}
	      		header,main,footer{
		      		padding-left: 0px;
	      		}
	      		.open-sidebar{
		      		display: none;
	      		}
	      {% endif %}
	      
      </style>
      
      <div class="valign-wrapper mycloader center-align" >

	      <div class="valign preloader-wrapper big active">
		    <div class="spinner-layer spinner-yellow-only">
		      <div class="circle-clipper left">
		        <div class="circle"></div>
		      </div><div class="gap-patch">
		        <div class="circle"></div>
		      </div><div class="circle-clipper right">
		        <div class="circle"></div>
		      </div>
		    </div>
		  </div>
    
      </div>
      
      
      
      <!-- Modal Structure -->
	  <div id="module_config_modal_bk" class="modal modal-fixed-footer">
	       
	    <div class="modal-content">
	      
	      <ul class="collection">
     				      {% for route,moduleinfo in configured_modules %}
					      	<li class="collection-item" style="cursor: pointer" onclick="gotoPage('{{app.config.base_url}}/myc-config/{{route}}/init-config/')">{{route|trans}}</li>
						  	{% endfor %}
				      </ul>
	    </div>
	    <div class="modal-footer">
	      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Cancel</a>
	    </div>
	  </div>
	  
	  <!-- Modal Structure -->
	  <div id="module_config_modal" class="modal bottom-sheet" >
	       
	    <div class="modal-content">
	      <h4>Configure Module</h4>
		  <p>
			      <div class="row">
			        <div class="input-field col s4">
					    <select class="browser-default" id="new-module-picklist">
						    <option value="" disabled selected>Choose the module</option>
						    {% for module in configurable_modules %}
								<option value="{{module.name}}" module-label="{{module.name}}">{{module.name}}</option>
						  	{% endfor %}							  	
					    </select>
					</div>
			        <div class="input-field col s4">
				        <label for="route">Module Route (URL)</label>
			          <input id="new-module-route" type="text" readonly="">		          
			        </div>
				        
			      	<div class="input-field col s4">
				        <label for="route">Module Label</label>
			          <input id="new-module-label" type="text" readonly="">		          
			        </div>
			      </div>

		  </p>
	    </div>
	    <div class="modal-footer">
	      <a href="#!" class="waves-effect waves-green btn green " onclick="initModuleConfig()">Configure Module</a>
	      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Cancel</a>
	    </div>
	  </div>
      
      
      
      
    </main>
    
      	  {% block footer %}

          {% endblock %}
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="{{app.config.app_url}}/app/themes/default/resources/jquery-2.1.1.min.js"></script>
      <script src="{{app.config.app_url}}/app/themes/default/resources/jquery-ui-1.11.2.min.js"></script>
      <script type="text/javascript" src="{{app.config.app_url}}/app/themes/default/resources/materialize/js/materialize.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>
      <script type="text/javascript" src="{{app.config.app_url}}/app/themes/default/resources/jquery-chosen-sortable.min.js"></script>
      <script type="text/javascript" src="{{app.config.app_url}}/app/themes/default/resources/chosen.order.jquery.min.js"></script>
      
      <script type="text/javascript" src="{{app.config.app_url}}/app/themes/default/resources/sweetalert2/sweetalert2.min.js"></script>
      
      
      
      <script>
      $(function(){
      	  $('.mycloader').hide();
	      $(".button-collapse").sideNav();
	      $(".chosen-select").chosen({width: "95%"}); 
	      $('.chosen-select').addClass('chzn-sortable').chosenSortable();
	      $('select:not(.chosen-select)').material_select();
	      
	      $('.modal').modal();
	      
	      $(".chosen-select[sort-order]").each(function( index ) {
		      var fieldOrder = $(this).attr("sort-order");
		      fieldOrder = fieldOrder.split(",");
			  $(this).setSelectionOrder(fieldOrder,false);

		  });
		  
		  
		  $(".search-choice").each(function( index ) {
		      
		      /*
		      if(/(.*)\*+$/.test($(this).find("span").html())){
			  
				  $(this).find(".search-choice-close").hide();
				  $(this).css("padding","3px 5px 3px 5px");	

			  }
			  */
		  });
		  
	      
	  });
	  
	  
	  function errorCard(message){
			return '<div class="col s12 m12 card-message"><div class="card-panel red"><span class="white-text">'+message+'</span></div></div>';
		}
		
		function infoCard(message){
			return '<div class="col s12 m12 card-message"><div class="card-panel grey lighten-1"><span class="white-text">'+message+'</span></div></div>';
		}

		
 		function slugify (text) {
	 		
		  const a = 'àáäãâèéëêìíïîòóöôùúüûñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;'
		  const b = 'aaaaaeeeeiiiioooouuuuncsyoarsnpwgnmuxzh------'
		  const p = new RegExp(a.split('').join('|'), 'g')
		
		  return text.toString().toLowerCase()
		    .replace(/\s+/g, '-')           // Replace spaces with -
		    .replace(p, c =>
		        b.charAt(a.indexOf(c)))     // Replace special chars
		    .replace(/&/g, '-and-')         // Replace & with 'and'
		    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
		    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
		    .replace(/^-+/, '')             // Trim - from start of text
		    .replace(/-+$/, '')             // Trim - from end of text
		}
		
		
	  function gotoPage(url){
		  $('.mycloader').show();
		  window.location=url;
	  }
	  
	  function submitForm(formid){
		  $('.mycloader').show();
		  $("#"+formid).submit();
	  }
	  
	  
	  $("#new-module-picklist").change(function(){
		  if($(this).val()!=""){
			var moduleLabel = $('option:selected', this).attr('module-label');
		  	var suggestedSlug = slugify(moduleLabel);
		  	$("#new-module-route").removeAttr("readonly").val(suggestedSlug);
		  	$("#new-module-label").removeAttr("readonly").val(moduleLabel);
		  }
		  else $("#new-module-route").attr("readonly","readonly");
		  
		  $("#new-module-label").focus();
		  $("#new-module-route").focus();
	  });
	  
	  var prevtext;
	  $("#new-module-route").keyup(function(){
		  if($(this).val()==prevtext) return true;
		  else prevtext = $(this).val();
		  
		  var slugval = slugify($(this).val());
		  if(slugval != $(this).val())
		  	$(this).val(slugify($(this).val()));
	  });
	
	  function initModuleConfig(){
		  
		$.post("{{app.config.base_url}}/myc-config/check-route/", { route: $("#new-module-route").val() }).done(function(data){		
		
			console.log(data);
			var response = jQuery.parseJSON(data);
			
			if(response.result==="exists"){
				$("#module_config_modal .modal-footer").find(".card-message").remove();
				$("#module_config_modal .modal-footer").prepend(errorCard("This route is yet used, please use a different route!"));
				return false;
			}			
			else $.post("{{app.config.base_url}}/myc-config/init-config/", { route: $("#new-module-route").val(), module: $("#new-module-picklist").val(), label: $("#new-module-label").val() }).done(function(data){			
				gotoPage('{{app.config.base_url}}/myc-config/'+$("#new-module-route").val()+'/');
				
			});
		});
		
	  }
	
	 
      </script>
      
      
      
      {% block footerscripts %}

      {% endblock %}
      
    </body>
</html>
