@section('page_title')
    OSAA - Contest Matchup
@stop

@section('page_sub_title')    
   OSAA Contest Matchup
@stop

@section('scripts')
    @parent

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

    </style>

@stop

@section('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;
            // Update panel 2
            next_panel.fadeIn();
            panel
                .effect("drop", { direction : "left"}, "slow", function ()
                {
                    
                });
            
        });

@stop

@section('page_functions')
    
@stop


@section('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;">
                {{ Form::label('activity', 'Sport', array('style' => 'font-weight: bold;')) }}<br />
                {{ Form::select('activity', $info['activity_options'], null, array('style' => '')) }}
            </div>

            <div style="float: left; margin-right: 50px;">
                {{ Form::label('date', 'Date', array('style' => 'font-weight: bold;')) }}<br />
                {{ 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>

@stop