@extends('backend.settings.email-templates.layout')

@section('title','Email Template')

@section('email-templates-content')
    <form role="form" id="emailTemplateForm" method="POST"
          action="{{ $emailTemplate ? route('app.settings.email-templates.update',$emailTemplate->id) : route('app.settings.email-templates.store') }}"
          enctype="multipart/form-data">
        @csrf
        @if ($emailTemplate)
            @method('PUT')
        @endif

        <div class="row">
            <div class="col-md-12">
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h5 class="card-title">Email Template Info</h5>

                        <x-forms.select label="Email Type"
                                        name="email_type_id"
                                        field-attributes="required autofocus">
                            <option value="">Select Email Type</option>
                            @foreach($emailTypes as $type)
                                <option value="{{ $type->id }}" data-placeholders="{{ $type->placeholders }}">{{ $type->name }}</option>
                            @endforeach
                        </x-forms.select>

                        <x-forms.select label="Site"
                                        name="template"
                                        field-attributes="required autofocus">
                            <option value="">General</option>
                            @foreach(division_list() as $template)
                                <option value="{{ $template['division'] }}" @if($template['division'] === $emailTemplate?->template) selected="selected" @endif >{{ $template['name'] }}</option>
                            @endforeach
                        </x-forms.select>

                        <p id="placeholder-reminder"></p>

                        <x-forms.textbox label="CC"
                                         name="cc"
                                         value="{{ old('cc', optional($emailTemplate)->cc) }}"
                                         description="Please use comma to separate the multiple email addresses"
                        >
                        </x-forms.textbox>


                        <x-forms.textbox label="BCC"
                                         name="bcc"
                                         value="{{ old('bcc', optional($emailTemplate)->bcc)  }}"
                        >
                        </x-forms.textbox>

                        <x-forms.textbox label="Subject"
                                         name="subject"
                                         value="{{ old('subject', optional($emailTemplate)->subject) }}"
                                         field-attributes="required autofocus">
                        </x-forms.textbox>

                        <div class="form-group mt-3">
                            <label class="form-label" for="header">Header</label>
                            <textarea id="header"
                                      class="header-editor form-control @error('header') is-invalid @enderror"
                                      name="header" rows="15"
                            >{{ old('header', $emailTemplate?->header) }}</textarea>

                            @error('header')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="form-group mt-3">
                            <label class="form-label" for="body">Body</label>
                            <textarea id="body"
                                      class="rich-text-editor form-control @error('body') is-invalid @enderror"
                                      name="body" rows="15"
                            >{{ old('body', $emailTemplate?->body) }}</textarea>

                            @error('body')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>

                        <div class="form-group mt-3">
                            <label class="form-label" for="footer">Footer</label>
                            <textarea id="footer"
                                      class="footer-editor form-control @error('footer') is-invalid @enderror"
                                      name="footer" rows="5"
                            >{{ old('footer', $emailTemplate?->footer) }}</textarea>
                            @error('footer')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        @unless(request()->routeIs('app.settings.email-templates.show'))
                            <div class="form-group mt-3">
                                <button type="button" class="btn-shadow btn btn-danger" onClick="AppHelper.resetForm('emailTemplateForm')">
                                    <i class="fas fa-redo"></i>
                                    <span>Reset</span>
                                </button>
                                @isset($emailTemplate)
                                    <button type="submit" class="btn-shadow btn btn-primary">
                                        <i class="fas fa-arrow-circle-up"></i>
                                        <span>Update</span>
                                    </button>
                                    <a class="btn btn-info" target="_blank" href="{{ route('app.settings.email-templates.preview', $emailTemplate->id) }}">Preview</a>
                                @else
                                    <button type="submit" class="btn-shadow btn btn-primary">
                                        <i class="fas fa-plus-circle"></i>
                                        <span>Create</span>
                                    </button>
                                @endisset
                            </div>
                        @endunless
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
        </div>
    </form>
@endsection

@push('js')
    <script src="{{ url(asset('tinymce/js/tinymce.min.js')) }}" referrerpolicy="origin"></script>

    <script>
        $(document).ready(function() {
            AppTinyMCE.init({
                height: '600',
                table_class_list:[],
                table_cell_class_list: [],
                content_style: '',
                formats: {},
                style_formats: [],
            });
            AppTinyMCE.init({
                selector: '.header-editor',
                height: '300',
                table_class_list:[],
                table_cell_class_list: [],
                content_style: '',
                formats: {},
                style_formats: [],
            });
            AppTinyMCE.init({
                selector: '.footer-editor',
                height: '300',
                table_class_list:[],
                table_cell_class_list: [],
                content_style: '',
                formats: {},
                style_formats: [],
            });

            let emailTypeBox = $('#email_type_id');

            emailTypeBox.change(function(){
                let optionSelected = $("option:selected", this);
                let placeholders = optionSelected.data('placeholders');
                let placeholderReminder = '';
                if(placeholders.length) {
                    placeholderReminder = 'Please use the placeholder(s) <span class="text-danger">' + placeholders.join(', ') + '</span> in the email body area to locate the dynamic data.';

                }
                $('#placeholder-reminder').html(placeholderReminder);
            });

            emailTypeBox.val("{{ old('email_type_id', optional($emailTemplate)->email_type_id) }}").change();

            /*let optionSelected = selectBox.find('option:selected');
            if(optionSelected.length) {
                selectBox.css('color', optionSelected.data('background') || '#ffffff');
            }*/
        });
    </script>
@endpush