@extends('layout._default')

@section('body-con')
   
@section('title')
@endsection 
 <!--begin::Form-->
 <div class="card">
  <div class="card-body">
    <div class="modal-header" id="">
      <h2 class="fw-bold">Edit Email Template</h2>
      <a class="btn btn-icon btn-sm btn-active-icon-primary" href="{{ route('email-template.index') }}">
        {!! getIcon('cross', 'fs-1') !!}
      </a>
  </div>
 <form action="{{ route('email-template.update', $emailTemplate->id) }}" method="POST">
  @csrf
  @method("PUT")
  <!--begin::Scroll-->
  <div class="d-flex flex-column scroll-y px-5 px-lg-10" id="kt_modal_add_user_scroll" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_user_header" data-kt-scroll-wrappers="#kt_modal_add_user_scroll" data-kt-scroll-offset="300px">
        
      <div class="fv-row mb-2">
        <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" value="{{ $emailTemplate->description }}"/>

        @error('type')
        <span class="text-danger" id="edit_type_error"></span>
        @enderror
      </div>

      <div class="fv-row mb-2">
        <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="Description" value="{{$emailTemplate->subject}}"/>
        @error('subject')
        <span class="text-danger" id="edit_content_error"></span> 
        @enderror
      </div>

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

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

      <!--begin::Input group-->
      <div class="fv-row mb-4">
        <!--begin::Label-->
        <label class="required fw-semibold fs-6 mb-2">Body</label>
        <!--end::Label-->
        <!--begin::Input-->
        <textarea class="form-control form-control-solid mb-3 mb-lg-0" name="body" id="body" cols="30" rows="10">{{$emailTemplate->body}}</textarea>
        <!--end::Input-->
        @error('body')
        <span class="text-danger" id="edit_content_error"></span> 
        @enderror
      </div>
      <!--end::Input group-->
  </div>
  <!--end::Scroll-->
  <!--begin::Actions-->
  <div class="text-center pt-15">
      <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal" aria-label="Close">Discard</button>
      <button type="submit" class="btn btn-primary" id="edit-user-submit-btn">
          <span class="indicator-label">Update</span>
          {{-- <span class="indicator-progress" wire:loading wire:target="submit">
              Please wait...
              <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
          </span> --}}
      </button>
  </div>
  <!--end::Actions-->
</form>
</div>
</div>
<!--end::Form-->
@endsection

@push('scripts')
{{-- <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 = $('#editVariable');

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

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