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

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

@stop

@section('scripts')
    @parent

    <style type="text/css">

        h3 {
      		color: #990000 !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;
      	}  

        .no-close .ui-dialog-titlebar-close {
            display: none;
        }  	

      	.page_functions {
      		width: auto !important;
      	}    

        .odd {
            background-color: #deeede;            
        }

        .hover {
            cursor: pointer;
            outline: 2px groove #b0dcff;            
        }

        /* Groups & Results Table */
        table {
            border-collapse: collapse;
            width: 100%;
            font-size: 10pt;            
        }

        table thead {
            background-color: #005FA9;
            color: #ffffff;
        }

        table thead th {            
            padding: 4px 2px;
            text-align: left;
            font-size: 9pt;
            vertical-align: bottom;
            line-height: 115%;
        }

        table tbody tr {
            background-color: #efffef;
        }  

        table tbody tr td {
            font-size: 8pt;  
            line-height: 125%;          
            text-align: left;
            padding: 0.5em 5px 0.5em 0;
        }
        
        /* 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);
  		})
  	});    

    /* Positioned elements
     *
     * Elements that contain the attribute data-position="true" will be positioned
     * using JQuery's UI positioning utility.  Other expected attributes define the
     * element's position:
     *    data-position-my
     *    data-position-at
     *    data-position-of
     */
    $('[data-position="true"]').each(function()
    {
        var element = $(this);
        var my = element.attr('data-position-my');
        var at = element.attr('data-position-at');
        var of = element.attr('data-position-of');

        var options = $.parseJSON('{ "my" : "' + my + '", "at": "' + at + '", "of": "' + of + '"}');

        element.position(options);
    });

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

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

            var topic = 'admin';            

            $('<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=' + topic,
                                          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();
                        }                
                });


        });

    // Create button
    $('.create_button')
        .button({'icons':{'primary':'ui-icon-plusthick'}})
        .css({'font-size':'9pt'});

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

    // Gray out incomplete forms
    $('tr[data-submitted="false"] td')
        .css({'background-color' : '#ffefef'});    
    $('tr.odd[data-submitted="false"] td')
        .css({'background-color' : '#eedfdf'});

    $('table tbody tr')
        .hover(function ()
        {
            $(this).addClass('hover');
        },
        function ()
        {
            $(this).removeClass('hover');
        })
        .click(function()
        {
            $('*').css({'cursor':'wait'});
            window.location.href = "{{ url('/forms/music/large-ensemble') }}/" + $(this).attr('data-form-id');
        });

    // Get filters on page load
    var pref = {INC : {{ ($info['filters']->INC) ? 'true' : 'false' }},
                BND : {{ ($info['filters']->BND) ? 'true' : 'false' }},
                CHO : {{ ($info['filters']->CHO) ? 'true' : 'false' }},
                ORC : {{ ($info['filters']->ORC) ? 'true' : 'false' }}};

    function filterPreferences()
    {
        if (pref.CHO)
        {
            $('tbody tr[data-activity="CHO"][data-submitted="true"]').show();

            if (pref.INC)
            {
                $('tbody tr[data-activity="CHO"][data-submitted="false"]').show();
            }
            else
            {
                $('tbody tr[data-activity="CHO"][data-submitted="false"]').hide();
            }
        }
        else
        {
            $('tbody tr[data-activity="CHO"]').hide();
        }

        if (pref.BND)
        {
            $('tbody tr[data-activity="BND"][data-submitted="true"]').show();

            if (pref.INC)
            {
                $('tbody tr[data-activity="BND"][data-submitted="false"]').show();
            }
            else
            {
                $('tbody tr[data-activity="BND"][data-submitted="false"]').hide();
            }
        }
        else
        {
            $('tbody tr[data-activity="BND"]').hide();
        }

        if (pref.ORC)
        {
            $('tbody tr[data-activity="ORC"][data-submitted="true"]').show();

            if (pref.INC)
            {
                $('tbody tr[data-activity="ORC"][data-submitted="false"]').show();
            }
            else
            {
                $('tbody tr[data-activity="ORC"][data-submitted="false"]').hide();
            }
        }
        else
        {
            $('tbody tr[data-activity="ORC"]').hide();
        }

        colorRows();
    }

    filterPreferences();

    $('input[type="checkbox"][data-preference]')
        .change(function()
        {
            var box = $(this);
            var pref_var = box.attr('data-preference');

            pref[pref_var] = box.is(':checked');

            filterPreferences();            

            // Save this user's view preferences
            var jqxhr = $.ajax(
                {
                    type : 'POST',
                    url : '{{ url('account/set-osaa-preference') }}',
                    data : { 'preference' : 'large_ensemble_admin_filters',
                             'settings' : pref},
                    dataType : 'html'
                })
                .done(function (data)
                {                               
                    console.log('Preferences were successfully saved.');                    
                })
                .fail(function (jqXHR, status, error)
                {                                                   
                    var response = jqXHR.responseText;
                    var errorData = $.parseJSON(response);
                    console.log(errorData);                    
                }); 
        });
    
@stop

@section('page_functions')    

    {{-- <a href="#" class="help_button">Help</a> --}}

    <a href="{{ url('/forms/music/large-ensemble/summary-report') }}" class="report_button" target="_blank">Summary Report</a>

    <a href="{{ url('/forms/music/large-ensemble') }}" class="create_button">New 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     

    <b>Filters:</b>

    
    <label for="filter_choir" style="">Choir</label>
    <input type="checkbox" value="true" data-preference="CHO" id="filter_choir" name="filter_choir" style="vertical-align: middle; margin-right: 50px;" @if ($info['filters']->CHO) checked="checked" @endif/>

    <label for="filter_band" style="">Band</label>
    <input type="checkbox" value="true" data-preference="BND" id="filter_band" name="filter_band" style="vertical-align: middle; margin-right: 50px;" @if ($info['filters']->BND) checked="checked" @endif/>

    <label for="filter_orchestra" style="">Orchestra</label>
    <input type="checkbox" value="true" data-preference="ORC" id="filter_orchestra" name="filter_orchestra" style="vertical-align: middle; margin-right: 50px;" @if ($info['filters']->ORC) checked="checked" @endif/>

    <label for="filter_incomplete" style="">Show Incomplete Forms</label>
    <input type="checkbox" value="true" data-preference="INC" id="filter_incomplete" name="filter_incomplete" style="vertical-align: middle;"  @if ($info['filters']->INC) checked="checked" @endif/>





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

    <table>
        <thead>
            <tr>                
                <th>Date</th>
                <th>Activity</th>
                <th>Name</th>
                <th>Location</th>
                <th>League</th>
                <th>Organizer</th>
                <th>Submitted</th>
                <th>Updated</th>
                <th>Created</th>
            </tr>
        </thead>

        <tbody>
            @foreach ($info['forms'] as $form)
                <tr data-submitted="{{ (!is_null($form->submitted_at)) ? 'true' : 'false' }}"
                    data-activity="{{ $form->activity }}"
                    data-form-id="{{ $form->id }}">
                    <td>
                        {{ date('n/j/Y', strtotime($form->date)) }}
                        <br />
                        {{ $form->id }}
                    </td>
                    <td>{{ Helpers::getActivityName($form->activity) }}</td>
                    <td>{{ $form->event_name }}</td>
                    <td>{{ $form->location->name }}</td>
                    <td>{{ (!is_null($form->league)) ? $form->league->name : '- -' }}</td>
                    <td>{{ $form->data->organizer->name }}</td>
                    <td style="white-space: nowrap;">{{ (!is_null($form->submitted_at)) ? date('n/j/Y g:i a', strtotime($form->submitted_at)) : '- -' }}</td>
                    <td style="white-space: nowrap;">{{ (!is_null($form->updated_at)) ? date('n/j/Y g:i a', strtotime($form->updated_at)) : '- -' }}</td>
                    <td style="white-space: nowrap;">{{ (!is_null($form->created_at)) ? date('n/j/Y g:i a', strtotime($form->created_at)) : '- -' }}</td>
                </tr>
            @endforeach
        </tbody>

    </table>

    <br class="clear" />
    
@stop