<?php $__env->startSection('page_title'); ?>
    OSAA - Music Large Ensemble Contest Report
<?php $__env->stopSection(); ?>

<?php $__env->startSection('page_sub_title'); ?>    
    
    OSAA Music Large Ensemble Contest Report Form

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

<?php $__env->startSection('scripts'); ?>
    @parent

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.3.1/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;  
        }

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

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

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

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

    // Table row highlighter
    function colorRows ()
    {       
        $('table').each(function ()
        {
            var i = 0;

            $('tbody tr:visible', $(this)).each(function ()
            {
                if (i % 2 == 1)
                {
                    $(this).addClass('odd');
                }
                else
                {
                    $(this).removeClass('odd');
                }
                i = i + 1;
            });     
        });
    }   
    colorRows();    


    // Close button
    $('.close_button')
        .button({'icons':{'primary':' ui-icon-circle-close'}})
        .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);

                            <?php if (is_null($info['form'])): ?>
                                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>');
                            <?php else: ?>
                                dialog_object.html('<br />Are you sure you want to delete this form?<div style="font-size: 9pt; margin-top: 1em;" class="small gray note">Your form will be deleted.  This cannot be undone.</div>');
                            <?php endif; ?>
                            
                            $('.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);

                            record.css({'background-color':original_background_color});

                            $(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 : '<?php echo url('forms/music/help'); ?>',
                                          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'});

    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', '<?php echo 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"] .next_step')
        .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 type
            var type = $('select[name="type"]');
            var type_value = type.children(':selected').val();
            if (type_value == '')
            {
                indicateInvalidField(type, false);
                return;
            }
            else
            {
                indicateInvalidField(type, 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
            $('.step[data-step="2"]')
                .hide({'effect' : 'slide',
                       'direction' : 'left',
                       'duration' : 1000,
                       'queue' : false})
                .fadeOut({'duration' : 750,
                          'queue' : false,
                          'complete' : function ()
                          {
                              $('[data-fill-in="event_type"]').text(event_type.children(':selected').text());

                              if (event_type.children(':selected').val() == 'Invitational')
                              {
                                  $('.league_input').remove();
                              }
                              else
                              {
                                  if (event_type.children(':selected').val() == 'OSAA League')
                                  {
                                      $('[data-fill-in="league_district"]').text('OSAA league');
                                      $('label[for="league"]').text('OSAA League');
                                      $('select[name="league"] option[data-league-type!="league"]').remove();
                                  }
                                  else
                                  {
                                      $('[data-fill-in="league_district"]').text('OMEA district');
                                      $('label[for="league"]').text('OMEA District');
                                      $('select[name="league"] option[data-league-type!="district"]').remove();
                                  }
                              }

                              $('select[data-adjudicator-select] option[data-adjudicator-type!="' + type.val().toLowerCase() + '"]').remove();

                              if (type.val().toLowerCase() == 'choir')
                              {
                                  $('[data-fill-in="number_adjudicators"]').text('three (3)');
                              }
                              else
                              {
                                  $('[data-fill-in="number_adjudicators"]').text('two (2)');
                              }

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

        });

    <?php if (!is_null($info['form'])): ?>

        /* saveFormData
         *
         * Given a form's data field index, field, and a value, this function will do a
         * JSON POST request to save the form's information.  The optional
         * fourth parameter will determine if the page will be reloaded or not.
         */
        function saveFormData(index, field, value, reload)
        {
            // Ensure the index, field, and value parameters are provided
            if (typeof index == 'undefined' || typeof field == 'undefined' || typeof value == 'undefined')
            {
                alert('Scripting error.  Unable to save form data.');
            }

            // Get the optional reload parameter
            reload = typeof reload !== 'undefined' ? reload : false;

            // Get the form ID
            var form_id = <?php echo $info['form']->id; ?>;

            $('*').css({'cursor':'wait'});

            var jqxhr = $.ajax(
            {
                type : 'POST',
                url : '<?php echo url('/forms/music/ensemble-report'); ?>/' + form_id + '/update',
                data : { 'index' : index,
                         'field' : field,
                         'value' : value,
                         'type'  : type },
                dataType : 'html'
            })
            .done(function(returned_data)
            {                               
                // Success
                console.log("Successfully saved {'" + form_id + "|" + field + "' : '" + value + "'}");
                
                var info = $.parseJSON(returned_data);

                $('#updated_at').html(info.updated_at);                    

                if (info.force_reload)
                {
                    reload = true;
                }
            })
            .fail(function(jqXHR, status, error)
            {                                                   
                // Error
                var response = jqXHR.responseText;
                var errorData = $.parseJSON(response);
                console.log(errorData);
                alert("There was an error saving this form's data.\n\n" + errorData.error.message + "\n\nPlease try again.  Please note, that if you try to reload this page, your unsaved data to be lost.");
            })
            .complete(function ()
            {
                // Reload if necessary
                if (reload)
                {
                    location.reload();
                }

                $('*').css({'cursor':''});
            });
        } 



    
    // Sub-Division option
    $('input[name="sub_division"]').click(function ()
    {       

      var item = $('input[name="sub_division"]:checked');
      var value = item.val();

      saveFormData('sub_division', value, 'string', false);
    }); 
    
    // Reserve seating option
    $('input[name="reserve_seating"]').change(function()
    {
      var item = $(this);
      var value = item.is(':checked');

      saveFormData('reserve_seating', value, 'bool', false);
    });

    // Sanctioned competitions option
    $('select[name^="competition"]').change(function(event)
    {
      var item = $(this);
      var id = item.attr('data-id');
      var selected = $(':selected', item);
      var value = selected.val();

      // Ensure the selections are different if not empty
      if (id == '0')
      {
        var other = $('select[name^="competition"][data-id="1"]');
      }   
      else
      {
        var other = $('select[name^="competition"][data-id="0"]');
      }

      var other_value = $(':selected', other).val();
      
      if (other_value == value && value != '')
      {
        alert('The sanctioned competition options must be different.');       
        item.val($.data(item, 'current'));
        return false;
      }

      saveFormData('competitions[' + id + ']', value, 'int', false);
    });

    // Alternates
    $('[name^="alternate"]').blur(function(event)
    {
      var item = $(this);
      var id = item.attr('data-id');
      var part = item.attr('data-part');

      if (part == 'grade')
      {
        var selected = $(':selected', item);
        var grade = selected.val();       

        var name_field = $('[name^="alternate"][data-part="name"][data-id="' + id + '"');
        var name = name_field.val();
      }
      else
      {
        var name = item.val();
        
        var grade_field = $('[name^="alternate"][data-part="grade"][data-id="' + id + '"');
        var selected = $(':selected', grade_field);
        var grade = selected.val();     
      }

      if (grade == '' || grade == ' ')
      {
        grade = null;
      }
      if (name == '')
      {
        name = '';
      }

      var data = '{"name":"' + name + '","grade":' + grade + '}';

      saveFormData('alternates[' + id + ']', data, 'object', false);
    });
    
    // Do not allow special characters in alternates' names
    $('input[name^="alternate"][data-part="name"]').bind('input', function()
    {
          $(this).val($(this).val().replace(/[^A-Za-z \-'\.]/gi, ''));
    });

    // Choreographers
    $('input[name^="choreographer"]')
      .blur(function(event)
      {
        var item = $(this);
        var id = item.attr('data-id');
        var value = item.val();       

        saveFormData('choreographers[' + id + ']', value, 'string', false);
      })    
      .bind('input', function()
      {
            $(this).val($(this).val().replace(/[^A-Za-z \-'\.]/gi, ''));
      });

    // Routine theme
    $('input[name="routine_theme"]').blur(function()
    {
      var item = $(this);       
      var value = item.val();       
      
      saveFormData('routine_theme', value, 'string', false);
    });

    // Participants
    $('[name^="participant"]')
      .blur(function(event)
      {
        var item = $(this);
        var field_name = item.attr('name');

        var matches = field_name.match(/participant\[([0-9]+)\]\[(.*)\]/);

        var id = matches[1];
        var part = matches[2];        

        if (part == 'name')
        {
          var name_item = item;
        }
        else
        {
          var name_item = $('input[name="participant[' + id + '][name]"]');
        }
        
        if (part == 'grade')
        {
          var grade_item = item;
        }
        else
        {
          var grade_item = $('select[name="participant[' + id + '][grade]"]');
        }

        if (part == 'is_captain')
        {
          var captain_item = item;
        }
        else
        {
          var captain_item = $('input[name="participant[' + id + '][is_captain]"]');
        }

        var name = name_item.val();
        var grade = $(':selected', grade_item).val();
        var is_captain = captain_item.is(':checked');

        if (grade == '' || grade == ' ')
        {
          grade = 'null';
        }
        if (name == '')
        {
          name = 'null';
        }
        else
        {
          name = '"' + name + '"';
        }
        if (is_captain)
        {
          is_captain = 'true';
        }
        else
        {
          is_captain = 'false';
        }

        var data = '{"name":' + name + ',"grade":' + grade + ',"is_captain":' + is_captain + '}';
        console.log(data);

        saveFormData('participants[' + id + ']', data, 'object', false);
      });
    
    // Do not allow special characters in participant names
    $('input[name^="participant"]').bind('input', function()
      {
            $(this).val($(this).val().replace(/[^A-Za-z \-'\.]/gi, ''));
      });

        // Training Course Information
    $('.cert_info')
      .css({'vertical-align' : 'middle',
          'position' : 'absolute',
          'left' : '100px'})
      .hover(function ()
      {
        $(this).css({'cursor' : 'pointer'});
      },
      function ()
      {
        $(this).css({'cursor' : ''});
      })
      .click(function(event)
          {
              event.preventDefault();

              $('<div></div>')
                  .appendTo('body')
                  .dialog(
                  {                       
                      draggable : true,
                      resizable : false,
                      height : 600,                     
                      width : 700,                      
                      modal : false,
                      title : 'Training Course Information',
                      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('help/training-courses?ajax=true'); ?>',
                                            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();
                          }                
                  });


          });

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

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

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

    <?php if (is_null($info['form'])): ?>
        <a href="<?php echo url('/forms/music/large-ensemble'); ?>" class="close_button">Reset/Clear Form</a>        
    <?php else: ?>
        <a href="<?php echo url('/forms/music/large-ensemble'); ?>" class="close_button">Delete Form</a>        
    <?php endif; ?>

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

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

    <div class="form_area">
    
        <?php /*  New Form  */ ?>
        <?php if (is_null($info['form'])): ?>

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

            <br />

            <div id="new_form">

                <?php echo Form::hidden('school_year', $info['year']); ?>

                <?php /*  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.
                    </p>
                    
                    <div class="form_note">                        
                        <span class="info_icon ui-icon ui-icon-info"></span>
                        You will be listed as the Event Organizer.  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>

                    <?php echo Form::label('organizer_name', 'Your Name'); ?>
                    <?php echo 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 />

                    <?php echo Form::label('organizer_email', 'Email Address'); ?>
                    <?php echo 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 />

                    <?php echo Form::label('organizer_phone', 'Phone Number'); ?>
                    <?php echo 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 />

                    <?php echo Form::label('organizer_school', 'School / Org.'); ?>
                    <?php echo 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="<?php echo 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>

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

                </div>

                <?php /*  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>

                    <?php echo Form::label('event_name', 'Event Title'); ?>
                    <?php echo 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 />

                    <?php echo Form::label('date', 'Date'); ?>
                    <?php echo 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 />

                    <?php echo Form::label('location', 'Location'); ?>
                    <?php echo 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 />

                    <?php echo Form::label('type', 'Activity'); ?>
                    <?php echo Form::select('type', array_merge(array('' => ''), $info['types']), 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 />

                    <?php echo Form::label('event_type', 'Type'); ?>
                    <?php echo 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="<?php echo 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>

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

                </div>


                <?php /*  Step 3  */ ?>
                <div class="step" data-step="3">
                    <h2>Step 3: Add Some Additional Details</h2>
                    <p>
                        <span data-fill-in="organizer_name"></span>, you've completed Steps 1 and 2.  You're almost done initializing the form.  Please provide a little more detail on the event and specify who the adjudicators were.  As always, click the Help button for more details or click the Reset/Clear button to start a new form from scratch.
                    </p>
                    
                    <div class="form_note" style="width: 50%;">                        
                        <div class="league_input" style="margin-bottom: 1.5em;">
                            <span class="info_icon ui-icon ui-icon-info"></span>
                            Since you specified this contest was an <span data-fill-in="event_type"></span>, please select the the specific <span data-fill-in="league_district"></span> from the drop-down list.                            
                        </div>                        
                        <span class="info_icon ui-icon ui-icon-alert"></span>
                        To be a state qualifying event, there must be <span data-fill-in="number_adjudicators"></span> approved, certified adjudicators selected from these drop-down lists of certified and approved adjudicators.
                        <div style="height: 1.5em;"></div>
                        <span class="info_icon ui-icon ui-icon-info"></span>
                        If an adjudicator is not on this list, select "Other / Non-Certified".  In the next step, you can type in his/her name.
                    </div>

                    <div class="league_input">
                        
                        <?php echo Form::label('league', 'League / District'); ?>
                        <select id="league" name="league" data-required="true" data-alert="Because you selected the event type as an OSAA League or OMEA District Contest, you must specify which league/district the event was for." style="width: 300px;">

                            <option value="" data-league-type="league"></option>
                            <option value="" data-league-type="district"></option>

                            <?php foreach ($info['leagues'] as $value => $text): ?>

                                <option value="<?php echo $value; ?>" data-league-type="league"><?php echo preg_replace('/\(.*\)/', '', $value); ?>&nbsp;&nbsp;&nbsp;<?php echo $text; ?></option>

                            <?php endforeach; ?>

                            <?php foreach ($info['omea_districts'] as $value => $text): ?>

                                <option value="<?php echo $value; ?>" data-league-type="district"><?php echo $text; ?></option>

                            <?php endforeach; ?>

                        </select>                        

                        <br /><br />
                    </div>

                    <?php echo Form::label('adjudicator_1', 'Adjudicator #1'); ?>
                    <select id="adjudicator_1" name="adjudicator_1" data-adjudicator-select="true" data-required="true" data-alert="You must select at least one certified adjudicator in order to proceede with this form." style="width: 215px;">

                        <?php foreach (array_keys($info['types']) as $type): ?>
                            <?php
                                $type = strtolower($type);
                            ?>
                            <option value="" data-adjudicator-type="<?php echo $type; ?>"></option>
                            <?php if (isset($info[$type . '_adjudicators']) and count($info[$type . '_adjudicators']) > 0): ?>
                                <?php foreach ($info[$type . '_adjudicators'] as $value => $text): ?>

                                    <option value="<?php echo $value; ?>" data-adjudicator-type="<?php echo $type; ?>"><?php echo $text; ?></option>

                                <?php endforeach; ?>
                            <?php endif; ?>
                            <option value="other" data-adjudicator-type="<?php echo $type; ?>">Other / Non-Certified</option>
                        <?php endforeach; ?>                       

                    </select>

                    <br /><br />

                    <?php echo Form::label('adjudicator_2', 'Adjudicator #2'); ?>
                    <select id="adjudicator_2" name="adjudicator_2" data-adjudicator-select="true" style="width: 215px;">

                        <?php foreach (array_keys($info['types']) as $type): ?>
                            <?php
                                $type = strtolower($type);
                            ?>
                            <option value="" data-adjudicator-type="<?php echo $type; ?>"></option>
                            <?php if (isset($info[$type . '_adjudicators']) and count($info[$type . '_adjudicators']) > 0): ?>
                                <?php foreach ($info[$type . '_adjudicators'] as $value => $text): ?>

                                    <option value="<?php echo $value; ?>" data-adjudicator-type="<?php echo $type; ?>"><?php echo $text; ?></option>

                                <?php endforeach; ?>
                            <?php endif; ?>
                        <?php endforeach; ?>                       

                    </select>

                    <br /><br />

                    <?php echo Form::label('adjudicator_3', 'Adjudicator #3'); ?>
                    <select id="adjudicator_3" name="adjudicator_3" data-adjudicator-select="true" style="width: 215px;">

                        <?php foreach (array_keys($info['types']) as $type): ?>
                            <?php
                                $type = strtolower($type);
                            ?>
                            <option value="" data-adjudicator-type="<?php echo $type; ?>"></option>
                            <?php if (isset($info[$type . '_adjudicators']) and count($info[$type . '_adjudicators']) > 0): ?>
                                <?php foreach ($info[$type . '_adjudicators'] as $value => $text): ?>

                                    <option value="<?php echo $value; ?>" data-adjudicator-type="<?php echo $type; ?>"><?php echo $text; ?></option>

                                <?php endforeach; ?>
                            <?php endif; ?>
                        <?php endforeach; ?>                       

                    </select>

                    <br /><br />

                    <?php echo Form::label('sight_reading_judge', 'Sight Reading'); ?>
                    <?php echo Form::text('sight_reading_judge', null, array('data-name-field' => 'true',
                                                                     'data-placeholder' => 'Last, First')); ?>
                    
                    <br class="clear" /><br /><br />

                    <div class="next_step_area">
                        <img src="<?php echo 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>

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

                </div>

            </div>


        <?php else: ?>

            <h1>Report Form #<?php echo $info['form']->id; ?> </h1>

        <?php endif; ?>

    </div>

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