@extends('admin.layouts.main')

@section('title')
Campaigns - Email Template
@endsection

@section('content')

<main>

    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec">

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">
                            @if($data)
                            Edit Campaign
                            @else
                            Add Campaign
                            @endif
                        </a></li>
                    <li class="breadcrumb-item" aria-current="page">
                        <a
                            href="{{ route('admin.campaigns.addEditStep1',['panel' => Session::get('panel'),'id' => $id ]) }}">
                            Configure</a>
                    </li>
                    @if($campaign->recepient_type != 'all')
                    <li class="breadcrumb-item" aria-current="page">
                        <a
                            href="{{ route('admin.campaigns.addEditStep2',['panel' => Session::get('panel'),'id' => $id ]) }}">
                            Recipients
                        </a>
                    </li>
                    @endif
                    <li class="breadcrumb-item active" aria-current="page">Email Template</li>
                </ol>
            </nav>

            <div class="top-bar d-flex align-items-center mb-4">
                <h2>Newsletter</h2>
                <div class="right-table-container ml-auto">
                    <a href="javascript:void(0)" class="btn btn-em mr-2 btnAssets"><span
                            class="material-icons mr-2">folder_open</span>Assets</a>

                    @if($campaign->status == 'draft')
                    <input type="button" value="Publish Email" class="btn btn-primary-em btnPublish" @click="publish" />
                    @else
                    <a href="{{ route('admin.campaigns.show',['panel' => session('panel'), 'id' => $id]) }}"
                        class="btn btn-primary-em">Done</a>
                    @endif


                </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="frmNewsletter" name="frmNewsletter">
                                @csrf

                                @if($data)
                                <input type="hidden" id="id" name="id" value="{{ $data->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($data){{ $data->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($data))
                                <input type="hidden" name="id" id="id" value="{{ $data->id }}" />
                                <span class="filename">
                                    {{ $data->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" v-pre>
                                    <label class="control-label">Body</label>
                                    <textarea id="email_content" name="email_content" class="form-control editor"
                                        placeholder="Email Content Goes Here">@if($data){{ $data->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.newsletterPreview',['session' => Session::get('panel'),'id' => $id ]) }}"
                                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 type="text/javascript" src="{{ asset('js/vendor/clipboard.min.js') }}"></script>
<script>
    storeUrl = "{{ route('admin.campaigns.storeNewsletter',['panel' => Session::get('panel'), 'id' => $id]) }}";
    assetsUrl = "{{ route('admin.assets.indexJson',['panel' => Session::get('panel')]) }}";
    publishUrl = "{{ route('admin.campaigns.publish',['panel' => Session::get('panel'), 'id' => $id]) }}";
    showUrl = "{{ route('admin.campaigns.show',['panel' => session('panel'), 'id' => $id]) }}";
</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', '#frmNewsletter input[type="file"]', function(e) {
            $('.filename').text(e.target.files[0].name);
        });

        $("#frmNewsletter").validate({
            rules: {
                'image': {
                    extension: function(element) {
                        return 'jpeg|jpg|png';
                    },
                    filesize: 25
                },
                'subject': {
                    required: true
                },
                'email_content': {
                    required: true
                }
            },
            messages: {
                'image': {
                    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);
            }
        });

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

            axios.get(assetsUrl)
                .then(function(response) {
                    vm.assets = response.data.data;
                    vm.assetsModalOpen = true;
                    vm.isLoading = false;
                    $('#modalAssets').modal('show');
                    Vue.nextTick(function() {
                        var clipboard = new ClipboardJS('.copyText', {
                            container: document.getElementById('modalAssets')
                        });
                        clipboard.on('success', function(e) {
                            Snackbar.show({
                                pos: 'bottom-right',
                                text: "URL copied to a clipboard",
                                actionText: 'Okay'
                            });
                        });
                    });
                })
                .catch(function(error) {
                    vm.isLoading = false;
                    NProgress.done();
                });

        });

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

            if ($("#frmNewsletter").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();
                    });

            }
        });

    });

    var vm = new Vue({

        el: '#app',

        data: {
            error: '',
            loaded: false,
            isLoading: false,
            state: false,

            assets: [],
            assetsModalOpen: false
        },

        methods: {

            publish() {
                let vm = this;
                vm.isLoading = true;
                $('.btnPublish').val('Please wait...').attr('disabled', true);
                axios.post(publishUrl).then(function(res) {
                    document.location.href = showUrl;
                    vm.isLoading = false;
                })
            },

            getAssets() {
                let vm = this;
                vm.isLoading = true;
                axios.get(assetsUrl)
                    .then(function(response) {
                        vm.assets = response.data.data;
                        vm.assetsModalOpen = true;
                        vm.isLoading = false;
                        $('#modalAssets').modal('show');
                        Vue.nextTick(function() {
                            var clipboard = new ClipboardJS('.copyText', {
                                container: document.getElementById('modalAssets')
                            });
                            clipboard.on('success', function(e) {
                                Snackbar.show({
                                    pos: 'bottom-right',
                                    text: "URL copied to a clipboard",
                                    actionText: 'Okay'
                                });
                            });
                        });
                    })
                    .catch(function(error) {
                        vm.isLoading = false;
                        NProgress.done();
                    });
            },

            closeAssetsModal() {
                this.assetsModalOpen = false;
                $('#modalAssets').modal('hide');
            },

        }
    })
</script>
@endpush

@push('pageModals')
<div class="modal right" tabindex="-1" role="dialog" aria-labelledby="asset" id="modalAssets">
    <div class="modal-dialog modal-md" role="document" v-if="assetsModalOpen">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="asset">Assets</h4>
                <button type="button" class="close" aria-label="Close" @click="closeAssetsModal"><span
                        aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="table-wrapper">
                    <div class="table-data">
                        <div class="table-responsive">
                            <table class="table" id="">
                                <thead>
                                    <tr>
                                        <th>Asset</th>
                                        <th>Type</th>
                                        <th class="text-right">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="asset in assets">
                                        <td><a :href=asset.asset_link target="_blank" class="d-block text-underlined">
                                                @{{ asset.title}}</a>
                                        </td>
                                        <td>
                                            <span v-if="asset.type=='assetfixed'">Fixed</span>
                                            <span v-if="asset.type=='assetvariable'">Variable</span>
                                        </td>
                                        <td class="act-btn text-center copyText"
                                            :data-clipboard-text="asset.asset_link">
                                            <a href="javascript:void(0)" title="copy">
                                                <i class="material-icons orange">file_copy</i>Copy</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endpush