@section('page_title')
    OSAA - Upload DanceDrill Music File
@stop

@section('page_sub_title')    
   Upload Dance/Drill Music File for {{ $info['ap']->name }}
@stop

@section('scripts')
    @parent

    <style type="text/css">
        table {            
            width: 900px;
            margin-left: 40px;
            border-collapse: collapse;
        }

        thead tr th {
            text-align: left;
        }

        tbody tr td {
            vertical-align: top;
            padding-bottom: 1em;
        }
    </style>

@stop

@section('jquery_init')
    
    $('.tooltip').tooltip();
    $('.button').button().css('font-size', '9pt');

    $('input[type="submit"]').click(function (event)
    {

        if ($('input[type="file"]').val() == '')
        {
            return;
        }

        event.preventDefault();

        var form = $(this).parents('form');

        $('<div></div>').appendTo('body')
                        .html('<br /><img src="{{ asset('images/icons/help_24px.png') }}" class="float_left" style="margin: -0.25em 1em 0.5em 0;" alt="" title="" />Are you sure you want to upload this file?<div style="font-size: 9pt; margin-top: 2.25em;">This will over-write any existing music file previously uploaded.</div>')
                        .dialog(
                             {
                             autoOpen: true,
                             draggable: false,
                             resizable: false,
                             height: 275,
                             width: 400,
                             title: 'Confirm File Upload',
                             modal: true,
                             buttons: [
                                {
                                    text : "Yes",
                                    'class' : "float_left",
                                    icons : { primary : 'ui-icon-check'},
                                    click : function()
                                          {   
                                              $('<div><div>').addClass('ui-widget-overlay ui-front')
                                                             .appendTo('body');
                                              
                                              $('<div><div>').appendTo('body')
                                                             .css('width', '225px')
                                                             .css('height', '170px')
                                                             .css('text-align', 'center')
                                                             .css('padding', '0.5em')
                                                             .position({my : "center center", at : "center center", of : window})
                                                             .addClass('ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons')
                                                             .html('<br />Working...<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 upload the file and process the data.</div>');

                                              $(form).submit();

                                              $(this).dialog( "close");
                                              $(this).remove();                                              
                                           }
                                },
                                {
                                    text : "No",
                                    'class' : "float_right",
                                    icons : { primary : 'ui-icon-cancel'},
                                    click : function()
                                            {
                                                $(this).dialog( "close");;
                                                $(this).remove();
                                            }
                                }
                             ],
                             open : function ()
                             {                   
                                  $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '10pt');
                                  $('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');
                                  //$('.ui-dialog-titlebar').addClass('ui-state-highlight');
                              }
                        });          
                      
    });

@stop

@section('page_functions')
    
@stop


@section('main_content')        
   
    <br />

    @if (isset($info['status']))

        <div style="margin-bottom: 1em;">
            <img src="{{ asset('/images/icons/' . $info['icon']) }}" alt="" title="" style="float: left; margin: -1em 1em 1em 1em;" />
            
            @if (Helpers::strEqual($info['status'], 'success'))
                <h1 style="color: #0d581b;">
            @else
                <h1>
            @endif
                {{ $info['status'] }}
            </h1>
            <p>
                {{ $info['message'] }}
            </p>        

            <br class="clear" />
        </div>           
    
    @endif
        

    @if ($info['file_exists'])

        <div class="ui-state-highlight ui-corner-all" style="margin-bottom: 2em;">
            <img src="{{ asset('/images/icons/yield_icon_72px.png') }}" alt="" title="" style="float: left; margin: 0.5em 1em 1em 1em;" />
            <h1>File Already Exists</h1>
            <p>
                @if (isset($info['status']) and Helpers::strEqual($info['status'], 'success'))
                    It worked!  Your file was uploaded.  You can use this form again to upload another file and it will over-write what was just uploaded.  You would want to do this if you needed to change your music selections and update your submitted music file.
                @else
                    Looks like your team has already uploaded a music file.  If you upload another file using this form, your previous file will be over-written.
                @endif
            </p>
            <br />
        </div>

    @endif

    {{ Form::open(array('url' => url('/forms/file-upload/dnc'),
                        'method' => 'post',
                        'files' => true)) }}

        {{ Form::hidden('file_name', $info['file_name']) }}
        {{ Form::hidden('ap_id', $info['ap']->id) }}

        <div style="width: 100%; float: left;">
            <div style="float: left; width: 550px; text-align: right; padding: 1.5em 25px 0 0; margin: 0 0 1em 0;">
                <h2>Select File to Upload</h2>
                <p style="font-size: 10pt;">
                    Use the file browser below to select a music file to upload to the server.
                </p>                    

                <b>File:</b>
                {{ Form::file('file', array('required' => 'required')) }}

            </div>

            <div style="float: left; width: 300px; height: 150px; border-left: 1px solid #d9e1e0; padding-left: 20px; position: relative;">
                <img src="{{ asset('/images/icons/upload_file_72px.png') }}" alt="" title="" style="position: absolute; top: 39px;" />


                {{ Form::submit('Upload', array('style' => 'position: absolute; top: 62px; left: 110px;',
                                                'class' => 'button')) }}

            </div>
            


            <br class="clear" />

        </div>

    {{ Form::close() }}

    

    <div style="font-size: 10pt;">

        <p>
            <b>Music File Specifications</b><br />
            Any valid music file type is acceptable (.mp3, .wav, .m4a, etc.)  Music files must be less than 12 Mb in size.
        </p>       

    </div>        

    <img src="http://www.osaa.org/images/icons/ajax_loader3.gif" style="display: none;" />

@stop