<?php $__env->startSection('page_title'); ?>
    OSAA - Eligibility
<?php $__env->stopSection(); ?>

<?php $__env->startSection('page_sub_title'); ?>    
    
    Create a New Student Eligibility Request Form   

<?php $__env->stopSection(); ?>

<?php $__env->startSection('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>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('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 : '<?php echo 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 : '<?php echo 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="<?php echo 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();

    <?php /*  Future Eligibility Notice  */ ?>
    <?php if (intval(date('Y', time())) == intval(Helpers::getCurrentYear()) and
         intval(date('n', time())) <= 8 and
         intval(date('j', time())) < 9): ?>
    
        // 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');
            }
        });

    <?php endif; ?>
    
<?php $__env->stopSection(); ?>

<?php $__env->startSection('page_functions'); ?>  	

    <a href="#" class="help_button" data-topic="create">Help</a>
    <a href="<?php echo url('/forms/eligibility'); ?>" class="cancel_button">Cancel</a>    
    
<?php $__env->stopSection(); ?>


<?php $__env->startSection('main_content'); ?>    		

 	<?php /*  Success Bar  */ ?>
 	<?php if (Session::has('success')): ?>
		<div class="success_bar">
			<div class="message">				
				<?php echo Session::get('success'); ?>
			</div>			
		</div>
	<?php endif; ?> 

    <?php /*  Errors  */ ?>
    <?php 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>
            <?php foreach ($errors->all() as $error): ?>
                <?php echo $error; ?>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>   

    <form action="<?php echo url('/forms/eligibility/new'); ?>" method="POST">

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

        <?php /*  Test Mode for OSAA Staff  */ ?>
        <?php 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="<?php echo 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 />

        <?php endif; ?>


        <?php /*  Future Eligibility Notice  */ ?>
        <?php if (intval(date('Y', time())) == intval(Helpers::getCurrentYear()) and
             intval(date('n', time())) <= 8 and
             intval(date('j', time())) < 9): ?>
            <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 August 15</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>
        <?php 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;"><?php echo $info['school']->name; ?></div>

                <input type="hidden" name="school_id" value="<?php echo $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;"><?php echo $info['school_year']->name; ?></div>

                <input type="hidden" name="school_year" value="<?php echo $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="<?php echo 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>
                    <?php foreach ($info['waiver_types'] as $type): ?>
                        
                            <?php if (Helpers::strEqual($type->default_handler_type, 'District Athletic Committee')): ?>
                                <option value="<?php echo $type->slug; ?>" data-info='{"slug":"<?php echo $type->slug; ?>","name":"<?php echo $type->name; ?>","rule":"<?php echo $type->rule; ?>","link":"<?php echo $type->rule_link_path; ?>","default_handler":"<?php echo str_replace('Executive Director', 'OSAA Executive Director', $type->default_handler_type); ?>"}' style="font-size: 11pt;">
                                    <?php echo str_replace('with ', 'w/', str_replace('without', 'w/o', $type->slug)); ?> (+ Grade Def. and/or Sat. Prog. Toward Grad.)
                                </option>
                            <?php else: ?>
                                <option value="<?php echo $type->slug; ?>" data-info='{"slug":"<?php echo $type->slug; ?>","name":"<?php echo $type->name; ?>","rule":"<?php echo $type->rule; ?>","link":"<?php echo $type->rule_link_path; ?>","default_handler":"<?php echo str_replace('Executive Director', 'OSAA Executive Director', $type->default_handler_type); ?>"}'>
                                    <?php echo $type->slug; ?>
                                </option>
                            <?php endif; ?>
                        </option>
                    <?php 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="<?php echo 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="<?php echo 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;">
                    <?php foreach ($info['countries'] as $value => $text): ?>
                        <option value="<?php echo $value; ?>" ><?php echo $text; ?></option>
                    <?php 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="<?php echo 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 />

    
<?php $__env->stopSection(); ?>
