@section('page_title')
    OSAA - Music Large Ensemble Contest Report
@stop

@section('page_sub_title')    
    
    OSAA Music Large Ensemble Contest Report

@stop

@section('scripts')
    @parent

    <script src="{{ asset('/scripts/jquery.maskedinput.min.js') }}" type="text/javascript"></script>

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

        .form_area {
            margin-top: 1.5em;
        }

        #new_form {
            position: relative;
        }

        #new_form .step {
            position: absolute;
            top 0;
        }

        label {
            font-weight: bold;
            width: 125px;
            text-align: right;
            margin-right: 25px;
            display: inline-block;
            position: relative;
        }     
        
        .required {
            color: #990000;
            font-weight: bold;
            font-size: 14pt;
            position: relative;
            top: 4px;
            margin-left: 5px;
        }

        .required_note {
            position: absolute;
            top: -1em;
            right: 0;
            font-size: 8pt;
        }

        .required_note .required {
            margin: 0;
        }

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

        .form_note {
            float: right;
            width: 50%; 
            font-size: 10pt;
            color: #666666;    
            position: relative;       
        }

        .next_step_area {
            float: right;
            width: 50%;             
            position: relative;  
        }

        .helper_note_area {
            float: left;
            width: 40%;             
            position: relative;  
            padding: 0.5em 0 0 60px;
        }

        .form_note .info_icon {
            display: inline-block;
            position: relative;
            /* top: 2px; */
            vertical-align: middle;
            top: -1px;
        }

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

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

    // Name fields (do not allow any special characters) 
    $('[data-name-field]').bind('input', function()
    {
        $(this).val($(this).val().replace(/[^A-Za-z \-'\.,]/gi, ''));
    });

    // Phone field
    $('[data-phone-field]').mask("(999) 999-9999");

    // Date picker
    $('[data-date-picker]').datepicker({'dateFormat':'mm/dd/yy',
                                        'maxDate':'+0d'});

    // Auto-complete fields
    $('input[type="text"][data-auto-complete]').each(function()
    {
        $(this).autocomplete({'source' : '{{ url('/forms/music/') }}/get-' + $(this).attr('data-auto-complete'),
                              'minLength' : 3});
    });

    // Admin button
    $('.admin_button')
        .button({'icons':{'primary':'ui-icon-star'}})
        .css({'font-size':'9pt',
              'margin-right':'10px'});

    // Reset button
    $('.reset_button')
        .button({'icons':{'primary':'ui-icon-arrowreturnthick-1-w'}})
        .css({'font-size':'9pt'})
        .click(function(event)
        {               
            event.preventDefault();

            var link = $(this);
            var href = link.attr('href');

            $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    draggable : true,
                    resizable : false,
                    modal : true,
                    height : 250,
                    width : 400,                    
                    title : 'Confirmation',
                    buttons: [
                        {
                            text : "Yes",
                            'class' : "float_left",
                            icons : { primary : 'ui-icon-check'},
                            click : function()
                                    {                                                       
                                        window.location = href;             
                                    }
                        },
                        {
                            text : "No",
                            'class' : "float_right",
                            'data-autofocus' : "true",
                            icons : { primary : 'ui-icon-close'},
                            click : function()
                                    {
                                        // Close the dialog box
                                        $(this).dialog("close");                           
                                    }
                        }
                    ],
                    open : function ()
                        {  
                            var dialog_object = $(this);

                            dialog_object.html('<br />Are you sure you want to reset and clear this form?<div style="font-size: 9pt; margin-top: 1em;" class="small gray note">Your changes will be lost and you\'ll have to start over from scratch.</div>');                           
                            
                            $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
                            $('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');   

                            $('[data-autofocus="true"]').focus();
                        },
                    close : function ()
                        {
                            var dialog_object = $(this);                            

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


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

            $('<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/music/help') }}?topic=create',
                                          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();
                        }                
                });


        }); 
     
    // Shake action items
    function shakeActionImages (object)
    {
        var direction;
        if ($(object).has('[data-direction]'))
        {
            var direction = $(object).attr('data-direction');
        }
        
        if (typeof direction == 'undefined')        
        {
            var direction = 'left';
        }        

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

    $('img.action_item').each(function()
    {
        var img = $(this);
        shakeActionImages(img);
    });

    
    // Hide inactive steps
    $('.step[data-step!="1"]').hide();


    // Next step buttons
    $('.next_step')
        .button({'icons' : {'secondary' : 'ui-icon-circle-arrow-e'}})
        .css({'font-size' : '11pt'});

    // Create form button
    $('.create_form')
        .button({'icons' : {'secondary' : 'ui-icon-clipboard'}})
        .css({'font-size' : '11pt'});

    function indicateInvalidField (field, remove)
    {
        var name = field.attr('name');

        if (!remove)
        {
            var icon = $('<img />')
                           .attr('data-validation-icon', 'true')
                           .attr('alt', '')
                           .attr('title', '')
                           .attr('src', '{{ url('/images/icons/alert_16px.png') }}')
                           .css({'position' : 'absolute',
                                 'top' : '1px',
                                 'right' : '-25px'});

            
            var alert_text = field.attr('data-alert');
            var label = $('label[for="' + name + '"]');            

            label
                .append(icon);

            field
                .css({'background-color' : '#ffdddd'})
                .focus();

            $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    modal : true,
                    draggable : false,
                    resizable : false,                    
                    height : 275,                    
                    width : 415,                    
                    title : 'Whoops! You Forgot Something',                    
                    buttons: [
                        {
                            text : "OK",
                            'class' : "float_right",
                            icons : { primary : 'ui-icon-check'},
                            click : function()
                                    {                                                       
                                        // Close the dialog box
                                        $(this).dialog("close"); 
                                    }
                        }
                    ],
                    open : function ()
                        {  
                            var dialog_object = $(this);

                            dialog_object.html('<br />' + alert_text + '<div style="font-size: 9pt; margin-top: 1em;" class="small gray note">The field in question has been highlighted and an alert icon has also been added to grab your attention.</div>');
                            
                            $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
                            $('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');
                            $('.ui-dialog-buttonpane .ui-dialog-buttonset').append('<div style="font-size: 8pt; line-height: 1.25em; margin-top: 0.5em;">Still having trouble?<br />(503) 682-6722 x228</div>');
                        },                    
                    close : function ()
                        {
                            var dialog_object = $(this);
                            $(dialog_object).remove();
                        }                
                });
        }
        else
        {
            $('label[for="' + name + '"] img[data-validation-icon]').remove();
            field.css({'background-color' : ''});
        }
    }

    // Verify information for step 1
    $('.step[data-step="1"] .next_step')
        .click(function ()
        {
            // Check organizer name
            var organizer_name = $('input[type="text"][name="organizer_name"]');
            if (organizer_name.val() == '' || organizer_name.val() == organizer_name.attr('data-placeholder'))
            {
                indicateInvalidField(organizer_name, false);
                return;
            }
            else
            {
                indicateInvalidField(organizer_name, true);
            }

            // Check organizer email
            var organizer_email = $('input[type="text"][name="organizer_email"]');
            if (organizer_email.val() == '')
            {
                indicateInvalidField(organizer_email, false);
                return;
            }
            else
            {
                indicateInvalidField(organizer_email, true);
            }

            // Check organizer phone
            var organizer_phone = $('input[type="text"][name="organizer_phone"]');
            if (organizer_phone.val() == '')
            {
                indicateInvalidField(organizer_phone, false);
                return;
            }
            else
            {
                indicateInvalidField(organizer_phone, true);
            }       

            // Made it through the validation checks
            $('.step[data-step="1"]')
                .hide({'effect' : 'slide',
                       'direction' : 'left',
                       'duration' : 1000,
                       'queue' : false})
                .fadeOut({'duration' : 750,
                          'queue' : false,
                          'complete' : function ()
                          {
                              $('[data-fill-in="organizer_name"]').text(organizer_name.val());

                              $('.step[data-step="2"]')
                                  .fadeIn({'duration' : 750,
                                           'queue' : false})
                                  .css({'display':'none'})
                                  .show({'effect' : 'slide',
                                         'direction' : 'right',
                                         'duration' : 1000,
                                         'queue' : false});
                          }});

        });

    // Verify information for step 2
    $('.step[data-step="2"] .create_form')
        .click(function ()
        {
            // Check event name
            var event_name = $('input[type="text"][name="event_name"]');
            if (event_name.val() == '')
            {
                indicateInvalidField(event_name, false);
                return;
            }
            else
            {
                indicateInvalidField(event_name, true);
            }

            // Check the event date
            var date = $('input[type="text"][name="date"]');
            if (date.val() == '')
            {
                indicateInvalidField(date, false);
                return;
            }
            else
            {
                indicateInvalidField(date, true);
            }

            // Check location
            var location = $('input[type="text"][name="location"]');
            if (location.val() == '')
            {
                indicateInvalidField(location, false);
                return;
            }
            else
            {
                indicateInvalidField(location, true);
            }

            // Check activity
            var activity = $('select[name="activity"]');
            var activity_value = activity.children(':selected').val();
            if (activity_value == '')
            {
                indicateInvalidField(activity, false);
                return;
            }
            else
            {
                indicateInvalidField(activity, true);
            }

            // Check event_type
            var event_type = $('select[name="event_type"]');
            var event_type_value = event_type.children(':selected').val();
            if (event_type_value == '')
            {
                indicateInvalidField(event_type, false);
                return;
            }
            else
            {
                indicateInvalidField(event_type, true);
            }

            // Made it through the validation checks                                  
            $('<div><div>')
                .appendTo('body')
                .css({'width' : '225px',
                      'height' : '170px',
                      'text-align' : 'center',
                      'padding' : '0.5em',
                      'position' : 'absolute',
                      'display' : 'none'})
                .fadeIn(400)
                .position({my : "center center", at : "center center-100", of : $('#full_page_content')})
                .addClass('ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons')
                .html('<br />Creating Form...<br /><br /><img src="http://www.osaa.org/images/icons/ajax_loader3.gif" /><div style="font-size: 8pt; line-height: 105%; margin-top: 2em;">Please wait, this may take a while to process.</div>');

            // Hide the step 2 panel
            $('.step[data-step="2"]')
                .hide({'effect' : 'slide',
                       'direction' : 'left',
                       'duration' : 1000,
                       'queue' : false})
                .fadeOut({'duration' : 750});

            // Submit form data
            $('#new_form').submit();
        });    
    
@stop

@section('page_functions')  	

    @if (Auth::check() and Auth::user()->isOsaaUser())
        <a href="{{ url('/forms/music/large-ensemble/admin') }}" class="admin_button">Admin</a>
    @endif

    <a href="#" class="help_button">Help</a>

    <a href="{{ url('/forms/music/large-ensemble') }}" class="reset_button">Reset/Clear Form</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: 0.5em; margin-bottom: 2em; position: relative; top: 1em;">
            <span class="ui-icon ui-icon-alert box_icon"></span>
            @foreach ($errors->all() as $error)
                {{ $error }}
            @endforeach
        </div>
    @endif 

    <div class="required_note">
         <span class="required">*</span> Required fields are indicated with a red asterisk.
    </div>

    <div class="form_area">        

        <h1>Create a New Report Form</h1>

        <br />

        {{ Form::open(array('url' => '/forms/music/large-ensemble/create',
                            'id' => 'new_form')) }}        

            {{ Form::hidden('school_year', $info['year']) }}

            {{-- Step 1 --}}
            <div class="step" data-step="1">
                <h2>Step 1: Start a New Form</h2>
                <p>
                    To create a new OSAA Music Large Ensemble Contest Report Form, begin by providing your information as the <b>Event Organizer</b>.  If you are not an event organizer, but a school looking to register to state, please <a href="{{ url('/forms/music/registration') }}">click here</a>.
                </p>
                
                <div class="form_note">                        
                    <span class="info_icon ui-icon ui-icon-info"></span>
                    You will be listed as the <b>Event Organizer</b>.  If there are any questions about the form you submit, the OSAA office may contact you via the information you provide.  Only the OSAA staff will have access to your contact information.
                    <div style="height: 4em;"></div>
                    <span class="info_icon ui-icon ui-icon-info"></span>
                    It is helpful to know from which school or organization you are associated.  This field will show you some suggested options as you type.
                </div>

                {{ Form::label('organizer_name', 'Your Name') }}
                {{ Form::text('organizer_name', null, array('data-name-field' => 'true',
                                                            'data-placeholder' => 'First Last',
                                                            'data-required' => 'true',
                                                            'data-alert' => 'You must provide your first and last name in the name field before moving on to the next step.')) }}

                <br /><br />

                {{ Form::label('organizer_email', 'Email Address') }}
                {{ Form::text('organizer_email', null, array('data-required' => 'true',
                                                             'data-alert' => 'You must provide your e-mail address before moving on to the next step.',
                                                             'style' => 'width: 250px;')) }}

                <br /><br />

                {{ Form::label('organizer_phone', 'Phone Number') }}
                {{ Form::text('organizer_phone', null, array('data-phone-field' => 'true',
                                                             'data-required' => 'true',
                                                             'data-alert' => 'You must provide your 10 digit phone number before moving on to the next step.',
                                                             'style' => 'width: 115px;')) }}

                <br /><br />

                {{ Form::label('organizer_school', 'School / Org.') }}
                {{ Form::text('organizer_school', null, array('data-auto-complete' => 'schools',
                                                              'style' => 'width: 300px;')) }}

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

                <div class="next_step_area">
                    <img src="{{ asset('/images/icons/waiver_action_icon_right_48px.png') }}" class="action_item" alt="" title="" style="position: absolute; left: -60px; top: -8px;" data-direction="right" />
                    <div class="next_step">Next</div>
                </div>

                <div class="helper_note_area">                    
                    <img src="{{ asset('/images/icons/help_24px.png') }}" alt="" title="" style="vertical-align: middle; margin: 0 10px 0 0;" />
                    <a href="{{ asset('/docs/osaainfo/Event Organizer Primer.pdf') }}" target="_blank" class="primer_button">Event Organizer Primer</a>
                </div>

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

            </div>

            {{-- Step 2 --}}
            <div class="step" data-step="2">
                <h2>Step 2: Provide Some Event Information</h2>
                <p>
                    Thanks, <span data-fill-in="organizer_name"></span>, for completing Step 1.  For Step 2, you'll need to provide information about the event or festival.  It is important to provide accurate information.  If you are unsure about an option, check out the Help button for more details.  If you want to start over, click the Reset/Clear button to start a new form from scratch.
                </p>
                
                <div class="form_note" style="width: 40%;">                        
                    <span class="info_icon ui-icon ui-icon-info"></span>
                    Click the date field to bring up a date picker.  Dates should be entered in MM/DD/YYYY format.  If the event or festival occurred over more than one day, provide the last day of the event.
                    <div style="height: 1.75em;"></div>
                    <span class="info_icon ui-icon ui-icon-info"></span>
                    The location field will show you suggested options as you type.
                    <div style="height: 1.5em;"></div>
                    <span class="info_icon ui-icon ui-icon-info"></span>
                    Was this event a choir, band, or orchestra activity?
                    <div style="height: 1em;"></div>
                    <span class="info_icon ui-icon ui-icon-info"></span>
                    What type of event was this contest?  There is a difference between OSAA League contests and OMEA District contests.
                </div>

                {{ Form::label('event_name', 'Event Title') }}
                {{ Form::text('event_name', null, array('data-required' => 'true',
                                                        'data-alert' => 'You must provide the name/title of the event before moving on to the next step.',
                                                        'style' => 'width: 400px;')) }}

                <br /><br />

                {{ Form::label('date', 'Date') }}
                {{ Form::text('date', null, array('data-date-picker' => 'true',
                                                  'data-required' => 'true',
                                                  'data-alert' => 'You must select the date when the event was held before moving on to the next step.',
                                                  'style' => 'width: 100px;')) }}

                <br /><br />

                {{ Form::label('location', 'Location') }}
                {{ Form::text('location', null, array('data-required' => 'true',
                                                      'data-alert' => 'You must enter in where the event was held before moving on to the next step.',
                                                      'data-auto-complete' => 'locations',
                                                      'style' => 'width: 300px;')) }}

                <br /><br />

                {{ Form::label('activity', 'Activity') }}
                {{ Form::select('activity', array_merge(array('' => ''), $info['activities']), null,
                                array('data-required' => 'true',
                                      'data-alert' => 'Before moving on to the next step, you must select this event\'s activity from the drop-down list.',
                                      'style' => 'width: 100px;')) }}

                <br /><br />

                {{ Form::label('event_type', 'Type') }}
                {{ Form::select('event_type', array_merge(array('' => ''), $info['event_types']), null,
                                array('data-required' => 'true',
                                      'data-alert' => 'You must select the correct event type for this contest.  This has a major impact on the qualifiers and it must be selected before moving forward on to the next step.',
                                      'style' => 'width: 200px;')) }}

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

                <div class="next_step_area">
                    <img src="{{ asset('/images/icons/waiver_action_icon_right_48px.png') }}" class="action_item" alt="" title="" style="position: absolute; left: -60px; top: -8px;" data-direction="right" />
                    <div class="create_form">Create Form</div>
                </div>

                <div class="helper_note_area" style="font-size: 9pt; line-height: 1.15em;">                    
                    You will also receive an email will a link to your form, <br />just in case you need to close the form and come back to it later.
                </div>

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

            </div>           

        {{ Form::close() }}        

    </div>

    <div class="online_form_instructions ui-corner-all" style="position: absolute; top: 37em; font-size: 9pt; line-height: 125%;">
        <span class="ui-icon ui-icon-info" style="display:inline-block; position:relative; top:2px;"></span>
        
        This form is to be completed immediately following the event by the <b>Event Organizer</b>.  This is not the state registration form.
        <br />Entries on this form indicate music groups that have participated in a state qualifying event.
        
        <br /><br />
        
        <span style="color: #990000; font-weight: bold;">If you are a music group looking to register for state, please <a href="{{ url('/forms/music/registration') }}">click here</a>.</span>

        <br /><br />

        For questions, click the Help button for full details and instructions.<br />
        If you need assistance, contact OSAA Support at (503) 682-6722 x228 or email {{ Helpers::obfuscateEmailLink ("support@osaa.org") }}.
    </div>      

    
@stop