@extends('admin.layouts.main')

@section('title')
@if($newsletter)
Edit Birthday Newsletter
@else
Add Birthday Newsletter
@endif
@endsection

@section('content')

<main>
    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec">
            <div class="top-bar d-flex align-items-center mb-4">
                <h2>Birthday Newsletter</h2>
                <div class="right-table-container ml-auto">
                    <label class="switch">
                        <input type="checkbox" id="status" name="status" @if($newsletter && $newsletter->is_active)
                        checked="checked"
                        @endif>
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
            <div class="form-sec">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="bg-white border rounded p-4">
                            <h2 class="form-sec-title">Email Content</h2>

                            <form id="frmBdayNewsletter" name="frmBdayNewsletter">
                                @csrf

                                @if($newsletter)
                                <input type="hidden" id="id" name="id" value="{{ $newsletter->id }}" />
                                @else
                                <input type="hidden" id="id" name="id" value="0" />
                                @endif

                                <div class="form-group">
                                    <label class="control-label">Subject</label>
                                    <input id="subject" name="subject" type="text" class="form-control"
                                        placeholder="Subject"
                                        value="@if($newsletter){{ $newsletter->subject }}@endif" />
                                </div>

                                <small class="text-muted">Recommended size is 600px X 300px.</small>
                                <div class="form-group file-upload">
                                    <label class="control-label">Upload Image</label>
                                    <div class="custom-file">
                                        <input id="image" name="image" type="file" class="custom-file-input"
                                            id="customFile">
                                        <label class="custom-file-label" for="customFile"><img
                                                src="{{ asset('img/file-upload.svg') }}" alt="upload">Upload</label>
                                    </div>
                                </div>

                                @if(isset($newsletter))
                                <input type="hidden" name="id" id="id" value="{{ $newsletter->id }}" />
                                <span class="filename">
                                    {{ $newsletter->hero_image }}
                                    <input type="hidden" name="uploaded" id="uploaded" value="1" />
                                </span>
                                @else
                                <span class="filename"></span>
                                <input type="hidden" name="uploaded" id="uploaded" value="0" />
                                @endif

                                <div class="form-group">
                                    <label class="control-label">Body</label>
                                    <textarea id="email_content" name="email_content" class="form-control editor"
                                        placeholder="Email Content Goes Here">@if($newsletter){{ $newsletter->content }}@endif</textarea>
                                </div>
                                <input type="button" class="btn btn-em saveNewsletter" value="Save & Preview Email" />
                            </form>
                        </div>
                    </div>

                    <div class="col-lg-8">
                        <div class="bg-white border rounded p-4">
                            <h2 class="form-sec-title">Email Preview</h2>
                            <iframe id="emailPreview"
                                src="{{ route('admin.campaigns.birthdayNewsletterPreview',['session' => Session::get('panel') ]) }}"
                                width="600" height="900" scrolling="auto" frameborder="no" marginheight="0"></iframe>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</main>

@endsection

@push('pageJs')

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
    var storeUrl = "{{ route('admin.campaigns.storeBirthDayNewsletter',['panel' => Session::get('panel')]) }}";
    var toggleStatusUrl =
        "{{ route('admin.campaigns.toggleBirthDayNewsletterStatus',['panel' => Session::get('panel')]) }}";
</script>

<script type="text/javascript">
    $(document).ready(function() {

        tinymce.init({
            selector: 'textarea.editor',
            height: 300,
            menubar: false,
            branding: false,
            browser_spellcheck: true,
            toolbar: 'undo redo |formatselect forecolor | bold italic underline strikethrough | link | alignleft aligncenter alignright alignjustify | bullist numlist | removeformat',
            block_formats: 'Header 1=h1; Header 2=h2; Header 3=h3; Header 4=h4; Header 5=h5; Header 6=h6',
            default_link_target: "_blank",
            plugins: [
                'link preview wordcount lists', 'paste'
            ],
            paste_auto_cleanup_on_paste: true,
            paste_remove_styles: true,
            paste_remove_styles_if_webkit: true,
            paste_strip_class_attributes: true,
            setup: function(editor) {
                editor.on('change', function() {
                    tinyMCE.triggerSave();
                    $("#" + editor.id).valid();
                });
            },
        });

        $(document).on('change', '#frmBdayNewsletter input[type="file"]', function(e) {
            $('.filename').text(e.target.files[0].name);
        });

        $("#frmBdayNewsletter").validate({
            rules: {
                'image': {
                    required: {
                        depends: function(element) {
                            return ($("#uploaded").val() == 0)
                        }
                    },
                    extension: function(element) {
                        return 'jpeg|jpg|png';
                    },
                    filesize: 25
                },
                'subject': {
                    required: true
                },
                'email_content': {
                    required: true
                }
            },
            messages: {
                'image': {
                    required: "This field is required.",
                    extension: function(element) {
                        return 'Valid files are Images (png/jpg)';
                    },
                    
                },
                subject: {
                    required: 'This field is required.'
                },
                email_content: {
                    required: 'This field is required.'
                }
            },
            ignore: [],
            errorElement: 'span',
            errorClass: 'invalid-feedback',
            errorPlacement: function(error, element) {
                if (element.hasClass('custom-file-input')) {
                    error.insertAfter(element.parents('.file-upload')[0]);
                } else if (element.is('input')) {
                    error.insertAfter(element);
                } else if (element.is("textarea")) {
                    error.insertAfter(element.next());
                }
            },
            invalidHandler: function(event, validator) {
                var offset = $(validator.errorList[0].element).offset().top;
                $('html, body').animate({
                    scrollTop: offset - 100
                }, 100);
            }
        });

        $('#status').click(function() {
            axios.post(toggleStatusUrl).then(function(res) {
                if (res.data.result) {
                    Snackbar.show({
                        pos: 'bottom-right',
                        text: res.data.message,
                        actionText: 'Okay'
                    });
                }
            })
        });

        $('.saveNewsletter').click(function() {

            if ($("#frmBdayNewsletter").valid()) {
                $('.saveNewsletter').val('Please wait...').attr('disabled', true);
                var formData = new FormData();
                var imagefile = document.querySelector('#image');
                if (imagefile.files[0] !== undefined) {
                    formData.append("image", imagefile.files[0]);
                }
                formData.append("subject", $('#subject').val());
                formData.append("email_content", $('#email_content').val());
                formData.append("id", $('#id').val());
                axios.post(storeUrl, formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    })
                    .then(function(response) {

                        document.getElementById('emailPreview').contentWindow.location.reload(true);
                        $('.saveNewsletter').val('Save & Preview Email').attr('disabled', false);
                    })
                    .catch(function(error) {
                        NProgress.done();
                    });

            }
        });

});
</script>


@endpush