@section('page_title')
    OSAA - Coop Application
@stop

@section('page_sub_title')    
    
    Create a New Coop Application 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;
        }

        /* 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);
		})
	});    

    // 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'});
    
    /*
     * Cancel button
     */
    $('.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 coop application form?');
        });
    
    /*
     * Submit button
     */
    $('.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 : 650,
                    minWidth : 450,
                    modal : true,
                    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/coop-application/0/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();
                        }                
                });

        });    

    /*
     * Form behavior    
     */
    
    // Select activity
    $('#activity').on('change', function()
    {
        var select = $(this);
        var option = $('[data-default]', select);
        option.remove();

        var action_item = getActionImage(select);
        action_item.remove();

        checkReadiness();
    });

    // Select starting school year
    $('#starting_school_year').on('change', function()
    {
        var select = $(this);
        var option = $('[data-default]', select);
        option.remove();

        var action_item = getActionImage(select);
        action_item.remove();

        var task = select.parents('div[data-task]');
        var add_info = $('[name="additional_information"]', task);
        add_info.html('&nbsp;');

        var selected = $('option:selected', select);
        var starting_year = parseInt(selected.text());

        if (starting_year == {{ $info['current_school_year'] }})
        {
            add_info.html('The coop will be for this current school year.');
        }

        if (starting_year == {{ $info['current_school_year'] }} + 1)
        {
            add_info.html('The coop will begin in the next school year.');
        }

        checkReadiness();
    });

    // Select coop duration
    $('input[type="radio"][name="coop_duration"]').on('change', function()
    {
        var input = $(this);        

        var action_item = getActionImage(input);
        action_item.remove();

        checkReadiness();
    });

    // Select host school
    $('#host_school').on('change', function()
    {
        var select = $(this);
        var option = $('[data-default]', select);
        option.remove();

        var action_item = getActionImage(select);
        action_item.remove();

        var task = select.parents('div[data-task]');
        var add_info = $('[name="additional_information"]', task);
        var host_school_name = $('option:selected', select).html();
        add_info.html('&nbsp;');

        add_info.html(host_school_name + ' will the first school listed.');        

        // What if the host school is not my school?
        if (parseInt($('option:selected', select).val()) != {{ $info['school']->id }})
        {
            $('option[value="{{ $info['school']->id }}"]', $('#school_2')).attr('selected', 'selected').click();
            checkSchool2($('#school_2'));
            $('#school_2').attr('disabled', 'disabled');
        }
        else
        {
            $('#school_2').removeAttr('disabled');
        }

        checkReadiness();
    });

    // Select school 2
    $('#school_2').on('change', function()
    {
        checkSchool2($(this));
    });
    
    function checkSchool2 (element)
    {
        var select = element;
        var task = select.parents('div[data-task]');
        var add_info = $('[name="additional_information"]', task);
        
        if (!$('option:selected', select).is('[data-default]'))
        {
            var option = $('[data-default]', select);
            option.remove();

            var action_item = getActionImage(select);
            action_item.remove();

            
            var school_2_name = $('option:selected', select).html();
            add_info.html('&nbsp;');

            add_info.html(school_2_name + ' will the second school listed.');            
        }
        else
        {
            add_info.html('Select a second school.');
            var img = $('<img src="{{ asset('/images/icons/waiver_action_icon_48px.png') }}" class="action_item" alt="" title="" style="position: absolute; right: 65px; top: -12px;" />'); 
            select.before(img);
            shakeActionImages(img);
        }        

        checkReadiness();
    }

    /*
     * Add Third School Button
     */
    $('a[data-action="add_third_school"]')
        .button()
        .css({'margin-left' : '0px', 
              'font-size' : '8pt'})
        .on('click', function(event)
        {
            event.preventDefault();

            var button = $(this);
            var task = $('[data-task="select-third-school"]');
            var show_task = (task.is(':visible'));            
            
            if (show_task)
            {
                // Remove 3rd school task
                button.button({'label' : 'Add a Third School'});
                task.fadeOut(400);
            }
            else
            {
                // Show 3rd school task
                button.button({'label' : 'Remove the Third School'});
                task.fadeIn(400);
            }

            checkReadiness();
        });

    // Select school 3
    $('#school_3').on('change', function()
    {
        var select = $(this);
        var option = $('[data-default]', select);
        option.remove();

        var action_item = getActionImage(select);
        action_item.remove();        

        checkReadiness();
    });


    // Get task's action image
    function getActionImage(element)
    {
        var task = element.parents('div[data-task]');
        var image = $('img[class="action_item"]', task);

        return image;
    }

    // Shake action items
    $('img[class="action_item"]').each(function(index)
    {
        shakeActionImages($(this));
    });

    // Remove third school option
    $('[data-task="select-third-school"]').hide();    

       
    // Check if ready to move onwards
    function checkReadiness()
    {
        var action_items = $('img[class="action_item"]:visible');

        if (action_items.size() == 0)
        {
            $('#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.');
        }

        // Check starting school year and duration options
        var selected_starting_year_option = $('option:selected', $('#starting_school_year'));
        var task_group = $('div[data-task="select-coop-duration"]');
        if (selected_starting_year_option.is('[data-default]'))
        {
            $('input[type="radio"]', task_group).attr('disabled', 'disabled');
            $('label', task_group).addClass('gray');
            
        }
        else
        {
            $('input[type="radio"]', task_group).removeAttr('disabled');
            $('label', task_group).removeClass('gray');

            // Limit durations to within the selected school year block
            var starting_year = parseInt(selected_starting_year_option.val());
            var year_block = selected_starting_year_option.parents('optgroup');            
            var max_year = parseInt(year_block.attr('data-max-year'));
            
            var max_duration = max_year - starting_year;

            $('input[type="radio"]', task_group).each(function(index)
            {
                var item = $(this);

                var duration = item.attr('data-length');

                if (duration > max_duration)
                {
                    if (item.is(':checked'))
                    {
                        $('input[type="radio"][data-length="' + max_duration + '"]', task_group).click();
                    }

                    item.attr('disabled', 'disabled');
                    $('label[for="' + item.attr('id') + '"]', task_group).addClass('gray');
                }
            });
        }

        // Check host school and other school options
        var selected_host_school_option = $('option:selected', $('#host_school'));
        var task_group = $('div[data-task="select-host-school"]');
        if (selected_host_school_option.is('[data-default]'))
        {
            // No host school is selected, must be done first
            $('#school_2').attr('disabled', 'disabled');
            $('a[data-action="add_third_school"]').button("disable");            
        }
        else
        {
            // Host school is selected, enable school 2
            $('a[data-action="add_third_school"]').button("enable");
            var host_school_id = selected_host_school_option.val();

            // Remove that option from the list of other schools
            $('option', $('#school_2')).removeAttr('disabled');
            
            if ($('option[value="' + host_school_id + '"]', $('#school_2')).is(':selected'))
            {                
                $('option[value="' + host_school_id + '"]', $('#school_2')).removeAttr('selected');
                $('#school_2').prepend($('<option value="" selected="selected" data-default=""></option>'));
                checkSchool2($('#school_2'));
            }
            
            $('option[value="' + host_school_id + '"]', $('#school_2')).attr('disabled', 'disabled');            
            $('#school_2').removeAttr('disabled');
        }




    }    
    
    checkReadiness();
    
    
@stop

@section('page_functions')  	

    <a href="#" class="help_button" data-topic="create">Help</a>
    <a href="{{ url('/forms/coop-application') }}" 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/coop-application/new') }}" method="POST">

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

        <h1>Step 1: Preliminary Information</h1>

        {{-- 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>Coop Application Unavailable</b><br />
                    The online Coop Application form is currently not available.  Coop applications are not being accepted until the next school year block is setup with classification and league alignments.
            </div>
        @endif

        <br />

        {{-- Activity --}}
        <div class="columns" data-task="select-activity">

            <div class="third">
                <p class="info_text">
                    Which activity will be covered by the cooperative sponsorship?
                </p>
            </div>

            <div class="half" style="width: 650px; position: relative;">                
                <div style="float: left; font-weight: bold; font-size: 11pt; width: 200px;">Activity</div>
                <img src="{{ asset('/images/icons/waiver_action_icon_48px.png') }}" class="action_item" alt="" title="" style="position: absolute; right: 65px; top: -12px;" />
                <select id="activity" name="activity" style="font-size: 13pt; font-weight: bold; color: #1C43A6; width: 250px;">
                    <option value="" data-default=""></option>
                    @foreach ($info['activities'] as $season => $activities)                        
                        <br />
<b>Fatal error</b>:  Class 'Helpers' not found in <b>/home/osaa/web_app/dev/app/views/coop_form/create.blade.php</b> on line <b>566</b><br />