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

<?php $__env->startSection('page_sub_title'); ?>    
   OSAA Contest Matchup
<?php $__env->stopSection(); ?>

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

    <style type="text/css">
        #select_form {
            position: relative;
        }

    </style>

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

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

    // Start at step 1 and hide any other steps
    var step = 1;
    
    $('div[data-step]')
        .css({'float' : 'left',
              'position' : 'absolute'})
        .each(function ()
        {
            var div = $(this);

            if (parseInt(div.attr('data-step')) != step)
            {
                div.hide();
            }
        });    

    // Setup data pickers
    $('[data-datepicker]').datepicker({dateFormat:'yy-mm-dd'});

    // Setup next buttons
    $('.next_button')
        .button({'icons' : {'secondary' : 'ui-icon-circle-triangle-e'}})
        .css({'font-size' : '9pt'});

    $('div[data-step="1"] .next_button')
        .click(function ()
        {
            var button = $(this);
            var panel = $('div[data-step="1"]');
            var next_panel = $('div[data-step="2"]');
            var errors = $('.errors', panel);

            // Get the activity, ensure it is not empty
            var activity = $('select[name="activity"] :selected').val();
            if (activity == '')
            {
                errors
                    .html('You must select a sport from the drop-down list.')
                    .fadeIn();

                return;
            }

            // Get the date, ensure it is not empty
            var date = $('[name="date"]').val();
            if (date == '')
            {
                errors
                    .html('You must specify the contest date using the date picker.')
                    .fadeIn();

                return;
            }           

            // Move onto step 2
            step = 2;
            next_panel.fadeIn();
            panel
                .effect("drop", { direction : "left"}, "slow", function ()
                {
                    
                });
            
        });

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

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


<?php $__env->startSection('main_content'); ?>    
    
    <div id="select_form">
        <div data-step="1">
            <h1>Information</h1>
            <p>
                This tool was designed to assist officials in preparing for assignments.  Using the form below, the page will show a side by side comparison of two teams in an upcoming competition.  This feature is only available for varsity level contests.  Begin by selecting the sport and the contest date.
            </p>

            <h2>Start a New Search</h2>

            <div class="errors ui-state-error" style="float: right; width: 550px; height: 2.5em; display: none;"></div>

            <div style="float: left; margin-right: 50px;">
                <?php echo Form::label('activity', 'Sport', array('style' => 'font-weight: bold;')); ?><br />
                <?php echo Form::select('activity', $info['activity_options'], null, array('style' => '')); ?>
            </div>

            <div style="float: left; margin-right: 50px;">
                <?php echo Form::label('date', 'Date', array('style' => 'font-weight: bold;')); ?><br />
                <?php echo Form::text('date', null, array('style' => 'width: 100px;', 'data-datepicker' => 'true')); ?>
            </div>

            <div style="float: left; margin-right: 50px; padding-top: 0.5em;">
                <div class="next_button">Next</div>
            </div>
        </div>

        <div data-step="2">
            <h1>Searching</h1>
            <p>
                Please wait while the database looks up all <span id="info_activity_name"></span> contests on <span id="info_contest_date">.
            </p>
        </div>
    </div>

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