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

@section('page_sub_title')    
    
    Create a New Student Eligibility Request Form   

@stop

@section('scripts')
    @parent

    <style type="text/css">
    	h3 {
    		color: #1C43A6 !important;
    	}    	

    	.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;
    	}    	

    	.page_functions {
    		width: auto !important;
    	}         
        
        .required {
            color: #990000;
            font-weight: bold;
        }

        .placeholder
        {
            color: #aaaaaa !important;
            font-weight: normal !important;
        }

        /* Help Dialog */
        .help_dialog {
            font-size: 10pt;
        }

        .help_dialog h1 {
            font-size: 14pt;
            color: #005fa9;
            margin: 1em 0 1em 0;
        }

        .help_dialog h2 {
            font-size: 12pt;
            color: #990000;
            margin: 1em 0 0.5em 0;
        }

        .help_dialog h3 {
            font-size: 10pt;
            color: #000000 !important;
            margin: 0.75em 0 0em 0;
        }

        .help_dialog ul, ol {
            margin-left: 28px;
        }

        .help_dialog dl dt {
            float: left;
            width: 200px;
            text-align: right;
            margin-right: 20px;
            font-weight: bold;
            clear: both;
        } 

    </style>

@stop

@section('jquery_init')
			
	// 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);
		})
	});

    // Placeholder functionality
    $('[data-placeholder]').focus(function()
    {
        var input = $(this);
        if (input.val() == input.attr('data-placeholder'))
        {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function()
    {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('data-placeholder'))
        {
            input.addClass('placeholder');
            input.val(input.attr('data-placeholder'));
        }
    }).blur();
    $('[data-placeholder]').parents('form').submit(function()
    {
        $(this).find('[data-placeholder]').each(function()
        {
            var input = $(this);
            if (input.val() == input.attr('data-placeholder'))
            {
                input.val('');
            }
        })
    });

    // Shake action items
    function shakeActionImages (object)
    {
        $(object).effect("shake", {distance : 5, times : 1}, 600, function ()
        {
            $(this).delay(Math.floor(Math.random() * 4000) + 2000);
            shakeActionImages($(this));
        });        
    }   

    // Info text
    $('.info_text')
        .each(function ()
        {
            var item = $(this);

            item.prepend('<span class="info_icon"></span>');            

            // Info icons
            $('.info_icon')
                .addClass('ui-icon ui-icon-info')
                .css({'position' : 'absolute'});
        })
        .css({'font-size' : '9pt',
              'line-height' : '1.25em',
              'text-indent' : '20px'});
    
    // Buttons
    $('.cancel_button')
        .button({'icons':{'primary':' ui-icon-circle-close'}})
        .css({'font-size':'9pt'})
        .click(function(event)
        {
            return confirm('Are you sure you want to cancel the creation of a new student eligibility request?');
        });
    $('.submit_button')
        .button();

    /* Help button    
     *
     */
    $('.help_button')
        .button({'icons':{'primary':'ui-icon-help'}})
        .css({'font-size':'9pt', 'margin-right':'10px'})
        .click(function(event)
        {
            var object = $(this);

            event.preventDefault();

            var topic = object.attr('data-topic');

            $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    draggable : true,
                    resizable : true,
                    height : 725,
                    minHeight : 400,
                    width : 615,
                    minWidth : 330,
                    modal : false,
                    title : 'Help',                    
                    open : function ()
                        {  
                            var dialog_object = $(this);

                            dialog_object.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 : '{{ url('forms/eligibility/00000000/help') }}?topic=' + topic,
                                          dataType : 'html'
                                      })
                                      .done(function (returned_data)
                                      {                               
                                          dialog_object.html(returned_data);
                                      })
                                      .fail(function (jqXHR, status, error)
                                      {                                                   
                                          var response = jqXHR.responseText;
                                          var errorData = $.parseJSON(response);
                                          //console.log(errorData);
                                          alert ("There was an error looking up help information.\n\nThis page will be reloaded.");
                                          location.reload();
                                      })
                                      .complete(function ()
                                      {
                                           
                                      });                            
                            
                        },
                    close : function ()
                        {
                            var dialog_object = $(this);

                            $(dialog_object).remove();
                        }                
                });

        });

    $('.types_button')
        .button({'icons':{'primary':'ui-icon-help'}})
        .css({'font-size':'9pt','text-indent':'0','float':'right'})
        .click(function(event)
        {
            var object = $(this);

            event.preventDefault();

            var topic = 'waiver-types';

            $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    draggable : false,
                    resizable : false,
                    modal : true,
                    height : 550,                    
                    width : 650,                                        
                    title : 'Types of Waivers',                    
                    open : function ()
                        {  
                            var dialog_object = $(this);

                            dialog_object.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 : '{{ url('forms/eligibility/00000000/help') }}?topic=' + topic,
                                          dataType : 'html'
                                      })
                                      .done(function (returned_data)
                                      {                               
                                          dialog_object.html(returned_data);
                                      })
                                      .fail(function (jqXHR, status, error)
                                      {                                                   
                                          var response = jqXHR.responseText;
                                          var errorData = $.parseJSON(response);
                                          //console.log(errorData);
                                          alert ("There was an error looking up help information.\n\nThis page will be reloaded.");
                                          location.reload();
                                      })
                                      .complete(function ()
                                      {
                                           
                                      });                            
                            
                        },
                    close : function ()
                        {
                            var dialog_object = $(this);

                            $(dialog_object).remove();
                        }                
                });

        });

    // Show waiver type information
    $('#waiver_type').on("change", function()
    {
        var select = $(this);

        // Remove the first option and action item
        $('option[value="null"]', select).remove();
        $('#waiver_action_image').remove();      
        checkReadiness();  

        var option = $('option:selected', select);

        var data = $.parseJSON($(option).attr('data-info'));

        var html = data.name + '<br /><br /><a href="{{ url('/') }}/' + data.link + '" target="_blank">OSAA Handbook Rule ' + data.rule + '</a><br />Handled initially by the ' + data.default_handler;

        $('#waiver_type_info')
            .html(html);        
    });

    // Check student name
    $('#first_name').bind("input", function ()
    {
        var first_name = $(this);
        var last_name = $('#last_name');

        if ($(first_name).val() != '')
        {
            if ($(last_name).val() == '' || $(last_name).val() == $(last_name).attr('data-placeholder'))
            {
                $('#student_name_action_image').css({'top':'70px'});
            }
            else
            {
                $('#student_name_action_image').remove();
                checkReadiness();
            }
        }
    });
    $('#last_name').bind("input", function ()
    {
        var last_name = $(this);
        var first_name = $('#first_name');

        if ($(last_name).val() != '')
        {
            if ($(first_name).val() == '' || $(first_name).val() == $(first_name).attr('data-placeholder'))
            {
                $('#student_name_action_image').css({'top':'-12px'});
            }
            else
            {
                $('#student_name_action_image').remove();
                checkReadiness();
            }
        }
    });

    // Make the birth date field a datepicker
    $('#birth_date')
        .datepicker(
        {
            changeYear : true,
            dateFormat : 'm/d/yy',
            defaultDate : '-16years'
        })
        .on("change", function ()
        {
            if ($(this).val() != '')
            {
                $('#student_dob_action_image').remove();
                checkReadiness();

                var dob = $(this).val();

                var first_divider = dob.indexOf('/');
                var last_divider = dob.lastIndexOf('/');
                
                var year = Number(dob.substr(last_divider + 1, 4));

                if (year < 1900)
                {
                    if (year > 50)
                    {
                        year = year + 1900;
                    }
                    else
                    {
                        year = year + 2000;
                    }
                }
                
                var month = Number(dob.substr(0, first_divider)) - 1;

                var day = Number(dob.substr(first_divider + 1, last_divider - first_divider - 1));
                
                var today = new Date();

                var age = today.getFullYear() - year;

                if (today.getMonth() < month || (today.getMonth() == month && today.getDate() < day))
                {
                    age--;
                }
                
                $('#age').html(age + ' years old');
            }
        });
       
    // Check if ready to move onwards
    function checkReadiness()
    {
        if ($('#waiver_action_image').size() == 0 &&
            $('#first_name').val() != '' && 
            $('#first_name').val() != $('#first_name').attr('data-placeholder') &&
            $('#last_name').val() != '' && 
            $('#last_name').val() != $('#last_name').attr('data-placeholder') &&
            $('#birth_date').val() != '')
        {
            $('#ready_action_image').show();
            shakeActionImages($('#ready_action_image'));
            $('#ready .submit_button').button('enable');
            $('#ready_text').html('<span class="ui-icon ui-icon-check float_left" style="margin-right: 4px;"></span> Ready for step 2.');
        }
        else
        {
            // Hide the ready/next button
            $('#ready_action_image').hide();
            $('#ready .submit_button').button('disable');
            $('#ready_text').html('<span class="ui-icon ui-icon-alert float_left" style="margin-right: 4px;"></span> You need to fill in more information to continue.');
        }
    }        

    shakeActionImages($('#waiver_action_image'));
    shakeActionImages($('#student_name_action_image'));
    shakeActionImages($('#student_dob_action_image'));
    checkReadiness();

    {{-- Future Eligibility Notice --}}
    @if ($info['limit_future'])
    
        // Disable future eligibility waiver types
        $('#waiver_type option').each(function(index, item)
        {
            item = $(item);
            var value = item.val();

            console.log(value);

            if (!(value == "Age" || value == "Fifth Year" || value == "Age and Fifth Year" || value == null || value == "null"))
            {
                item.attr('disabled', 'disabled');
            }
        });

    @endif
    
@stop

@section('page_functions')  	

    <a href="#" class="help_button" data-topic="create">Help</a>
    <a href="{{ url('/forms/eligibility') }}" class="cancel_button">Cancel</a>    
    
@stop


@section('main_content')    		

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

    {{-- Errors --}}
    @if (Session::has('errors'))                
        <div class="error ui-state-error" style="font-weight: bold; padding: 1em;">
            <span class="ui-icon ui-icon-alert box_icon"></span>
            @foreach ($errors->all() as $error)
                {{ $error }}
            @endforeach
        </div>
    @endif   

    <form action="{{ url('/forms/eligibility/new') }}" method="POST">

        <h1>Step 1: New Form</h1>

        {{-- Test Mode for OSAA Staff --}}
        @if (Auth::user()->isOsaaUser())

            <br />

            <div class="columns ui-corner-all ui-state-highlight" style="padding: 0.5em 4px;">

                <div class="third">

                    <p style="font-size: 9pt; line-height: 1.25em; text-indent: 20px;">
                        <img src="{{ asset('/images/icons/shield_16px.png') }}" alt="" title="" style="vertical-align: middle; margin-left: -20px;" /> OSAA Staff, enable TEST MODE for testing or training purposes.  This will disable e-mails from being sent to the school administrators.
                    </p>

                </div>

                <div class="half" style="width: 650px;">

                    <div style="float: left; font-weight: bold; font-size: 11pt; width: 150px;">Test Mode</div>
                    
                    <label style="font-size: 13pt; font-weight: bold; color: #1C43A6;">
                        <input type="checkbox" name="test_mode" id="test_mode" value="true" checked="checked" style="vertical-align: middle;" />
                        Enable test mode?
                    </label>                    

                </div>

                <br class="clear" />

            </div>

            <br />

        @endif


        {{-- Future Eligibility Notice --}}
        @if ($info['limit_future'])
            <div class="ui-corner-all ui-state-highlight small" style="line-height: 1.15em; margin-bottom: 1em; padding: 0.5em 4px; width: 1020px;">
                <span class="ui-icon ui-icon-alert" style="display: inline-block; vertical-align: middle; margin-right: 4px;"></span><b>Future Eligibility Notice for Waivers Prior to {{ $info['start_date'] }}</b><br />
                Hardship requests involving future eligibility will not be considered by the Executive Director, Executive Board, or District Athletic Committee.  The student must actually be in an ineligible status before any hardship request will be considered except for Age and/or Fifth Year waivers.
            </div>
        @endif

        <br />

        <div class="columns">

            <div class="third">

                <p class="info_text">
                    Before moving on, please ensure the school and school year are correct.  If not, click "Cancel" and start over.
                </p>

            </div>

            <div class="half" style="width: 650px;">

                <div style="float: left; font-weight: bold; font-size: 11pt; width: 150px;">School Name</div>
                <div style="font-size: 13pt; font-weight: bold; color: #1C43A6;">{{ $info['school']->name }}</div>

                <input type="hidden" name="school_id" value="{{ $info['school']->id }}" />

                <br />

                <div style="float: left; font-weight: bold; font-size: 11pt; width: 150px;">School Year</div>
                <div style="font-size: 13pt; font-weight: bold; color: #1C43A6;">{{ $info['school_year']->name }}</div>

                <input type="hidden" name="school_year" value="{{ $info['school_year']->id }}" />

            </div>

        </div>

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

        <div class="columns">

            <div class="third">

                <p class="info_text">
                    Select the type of waiver from the drop-down menu.  Once you select a waiver type, additional information will also be displayed for your reference including a link to the eligibility rule in the OSAA Handbook.

                    <br /><br />

                    <a href="#" class="types_button">Types of Waivers</a>
                </p>

            </div>

            <div class="half" style="width: 650px; position: relative;">

                <div style="float: left; font-weight: bold; font-size: 11pt; width: 150px;">Waiver Type</div>
                <img src="{{ asset('/images/icons/waiver_action_icon_48px.png') }}" class="action_item" id="waiver_action_image" alt="" title="" style="position: absolute; right: 70px; top: -12px;" />
                <select name="waiver_type" id="waiver_type" style="font-size: 13pt; font-weight: bold; color: #1C43A6; width: 380px;">
                    <option value="null" selected="selected">Select waiver type...</option>
                    @foreach ($info['waiver_types'] as $type)
                        
                        @if (Helpers::strEqual($type->default_handler_type, 'District Athletic Committee'))
                            <option value="{{ $type->slug }}"
                                    data-info='{"slug":"{{ $type->slug }}","name":"{{ $type->name }}","rule":"{{ $type->rule }}","link":"{{ $type->rule_link_path }}","default_handler":"{{ str_replace('Executive Director', 'OSAA Executive Director', $type->default_handler_type) }}"}'
                                    style="font-size: 11pt;"
                                    @if($info['limit_future'] and !$type->is_allow_future)
                                        disabled="disabled"
                                    @endif>
                                {{ str_replace('with ', 'w/', str_replace('without', 'w/o', $type->slug)) }} (+ Grade Def. and/or Sat. Prog. Toward Grad.)
                            </option>
                        @else
                            <option value="{{ $type->slug }}"
                                    data-info='{"slug":"{{ $type->slug }}","name":"{{ $type->name }}","rule":"{{ $type->rule }}","link":"{{ $type->rule_link_path }}","default_handler":"{{ str_replace('Executive Director', 'OSAA Executive Director', $type->default_handler_type) }}"}'
                                    @if($info['limit_future'] and !$type->is_allow_future)
                                        disabled="disabled"
                                    @endif>
                                {{ $type->slug }}
                            </option>
                        @endif                        
                    @endforeach
                </select> 

                <br /><br />

                <div style="float: left; font-weight: bold; font-size: 11pt; width: 150px; height: 7em;">Details</div>    
                <div id="waiver_type_info">Select a waiver type for additional information.</div>          

            </div>

        </div>

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

        <div class="columns">

            <div class="third">

                <p class="info_text">
                    Please provide the student's information. Providing a middle initial is optional.  The system will try to match the student's first name, last name, and birth date to any existing students' past waivers previously entered for your school.
                </p>

            </div>

            <div class="half" style="width: 650px; position: relative;">

                <div style="float: left; font-weight: bold; font-size: 11pt; width: 150px;">First Name</div>
                
                <img src="{{ asset('/images/icons/waiver_action_icon_48px.png') }}" class="action_item" id="student_name_action_image" alt="" title="" style="position: absolute; right: 70px; top: -12px;" />
                
                <input type="text" id="first_name" name="first_name" data-placeholder="Student's First Name" style="font-size: 13pt; font-weight: bold; color: #1C43A6; width: 300px;" />

                <br /><br />

                <div style="float: left; font-weight: bold; font-size: 11pt; width: 150px;">(Middle Initial)</div>

                <input type="text" id="middle_initial" name="middle_initial" data-placeholder="Student's Middle Initial" style="font-size: 13pt; font-weight: bold; color: #1C43A6; width: 200px;" />

                <br /><br />

                <div style="float: left; font-weight: bold; font-size: 11pt; width: 150px;">Last Name</div>

                <input type="text" id="last_name" name="last_name" data-placeholder="Student's Last Name" style="font-size: 13pt; font-weight: bold; color: #1C43A6; width: 300px;" />

            </div>

        </div>

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

        <div class="columns">

            <div class="third">

                <p class="info_text">
                    Provide the student's date of birth.  Click the DOB text-box to bring up a date picker.
                </p>

            </div>

            <div class="half" style="width: 650px; position: relative;">

                <div style="float: left; font-weight: bold; font-size: 11pt; width: 150px;">Date of Birth</div>
                
                <img src="{{ asset('/images/icons/waiver_action_icon_48px.png') }}" class="action_item" id="student_dob_action_image" alt="" title="" style="position: absolute; right: 70px; top: -12px;" />
                
                <input type="text" id="birth_date" name="birth_date" style="font-size: 13pt; font-weight: bold; color: #1C43A6; width: 150px;" /><span id="age" style="margin-left: 50px; font-style: italic;"></span>

                <br /><br />

                <div style="float: left; font-weight: bold; font-size: 11pt; width: 150px;">Country</div>

                <select name="country" id="country" style="font-size: 13pt; font-weight: bold; color: #1C43A6;">
                    @foreach ($info['countries'] as $value => $text)
                        <option value="{{ $value }}" >{{ $text }}</option>
                    @endforeach
                </select> 

            </div>

        </div>

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

        <div class="columns" id="ready">

            <div class="third">

                <p id="ready_text">
                    <span class="ui-icon ui-icon-check float_left" style="margin-right: 4px;"></span>Ready for step 2.
                </p>

            </div>

            <div class="half" style="width: 650px; position: relative;">

                <div style="float: left; font-weight: bold; font-size: 11pt; width: 150px;">&nbsp;</div>
                
                <img src="{{ asset('/images/icons/waiver_action_icon_2_48px.png') }}" class="action_item" id="ready_action_image" alt="" title="" style="position: absolute; right: 70px; top: -12px;" />
                
                <input type="submit" value="Next" class="submit_button" />                

            </div>

        </div>

    </form>

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

    
@stop