@extends('layouts.app')

@section('content')
    <style>
        #email_enter::placeholder {
            color: darkslategrey !important;
            opacity: .5;
        }
    </style>
    <div class="col-sm-12">
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">{{translate('Send Newsletter')}}</h3>
            </div>
            <!--Horizontal Form-->
            <!--===================================================-->
            <form class="form-horizontal" action="{{ route('newsletters.send') }}" method="POST"
                  enctype="multipart/form-data">
                @csrf
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="name">{{translate('Emails')}} ({{translate('Users')}}
                            )</label>
                        <div class="col-sm-10">
                            <select class="form-control selectpicker" name="user_emails[]" multiple
                                    data-selected-text-format="count" data-actions-box="true">
                                @foreach($users as $user)
                                    <option value="{{$user->email}}">{{$user->email}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="name">{{translate('Emails')}}
                            ({{translate('Subscribers')}})</label>
                        <div class="col-sm-10">
                            <select class="form-control selectpicker" name="subscriber_emails[]" multiple
                                    data-selected-text-format="count" data-actions-box="true">
                                @foreach($subscribers as $subscriber)
                                    <option value="{{$subscriber->email}}">{{$subscriber->email}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group enter_email">
                        <label class="col-sm-2 control-label" for="name">{{translate('Emails')}}</label>
                        <div class="col-sm-10">
                            <textarea name="email_enter" class="form-control" rows="5" data-role="tagsinput"
                                      placeholder="Enter comma seperated email only. Do not use space or any other characters or symbol. Email must be valid."
                                      id="email_enter"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="name">{{translate('Email Template')}}</label>
                        <div class="col-sm-10 ">
                            <select class="form-control selectpicker emailtemplate" name="email_template"
                                    data-selected-text-format="count" data-actions-box="true">
                                <option value="">Select Email Template</option>
                                @foreach($templates as $template)
                                    <option value="{{$template->id}}">{{$template->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="subject">{{translate('Newsletter subject')}}</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="subject" id="subject" required>
                        </div>
                    </div>
                    <div class="form-group" id="addDiv">
                        <label class="col-sm-2 control-label" for="name">{{translate('Newsletter content')}}</label>
                        <div class="col-sm-10" id="editor">
                            <textarea id="newsletter-editor" name="content" required></textarea>
                        </div>
                    </div>
                    <div class="form-group" id="frameDiv" style="display: none;">
                        <label class="col-sm-2 control-label" for="name">{{translate('Email Template')}}</label>
                        <div class="col-sm-10" id="editor">
                            <iframe width="100%" height="400" style="border: 1px solid #dddddd87;"
                                    src="{{ url('email-template') }}" frameborder="0" allowfullscreen=""></iframe>
                        </div>
                    </div>
                </div>
                <div class="panel-footer text-right">
                    <button class="btn btn-purple" type="submit">{{translate('Send')}}</button>
                </div>
            </form>
            <!--===================================================-->
            <!--End Horizontal Form-->

        </div>
    </div>

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jodit/3.4.25/jodit.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jodit/3.4.25/jodit.min.js"></script>
    <script type="text/javascript">
        $('#email_enter').on('paste', function () {
            str = this.value;
            str1 = str.replace(/ +(?=)/g, ' ');
            $("#email_enter").val(str1);
        });
        $('#email_enter').on('blur', function () {
            str = this.value;
            str1 = str.replace(/ +(?=)/g, ' ');
            $("#email_enter").val(str1);
        });
        $(document).ready(function () {
            $('#email_enter').blur(function () {
                validateMultipleEmails($('#email_enter').val());
            });
        });

        function validateMultipleEmails(emailInput) {
            // Get value on emails input as a string
            var emails = emailInput;

            // Split string by comma into an array
            emails = emails.split(",");

            var valid = true;
            var regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

            var invalidEmails = [];

            for (var i = 0; i < emails.length; i++) {
                // Trim whitespaces from email address
                emails[i] = emails[i].trim();

                // Check email against our regex to determine if email is valid
                if (emails[i] == "" || !regex.test(emails[i])) {
                    invalidEmails.push(emails[i]);
                }
            }

            // Output invalid emails
            $('.form-group .text-danger').remove();
            if (invalidEmails != 0) {
                $('.enter_email').append('<p class="text-danger col-sm-offset-2">Invalid emails: ' + invalidEmails.join(', ') + '</p>');
            }
        }


        var editorJodit = new Jodit('#newsletter-editor', {
            showCharsCounter: true,
            showWordsCounter: true,

            askBeforePasteFromWord: false,

            defaultActionOnPasteFromWord: 'insert_as_text',
            tabIndex: 0,
            theme: "summer",
            height: 500,
            hotkeys: {
                redo: 'ctrl+z',
                undo: 'ctrl+y,ctrl+shift+z',
                indent: 'ctrl+]',
                outdent: 'ctrl+[',
                bold: 'ctrl+b',
                italic: 'ctrl+i',
                removeFormat: 'ctrl+shift+m',
                insertOrderedList: 'ctrl+shift+7',
                insertUnorderedList: 'ctrl+shift+8',
                openSearchDialog: 'ctrl+f',
                openReplaceDialog: 'ctrl+r',
            }
        });

        editorJodit.events.on('beforePaste', (event) => {
            const target = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
            const pastedText = target.getData('text/plain') || target.getData('text/html');
            console.log("beforePaste");
            if (pastedText.indexOf('data:image') !== -1 || pastedText.indexOf('src="data:image"') !== -1 || pastedText.indexOf('base64') !== -1) {
                return false;
            }
        });

        editorJodit.events.off('processPaste.paste').on('processPaste.paste', (event, text, type) => {
            if (text && /.*\<img.*src=".*base64.*[\S\n\r\s]*">.*/g.test(text)) {
                return text.replace(/\<img.*src=".*base64.*[\S\n\r\s]*">/g, '');
            } else {
                return text;
            }
        });

        $('.emailtemplate').on('change', function () {
            var id = this.value;

            if (id == "1") {
                $("#addDiv").hide();
                $("#frameDiv").show();
            } else {
                $("#subject").val("");
                $("#frameDiv").hide();
                $("#addDiv").show();
            }
            $('#editor').remove();
            $('#addDiv').append('<textarea id="newsletter-editor-content" name="content" required style="width: 800px; height: 200px;"></textarea>');
            $.post('{{ route('email.template.get') }}', {_token: '{{ csrf_token() }}', id: id}, function (data) {
                if (data.code == 200) {
                    $("#subject").val(data.name);
                    $("#newsletter-editor-content").html(data.content);
                }
            });

        });

    </script>
@endsection