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

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

@section('email-templates-content')
    <form role="form" id="emailTemplateFrom" 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-8">
                <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 }}" {{ old('email_type_id', optional($emailTemplate)->email_type_id) == $type->id ? 'selected' : '' }} data-placeholders="{{ $type->placeholders }}">{{ $type->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="rich-text-editor form-control @error('header') is-invalid @enderror"
                                      name="header" rows="15"
                            >{{ old('header', optional($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', optional($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="rich-text-editor form-control @error('footer') is-invalid @enderror"
                                      name="footer" rows="5"
                            >{{ old('footer', optional($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('emailTemplateFrom')">
                                    <i class="fas fa-redo"></i>
                                    <span>Reset</span>
                                </button>

                                <button type="submit" class="btn-shadow btn btn-primary">
                                    @if($emailTemplate)
                                        <i class="fas fa-arrow-circle-up"></i>
                                        <span>Update</span>
                                    @else
                                        <i class="fas fa-plus-circle"></i>
                                        <span>Create</span>
                                    @endisset
                                </button>
                            </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({});

            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>,<span class="text-danger">') + '</span> in the email body area to locate the dynamic data.';

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

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