{config_load file=$language_path section="general"}
{config_load file=$language_path section="emails"}
<style>
{literal}
    #add-symbol{
        font-size: larger;
    }
    table#staff-selection-table tr td{
        border: 1px solid #000;
        spacing: 4px;
        padding: 4px;
        cursor: pointer;
    }
    #staff-allocations .saved_staff_allocation{
        font-size: smaller;
        cursor: pointer;
    }
    #staff-allocations .saved_staff_allocation:hover{
        text-decoration: line-through;
    }
    table.staff_history_table{
        font-size: smaller;
    }
    #staff-comments{
        font-weight: bold;
        margin-top: 10px;
        
    }
    #email_info {
        padding: 3px;
        margin-bottom: 5px;
    }
    #email_info #from, #email_info #to, #email_info #date{
        font-size: smaller;
        color: #888;
    }
    textarea{
        width: 100%;
        display: block;
    }
{/literal}
</style>
<script>
var EMAIL_ID = '{$EMAIL_ID}';
var JS_CONFIRM_STAFF_ALLOCATION_DELETE = '{$JS_CONFIRM_STAFF_ALLOCATION_DELETE}';
{literal}

function email_staff_allocation_add(customers_id){
    $.ajax({
       url: 'ebay_email.php?action=staff_add&cID=' + customers_id + '&eID=' + EMAIL_ID,
       dataType: 'json',
       success: function(json){
           if(json.ERROR == ''){
                $('table#mail_listing tbody tr#'+EMAIL_ID+' td.action a.staff')
                    .addClass('staff_allocated')
                    .attr('title',json.ALLOCATION_LINK_TITLE_TEXT);
                $('#modal_window',ctxt).dialog('destroy');
            }else{
                alert(json.ERROR);
                $("#mailfilter_suggest_field",ctxt).val('');
            }
       },
       error: function(xhr){
           alert('Error. Cant add staff for Email');
       }
    });
}

function fx_callback(element_id){
    setTimeout(function() {
        $( "#"+element_id,ctxt ).removeAttr( "style" ).hide().fadeIn();
    }, 1000 );
}
var ctxt = (parent.replyframe) ? parent.frames[1].document : '';
$(function(){
    $('#staff-selection',ctxt).hide();
    $('#add-symbol',ctxt).on('click',function(){
       $(this).hide();
       $('#staff-selection',ctxt).show();
    });
    $('a#toggle-staff-selection',ctxt).on('click',function(){
        $('#staff-selection-list',ctxt).toggle();
    }).css('text-decoration','none');

	var mailfilter_autoComplete, mailfilter_dlg = $(".mailfilter_usersearch_container",ctxt), mailfilter_input = $("#mailfilter_suggest_field", mailfilter_dlg);
	mailfilter_input.autocomplete({
	   minLength: 2,
	   source: function(request, response) {
			    $.ajax({
				url: 'customers.php?searchmode=staff',
				dataType: 'json',
				data: {
				    query: $('#mailfilter_suggest_field',ctxt).val()
				},
				success:
				    function (data) {
				       $('#mailfilter_suggest_field',ctxt).removeClass('ui-autocomplete-loading');
					response($.map(data, function (item) {
					    return {
						label: item.label,
						value: item.value
					    };
					}));
				    }                    
			    });
	    },
	    search: function(event,ui){
		$('div#mailfilter_usersearch_container img#ui-autocomplete-loading',ctxt).show();
	    },
	    open: function(event,ui){
		$('div#mailfilter_usersearch_container img#ui-autocomplete-loading',ctxt).hide();
	    },
	    select: function(event,ui){
                email_staff_allocation_add(ui.item.value);
	    }
	}).data( 'ui-autocomplete' )._renderItem = function( ul, item ) {
	      return $( "<li>" )
		.append( "<a>"  +  item.label + "</a>" )
		.appendTo( ul );
	};
	mailfilter_autoComplete = mailfilter_input.autocomplete("widget");
    $('table#staff-selection-table tr td',ctxt).each(function(){
        $(this).on('click',function(){
           email_staff_allocation_add($(this).data('customers_id'));
        });
    });
    $('.saved_staff_allocation',ctxt).each(function(){
       $(this).on('click',function(){
           if(!confirm(JS_CONFIRM_STAFF_ALLOCATION_DELETE)){
               return false;
           }
           var remove_elm = $(this);
           $.ajax({
                url: 'ebay_email.php?action=staff_remove&esaID=' + $(this).data('email_staff_allocation_id'),
                dataType: 'json',
                success: function(json){
                    if(json.ERROR == ''){
                        remove_elm.remove();
                        if($('.saved_staff_allocation').length < 1){
                            $('#staff-allocations').hide();
                            $('table#mail_listing tbody tr#'+EMAIL_ID+' td.action a.staff')
                                .removeClass('staff_allocated');
                            $('#modal_window',ctxt).dialog('destroy');
                        }
                    }else{
                        alert(json.ERROR);
                    }
                },
                error: function(xhr){
                    alert('Error. Cant remove staff from Email');
                }
           });
       });
    });
    $('input#save_staff_comments',ctxt).on('click',function(){
        var comment = $('textarea[name="staff_comments"]',ctxt).val();
        if(comment.length < 1){
            return false;
        }
        $.ajax({
            url: 'ebay_email.php?action=add_staff_comment&id='+EMAIL_ID+'&staff_comments='+encodeURIComponent(comment),
            dataType: 'json',
            success: function(json){
                if(json.MSG != ''){
                    alert(json.MSG);
                    return false;
                }
                $('#staff-history table.staff_history_table tbody',ctxt).prepend(
                        '<tr class="odd"><td>'+json.DATE_ADDED+'</td><td>'+comment+'</td><td>'+json.EDITOR+'</td></tr>'
                );
                $('textarea[name="staff_comments"]',ctxt).val('').effect( 'highlight', {}, 500, fx_callback );
            },
            error: function(xhr){
                alert('Error: Cant add staff comment');
            }
        });
    });
    $('#email_info #subject',ctxt).css('cursor','pointer').on('click',function(){
        window.location.href = 'ebay_email.php?email_id='+EMAIL_ID;
    });
});
{/literal}
</script>

<div id="email_info" class="formArea main">
    <div id="date"><b>Date: </b> {yes_date_short date=$EMAIL->date}</div>
    <div id="from"><b>From:</b> {$EMAIL->from_name} ({$EMAIL->from_email})</div>
    <div id="to"><b>To:</b> {$EMAIL->mailto}</div>
    <div id="subject">{$EMAIL->subject}</div>
</div>

<div id="add-symbol"><button class="ui-state-highlight ui-corner-all"><b>&#x2B;</b> {#add_staff_allocation#}</button></div>
<div id="staff-selection" class="mailfilter_usersearch_container">
    {#staff#}: <input type="text" name="customers_id" value="" size="20" maxlength="32" id="mailfilter_suggest_field" autocomplete="off"/> <a href="javascript:;" id="toggle-staff-selection">&#9776;</a>
    <div class="main" id="staff-selection-list" style="display: none;">
        <table id="staff-selection-table">
        {foreach from=$STAFFS item=S key=nr}
            {if $nr%2 == 0}
            <tr>
            {/if}
            <td data-customers_id="{$S.id}">{$S.text}</td>
            {if $nr%2 == 1}
            </tr>
            {/if}
        {/foreach}
        </table>
    </div>
</div>
<div id="staff-allocations" class="main" style="margin-top: 15px;">
    <b>{#existing_staff_allocations#}:</b><br />
{foreach from=$ALLOCATIONS item=SA}
    <div data-email_staff_allocation_id="{$SA->email_staff_allocation_id}" class="saved_staff_allocation">{yes_editor_name editor_id=$SA->customers_id} (ID: {$SA->customers_id})</div>
{/foreach}
</div>
<div id="staff-comments" class="main">
        {$TEXT_STAFF_EMAIL_ADD_COMMENT}<br />
        <textarea name="staff_comments" rows="3"></textarea>
        <input type="button" id="save_staff_comments" value="{#comment#} {#save#}" class="ui-button ui-corner-all ui-state-default"/>
</div>
{if $HISTORY.0}
<div id="staff-history" class="main" style="margin-top: 15px;">
    <b>{#staff_history#}:</b><br />
    <table class="yesListTable_minimal staff_history_table">
        <thead>
            <tr>
                <th>{#date_added#}</th>
                <th>{#comments#}</th>
                <th>{#editor#}</th>
            </tr>
        </thead>
        <tbody>
            {foreach from=$HISTORY item=H}
            <tr>
                <td>{yes_date_short date=$H.date_added}</td>
                <td>{$H.comments}</td>
                <td>{yes_editor_name editor_id=$H.customers_id}</td>
            </tr>
            {/foreach}
        </tbody>
    </table>
</div>
{/if}