@extends('layout._default')

@section('body-con')

@section('title')
@endsection 
    <div class="card">
        <div class="card-body">
            <div class="modal-content">
                <div class="modal-header" id="">
                    <h2 class="fw-bold">Add Email Template</h2>
                    {{-- <div class="btn btn-icon btn-sm btn-active-icon-primary" href="{{ route('email-template.index') }}">
                        {!! getIcon('cross','fs-1') !!}
                    </div> --}}
                    <a class="btn btn-icon btn-sm btn-active-icon-primary" href="{{ route('email-template.index') }}">
                      {!! getIcon('cross', 'fs-1') !!}
                    </a>
                </div>
                <div class="modal-body px-5 my-7">
                    <form action="{{ route('email-template.store') }}" method="POST">
                        @csrf
                        <div class="d-flex flex-column scroll-y px-5 px-lg-10" id="kt_modal_add_page_scroll" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_page_header" data-kt-scroll-wrappers="#kt_modal_add_page_scroll" data-kt-scroll-offset="300px">
                            <div class="fv-row mb-3">
                                <label class="required fw-semibold fs-6 mb-2">Description</label>
                                <input type="text" id="description" name="description" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Description"/>
                                @error('description')
                                  <span class="text-danger" id="type_error"></span>
                                @enderror
                            </div>

                            <div class="fv-row mb-3">
                                <label class="required fw-semibold fs-6 mb-2">Subject</label>
                                <input type="text" id="subject" name="subject" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Subject"/>
                                @error('subject')
                                  <span class="text-danger" id="content_error"></span> 
                                @enderror
                            </div>

                            <div class="fv-row mb-3">
                              <label class="required fw-semibold fs-6 mb-2">Type</label>
                              <input type="text" id="type" name="type" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Type"/>
                              @error('type')
                              <span class="text-danger" id="type_error"></span>
                               @enderror
                            </div>

                          <div class="fv-row mb-3">
                            <label class="required fw-semibold fs-6 mb-2">Variable</label>
                            <select class="form-control" id="variableSelect" name="variable">
                              <option>Select Variable</option>
                              @foreach ($variables as $value)
                                <option value="{{ $value->variable }}" {{ ( $value->variable == $variables) ? 'selected' : '' }}>
                                  {{ $value->variable }}
                                </option>
                              @endforeach
                              </select>
                            @error('variable')
                            <span class="text-danger" id="type_error"></span>
                            @enderror
                          </div>

                          <div class="fv-row mb-3">
                            <label class="required fw-semibold fs-6 mb-2">Body</label>
                            <textarea class="form-control form-control-solid mb-3 mb-lg-0" name="body" id="body" cols="30" rows="10"></textarea>
                            @error('body')
                            <span class="text-danger" id="type_error"></span>
                            @enderror
                          </div>
                        </div>
                        <div class="text-center pt-15">
                            <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal" aria-label="Close" wire:loading.attr="disabled">Discard</button>
                            <button type="submit" class="btn btn-primary" id="add-user-submit-btn">
                              <span class="indicator-label">Submit</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
{{-- <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script> --}}
{{-- <script src="https://cdn.tiny.cloud/1/5x7kaozniop9l59csuagi9uf18ex55bowrcrn188vsm8or9f/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script> --}}
<script src="https://cdn.tiny.cloud/1/{{env("TINYMCE_KEY")}}/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
  tinymce.init({
      selector: '#body',
      plugins: 'link image code',
      toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
  });

  $(document).ready(function() {
    var $variableSelect = $('#variableSelect');

    $variableSelect.on('change', function() {
      var selectedVariable = $(this).val();
      var formattedVariable = `%${selectedVariable}%`;

      tinymce.get('body').execCommand('mceInsertContent', false, formattedVariable);
    });
  });
</script>
@endpush