@extends('admin::layouts.content')

@section('page_title')
    {{--    {{ __('admin::app.cms.email-sms-template.index') }}--}}
    {{ __('Add/Edit Template') }}
@stop

@section('content')

    <div class="content">
        <form method="POST" action="{{ route('admin.cms.email-sms-template.add-edit',[@$data['id']]) }}"
              @submit.prevent="onSubmit">
            @method('PUT')
            <div class="page-header">
                <div class="page-title">
                    <h1>
                        <i class="icon angle-left-icon back-link"
                           onclick="history.length > 1 ? history.go(-1) : window.location = '{{ url('/admin/dashboard') }}';"></i>
                        {{--{{ __('admin::app.cms.email-sms-template.index') }}--}}
                        {{ __('Add/Edit Template') }}
                    </h1>
                </div>

                <div class="page-action">
                    <button type="submit" class="btn btn-lg btn-primary">
                        {{--                        {{ __('admin::app.cms.pages.create-btn-title') }}--}}
                        {{ __('Submit') }}
                    </button>
                </div>
            </div>

            <div class="page-content">

                <div class="form-container">
                    @csrf()

                    <div class="control-group" :class="[errors.has('title') ? 'has-error' : '']">
                        <label for="title" class="required">{{ __('Title') }}</label>

                        <input type="text" class="control" name="title" v-validate="'required'"
                               value="{{ (!empty(old('title'))) ? old('title') : @$data['title'] }}"
                               data-vv-as="&quot;{{ __('Title') }}&quot;">

                        <span class="control-error" v-if="errors.has('title')">@{{ errors.first('title') }}</span>
                    </div>

                    <div class="control-group" :class="[errors.has('subject') ? 'has-error' : '']">
                        <label for="title" class="required">{{ __('Subject') }}</label>

                        <input type="text" class="control" name="subject" v-validate="'required'"
                               value="{{ (!empty(old('subject'))) ? old('subject') : @$data['subject'] }}"
                               data-vv-as="&quot;{{ __('Subject') }}&quot;">

                        <span class="control-error" v-if="errors.has('subject')">@{{ errors.first('subject') }}</span>
                    </div>

                    <div class="control-group boolean">
                        <label for="is_active_sms" class="required">{{ __('Enable SMS?') }}</label>
                        <label class="switch">
                            <input type="checkbox" id="is_active_sms"
                                   name="is_active_sms"
                                   data-vv-as="Enable SMS"
                                    value="1" class="control">
                            <span class="slider round"></span>
                        </label>
                    </div>

                    <div class="control-group" :class="[errors.has('sms_template') ? 'has-error' : '']">
                        <label for="title" class="required">{{ __('SMS Template') }}</label>
                        <textarea style="height: 200px" v-validate="'required'" class="control" id="sms_template"
                                  name="sms_template"
                                  data-vv-as="&quot;{{ __('SMS Template') }}&quot;">{{ (!empty(old('sms_template'))) ? old('sms_template') : @$data['sms_template'] }}</textarea>
                        <span class="control-error" v-if="errors.has('sms_template')">@{{ errors.first('sms_template') }}</span>
                    </div>

                    <div class="control-group boolean">
                        <label for="is_active_email" class="required">{{ __('Enable Email?') }}</label>
                        <label class="switch">
                            <input type="checkbox" id="is_active_email"
                                   name="is_active_email"
                                   data-vv-as="Enable Email"
                                    value="1" class="control">
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <div class="control-group" :class="[errors.has('email_template') ? 'has-error' : '']">
                        <label for="title" class="required">{{ __('Email Template') }}</label>
                        <email-editor></email-editor>
                    </div>

                    <div class="control-group boolean">
                        <label for="is_active_whatsapp_notify" class="required">{{ __('Enable WhatsApp Notification?') }}</label>
                        <label class="switch">
                            <input type="checkbox" id="is_active_whatsapp_notify"
                                   name="is_active_whatsapp_notify"
                                   data-vv-as="Enable WhatsApp Notification"
                                    value="1" class="control">
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <div class="control-group" :class="[errors.has('whatsapp_template') ? 'has-error' : '']">
                        <label for="title" class="required">{{ __('WhatsApp Template') }}</label>
                        <textarea style="height: 200px" v-validate="'required'" class="control" id="whatsapp_template"
                                  name="whatsapp_template"
                                  data-vv-as="&quot;{{ __('WhatsApp Template') }}&quot;">{{ (!empty(old('whatsapp_template'))) ? old('whatsapp_template') : @$data['whatsapp_template'] }}</textarea>
                        <span class="control-error" v-if="errors.has('whatsapp_template')">@{{ errors.first('whatsapp_template') }}</span>
                    </div>
                </div>
            </div>
        </form>
    </div>
@stop

@push('scripts')
    <script src="{{ asset('vendor/webkul/admin/assets/js/tinyMCE/tinymce.min.js') }}"></script>

    <script type="text/x-template" id="email-editor-template">
        <div class="control-group" :class="[errors.has('email_template') ? 'has-error' : '']">
            <textarea v-validate="isRequired ? 'required' : ''" class="control" id="email_template"
                      name="email_template"
                      data-vv-as="&quot;{{ __('Email Template') }}&quot;">{{ (!empty(old('email_template'))) ? old('email_template') : @$data['email_template'] }}</textarea>
            <span class="control-error" v-if="errors.has('email_template')">@{{ errors.first('email_template') }}</span>
        </div>
    </script>

    <script>
        $(document).ready(function () {
            tinymce.init({
                selector: 'textarea#email_template',
                height: 400,
                width: "100%",
                plugins: 'image imagetools media wordcount save fullscreen code',
                toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent  | removeformat | code',
                image_advtab: true
            });
        });

        Vue.component('email-editor', {

            template: '#email-editor-template',

            inject: ['$validator'],

            data: function () {
                return {
                    isRequired: true,
                }
            },

            created: function () {
                var this_this = this;

                $(document).ready(function () {
                    $('#display_mode').on('change', function (e) {
                        if ($('#display_mode').val() != 'products_only') {
                            this_this.isRequired = true;
                        } else {
                            this_this.isRequired = false;
                        }
                    })

                    if ($('#display_mode').val() != 'products_only') {
                        this_this.isRequired = true;
                    } else {
                        this_this.isRequired = false;
                    }
                });
            }
        })
    </script>
@endpush