@section('page_title')
    OSAA - Edit Associate Member Schools
@stop

@section('page_sub_title')    
   Edit {{ Session::get('year') }}-{{ intval(substr(Session::get('year'), 2, 2)) + 1}} Associate Member Schools 
@stop

@section('scripts')
    @parent

    <style type="text/css">
    	
    	#fixed_table {
    		position: fixed;
    		top: 30px;
    		display: none;
    		width: 1020px;
    	}

    	table {
    		width: 100%;
    		/*border-collapse: collapse;*/
    		table-layout: fixed;
    	}

    	table thead th {
    		padding: 4px 2px;
			text-align: left;
			background-color: #005fa9;
			color: #ffffff;
    	}

    	table thead th:nth-of-type(3),
    	table thead th:nth-of-type(4),
    	table thead th:nth-of-type(5),
    	table thead th:nth-of-type(6),
    	table thead th:nth-of-type(7),
    	table thead th:nth-of-type(8),
    	table thead th:nth-of-type(9),
    	table tbody td:nth-of-type(3),
    	table tbody td:nth-of-type(4),
    	table tbody td:nth-of-type(5),
    	table tbody td:nth-of-type(6),
    	table tbody td:nth-of-type(7),
    	table tbody td:nth-of-type(8),
    	table tbody td:nth-of-type(9) {
    		text-align: center;
    	}

    	table tbody tr.odd {
    		background-color: #dedede;
    	}

    	table tbody td:nth-of-type(2) {
    		width: 300px;
    		overflow: hidden;
    		white-space: nowrap;
    		display: inline-block;
    		text-overflow: ellipsis;
    	}

    	table tbody tr td {
    		line-height: 1.5em;
    		padding: 0 2px;
    	}

    	input[type='checkbox'] {
    		vertical-align: middle;    		
    	}

    </style>


@stop

@section('jquery_init')

	// Make this script play well with IE8
	if (typeof String.prototype.trim !== 'function')
	{
		String.prototype.trim = function()
		{
		    return this.replace(/^\s+|\s+$/g, ''); 
		}
	}

	// Back button
	$('.back_button')
		.button({'icons':{'primary':'ui-icon-arrowthick-1-w'}})
		.css({'font-size':'9pt'});


	var tableOffset = $("#data").offset().top;
	var $header = $("#data > thead").clone();
	var $fixedHeader = $("#fixed_table").append($header);

	$(window).bind("scroll", function() {
	    var offset = $(this).scrollTop();

	    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
	        $fixedHeader.show();
	    }
	    else if (offset < tableOffset) {
	        $fixedHeader.hide();
	    }
	});



	// Table row highlighter
	function colorRows ()
	{		
		$('table').each(function ()
		{
			var i = 0;

			$('tbody tr:visible', $(this)).each(function ()
			{
				if (i % 2 == 1)
				{
					$(this).addClass('odd');
				}
				else
				{
					$(this).removeClass('odd');
				}
				i = i + 1;
			});		
		});
	}	
	colorRows();

	// Editable
	$('[data-editable="true"]')
		.hover(function()
		{		
			if ($(this).is('td'))
			{
				var container = $(this);
			}
			else
			{
				var container = $(this).parents('td');
			}


			$('td:nth-of-type(2)', $(container).parents('tr'))
				.css({'color' : '#990000;',
					  'font-weight' : 'bold'});

			$(container).css({'cursor' : 'default',
						 	  'outline' : '1px solid #990000'});

		},
		function ()
		{
			if ($(this).is('td'))
			{
				var container = $(this);
			}
			else
			{
				var container = $(this).parents('td');
			}

			$('td:nth-of-type(2)', $(container).parents('tr'))
				.css({'color' : '#000000;',
					  'font-weight' : 'normal'});

			$(container).css({'cursor' : 'auto',
						      'outline' : ''});
		})
		.click(function()
		{
			var field = $(this);
			var type = $(field).attr('data-edit-type');
			var variable = $(field).attr('data-var');
			var value = null;

			if (type == 'checkbox')
			{
				value = $(field).is(':checked');

				uploadValue(variable, value, field, type);
			}
			
			if (type == 'text')
			{
				value = ($(field).html()).trim();

				if (isNaN(value) || parseInt(Number(value)) != value)
				{
					value = null;
				}
			
				field.html('');

				var input = $("<input>")
								.attr('type', 'text')
								.css('width', '95%')
								.appendTo(field)
								.val(value)
								.focus()
								.on('blur', function()
								{
									if (value != ($(this).val()).trim())
									{
										value = ($(this).val()).trim();
										
										if (value == '' || isNaN(value) || parseInt(Number(value)) != value)
										{
											value = null;
										}

										uploadValue(variable, value, field, type);
									}

									$(this).remove();
										
									if (value == null || value == '')
									{
										value = '- -';
									}

									$(field).html(value);
								})
								.keyup(function(e)
								{
									// ESC was pressed while typing
									if (e.keyCode == 27)
									{
										$(this).remove();
											
										if (value == null || value == '')
										{
											value = '- -';
										}

										$(field).html(value);
									}
									
									// Return was pressed while typing
									if (e.keyCode == 13)
									{
										if (value != ($(this).val()).trim())
										{
											value = ($(this).val()).trim();
											
											if (value == '' || isNaN(value) || parseInt(Number(value)) != value)
											{
												value = null;
											}

											uploadValue(variable, value, field, type);
										}

										$(this).remove();
											
										if (value == null || value == '')
										{
											value = '- -';
										}

										$(field).html(value);
										
									}
								});
				

			}
			
		});

	function uploadValue(variable, value, field, type)
	{
		var row = $(field).parents('tr');

		var school_id = $(row).attr('data-school-id');
		var demographic_id = $(row).attr('data-demographic-id');		

		var is_paid = $('[data-var="demographic.is_paid"]', row).is(':checked');
		var is_demographic_retired = $('[data-var="demographic.is_retired"]', row).is(':checked');
		var is_school_retired = $('[data-var="school.is_retired"]', row).is(':checked');

		var is_visible = (is_paid && !is_demographic_retired && !is_school_retired);

		var visible_container = $('td:last', row);
		var visible_container_text = ($(visible_container).text()).trim();

		if (is_visible && visible_container_text == 'No')
		{
			$(visible_container).fadeOut(400, function ()
			{
				$(this).text('Yes');
				$(this).fadeIn();
			});
		}

		if (!is_visible && visible_container_text == 'Yes')
		{
			$(visible_container).fadeOut(400, function ()
			{
				$(this).text('No');
				$(this).fadeIn();
			});
		}	
		
		
		var jqxhr = $.ajax({type : 'POST',
      						url : 'http://www.osaa.org/schools/associate-members/edit',
      						data : {'school_id' : school_id,
      							    'demographic_id' : demographic_id,
      							    'variable' : variable,
      							    'value' : value,
      							    'type' : type},
      						dataType : 'html'
      						})
      						.done(function (data)
							{                            	
                                // Update the current year's enrollment
                                if (variable == 'old_demographic.enrollment')
                               	{
                               		if (value == '' || value == null)
                               		{
                               			value = '- -';
                               		}
                               		$('[data-var="demographic.enrollment"]', row).text(value);                               		
                               	}

                            }).fail(function (jqXHR, status, error)
                            {			                                    	
                            	var response = jqXHR.responseText;
                            	var errorData = $.parseJSON(response);			                                    	                            	
                            	alert ("There was an error saving changes.\n\nThis page will be reloaded.");
                            	location.reload();
                            });

	}


@stop

@section('page_functions')
    
	<a href="{{ url('/schools/associate-members') }}" class="back_button">Back</a>

@stop


@section('main_content')
	
	<table id="fixed_table"></table>


	<table id="data">
		<thead>
			<tr>
				<th style="width: 40px;">ID #</th>
				<th style="width: 300px;">School Name</th>
				<th>{{ intval(substr(Session::get('year'), 2, 2)) - 1 }}-{{ intval(substr(Session::get('year'), 2, 2)) }}<br />Enrollment</th>
				<th>{{ intval(substr(Session::get('year'), 2, 2)) }}-{{ intval(substr(Session::get('year'), 2, 2)) + 1 }}<br />Enrollment</th>
				<th>Associate<br />Member</th>
				<th>{{ intval(substr(Session::get('year'), 2, 2)) }}-{{ intval(substr(Session::get('year'), 2, 2)) + 1 }}<br />Dues Paid</th>
				<th>Membership<br />Canceled</th>
				<th>School<br />Retired</th>
				<th>Show<br />On List</th>
			</tr>		
		</thead>

		<tbody>
			@foreach ($info['schools'] as $i => $item)

				<tr data-school-id="{{ $item->school->id }}" data-demographic-id="{{ $item->demographic->id }}">
					<td>{{ $item->school->id }}</td>
					<td>{{ $item->school->name }}</td>
					<td>
						<div data-editable="true" data-edit-type="text" data-var="old_demographic.enrollment">
							@if (!is_null($item->old_demographic) and !is_null($item->old_demographic->enrollment))
								{{ $item->old_demographic->enrollment }}
							@else
								- -
							@endif
						</div>
					</td>
					<td>
						<div data-editable="false" data-edit-type="text" data-var="demographic.enrollment">
							@if (!is_null($item->demographic->enrollment))
								{{ $item->demographic->enrollment }}
							@else
								- -
							@endif
						</div>
					</td>
					<td>
						<input type="checkbox" value="1" data-editable="false" data-edit-type="checkbox" data-var="demographic.is_associate_member" @if ($item->demographic->is_associate_member) checked="checked" @endif disabled="disabled" />
					</td>
					<td>
						<input type="checkbox" value="1" data-editable="true" data-edit-type="checkbox" data-var="demographic.is_paid" @if ($item->demographic->is_paid) checked="checked" @endif />
					</td>
					<td>
						<input type="checkbox" value="1" data-editable="true" data-edit-type="checkbox" data-var="demographic.is_retired" @if ($item->demographic->is_retired) checked="checked" @endif />
					</td>
					<td>
						<input type="checkbox" value="1" data-editable="true" data-edit-type="checkbox" data-var="school.is_retired" @if ($item->school->is_retired) checked="checked" @endif />
					</td>
					<td>
						@if ($item->is_visible)
							Yes
						@else
							No
						@endif
					</td>
				</tr>
				
			@endforeach
		</tbody>

	
	</table>





@stop