{config_load file=$language_path section="general"}
<script type="text/javascript" src="minify_js.php?file=includes/general.js"></script>
<style>
.ui-autocomplete-loading {
  background: lightblue;
}
.search_result{
    padding:4px;
    padding-left: 10px;
    border: 1px solid #000;
    background-color: lightblue;
}
.recip{
    display: flex;
    justify-content: flex-start;
}
.recip > div{
    padding-right: 20px;
    cursor: pointer;
}
.formEntry{
    display: flex;
    margin-bottom: 10px;
}
.formEntry > div{
    display: inline-block;
    width: 120px;
}
fieldset{
    margin-bottom: 6px;
    padding: 10px;
}
#search_customer_container{
    display: none;
}
#email_eingabe{
}
</style>
<script>
var JS_ERROR_NO_RECIPIENT = '{$JS_ERROR_NO_RECIPIENT}';
var JS_ERROR_INVALID_RECIPIENT = '{$JS_ERROR_INVALID_RECIPIENT}';
var JS_ERROR_AMOUNT = '{$JS_ERROR_AMOUNT}';
var JS_ERROR_AMOUNT_POSITIVE = '{$JS_ERROR_AMOUNT_POSITIVE}';
var JS_ERROR_NO_MESSAGE = '{$JS_ERROR_NO_MESSAGE}';
var TEXT_REVIEW_DATE = '{$TEXT_REVIEW_DATE}';
{literal}
function select_email( email ){
    $('#all_customers').prop('checked',false);
    $('#all_newsletter_customers').prop('checked',false);
    $('#customers_email_address').val(email);
    $('#log').html('');
    $('#email_eingabe').show();
    $('#search_customer_container').hide();
    $('#all_customers_div').show();
    $('#all_newsletter_customers_div').show();
}
$(function(){
    $('#customers_email_address').focus();
    $('#all_customers').on('change',function(){
        if($(this).prop('checked')==true){
            $('#all_newsletter_customers').prop('checked',false);
            $("#customer_search" ).val('');
            $('#log').html('');
            $('#customers_email_address').val('***');
            $('#email_eingabe').hide();
        }else{
            $("#customer_search" ).val('');
            $('#log').html('');
            $('#customers_email_address').val('');
            $('#email_eingabe').show();
        }
    });
    $('#all_newsletter_customers').on('change',function(){
        if($(this).prop('checked')==true){
            $('#all_customers').prop('checked',false);
            $("#customer_search" ).val('');
            $('#log').html('');
            $('#customers_email_address').val('**D');
            $('#email_eingabe').hide();
        }else{
            $("#customer_search" ).val('');
            $('#log').html('');
            $('#customers_email_address').val('');
            $('#email_eingabe').show();
        }
    });
    function log( message ) {
        $('#log').html('');
        for(i in message){
            $( "<div onclick=\"select_email(\'"+message[i].value+"\')\" class=\"search_result\">" ).text(message[i].label).prependTo( "#log" );
        }
    }
 
    $( "#customer_search" ).autocomplete({
        source: function(request, response) {
            $.get('customers.php', { getemail: 1, query: request.term }, function(data) {
                log(data);
            },'json');
        },
        minLength: 2,
        select: function( event, ui ) {
            $('#all_customers').prop('checked',false);
            $('#all_newsletter_customers').prop('checked',false);
        }
    });
    $('#send_email').on('click',function(){
        let rec = $('#customers_email_address').val();
        switch(rec){
            case '***':
            case '**D':
                break;
            default:
                let emailValid = isEmail(rec);
                if(!emailValid){
                    alert(JS_ERROR_NO_RECIPIENT);
                    return false;
                }
                break;
        }
        
        let from = $('#from').val();
        let emailValid1 = isEmail(from);
        if(!emailValid1){
            alert(JS_ERROR_INVALID_RECIPIENT);
            return false;
        }
        let amount = $('#amount').val();
        let amount_converted = amount.replace(',','.');
        if(!yesIsValidFloat(amount_converted)){
            alert(JS_ERROR_AMOUNT);
            return false;
        }
        if(parseFloat(amount_converted) <= 0){
            alert(JS_ERROR_AMOUNT_POSITIVE);
            return false;
        }
        
        let message = $('#message').val();
        if(message.length < 3){
            alert(JS_ERROR_NO_MESSAGE);
            return false;
        }
        if(confirm(TEXT_REVIEW_DATE)){
            $('form[name="mail"]').submit();
        }
        return true;
    });
    $('#show_customer_search_link').on('click',function(){
        $('#search_customer_container').toggle();
        $('#email_eingabe').toggle();
        $('#all_newsletter_customers_div').toggle();
        $('#all_customers_div').toggle();
        $('#customer_search').focus();
    });
});
{/literal}
</script>    


{yes_admin_page_menu main_title=$HEADING_TITLE buttons=$PAGE_HEADING_MENU_BUTTONS additional_title=$ADDITIONAL_TITLE right_content=$RIGHT_CONTENT}

{if !$PREVIEW}
    <div class="ui-widget">
    {$FORM}
    
    <fieldset>
        <legend>Empfänger</legend>
        <div class="recip">
            <div id="search_customer_container">
                <label for="customer_search">{$SEARCH_CUSTOMER}</label>
                {$INPUT_TO}
                <div id="log" style="overflow: auto;" class="ui-widget-content"></div>
            </div>
            <div id="email_eingabe">
                <div style="display:inline-block;vertical-align:top;">
                {$TEXT_TO}
                </div>
                <div style="display:inline-block;">
                <input type="email" id="customers_email_address" name="customers_email_address" value="{$TO}" /><br />
                <a href="javascript:;" id="show_customer_search_link">Kundensuche</a>
                </div>
            </div>
            <div id="all_customers_div">
                <input id="all_customers" name="all_customers" value="1" type="checkbox" />
                <label for="all_customers">{$TEXT_ALL_CUSTOMERS}</label>
            </div>
            <div id="all_newsletter_customers_div">
                <input id="all_newsletter_customers" name="all_newsletter_customers" value="1" type="checkbox" />
                <label for="all_newsletter_customers">{$TEXT_NEWSLETTER_CUSTOMERS}</label>
            </div>
        </div>
    </fieldset>    
    <fieldset>
        <legend>{$TEXT_EMAIL_CONFIG}</legend>
        <div class="formEntry">
            <div><label for="from">{$TEXT_FROM}</label></div>
            {$INPUT_FROM}
        </div>
        <div class="formEntry">
            <div><label for="subject">{$TEXT_SUBJECT}</label></div>
            {$INPUT_SUBJECT}
        </div>
        <div class="formEntry">
            <div><label for="amount">{$TEXT_AMOUNT}</label></div>
            {$INPUT_AMOUNT}
        </div>
        <label for="message">{$TEXT_MESSAGE}<br /></label>
        {$INPUT_MESSAGE}
        
    </fieldset>
    <input type="button" id="send_email" value="{$IMAGE_SEND_EMAIL}" class="ui-button ui-corner-all ui-state-default" />
    </form>
    </div>
 
{else}

    {$FORM}
    <fieldset>
        <legend><b>{$TEXT_CUSTOMER}:</b> {$TEXT_SEND_TO}</legend>
    </fieldset>
    </form>


{/if}