<style>
  #hide {
    display: none;
  }
</style>

<script src="https://cdn.ckeditor.com/ckeditor5/38.1.1/classic/ckeditor.js"></script>



<div class="container-fluid">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title fw-semibold mb-4">Privacy Policy</h5>
      <!-- <div class="card">
                <div class="card-body row"> -->

      <div style="display: flex; justify-content: space-between; align-items: center;">
        <!-- <h2 class="mb-4">Privacy Policy</h2> -->
        <button type="button" class="btn policyEdit btn-primary">Edit <i class="fas fa-edit"></i> </button>
      </div>


      <div class="row">
        <div class="col-12">
          <!-- <div class="card my-4"> -->

          <!-- <div class="card-body px-0 pb-2"> -->

          <div class="container">
            <div class="row">
              <div class="d-flex justify-content-end mb-3">
                <!-- <h3>Privacy Policy</h3> -->
                <!-- <button type="button" class="btn  btn-rounded btn-icon policyEdit bg-primary text-light"><i class="ti ti-pencil"></i></button> -->

                <div class="btn1" id="hide">
                  <button type="button" class="btn bg-success text-light btn-rounded btn-icon" onclick="policySubmit()"><i class="ti ti-check"></i></button>
                  <button type="button" class="btn bg-danger text-light btn-rounded btn-icon" id="cancelBtn1"><i class="ti ti-cut"></i></button>
                </div>
              </div>
            </div>

            <!-- <div class="row justify-content-center mb-3"> -->
            <div class="col-md-10">

              <form>
                <div class="para">
                  <?= $details['content']; ?>
                </div>


                <div class="form-group formDiv" id="hide">
                  <textarea class="form-control policyInput editor" rows="20">
                                	<?= $details['content']; ?>
	                            </textarea>
                </div>
              </form>
            </div>
            <!-- </div> -->
          </div>


          <!-- </div>
                            </div> -->
        </div>
      </div>
      <!-- </div>
            </div> -->
    </div>
  </div>

  <script>
    ClassicEditor
      .create(document.querySelector('.editor'))
      .then(newEditor => {
        editor = newEditor;
      })
      .catch(error => {
        console.error(error);
      });


    var para = document.querySelector('.para');
    var policyEdit = document.querySelector('.policyEdit');
    var formDiv = document.querySelector('.formDiv');
    var policyInput = document.querySelector('.policyInput');

    var btn1 = document.querySelector('.btn1');

    policyEdit.addEventListener('click', function() {
      // console.log(para);
      policyInput.innerHTML = para;
      policyEdit.setAttribute('id', 'hide');
      para.setAttribute('id', 'hide');
      btn1.removeAttribute('id');
      formDiv.removeAttribute('id');
    });




    function policySubmit() {
      const editorData = editor.getData();

      if (editorData == "") {
        error("Policy Text can't be empty");
        policyEdit.removeAttribute('id');
        para.removeAttribute('id');
        btn1.setAttribute('id', 'hide');
        formDiv.setAttribute('id', 'hide');
        setTimeout(function() {
          location.reload()
        }, 1000)

      } else {
        var fd = new FormData();
        fd.append('content', editorData);

        $.ajax({
          url: "<?= site_url(); ?>/admin-edit-privacy-policy",
          method: 'post',
          dataType: 'json',
          data: fd,
          processData: false,
          contentType: false,
          success: function(result) {
            // console.log(result.details);
            if (result.status == '1') {
              policyEdit.removeAttribute('id');
              btn1.setAttribute('id', 'hide');
              formDiv.setAttribute('id', 'hide');
              para.removeAttribute('id');
              // para.innerHTML = result.editorData;
              success(result.message);
              // setTimeout(function() {
              // }, 1000)
              location.reload()
            } else {
              error(result.message);
            }
          }
        });
      }
    }

    document.querySelector('#cancelBtn1').addEventListener('click', function() {

      para.removeAttribute('id');
      policyEdit.removeAttribute('id');
      btn1.setAttribute('id', 'hide');
      formDiv.setAttribute('id', 'hide');
    });
  </script>