{% set today = date() %}

<link href="/css/foundation-datepicker.css" rel="stylesheet" type="text/css" />

<style>
.att-cre-add-model {
    border-color: red;
    border-radius: 1rem;
    border-width: 0.15rem;
	padding: 1.5rem;
	width: 40%;
}
.att-cre-add-model, 
.att-cre-add-model h2, 
.att-cre-add-model .form-text {
	background: #ffffff none repeat scroll 0 0;
	font-family: "Raleway",sans-serif !important;
	font-size: 0.9rem;
	font-weight: normal;
	line-height: 1rem;
	color: #6d6e70 !important;
}
.att-cre-add-form-container {
    border-radius: 5px;
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding: 1rem;
}
.error-message {
	display: block;
}
.att-cre-add-model h2 {
    display: inline;
    font-size: 2rem;
    padding: 0.5rem;
    z-index: 100;
}
.att-cre-add-logo {
	vertical-align: middle;
	width: 5rem;
}
.att-cre-add-model select,
.att-cre-add-model select option,
.att-cre-add-model input[type="text"],
small.error {
    margin-left: auto;
    margin-right: auto;
    width: 25rem;
    max-width:25rem;
    height: 1.5rem;
    font-size: 1.2rem;
}

.close {
	background: #ff0000 none repeat scroll 0 0;
    border-radius: 12px !important;
    box-shadow: 1px 1px 3px #000 !important;
    color: #fffff0 !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    line-height: 25px !important;
    position: absolute !important;
    right: -13px !important;
    text-align: center !important;
    text-decoration: none !important;
    top: -13px !important;
    width: 24px !important;
    -moz-box-shadow: 1px 1px 3px #000 !important;
	-webkit-box-shadow: 1px 1px 3px #000 !important;
	-webkit-border-radius: 12px !important;
	-moz-border-radius: 12px !important;
}
.close:hover {
	background: #ffb2b2 none repeat scroll 0 0;
	color: #FF0000 !important; 
}
select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
.datepicker th {
    background: #ff6666 none repeat scroll 0 0;
    color: white;
}
 
::-webkit-input-placeholder {  color: #6d6e70 !important; font-size: 1.2rem; }
:-moz-placeholder { color: #6d6e70 !important; font-size: 1.2rem; }
::-moz-placeholder { color: #6d6e70 !important; font-size: 1.2rem; }
:-ms-input-placeholder { color: #6d6e70 !important; font-size: 1.2rem; }
</style>

<script src="/js/foundation-datepicker.min.js" type="text/javascript" charset="utf-8" ></script>

<script type="text/javascript" charset="utf-8">         
	$(document).ready(function(){
		$('#att-cre-add_form').submit(function( e ) {	
			e.preventDefault();

			var invalid_fields = $(this).find('[data-invalid]');
	                	
	        if( invalid_fields.length === 0 ){ 
	  		    var serialized = $( this ).serializeArray();
				add_cre(serialized);
			} 
	    });	
		
		$('#datepicker').fdatepicker({format: 'yyyy-mm-dd'});

		//Get Course Codes
   	    var course_code_menu = $.ajax({type: 'GET', url: '/att-cre/courses', data: '{}', contentType:'application/json'});
      	 
   	 	course_code_menu.done(function( data ) {
   	 		
          	window.course_codes = data;
            var $select = $('select[name="course_code"]'); 
            $select.find('option').remove(); 
            $select.append('<option value="">Course Code</option>');

            disabled = '';
            
            if(!jQuery.isEmptyObject(data)){
                $.each(data,function(key, course) 
                {
                	//Disable Course Codes
                	if(course['Course Code'] == 'ARCCPRFA')
                		disabled = 'disabled';
                	else
                		disabled = '';
                	
                    $select.append('<option value=' + course['Course ID'] + '  ' + disabled + ' >' + course['Course Code']  + ' - ' + course['Course Descripion'] + '</option>');
                });
            }

   	    });
   	 	
   	 	form_reset (null);
		
		$(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
			var modal = $(this);
			var abideForm = $(modal).find('form');	
			form_reset (abideForm);
			parent.table.destroy();
			parent.table = parent.drawTable();
		});
		
	});	
	
    function form_reset (abideForm) {
    	$( '#att-cre-add-message-container' ).hide();
    	$( '#att-cre-add-message' ).removeClass('warning label message-box').empty();
    	$( 'input[value="attuid"]' ).val('');
    	$( 'input[value="course_code"]' ).val('');
    	$( 'input[value="completion_date"]' ).val('{{ today|date('Y-m-d') }}');
		// Clear the error classes on divs and labels
		
		if(abideForm != null){
			abideForm.children('div').removeClass('error');
			abideForm.children('label').removeClass('error');
			// Reset form abide validation
			if(! jQuery.isEmptyObject(abideForm[0]) )
				abideForm[0].reset();     
		
		}
    }
    
	function add_cre( serialized ) {

		  var i = '';
		  var payload = {};
		  var url = '/att-cre/user';
		  var $action = $(document.activeElement);

		  if ($action.length && $action.is('input[type="submit"]') && $action.is('[name]'))
			  payload['action'] = $action.get(0).name;
		  
		  for(s in serialized){
			  payload[serialized[s]['name']] = serialized[s]['value']
		  }

		  $.ajax( {
				type: 'POST',
				url: '/att-cre/user',
				data: JSON.stringify(payload, null, 2),
				contentType: "application/json; charset=utf-8",
				dataType: "json",  // dataType of response is JSON
				success: function( response ) {
					$( '#att-cre-add-message-container' ).show();
					$( '#att-cre-add-message' ).addClass('success label message-box').html('CRE for AT&T User '+response['attuid']+'  Added Successfully');
				},
				error: function( response ) {
					$( '#att-cre-add-message-container' ).show();
					$( '#att-cre-add-message' ).addClass('warning label message-box').html(response['message']);

				}
		
		   });
	}
</script>
        					
<div id="att_cre_add_modal" class="att-cre-add-model reveal-modal large-10 small-10 medium-10 columns" data-reveal data-reveal-init data-options="close_on_background_click:false; close_on_esc: false; multiple_opened:true;">
	<a class="close-reveal-modal close">X</a>
	<div align="center"><!-- <img  style="display:inline-block;margin-top:-0.75rem;width:4%;" src="/images/redcross-certificate.png" /> --> <h2>Course Record Entry (CRE)</h2></div>
	
	<form id="att-cre-add_form" data-abide>
		<div class="att-cre-add-form-container effect1">
			<div class="row">
				<div class="large-12 large-centered columns">
					<div id="att-cre-add-message-container" style="margin-left: 7%;margin-right: 12%; padding: 0.5rem;">
			        	<span id="att-cre-add-message" style="padding: 0.7rem;font-size: 1rem;width: 100%;text-align: left;"></span>
			        </div>					
				</div>
			</div>	
			<div class="row">
				<div class="small-12 small-centered columns">	     
					<input id="attuid" type="text" name="attuid" placeholder="Attuid" required />
					<small id="error-message" class="error error-message">Attuid is required.</small>
			  	</div>
			</div>
			<div class="row">
				<div class="small-12 small-centered columns" style="text-align:center;">	     
					<select id="course_code"  name="course_code" required >
					<option value="">Course Code</option>
					</select>
					<small id="error-message" class="error error-message" style="text-align:left;">Course Code is required.</small>
			  	</div>
			</div>
			<div class="row">
				<div class="small-12 small-centered columns">
					<input id="datepicker" type="text" name="completion_date" placeholder="Completion Date" value="{{ today|date('Y-m-d') }}" required pattern="date" />
					<small id="error-message" class="error error-message">Completion Date is required.</small>	     
			  	</div>
			</div>
		</div>
		<div class="row">
			<div class="small-12 small-centered columns">
				<button id="att-cre-add-submit" type="submit" class="button small effect1">ADD</button>
		  	</div>
		</div>
	</form>								    	
</div>