{% extends 'admin\\baseadmin.html.twig' %}
{% block content%}
    <!--START PAGE CONTENT -->
    <section class="page-content container-fluid">
        <div class="row">
            <div class="col-lg-12 col-xl-12">
                <div class="card">
                    <div class="card-header">
                        <ul class="actions top-right">
                            <li><a href="javascript:void(0)" data-q-action="card-expand"><i class="icon dripicons-expand-2"></i></a></li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped emails-form-class table-bordered datatable-init" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>{{description | trans ({},'emails')}}</th>
                                        <th class="no-sort tableactions">{{actionsLabel | trans ({},'emails')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {# Modal #}
    <div class="modal fade show-mail" id="mail-modal">
        <div class="modal-dialog modal-xl overflow-hidden" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close close-modal-attribute" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" class="zmdi zmdi-close"></span>
                    </button>
                </div>
                <div id="preloader" class="d-none">
                <div class="preloader position-absolute transform50XY pl-xs pls-primary"><svg class="pl-circular" viewBox="25 25 50 50"><circle class="plc-path" cx="50" cy="50" r="20"></circle></svg></div>
                 </div>   
                <div class="modal-body" style="min-height:400px">
                </div>               
            </div>
        </div>
    </div>
    {# End Modal #}

{% endblock %}
{% block javascripts %}
{{parent()}}
    <script>

        var config={
            processing: true,
            serverSide: true,
            stateSave: true,
            stateDuration: -1,
            ajax: "/{{ app.request.getLocale() }}/admin/emails-configurations/list",
             language: {
                "sEmptyTable": "{{'emptytable'|trans({},'studio')}}",
                "sLoadingRecords": "{{'loadingrecords'|trans({},'studio')}}",
                "sProcessing": "{{'processing'|trans({},'studio')}}",
                "sLengthMenu": "{{'showmenulength'|trans({},'studio')}}",
                "sZeroRecords":  "{{'zerorecords'|trans({},'studio')}}",
                "sSearch": "{{'searchlabel'|trans({},'studio')}}",
                "sInfo":   "{{'infostart'|trans({},'studio')}}",
                "sInfoFiltered": "{{'infofiltered'|trans({},'studio')}}",
                "sInfoEmpty":    "{{'infoempty'|trans({},'studio')}}",
                "oPaginate": {
                    "sFirst":    "{{'first'|trans({},'studio')}}",
                    "sPrevious": "{{'previous'|trans({},'studio')}}",
                    "sNext":     "{{'next'|trans({},'studio')}}",
                    "sLast":     "{{'last'|trans({},'studio')}}"
                },
            },
            columns: [
                { data: 'description' },
                { data: 'actions',
                  render: function (data,type,row,meta){
                      var result='';
                      jQuery.each(data,function(index,item){
                          switch (item.type){
                              case "edit":
                                cssclass='edit';
                                itemfunction='';
                                target='data-toggle="modal" data-target="#mail-modal" data-id="'+item.id+'" ';
                                break;
                              case "delete":
                                cssclass='trash';
                                itemfunction='onclick="return confirm(\'Are you sure?\')"';
                                target='';
                                break;
                          }
                          result+='<a href="'+item.url+'"  class="'+item.type+'" ' + target+'><i class="la la-'+cssclass+'" '+itemfunction+'></i></a>';
                      });
                      return result;
                  } }
            ],
            columnDefs: [
                {
                    className: "tableactions", 
                    "targets": [ "tableactions" ],
                    orderable:false,
                    "targets": [ "tableactions" ]
                }
            ]
        };
       $('#mail-modal').on('hidden.bs.modal', function (e) {
            $('.datatable-init').DataTable().ajax.reload();                                  
        });
        // show modal
        $("body").on("click", ".edit", function(){
            $(".modal-title").html('');
            $("#mail-modal").find(".modal-body").html($("#mail-modal").find("#preloader").html());
            

            var id = $(this).data("id");
            if(id){
                url="/{{ app.request.getLocale() }}/admin/emails-configurations/edit/"+id;
            }else{
                url="/{{ app.request.getLocale() }}/admin/emails-configurations/new";
            }
            $.ajax({
                url: url,
                type: "POST",
                success: function(data) {
                    var configname = $(data).find(".config-title");
                    $(".modal-title").html(configname.html());
                    $("#mail-modal").find(".modal-body").html(data);
                    $(".select2-style").select2();
                }
            });
        });

        // change combo
        function alteraComboType(){
            el=$("#std_emails_configurations_form_type");
            $("#id_emailconfiguration").val("");
            $("#edit_form").val("false");
            if( el.val() == "form" ){
                // Form
                $(".choice-form-form").removeAttr('disabled');
                $(".choice-notification-form").attr('disabled', true);
                $(".select2-style").select2();

                $(".modal-form").show();
                $(".modal-notification").hide();
            } else {
                if ( el.val() == "notification" ) {
                    // Notification
                    $(".choice-form-form").attr('disabled', true);
                    $(".choice-notification-form").removeAttr('disabled');

                    $(".modal-notification").show();
                    $(".modal-form").hide();
                } else {
                    // none
                    $(".choice-form-form").attr('disabled', true);
                    $(".choice-notification-form").attr('disabled', true);
                }
            }

            $("#old_type").val(el.val());
        }

        function clearChoiceType(el, choice_type)
        {
            clearAllSave();
            if (choice_type == "form") {
                $(".choice-form-form").val("").trigger("change");
            } 
            if (choice_type == "notification") {
                $(".choice-notification-form").val("").trigger("change");
            }
            if (choice_type == "modal-notification") {
                $(".choice-notification-form").trigger("change");
            }
            if (choice_type == "modal-form") {
                $(".choice-form-form").trigger("change");
            }
            alteraComboType( el );
        }

        function askForSave(el, choice_type){
            Swal.fire({
                type: 'warning',
                title: "{{ 'attentiontitle'|trans({},'studio')}}",
                html: "{{ 'savechangetext'|trans({},'emails_configuration')}}",
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: "{{ 'confirmyes'|trans({},'studio')}}",
                cancelButtonText: "{{ 'confirmno'|trans({},'studio')}}"
            }).then((result) => {
                if (result.value) {
                    //salve pag chaged
                    $("#std_emails_form_save").trigger("click");
                    alteraComboType( el );
                }
                clearChoiceType(el, choice_type);
            });
        }

        // show or hidden / blocked or unblocked fields 
        $(document).on('change', '.choice-type-form', function() {
            var choice_type = $(".choice-type-form").val();
            if( $("#edit_form").val() == "true" ){
                askForSave($(this), choice_type);
            } else {
                clearChoiceType($(this), choice_type);
            }
        });

       function searchFormNotification(dataSearch){
           $.ajax({
                url: "/{{ app.request.getLocale() }}/admin/emails-configurations/searchformnotification",
                data: dataSearch,
                cache:false,
                type: "POST",
                success: function(data) {
                    if(data == "E0"){
                        clearAllSave();
                    } else {

                        var dataJson = jQuery.parseJSON( data );
                        
                        var emailTo = "";
                        if( dataJson.emailto != null && dataJson.emailto.indexOf(";") > 0 ){
                            var arrEmailTo = dataJson.emailto.split(";");
                            arrEmailTo.forEach(function(email) {
                                emailTo = emailTo + "<li>"+email+"<i class=\"la la-times\"></i></li>";
                            });
                        } else {
                                if( dataJson.emailto != ""){
                                emailTo = "<li>"+dataJson.emailto+"<i class=\"la la-times\"></i></li>";
                                }
                        }

                        var emailCc = "";
                        if( dataJson.emailcc != null && dataJson.emailcc.indexOf(";") > 0 ){
                            var arrEmailCc = dataJson.emailcc.split(";");
                            arrEmailCc.forEach(function(email) {
                                emailCc = emailCc + "<li>"+email+"<i class=\"la la-times\"></i></li>";
                            });
                        } else {
                            if( dataJson.emailcc != ""){
                                emailCc = "<li>"+dataJson.emailcc+"<i class=\"la la-times\"></i></li>";
                            }
                        }

                        var emailBcc = "";
                        if( dataJson.emailbcc != null && dataJson.emailbcc.indexOf(";") > 0 ){
                            var arrEmailBcc = dataJson.emailbcc.split(";");
                            arrEmailBcc.forEach(function(email) {
                                emailBcc = emailBcc + "<li>"+email+"<i class=\"la la-times\"></i></li>";
                            });
                        } else {
                            if( dataJson.emailbcc != ""){
                                emailBcc = "<li>"+dataJson.emailbcc+"<i class=\"la la-times\"></i></li>";
                            }
                        }

                        $("#id_emailconfiguration").val(dataJson.id);
                        $("#std_emails_configurations_form_email_to").val(dataJson.emailto);
                        $("#std_emails_list_email_to").html(emailTo);
                        $("#std_emails_num_email_to").html($("#std_emails_list_email_to").find("li").length);

                        $("#std_emails_configurations_form_email_cc").val(dataJson.emailcc);
                        $("#std_emails_list_email_cc").html(emailCc);
                        $("#std_emails_num_email_cc").html($("#std_emails_list_email_cc").find("li").length);

                        $("#std_emails_configurations_form_email_bcc").val(dataJson.emailbcc);
                        $("#std_emails_list_email_bcc").html(emailBcc);
                        $("#std_emails_num_email_bcc").html($("#std_emails_list_email_bcc").find("li").length);
                    }

                }
            });
       }

        // load emails (search) for Form 
        $("body").on("change", ".change-modal-form", function(){
            if( $("#edit_form").val() == "true" ){
                askForSave($(this), "modal-form");
            } else {
                var config_id = $("#config_id").val();
                var type = $("#std_emails_configurations_form_type").val();
                var form = $(this).val();
                $("#old_form_id").val( $(this).val() );
                // search emails register
                var dataSearch = {};
    
                dataSearch['config_id'] = config_id;
                dataSearch['type'] = type;
                dataSearch['form'] = form;
    
                if( form != "")
                    searchFormNotification(dataSearch);
            }
        });

        // load emails (search) notifcation 
        $("body").on("change", ".change-modal-notification", function(){
            if( $("#edit_form").val() == "true" ){
                askForSave($(this), "modal-notification");
            } else {
                var config_id = $("#config_id").val();
                var type = $("#std_emails_configurations_form_type").val();
                var form = $(".choice-notification-form").val();
                $("#old_notification").val( $(this).val() );
                // search emails register
                var dataSearch = {};

                dataSearch['config_id'] = config_id;
                dataSearch['type'] = type;
                dataSearch['form'] = form;

                if( form != "" ){
                    searchFormNotification(dataSearch);
                }
            }

        });
        // Button import
        $("body").on("click",".btn-import, .print-close",function(e){
            e.preventDefault();
            $(".print-layer").toggleClass("open");
        });

        // Load file name import field 
        $(document).on('change', '.custom-file-input', function (event) {
            $(this).next('.custom-file-label').html(event.target.files[0].name);
        })

        // import excel
        $("body").on("click" , "#inputimport", function(){
            var config_id = $("#config_id").val();
            var form = $("#inputfile").val();
            checkReturnImport();

        });

        // confirm save
        $("body").on("click" , "#std_emails_form_save", function(){
            var type = $("#std_emails_configurations_form_type");
            var form_id = $("#std_emails_form_form_id");
            var notification_id = $("#std_emails_form_notification_id");
            var email_to = $("#std_emails_list_email_to");
            var config_id = $("#config_id").val();
            var $form = $(this).closest('form');

            if( type.val() == "" ){
                Swal.fire({
                     type: 'warning',
                     title: 'Ops',
                     text: "{{ 'choosetype'|trans({},'emails_configuration')}}"
                 }).then((result) => {
                    type.select2('open');
                });
            }

            if( type.val() == "form" && form_id.val() == "" || type.val() == "notification" && notification_id.val() == "" ){
                Swal.fire({
                    type: 'warning',
                    title: 'Ops',
                    text: "{{ 'chooseconfiguration'|trans({},'emails_configuration')}}"
                }).then((result) => {
                    if(type.val() == "form"){
                        form_id.select2('open');
                    }else{
                        notification_id.select2('open');
                    }
                });
            }

            if (type.val() != "" && type.val() == "form" && form_id.val() != "" || type.val() == "notification" && notification_id.val() != "" ) {                
                if (notification_id.val() != "" || form_id.val() != "" ) {
                    $.ajax({
                        url: "/{{ app.request.getLocale() }}/admin/emails-configurations/save/"+config_id,
                        data: $form.serialize(),
                        type: "POST",
                        success: function(data) {
                            if(data == "OK"){
                                Swal.fire({
                                    type: 'success',
                                    title: "{{ 'confirmtitle'|trans({},'studio')}}",
                                    text: "{{'savedsuccessfully'|trans({},'emails_configuration')}}"
                                });
                                $("#edit_form").val("false");
                            }   
                        }
                    });
                }
            }

        });


        // add email
        $("body").on("keyup" , ".email-enter", function(){
            if (event.keyCode === 13) {
                event.preventDefault();

                $("#edit_form").val("true");

                var email = $(this).val();
                var hrefLink = $(this).closest("form").find(".nav-link.active").attr("href");
                switch(hrefLink) {
                    case "#nav-email-to":
                        // email to
                        var elList = $("#std_emails_list_email_to");
                        var elDB = $("#std_emails_configurations_form_email_to");
                        var numEmail = elList.find("li").length;
                        var setEmail = $("#std_emails_num_email_to");
                        break;
                    case "#nav-emailcc":
                        // email cc
                        var elList = $("#std_emails_list_email_cc");
                        var elDB = $("#std_emails_configurations_form_email_cc");
                        var numEmail = elList.find("li").length;
                        var setEmail = $("#std_emails_num_email_cc");
                        break;
                    case "#nav-emailbcc":
                        // email bcc
                        var elList = $("#std_emails_list_email_bcc");
                        var elDB = $("#std_emails_configurations_form_email_bcc");
                        var numEmail = elList.find("li").length;
                        var setEmail = $("#std_emails_num_email_bcc");
                        break;
                    default:
                        // code block
                        return false;
                }

                if( email.indexOf("@") > 0 && email.indexOf(".") > 0 && email.lastIndexOf(".") < email.length - 1){
                     
                     if (elList.find("li:not('.d-none')").length > 0) {
                        
                         Swal.fire({
                            type: 'warning',
                            title: 'Ops!',
                            text: "{{ 'duplicateemail'|trans({},'emails_configuration')}}"
                        });
                    } else {

                        var emailList = elList.html();             
                            emailList = emailList + "<li>"+email+"<i class=\"la la-times\"></i></li>";
        
                        elList.html(emailList);
                        setEmail.html(numEmail+1);
        
                        var valInputDB = elDB.val();
                        if( valInputDB == "" ){
                            elDB.val(email);
                        } else {
                            elDB.val(valInputDB+';'+email);
                        }
        
                        $(this).val("");
                        $(this).closest(".tab-pane.active").find(".lista-emails").find("li").removeClass("d-none");
                    }

                } else {

                    Swal.fire({
                            type: 'warning',
                            title: 'Ops!',
                            text: "{{ 'invalidemail'|trans({},'emails_configuration')}}"
                        });
                }
                
            } else {
                // typing text
                var texto = $(this).val();
                // search in the list down below
                var listLi = $(this).closest(".tab-pane.active").find(".lista-emails").find("li");
                // typing text more than 3 character
                if( texto.length > 2 ){
                    // found it, verify filter
                    if( listLi.length > 0 ){
                        listLi.each(function(){
                            // if there is not exist html - li
                            if( $(this).html().indexOf(texto) == -1 ){
                                $(this).addClass("d-none");
                            } else {
                                // show li
                                $(this).removeClass("d-none");
                            }
                        });
                    }
                } else {
                    // less than 3 character, clean filter and show all li
                    if( listLi.length > 0 ){
                        listLi.each(function(){
                            $(this).removeClass("d-none");
                        });
                    }
                }
            }
        });

        // drop email
        $("body").on("click" , ".la-times", function(){
            var liEl = $(this).closest("li");
            var emailRemove = liEl.html().replace('<i class="la la-times"></i>',"");

            var hrefLink = $(this).closest("form").find(".nav-link.active").attr("href");
            switch(hrefLink) {
                case "#nav-email-to":
                    // email to
                    var elDB = $("#std_emails_configurations_form_email_to");
                    var numEmail = $("#std_emails_list_email_to").find("li").length-1;
                    var setEmail = $("#std_emails_num_email_to");
                    break;
                case "#nav-emailcc":
                    // email cc
                    var elDB = $("#std_emails_configurations_form_email_cc");
                    var numEmail = $("#std_emails_list_email_cc").find("li").length-1;
                    var setEmail = $("#std_emails_num_email_cc");
                    break;
                case "#nav-emailbcc":
                    // email bcc
                    var elDB = $("#std_emails_configurations_form_email_bcc");
                    var numEmail = $("#std_emails_list_email_bcc").find("li").length-1;
                    var setEmail = $("#std_emails_num_email_bcc");
                    break;
                default:
                    // code block
                    return false;
            }

            var valInputDB = elDB.val();
            if( valInputDB.indexOf(";") > 0 ){
                // many emails
                if( valInputDB.replace(emailRemove+";", "") == valInputDB ){
                    elDB.val(valInputDB.replace(";"+emailRemove, ""))
                    setEmail.html(numEmail);
                    ;
                } else {
                    elDB.val(valInputDB.replace(emailRemove+";", ""))
                    setEmail.html(numEmail);
                }
            } else {
                // Only 1 email into it
                elDB.val("")
                setEmail.html(numEmail);
            }

            $("#edit_form").val("true");

            // remove email
            liEl.remove();


        });

        // Clear emails
        $("body").on("click" , ".clear-emails", function(){
            var hrefLink = $(this).closest("form").find(".nav-link.active").attr("href");
            switch(hrefLink) {
                case "#nav-email-to":
                    // email to
                    $("#std_emails_list_email_to").html("");
                    $("#std_emails_configurations_form_email_to").val("");
                    $("#std_emails_num_email_to").html("");
                    break;
                case "#nav-emailcc":
                    // email cc
                    $("#std_emails_list_email_cc").html("");
                    $("#std_emails_configurations_form_email_cc").val("");
                    $("#std_emails_num_email_cc").html("");
                    break;
                case "#nav-emailbcc":
                    // email bcc
                    $("#std_emails_list_email_bcc").html("");
                    $("#std_emails_configurations_form_email_bcc").val("");
                    $("#std_emails_num_email_bcc").html("");
                    break;
                default:
                    // code block
                    return true;
            }

            $("#edit_form").val("true");
        });

    // iframe
        // function checkReturnImport(){
        //     var body = $("#uploadTrg").contents().find("body").html();
        //     if(body=="success"){
        //         Swal.fire({ type: 'success', title: 'Ficheiro importado com sucesso' });
        //     }else{
        //         Swal.fire({ type: 'error', title: 'Erro ao importar ficheiro', html: body });
        //     }
        // }

    // Clear All after save
        function clearAllSave(){

            $("#edit_form").val("false");
            //$(".select2-style").val("").trigger("change");
            $("#std_emails_list_email_to").html("");
            $("#std_emails_configurations_form_email_to").val("");
            $("#std_emails_num_email_to").html("");

            $("#std_emails_list_email_cc").html("");
            $("#std_emails_configurations_form_email_cc").val("");
            $("#std_emails_num_email_cc").html("");

            $("#std_emails_list_email_bcc").html("");
            $("#std_emails_configurations_form_email_bcc").val("");
            $("#std_emails_num_email_bcc").html("");
        }
    
    // Clear All button
        $("body").on("click" , "#clear_all", function(){
            
            Swal.fire({
                type: 'warning',
                title: "{{ 'attentiontitle'|trans({},'studio')}}",
                html: "{{ 'clearalltext'|trans({},'emails_configuration')}}",
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: "{{ 'confirmyes'|trans({},'studio')}}",
                cancelButtonText: "{{ 'confirmno'|trans({},'studio')}}"
            }).then((result) => {
                if (result.value) {
                    clearAllSave( $(this) );
                    $(".select2-style").val("").trigger("change");
                    $(".email-enter").val("");
                } else {
                    // ignore change
                    alteraComboType( $(this) );
                }
            });
            $("#edit_form").val("true");           
        });  

    </script>
{% endblock %}