@section('page_title')
    {{ $info['school']->short_name }}
@stop

@section('page_sub_title')    
   {{ $info['school']->name }} School Staff Listing
@stop

@section('scripts')
    @parent


    <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>


    <style type="text/css">

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

    	table {
            border-collapse: collapse;
        }

        .staff_table {            
            width: 100%;
            font-size: 10pt;
        }

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

        .staff_table thead th {            
            padding: 4px 2px;
            text-align: left;
            cursor: pointer;
        }

        .staff_table tbody tr {
            line-height: 2em;
        }

        .odd {
            background-color: #dedede;
        } 
        
        .dataTables_filter {
            margin-bottom: 1em;
        }

        .dataTables_filter label {
            font-weight: bold;               
        }

        .dataTables_filter input {
        	margin-left: 4px;
        }

        .dataTables_info {
            margin-top: 1em;
            font-size: 9pt;
        }

        /* Help Dialog */
        .help_dialog {
            font-size: 10pt;
        }

        .help_dialog h1 {
            font-size: 14pt;
            color: #005fa9 !important;
            margin: 1em 0 1em 0;
        }

        .help_dialog h2 {
            font-size: 12pt;
            color: #1C43A6 !important;
            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;
        }

        .help_dialog.loading {

        }

    </style>

@stop

@section('jquery_init')

	// Make this script play well with IE8
	if (typeof String.prototype.trim !== 'function')
	{
		String.prototype.trim = function()
		{
		    return this.replace(/^\s+|\s+$/g, ''); 
		}
	}

	// Clean up any console issues
	if(!window.console)
    {
        window.console = { log: $.noop, group: $.noop, groupEnd: $.noop };            
    }    
	
	// 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);
		})
	});
	
	// Help Button
	$('.help_button')
	    .button({ icons : { primary : 'ui-icon-help'}})
	    .css({'margin-right' : '10px', 'font-size' : '9pt'});
	
	// Back Button
	$('.back_button')
	    .button({ icons : { primary : 'ui-icon-arrowthick-1-w'}})
	    .css({'font-size' : '9pt'});
	
	// Staff table
	$('.staff_table').DataTable({
        'paging' : false,                
        'order' : [1, 'asc'],
        'columnDefs' : [
            {'searchable' : false, 'targets' : [4, 5]}
        ]
    });


    function transitionToAction(action, staff_id, other_id)
    {
        var html = '';
        $('body').css({'cursor' : 'wait'});
        $('.help_dialog').addClass('loading');

        // Disable buttons
        if (action == 'delete' || action == 'merge')
        {
            $('[data-action="delete"]').button('disable');
            $('[data-action="merge"]').button('disable');            
        }
        else
        {
            $('[data-action="cancel"]').button('disable');
        }
        
        var url = '{{ url('/schools/' . $info['school']->id . '/edit-staff/listing') }}/' + staff_id + '?action=' + action;
        if (action == 'merge-staff')
        {
            url += '&other-id=' + other_id;
        }

        var jqxhr = $.ajax(
        {
            type : 'GET',
            url : url,
            dataType : 'html'
        })
        .done(function (data)
        {
            html = data;
        })
        .fail(function (jqXHR, status, error)
        {                                                   
            var response = jqXHR.responseText;
            var errorData = $.parseJSON(response);                                                  
            console.log(errorData);
            html = '<h3 style="margin: 0.5em 0;">' + errorData.error.type + '</h3>' + errorData.error.message + '<br /><br /><span style="font-size: 9pt;">Line ' + errorData.error.line + ' in ' + errorData.error.file;

            if (html == '')
            {
                html('There was an unknown error.');
            }
        })
        .always(function()
        {
            // Transition to the next stage
            $('[name="action-content"]').effect("drop", { direction : "right"}, "slow", function ()
            {               
                // Show the cancel button
                if (action != 'cancel')
                {
                    $('[data-action="cancel"]').button('enable').fadeIn();
                }
                else                
                {
                    $('[data-action="cancel"]').fadeOut();
                    $('[data-action="delete"]').button('enable');
                    $('[data-action="merge"]').button('enable');            
                }
                
                // Replace content
                $('[name="action-content"]').html(html);

                // Modify content
                if (action == 'delete')                
                {
                    $('[data-action="delete-school-staff"]').button();
                }
                if (action == "merge")
                {
                    $('a[data-action="merge-staff"]').on('click', function(event)
                    {
                        event.preventDefault();
                        transitionToAction('merge-staff', staff_id, $(this).attr('data-other-staff-id'));
                    });                    
                }
                if (action == "merge-staff")
                {
                    $('[data-action="merge-school-staff"]').button();
                }

                // Show new content
                $('[name="action-content"]').fadeIn(400, function() {
                    // Done loading
                    $('.help_dialog').removeClass('loading');
                    $('body').css({'cursor' : ''});
                });                
            });
        });        
    }


    // Edit/Merge link
    $('a[data-action="edit"]').on('click', function(event)
    {
    	event.preventDefault();

    	var link = $(this);
    	var staff_id = link.attr('data-staff-id');
    	
    	$('<div></div>')
	    .appendTo('body')			    
	    .dialog(
	    {	      		    
  			resizable: false,
  			height : 500,
  			width : 700,
  			modal : false,
            dialogClass : 'edit_school_staff_dialog', 	      			
  			title: 'Edit / Merge School Staff Record',
	      	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('/schools/' . $info['school']->id . '/edit-staff/listing') }}/' + staff_id,
						dataType : 'html'
					})
					.done(function (data)
					{
                    	dialog_object.html(data);   

                        $('a[data-action="cancel"]', dialog_object)
                            .button()
                            .on('click', function(event)
                            {
                                event.preventDefault();
                                transitionToAction('cancel', staff_id);
                            });

                    	$('a[data-action="merge"]', dialog_object)
                    		.button()
                            .on('click', function(event)
                            {
                                event.preventDefault();
                                transitionToAction('merge', staff_id);
                            });                    		

                    	$('a[data-action="delete"]', dialog_object)
                    		.button()
                            .on('click', function(event)
                            {
                                event.preventDefault();
                                transitionToAction('delete', staff_id);
                            });
                    		

                    }).fail(function (jqXHR, status, error)
                    {			                                    	
                    	var response = jqXHR.responseText;
                    	var errorData = $.parseJSON(response);			                                    	
                    	console.log(errorData);
                    	dialog_object.html('<h3 style="margin: 0.5em 0;">' + errorData.error.type + '</h3>' + errorData.error.message + '<br /><br /><span style="font-size: 9pt;">Line ' + errorData.error.line + ' in ' + errorData.error.file);

                    	if (dialog_object.html() == '')
                    	{
                    		dialog_object.html('There was an error.');
                    	}
                    });		                
		      	}
		});


	});

@stop

@section('page_functions')  
	
    <a href="{{ asset('/docs/osaainfo/OSAAAccountInstructions.pdf') }}" target="_blank" class="help_button">Help</a>
    <a href="{{ url('/schools/' . $info['school']->id . '/edit-staff') }}" class="back_button">Back</a>    

@stop

@section('main_content')    		

 	{{-- Success Bar --}}
 	@if (Session::has('success'))
		<div class="success_bar">
			<div class="message">				
				{{ Session::get('success') }}
			</div>			
		</div>
	@endif 
	
	{{-- School staff list --}}
	<table class="staff_table">
		<thead>
			<tr>
				<th>ID #</th>
				<th>Name</th>								
				<th>Email</th>
				<th>School Contacts</th>
				<th>Updated</th>	
				<th></th>			
			</tr>
		</thead>

		<tbody>
			@foreach ($info['school_staff'] as $staff)
				<tr>
					<td>{{ $staff->id }}</td>
					<td>{{ $staff->getDisplayName()}}</td>										
					<td>{{ $staff->email }}</td>
					<td>
						@if ($staff->is_on_school_contacts)
							{{ $staff->getDisplayRole() }}
						@endif
					</td>					
					<td data-sort="{{ strtotime($staff->updated_at) }}">{{ date('n/j/Y g:ia', strtotime($staff->updated_at)) }}, {{ $staff->updated_by }}</td>
					<td><a href="#" data-staff-id="{{ $staff->id }}" data-action="edit">Edit / Merge</a></td>
				</tr>
			@endforeach
		</tbody>

	</table>

@stop