@extends('layouts.backend.app')

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

@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="pe-7s-users icon-gradient bg-mean-fruit">
                    </i>
                </div>
                <div>{{ __((isset($emailTemplate) ? 'Edit' : 'Create New') . ' Email Template') }}</div>
            </div>
            <div class="page-title-actions">
                <div class="d-inline-block dropdown">
                    <a href="{{ route('app.email-templates.all') }}" class="btn-shadow btn btn-danger">
                        <span class="btn-icon-wrapper pr-2 opacity-7">
                            <i class="fas fa-arrow-circle-left fa-w-20"></i>
                        </span>
                        {{ __('Back to List') }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <!-- form start -->
            <form role="form" id="emailTemplateFrom" method="POST"
                  action="{{ $emailTemplate ? route('app.email-templates.update',$emailTemplate->id) : route('app.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 }}" 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.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>
        </div>
    </div>
@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> 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) }}")

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