@extends('template')

@section('content')
<style>
.blockUI {
    z-index: 9999999 !important;
}
.mb-4 {margin-bottom: calc(4 * .5em)}
.selecao {
    width: 100% !important;
}
.selecao > div {
    width: 45% !important;
}
.flx {
    display: flex;
    justify-content: space-between;
}
.flx > * {
    width: 45%;
}
.flx h3 {
    background: #578ebe;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    padding: .2em;
}
.xnd {
    position: relative;
}
.xnd i {
    position: absolute;
    top: 10px;
    left: 10px;
}
.search-input {
    padding-left: 35px;
}
.selecao .fa-search {
    color: #BBB;
}

.ani-error {
    animation: anima-error 5s ease-in-out;
}

@keyframes anima-error {

    from {
        border-color: red;
    }
    to {
        border-color: #EEE;
    }
}

</style>
    <div class="page-content">
        <div class="container-fluid">
            <div class="page-content-inner">
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light">
                            <div class="row">
                                <div class="col-md-12">
                                    <span class="font-blue-madison title"><i class="glyphicon glyphicon-envelope"></i> Mailing Clientes</span>
                                    <hr>
                                </div>
                            </div>
                            <div class="portlet-body form">
                                <div class="flx">
                                    <h3>Emails dos Clientes Ativos</h3>
                                    <h3>Emails Selecionados para Envio</h3>
                                </div>
                                {!! Form::open(['route' => 'admin.mailing.clientes.send','method' => 'POST', 'id' => 'f-envia-mailing', 'enctype' => 'multipart/form-data']) !!}
                                    <select name="emails[]" id="emails" multiple required>
                                        @foreach ($emails as $e)
                                            @if (!$e) @continue @endif
                                                                                        <option value="{{ $e }}">{{ $e }}</option>
                                        @endforeach
                                    </select>
                                    <div class="flx mb-4">
                                        <div><a href="javascript:;" class="text-info select-all">Selecionar Todos</a></div>
                                        <div><a href="javascript:;" class="text-danger deselect-all">Desmarcar Todos</a></div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-sm-4 form-group mb-4">
                                            <label>Template</label>
                                            <select name="template" id="template" class="form-control">
                                                <option value="">:: selecionar ::</option>
                                                @foreach ($templates as $t)
                                                    <option value="{{ $t->id }}" data-assunto="{{ $t->assunto }}">{{ $t->nome }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-sm-2">
                                            <a href="javascript:;" onclick="removerTemplate()" class="remover-template text-danger hide" style="display:inline-block;margin-top: 2.2em">remover template</a>
                                        </div>
                                        <div class="col-sm-6" style="padding-left: 60px">
                                            <h4 style="font-size:initial">cco <small class="help-block" style="display:inline">(cópia oculta)</small></h4>
                                            <div class="form-group">
                                                <input name="cco" class="form-control form-control-sm" placeholder="Ex.: grupo.suporte@twsolutions.com.br; beltrano@email.com">
                                                <small class="help-block">para mais de 1 email, separe-os por ; (ponto e vírgula)</small>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group mb-4 col-sm-4">
                                            <div class="form-group">
                                                <label for="assunto">Assunto</label>
                                                <input name="assunto" id="assunto" class="form-control" placeholder="Aqui vai o assunto do Email" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <label for="conteudo">Conteúdo</label>
                                            <textarea name="conteudo" id="conteudo"></textarea>
                                        </div>
                                    </div>
                                    
                                    <div style="mb-4">
                                        <button type="submit" id="botao-enivar" class="btn btn-info">
                                            <i class="fa fa-paper-plane" style="display:inline-block; padding-right:.5em"></i> Enviar
                                        </button>
                                        <button type="button" id="botao-salvar" class="btn green-jungle">
                                            <i class="fa fa-save" style="display:inline-block; padding-right:.5em"></i> Salvar e Enviar
                                        </button>
                                    </div>

                                {!! Form::close() !!}

                                

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END PAGE CONTENT INNER -->
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Nome do Template Novo?</h4>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" name="nomeTemplate" placeholder="Exemplo: Entramos de Férias">
                </div>
                <div class="modal-footer">
                    <button type="button" id="enviar-novo-template" class="btn btn-primary">Enviar</button>
                </div>
            </div>
        </div>
    </div>


@stop()
@section('js-admin-config-msg')
    <link href="{{ asset('/assets/global/plugins/bootstrap-summernote/summernote.css') }}" rel="stylesheet" type="text/css"/>
    <script src="{{ asset('/assets/global/plugins/bootstrap-summernote/summernote.min.js') }}" type="text/javascript"></script>
    {{-- <script src="{{ asset('/assets/global/scripts/app.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/plugins/bootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/plugins/jquery.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/plugins/jquery.blockui.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/pages/scripts/ui-blockui.min.js') }}" type="text/javascript"></script>

    <script>
        @if (session('message'))
            swal({
                "title": "",
                "text": "{!! session('message') !!}",
                "showConfirmButton": true,
                "type": "success"
            });
        @endif
    </script> --}}
    <script>
    const URL_IMGIMAL = "{{ url('/assets/email') }}";

    $("#emails").multiSelect({
        selectableHeader: '<div class="xnd"><i class="fa fa-search"></i><input class="search-input form-control" autocomplete="off" placeholder="Ex.: fulano@gmail.com"></div>',
        selectionHeader: '<div class="xnd"><i class="fa fa-search"></i><input class="search-input form-control" autocomplete="off" placeholder="Ex.: ciclano@gmail.com"></div>',
        cssClass: 'selecao',
        afterInit: function(ms) {
            console.log('afterInit');
        },
        afterSelect: function() {
            console.log('afterSelect');
        },
        afterDeselect: function() {
            console.log('afterDeselect');
        }
    });

    $('.search-input').keyup(function() {
        let val = this.value.trim(), $parent = $(this).closest('.ms-selectable, .ms-selection');
        val = val.length >= 2 ? val : false;
        if (val) {
            let pattern = new RegExp(val, 'i');
            $parent.find('.ms-list > li').each(function(){
                $(this).text().match(pattern) 
                ? $(this).removeClass('hide') 
                : $(this).addClass('hide');
            });
        } 
        else $parent.find('.ms-list > li').removeClass('hide');
    });


    $('.select-all').click(function() {
        $("#emails").multiSelect('select_all');
    });

    $('.deselect-all').click(function() {
        $("#emails").multiSelect('deselect_all');
    });

    $('#conteudo').summernote({height: 300});

    $('#template').change(function() {
        if (this.value)
        {
            $('.remover-template').removeClass('hide');
            fetch(`{{ route('admin.mailing.clientes.retorna-template') }}?id=${encodeURIComponent(this.value)}`)
            .then(res => res.ok ? res.json() : Promise.reject(res.statusText))
            .then(r => {
                console.log(r);
                let assunto = $(this).find(':selected').data('assunto');
                $('#assunto').val(assunto);
                if (r.status) $('#conteudo').summernote('code', r.template);
            })
            .catch(console.error);
        }
        else
        {
            $('.remover-template').addClass('hide');
            $('#assunto').val('');
            $('#conteudo').summernote('code', '');
        }
    });

    $('#botao-salvar').click(function(e) {

        if (validSend()) {
            e.preventDefault();
            $('#conteudo').val(conteudo());
            $('#myModal').modal('show');
        }
    });

    var conteudo;
    $('#botao-enivar').click(function(e) {
        
        if (validSend()) {
            $('#conteudo').val(conteudo());
            $.blockUI({ message: `Aguarde <img src="{{ asset('assets/global/img/loading.gif') }}">` });
        }
        else e.preventDefault();
    });

    
    $('#enviar-novo-template').click(function(e) {

        e.preventDefault();

        let nome = $('#myModal').find(':text');

        if (nome.val().trim()) {

            $.blockUI({ message: `Aguarde <img src="{{ asset('assets/global/img/loading.gif') }}">` });

            fetch(`{{ route("admin.mailing.clientes.verifica-nome") }}?nome=${encodeURIComponent(nome.val().trim())}`)
            .then(res => res.ok ? res.json() : Promise.reject(res.statusText))
            .then(r => {

                console.log(r);

                if (!r.status) {
                    $.unblockUI();
                    setTimeout(() => alert('Nome de template já existe, tente outro.'), 400);
                }
                else {
                    $('#myModal').modal('hide');
                    $('#f-envia-mailing')
                    .append(nome)
                    .append('<input type="hidden" name="save" value="1">')
                    .submit();
                }
            })
            .catch((err) => {
                $.unblockUI();
                setTimeout(() => alert(err), 400);
                $('#myModal').modal('hide');
            });
        }

    });


    function validSend() {

        let select   = $('select[name="emails[]"]').val(),
            assunto  = $('#assunto').val().trim(),
            conteudo = $('#conteudo').val().replace(/<[\/\w"'\s=]+>/gi, ''),
            valid    = true;

        if (!(select && select.length))
        {
            valid = false;
            errValid('.ms-selectable .ms-list', 'Selecione pelo menos 1 email para enviar');

        } else if (!assunto)
        {
            valid = false;
            errValid('#assunto', 'Defina o assunto do email.');
        } 
        else if (!conteudo)
        {
            valid = false;
            errValid('.note-editor', 'Digite um conteúdo para ser enviado ou selecione um Template.');
        }

        return valid;
    }

    var c = d = 0, anima = true;
    function errValid(selector, msg) {  

        clearTimeout(c);
        clearTimeout(d);
        $(selector).addClass('ani-error');
        if (anima) { anima = false; $('html, body').animate({scrollTop: $(selector).offset().top - 50}, 500, () => anima = true); }
        c = setTimeout(() => alert(msg), 1000);
        d = setTimeout(() => $(selector).removeClass('ani-error'), 5000);
    }

    $('#myModal').on('shown.bs.modal', function () {
        $(this).find(':text').focus();
    });

    jQuery(function($) {
        
        $('.note-editor').find('[name="files"]').attr('name', 'files[]');
        $('.note-editor').on('change', '[name*="files"]', function() {
            $(this).clone(true).addClass('hide').appendTo('#f-envia-mailing');
        });
    });


    function conteudo() {
        c = $('#conteudo').val().trim();
        if ($($('#conteudo').val()).length) {
            c = $($('#conteudo').val())
            .find('img')
            .each((i, e) => e.src = `${URL_IMGIMAL}/${e.dataset.filename}`)
            .end()
            .map((i, e) => e.outerHTML)
            .get()
            .join('');
        }
        
        return c;
    }

    function removerTemplate() {
        let t = $('#template').val();
        if (t) {
            $.blockUI({ message: `Aguarde <img src="{{ asset('assets/global/img/loading.gif') }}">` });
            fetch('{{ route("admin.mailing.clientes.remove-template") }}?id='+t)
            .then(res => res.ok ? res.json() : Promise.reject(res.statusText))
            .then(r => {
                $.unblockUI();
                let m = 'Template Removido';
                setTimeout(() => alert(m), 1000);
                $('#template').find(':selected').remove().end().val('').change();
            })
            .catch(err => {
                $.unblockUI();
                setTimeout(() => alert('não foi possivel remover o template'), 1000);
                console.error(err);
            });
        }
    }

    </script>

@stop()