@section('page_title')
    OSAA - Forms
@stop

@section('tool_box')
	@if (Auth::check() and Auth::user()->isOsaaUser())
		<div id="tool_box" style="font-size: 10pt;">
	        <img src="{{ asset('images/icons/shield_32px.png') }}" alt="" title="You are logged in as an OSAA Staff Member." class="tooltip" width="32" height="32" />        

	        <div class="float_left" style="line-height: 34px;">
	        		        	
	        	<img src="{{ asset('images/icons/bullet_green_32px.png') }}" alt="" title="" class="" style="float: none; width: 16px; height: 16px; margin: 0 0.25em 0 1em;" />
	        	<b>Open:</b> {{ date('g:ia n/j/y', strtotime($information['activity_form']->open_at)) }}
	        	
				<img src="{{ asset('images/icons/bullet_yellow_32px.png') }}" alt="" title="" class="" style="float: none; width: 16px; height: 16px; margin: 0 0.25em 0 1em;" />
	        	<b>Due:</b> {{ date('g:ia n/j/y', strtotime($information['activity_form']->due_at)) }}	        	

	        	<img src="{{ asset('images/icons/bullet_red_32px.png') }}" alt="" title="" class="" style="float: none; width: 16px; height: 16px; margin: 0 0.25em 0 1em;" />
	        	<b>Close:</b> {{ date('g:ia n/j/y', strtotime($information['activity_form']->close_at)) }}
	        </div>

	        <div style="float: right; line-height: 32px; margin-left: 10px;">
	        	<div class="button entries" style="font-size: 9pt;">Entries</div>
	        </div>
	        <div style="float: right; line-height: 32px; margin-left: 10px;">
	        	<div class="button submissions" style="font-size: 9pt;">Submissions</div>
	        </div>	        

	    </div>
    @endif
@stop

@section('page_sub_title')    
	{{ $information['form_name'] }}
@stop

@section('scripts')
    @parent

    <style type="text/css">
    	table {border-collapse: collapse; width: 100%;}
    	th {text-align: left;}
    	tr {height: 2em;}    	
    	h3 { color: #990000 !important;}

    	/* Success Bar */
    	.success_bar {
    		position: fixed;
    		top: 600px;
    		left: 0;
    		width: 100%;
    		padding: 0.25em 0;
    		line-height: 1.5em;
    		background-color: rgba(176, 255, 190, 0.0);
    		border-bottom: 2px solid rgba(13, 88, 27, 0.50);
    		border-top: 2px solid rgba(13, 88, 27, 0.50);
    		z-index: 500;
    	}

    	.success_bar .message {
    		width: 1200px;
    		margin: 0 auto;
    		font-size: 14pt;
    		color: #151515;
    	}

    	/* Activity Icon */
    	.activity_icon {
    		float: left;
    		width: 64px;
    		height: 64px;
    		position: relative;
    		top: -1em;
    	}

    	/* Form Status */
    	.form_status {
    		font-size: 9pt;
    		float: right;
    		width: 250px;
    		height: 4em;
    		position: relative;
    		top: -1.5em;
    		text-align: right;
    		color: #999999;
    		line-height: 1.1em;
    	}

    	.form_status .state {
    		font-weight: bold;
    		color: #000000;
    	}

    	.form_status dl {
    		clear: both;
    		width: 100%;
    		padding-top: 5px;
    	}

    	.form_status dl dt {
    		width: 100px !important;
    		padding-right: 15px;
    	}

    	.form_status dl dd {
    		text-align: left;
    	}

    	/* Coach Table */
        .odd {
            background-color: #efefef;
        }

        .coach_table {
            border-collapse: collapse;
            width: 100%;
            font-size: 10pt;
        }

        .coach_table thead {
            background-color: #005FA9;
            color: #ffffff;
        }

        .coach_table thead th {            
            padding: 4px 2px;
            text-align: left;
        }

        .coach_table tbody tr {
            line-height: 3em;
        }

        /* Certification */
        .certification {
        	float: left;
        	font-size: 7pt;
        	line-height: 1em;
        	width: 50px;
        	text-align: center;
        }

        .certification .title {
        	font-weight: bold;
        }

        .certification .completed {
        	color: #7d7b7d;
        }

    </style>
	
@stop

@section('jquery_init')
	$('.button').button();
	$('.button.notext').button({text:false});
	$('.button.close').button({ icons : { primary : 'ui-icon-circle-close'}});
	$('.button.switch').button({ icons : { primary : 'ui-icon-transferthick-e-w'}});
	$('.button.back').button({ icons : { primary : 'ui-icon-arrowthick-1-w'}});
	$('.button.delete').button({ icons : { primary : 'ui-icon-closethick'}});
	$('.button.add').button({ icons : { primary : 'ui-icon-plusthick'}});
	$('.button.save').button({ icons : { primary : 'ui-icon-disk'}});	
	$('.button.edit').button({ icons : { primary : 'ui-icon-pencil'}});	
	
	$('.button_set').buttonset();
	$('.button_set label').addClass('ui-corner-all');
	
	$('.tooltip').tooltip();	 

	
	$('.date_picker').datepicker({'dateFormat' : 'mm/dd/yy',
								  'minDate' : '11/01/13',
								  'maxDate' : '1/24/14'});

	
	$('[data-required]').after('<span class="required_marker">*</span>');
	

	/* Limit input to numbers only */	
	$('.numbers_only').bind('input', function()
	{
  	    $(this).val($(this).val().replace(/[^0-9]/gi, ''));
	});	

	/* Limit input to letters only */	
	$('.alphas_only').bind('input', function()
	{
  	    $(this).val($(this).val().replace(/[^A-Za-z]/gi, ''));
	});
	
	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();


	$('[placeholder]').focus(function()
    {
        var input = $(this);
        if (input.val() == input.attr('placeholder'))
        {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function()
    {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder'))
        {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();

    $('[placeholder]').parents('form').submit(function()
    {
        $(this).find('[placeholder]').each(function()
        {
            var input = $(this);
            if (input.val() == input.attr('placeholder'))
            {
                input.val('');
            }
        });
    });
	
	/* Show any form fields that have errors */
	var bad_fields = new Array();
	@if (!is_null($information['submission']))		
		
	@endif

	for (var i = 0; i < bad_fields.length; i++)
	{
		$('[name="' + bad_fields[i] + '"]').addClass('ui-state-error');
	}

	/* Save information */
	$('.button.save').click(function ()
	{
		var form = $(this).parents('form');
		var input = $('<input />').attr('type', 'hidden').attr('name', 'save').val('true');
		$(form).append($(input));
		$(form).submit();
	});


	$('input[name="sub_division"]').click(function ()
	{		
		updateRosterSize();
	});	

	function updateRosterSize()
	{
		var max = $('input[name="sub_division"]:checked').attr('data-max-roster');
		
		if (max < 50)
		{
			for (var i = max; i < 50; i++)
			{
				$('#roster tbody tr:nth-child(' + i + ')').hide();
			}
		}
		else
		{
			$('#roster tbody tr').show();
		}

		/* Show all roster rows */
		$('#roster tbody tr').show();

		return;
	}

	updateRosterSize();


	$('input[data-coach]').bind('input', function ()
	{
		updateCoaches();
	});


	/* Update coach names to certification section */
	function updateCoaches ()
	{
		var coaches = new Array();		

		for (var i = 0; i <= 4; i++)
		{
			var v = $('input[data-coach="' + i + '"]').val();
			var ph = $('input[data-coach="' + i + '"]').attr('placeholder');			

			if (v == ph)
			{
				v = '';
			}
			coaches[i] = v;
		}


		for (i = 0; i < coaches.length; i++)
		{
			$('#coach_certification input[name="coach[' + i + '][name]"]').val(coaches[i]);
		} 
	}
	updateCoaches();


	// Success bar
	$('.success_bar').animate({ 'top' : 32, 'background-color' : 'rgba(176, 255, 190, 1.0)'}, 1600, 'easeOutQuad', function ()
	{		
		$(this).delay(6000).fadeOut(4000);	

		$(this).hover(function ()
		{
			$(this).stop(true).css('opacity', '1.0');
		},
		function ()
		{
			$(this).fadeOut(4000);
		})
	});

    @if (Auth::check() and Auth::user()->isOsaaUser())    	

    	$('#submissions_report').dialog(
    		{
    			dialogClass : 'submission_content',
                autoOpen : false,                                  
                buttons : [ { text : 'Done', 'class' : 'float_right', click : function () { $(this).dialog('close'); }} ],
                draggable : true,                                                                   
                height : 700,                
                modal : false,                
              	resizable : false,
              	open : function ()
                	{      
                  		$('#submissions_report').html("<div class='ajax_loader' style='width:16px; height:11px; margin:4em auto; background-image: url(http://www.osaa.org/images/icons/ajax_loader2.gif); background-repeat:no-repeat;'></div>");                  

                  		var jqxhr = $.ajax(
                                {
                                    type : 'GET',
                                    url : '/reports/dnc-registrations',
                                    dataType : 'html'
                                })
                               .done(function (data)
                                {
                                    $('#submissions_report').html(data);
                                })
                               .fail(function ()
                                {
                                    $('#submissions_report').html('There was an error.');
                                });
                  
                  		$('.submission_content .ui-dialog-buttonpane').css('padding', '0').css('font-size', '8pt');
                  		$('.submission_content .ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');  
              		},
              	show : { effect : 'highlight', delay : 0, duration : 400, easing : 'easeInOutSine' },
              	title : 'OSAA Dance Registrations', 
              	width : 650              	
            }
        );
                 

        $('.button.submissions').click(function () { $('#submissions_report').dialog('open'); });      


        $('#entries_report').dialog(
    		{
    			dialogClass : 'entry_content',
                autoOpen : false,                                  
                buttons : [ { text : 'Done', 'class' : 'float_right', click : function () { $(this).dialog('close'); }} ],
                draggable : true,                                                                   
                height : 350,                
                modal : false,                
              	resizable : false,
              	open : function ()
                	{      
                  		$('#entries_report').html("<div class='ajax_loader' style='width:16px; height:11px; margin:4em auto; background-image: url(http://www.osaa.org/images/icons/ajax_loader2.gif); background-repeat:no-repeat;'></div>");                  

                  		var jqxhr = $.ajax(
                                {
                                    type : 'GET',
                                    url : '/reports/dnc-entries',
                                    dataType : 'html'
                                })
                               .done(function (data)
                                {
                                    $('#entries_report').html(data);
                                })
                               .fail(function ()
                                {
                                    $('#entries_report').html('There was an error.');
                                });
                                   

                  		$('.entry_content .ui-dialog-buttonpane').css('padding', '0').css('font-size', '8pt');
                  		$('.entry_content .ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');  
              		},
              	show : { effect : 'highlight', delay : 0, duration : 400, easing : 'easeInOutSine' },
              	title : 'OSAA Dance Entries', 
              	width : 500              	
            }
        );
                 

        $('.button.entries').click(function () { $('#entries_report').dialog('open'); });  

    @endif
@stop

@section('page_functions') 	

	@if (!is_null($information['activity_program']))
		<a href="{{ url('/forms/registration/dnc') }}" class="button back tooltip" style="font-size:9pt; margin-right: 8px;" title="Discard any unsaved changes and go back to the team selection page.">Back</a>				
		
	@else
		<a href="{{ $information['return_url'] }}" class="button close tooltip" style="font-size:9pt; margin-right: 8px;" title="Discard any unsaved changes and close this form.">Close</a>		
	@endif

@stop


@section('main_content')    
	
	{{-- Success Bar --}}
 	@if (Session::has('success'))
		<div class="success_bar">
			<div class="message">				
				{{ Session::get('success') }}
			</div>			
		</div>
	@endif

	{{-- Past Due Notice --}}
	@if ($information['is_past_due'])
		<div class="online_form_late ui-state-error ui-corner-all">
			<span class="ui-icon ui-icon-alert" style="display:inline-block; position:relative; top:2px;"></span>
			This form was due by {{ date('g:i A l, F j, Y', strtotime($information['activity_form']->due_at)) }} and is now past the deadline.  Please submit your entries now before the form closes and becomes unavailable.
		</div>
	@endif	

	<br />	

	{{-- AP Specific: Form Information --}}
	@if (!is_null($information['activity_program']))
		<img src="{{ asset('images/icons/dance_64px.png') }}" alt="" title="" style="float: left; width: 64px; height: 64px; position: relative; top: -1em; margin-right: 0.5em;" />
		
		<!-- Timestamps/Submitter/Status Info -->		
		<div class="form_status">
			<div style="float: left;">
				Form #{{ $information['submission']->id }}
			</div>
			<div style="float: right;">
				@if ($information['submission']->data->complete)
					<img src="{{ asset('images/icons/check_mark_16px.png') }}" alt="" title="" style="width: 16px; vertical-align: middle;" /><span class="state"> Complete</span>
				@else
					<img src="{{ asset('images/icons/incomplete_16px.png') }}" alt="" title="" style="width: 16px; vertical-align: middle;" /><span class="state"> Incomplete</span>
				@endif
			</div>
			<dl>
				<dt>Created</dt>
				<dd>{{ date('g:i a m/d/Y', strtotime($information['submission']->created_at)) }}</dd>

				@if (!is_null($information['submission']->submitted_at))
					<dt>Submitted</dt>
					<dd>{{ date('g:i a m/d/Y', strtotime($information['submission']->submitted_at)) }}</dd>
				@endif

				<dt>Modified</dt>
				<dd id="updated_at">{{ date('g:i a m/d/Y', strtotime($information['submission']->updated_at)) }}</dd>

				<dt>User</dt>
				<dd id="updated_by">{{ $information['submitter']->getDisplayFullName() }}</dd>
			</dl>
		</div>
	@endif

	{{-- Title --}}
	<h1>			
		@if (is_null($information['current_stage']))
			Dance Registration
		@else
			@if (!is_null($information['activity_program']))
				{{ $information['activity_program']->name }}
			@endif
			{{ $information['stages'][$information['current_stage']]->title }}
		@endif
	</h1>

	<br />

	{{-- Instructions --}}
	<div class="online_form_instructions ui-corner-all">
		<span class="ui-icon ui-icon-info" style="display:inline-block; position:relative; top:2px;"></span>
		
		@if (is_null($information['current_stage']))
			<b>This Form Is Closed</b>
			<br />
			<p>
				Entires are no longer being accepted.
			</p>
		@else
			<b>Instructions</b>
			<br />
			<ol>
				<li>{{ implode('</li><li>', $information['stages'][$information['current_stage']]->instructions['preselect']) }}</li>
			</ol>
		@endif

		<br />

		For questions, contact {{ $information['staff']->first_name }} {{ $information['staff']->last_name }} at (503) 682-6722 x239 or by e-mail to {{ Helpers::obfuscateEmailLink ($information['staff']->email) }}.  For technical assistance, you can email {{ Helpers::obfuscateEmailLink ("support@osaa.org") }}.
	</div>		

	@if (Session::has('errors'))                
        <div class="ui-state-error" style="padding: 2px 4px;">
			<span class="ui-icon ui-icon-alert" style="display:inline-block; position:relative; top:2px;"></span>
        	@foreach ($errors->all() as $error){{ $error }} @endforeach
        </div>
        <br />
    @endif  

	<br /><br />

	{{-- Steps --}}
	@if (is_null($information['activity_program']))
		<div class="columns">			
			
			@foreach ($information['stages'] as $stage)

				<div class="ui-corner-all"
					 style="float: left;
					 		width: 29%;
					 		border: 1px solid {{ $stage->colors[$stage->status]['border'] }};
					 	    background-color: {{ $stage->colors[$stage->status]['background'] }};
					 	    height: 150px;
					 	    text-align: center;
					 	    padding: 1em 0.5em;
					 	    position: relative;
					 	    margin-right: 2.5%;">
					<div style="font-size: 26pt; position: absolute; top: 0.4em; left: 0.15em; color: #d5d7d7;">
						{{ $stage->step }}
					</div>
					<div style="font-size: 14pt; padding-bottom: 1em; border-bottom: 2px solid #d9e1e0; margin-bottom: 1em;">
						{{ $stage->title }}
					</div>
					<b>
						@if ($stage->status < 0)
							Starts {{ date('n/j/Y', strtotime($stage->open_at)) }}
						@elseif ($stage->status > 0)
							Closed {{ date('n/j/Y', strtotime($stage->due_at)) }}
						@else
							Open now through {{ date('n/j/Y', strtotime($stage->due_at)) }}
						@endif
					</b>
					<br /><br />
					{{ $stage->body }}
				</div>

			@endforeach

		</div>

		<br class="clear" /><br />
	
	@endif
	

	{{-- Stage Specific Info --}}
	@if (is_null($information['current_stage']))
		<h2>Registration Status</h2>		
		
		<p>
			The following list shows the registration status for each school.
		</p>

		<div class="columns" style="font-size: 10pt;">

			<br />
<b>Fatal error</b>:  Class 'DB' not found in <b>/home/osaa/web_app/dev/app/views/forms/dnc_OLD_dance_registration.blade.php</b> on line <b>602</b><br />