@section('page_title')
    OSAA - Manage Hotels
@stop

@section('page_sub_title')    
    Manage Headquarter Hotels
@stop

@section('scripts')
    @parent

    <style type="text/css">
    	h2 {
            color: #1C43A6 !important;
        }

        h2.line {
            border-bottom: 1px solid #1C43A6;
            padding-bottom: 0.25em;
            margin-bottom: 0.25em;
        }

        h3 {
            color: #990000 !important;
        }

        input[type="checkbox"] {
            vertical-align: middle;
        }

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

        .odd {
            background-color: #dedede;
        }

        .highlight {
            border: 1px solid #79b7e7;
            color: #e17009;
            font-weight: bold;
            background: #f5f8f9 url(images/ui-bg_inset-hard_100_f5f8f9_1x100.png) 50% 50% repeat-x;
        }

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

        table tbody tr {
            line-height: 2em;
        }        

        table tbody img {
            vertical-align: middle;
        }

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

        .required {
            color: #990000;
            font-weight: bold;
            font-size: 14pt;
            position: relative;
            top: 4px;
            margin-left: 5px;
        }

        /* 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 label {
            font-weight: bold;
            width: 100px;
            display: inline-block;
        }        

        .help_dialog .activity_list {
            width: 100%;
            overflow-x: hidden;
            overflow-y: scroll;
            height: 14em;
            border: 1px solid #cccccc;
            position: relative;
            padding-top: 2em;
        }

        .help_dialog .item {
            width: 100%;
        }

        .help_dialog .item div {
            display: inline-block;
            height: 2em;
        }

        .help_dialog .item .activity {
            font-weight: bold;
            width: 150px;
        }

        .help_dialog .item .is_shown {
            width: 45px;
            text-align: center;
        }        

        .help_dialog .item .is_hq {
            width: 45px;
            text-align: center;
        }

        .help_dialog .item .group {
            margin-left: 10px;
        }

        .help_dialog .item .group input {
            width: 350px;            
        }

        .help_dialog .item .action {
            width: 60px;
            text-align: center;
        }

        .help_dialog .item.legend {
            font-weight: bold;
            background-color: #dedede;
            position: relative;
            top: 1.65em;
            z-index: 200;
            width: 98%;
        }

        .help_dialog .item.legend div {
            height: 1em;
            padding: 2px 0;
        }


    </style>

@stop

@section('jquery_init')	        
    
    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);
		})
	});  
    


    /* 
     * Custom tooltip items
     */
    $('[data-tooltip]').each(function ()
    {
        var item = $(this);

        var help = item.attr('data-tooltip');
        
        item.tooltip({'content' : help, 'items' : item});
    });
    

    /* 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);
    });

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

	/*
     * Close button
     */
	$('.close_button')
		.button({'icons':{'primary':'ui-icon-circle-close'}})
		.css({'font-size':'9pt', 'margin-left':'10px'});   


    /*
     * Delete hotel button
     */
    $('[data-action="delete-hotel"]')        
        .click(function(event)
        {
            event.preventDefault();
        });
    
    // Show the add/edit hotel dialog
    function showAddEdit(dialog_data)
    {
        var hotel_id = dialog_data.id;
        if (hotel_id == 0)
        {
            var dialog_title = 'Add a New Hotel';            
        }
        else
        {
            var dialog_title = 'Edit Hotel ID# ' + hotel_id;            
        }

        var content_url = '{{ url('/admin/hotels/') }}/' + hotel_id + '/edit';

        $('<div></div>')
        .appendTo('body')
        .dialog(
        {                       
            draggable : true,
            resizable : false,
            modal : true,
            height : 700,
            width : 750,                    
            title : dialog_title,
            buttons: [                                
                {
                    text : "Save",
                    'class' : "float_left",                            
                    icons : { primary : 'ui-icon-disk'},
                    click : function()
                    {
                        // Get the form
                        var form = $('form[name="add-edit-hotel"]', $(this))[0];
                        
                        // Create an empty object to hold activity data
                        var activity_data = {};

                        // Process each activity and save its data
                        $('.activity_list .item').each(function(index)
                        {
                            var item = $(this);
                            var name = item.attr('data-act-slug');
                            var value = {
                                is_shown : $('input[type="checkbox"][name="is_shown"]', item).is(':checked'),
                                is_hq : $('input[type="checkbox"][name="is_hq"]', item).is(':checked'),
                                group : $('input[type="text"][name="group"]', item).val(),
                            };

                            activity_data[name] = value;                            
                        });

                        // Add the activity data to the form
                        $('<input type="hidden">')
                            .attr('name', 'activity_data')
                            .attr('value', JSON.stringify(activity_data))
                            .appendTo('form');

                        // Exclude activity list inputs from being submitted
                        $('.activity_list input', $(form)).attr('name', '');

                        //console.log($(form).serializeArray());

                        $('<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')
                            .html('<br />Saving...<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 while your form is saved...</div>');

                        form.submit();
                    }
                },                                             
                {
                    text : "Cancel",
                    'class' : "float_right",                            
                    icons : { primary : 'ui-icon-cancel'},                            
                    click : function()
                    {
                        // Close the dialog box
                        $(this).dialog("close");   
                    }
                },
                {
                    text : "Reset Form",
                    'class' : "float_right",                            
                    icons : { primary : 'ui-icon-arrowrefresh-1-e'},  
                    'style' : 'margin-right: 40px;',
                    click : function()
                    {
                        $('form[name="add-edit-hotel"]')[0].reset();
                        $('[data-autofocus="true"]', $(this)).focus();
                    }
                }
            ],
            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 : content_url,
                            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);
                              dialog_object.html("There was an error loading the information.<br /><br />" + errorData.error.message);
                              $(".ui-dialog-buttonpane button:contains('Save')").button("disable");
                              {{-- $(".ui-dialog-buttonpane button:contains('Delete')").button("disable"); --}}
                        })              
                        .complete(function ()
                        {
                            $('[data-required]', dialog_object).after('<span class="required">*</span>');

                            $('[data-autofocus="true"]', dialog_object).focus();

                            $('[data-action="clear-activity"]', dialog_object).click(function(event)
                            {                                
                                event.preventDefault();
                                var item = $(this).parents('.item');

                                $('input[type="checkbox"]', item).removeAttr('checked');
                                $('input[type="text"]', item).val('');
                            });
                        });                            

                    $('.ui-dialog-buttonpane', dialog_object.parents('.ui-dialog')).css({'padding' : '0 0.5em', 'font-size' : '9pt', 'position' : 'relative'});
                    $('.ui-dialog-buttonpane .ui-dialog-buttonset', dialog_object.parents('.ui-dialog')).css({'width' : '100%'});                            
                },
            close : function ()
                {
                    if (hotel_id != 0)
                    {
                        dialog_data.row.removeClass('highlight');
                    }                    

                    var dialog_object = $(this);
                    $(dialog_object).remove();
                }
        });
    }      

    /*
     * New hotel button
     */
    $('[data-action="new-hotel"]')
        .button({'icons':{'primary':'ui-icon-circle-plus'}})
        .css({'font-size':'9pt'})
        .click(function(event)
        {
            event.preventDefault();

            var button = $(this);
            var dialog_data = {
                id : 0
            };

            showAddEdit(dialog_data);
        });


    /*
     * Edit hotel button
     */
    $('[data-action="edit-hotel"]')        
        .click(function(event)
        {
            event.preventDefault();

            var button = $(this);
            button.blur();
            var hotel_id = parseInt(button.attr('data-id'));
            var row = button.parents('tr');
            row.addClass('highlight');

            var button = $(this);
            var dialog_data = {
                id : hotel_id,
                row : row
            };

            showAddEdit(dialog_data);                
        });

@stop

@section('page_functions')          

    <a href="{{ url('/account') }}" class="close_button">Close</a>    
    
@stop


@section('main_content')    		

 	{{-- Success Bar --}}
 	@if (Session::has('success'))
		<div class="success_bar">
			<div class="message">				
				{{ Session::get('success') }}
			</div>			
		</div>
	@endif


    {{-- Errors --}}
    @if (Session::has('errors'))        
        <div class="error ui-state-error" style="padding: 0.5em; font-size: 12pt;">
            <span class="ui-icon ui-icon-alert box_icon"></span>
            @foreach ($errors->all() as $error)
                {{ $error }}
            @endforeach
        </div>
    @endif   

    <br />    
    
    <a href="#" data-action="new-hotel">New Hotel</a>
    
    <br /><br />

    <h1>List of Hotels</h1>

    @if (count($info['hotels']) > 0)
        <table>
            <thead>
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>Instructions</th>
                    <th>Phone</th>
                    {{-- <th>Email</th> --}}
                    {{-- <th>Touring</th> --}}
                    <th>Activities</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach ($info['hotels'] as $hotel)
                    <tr>
                        <td><img src="{{ asset('/images/icons/' . ($hotel->is_published ? 'visible_text_2_16px.png' : 'hidden_text_16px.png')) }}" alt="" title="" style="" /></td>
                        <td>
                            @if (Helpers::strIsEmpty($hotel->website))
                                {{ $hotel->name }}
                            @else
                                <a href="{{ $hotel->website }}" target="_blank">{{ $hotel->name }}</a>
                            @endif
                        </td>
                        <td>
                            {{ $hotel->instructions }}
                        </td>
                        <td>
                            {{ $hotel->phone }}
                        </td>
                        {{-- <td>
                            {{ $hotel->email }}
                        </td> --}}
                        {{-- <td>
                            @if (Helpers::strIsEmpty($hotel->local_website))
                                {{ $hotel->local_text }}
                            @else
                                <a href="{{ $hotel->local_website }}" target="_blank">{{ $hotel->local_text }}</a>
                            @endif
                        </td> --}}
                        <td>                            
                            <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/osaa/web_app/dev/app/views/admin/manage_hotels.blade.php</b> on line <b>595</b><br />
                            {{ implode(', ', $display_activities) }}
                        </td>
                        <td style="text-align: right;">
                            <a href="#" data-action="edit-hotel" data-id="{{ $hotel->id }}" style="margin-right: 4px;"><img src="{{ asset('/images/icons/pencil_16px.png') }}" alt="" title="" style="height: 1em; width: 1em;" /></a>
                            <a href="#" data-action="delete-hotel" data-id="{{ $hotel->id }}" style="margin-right: 4px;"><img src="{{ asset('/images/icons/missing_gray_16px.png') }}" alt="" title="" style="height: 1em; width: 1em;" /></a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @else

        There are no hotels in the database to display.

    @endif




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