bb_sign/app/Views/edit_shared_doc.php

<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<style>
.append-text-button {
   
   font-size: 13px;
   color: black; 
   background-color: transparent;
   border-radius: 4px; 
   text-align: center;
   cursor: pointer; 
   transition: background-color 0.3s ease, color 0.3s ease; 
}

.append-text-button:hover {
   font-weight: bold;
   color: black; 
   font-size: 15px;
}

</style>
<div class="content-page">
    <!-- Start Content-->
    <div class="container-fluid">
            
        <!-- start page title -->
        <div class="row">
        <div class="col-lg-2"></div>
            <div class="col-8">
                <div class="page-title-box page-title-box-alt">
                    <h4 class="page-title"> Edit Document</h4>
                    <div class="page-title-right">
                    <button type="reset" onclick="window.history.back()" class="btn btn-secondary waves-effect" style="color: #fff;background-color: #6c757d;border-color: #6c757d;">
                                Back 
                            </button>
                        <ol class="breadcrumb m-0">
                          
                        </ol>
                    </div>
                </div>
            </div>
          <div class="col-lg-2"></div>
        </div>     
        <!-- end page title -->  
 
 
        <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-lg-8">

            <div class="card">
                <div class="card-body">

                <form id="template-form">
                    <div class="form-row">
                       
                        <div class="form-group col-md-12">
                            <label for="messageto-input">Document Name<span class="text-danger">*</span> </label>
                            <input type="text" class="form-control"  id="document_name" value="<?=  $templateData->document_name; ?>" >
                            <input type="hidden" id="doc_id" value='<?=  $templateData->id; ?>'>
                        </div>
                       
                    </div>

                    <div class="form-group">
                        <label for="subject-input">Body Content</label>
                        <!-- basic summernote-->
                        <div id="summernote-basic"></div>
                    </div>

                </form>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" onClick="history.back()" data-dismiss="modal">Close</button>
                    <button type="button" id="savedata" class="btn btn-primary">Save </button>
                </div>
                    


                    
                </div>
            </div> <!-- end card -->
        </div>
        <div class="col-lg-2"></div>
        <!-- end col -->

    </div>


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

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


<!-- Modal Structure -->
<div class="modal fade" id="customModal" tabindex="-1" role="dialog" aria-labelledby="customModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="customModalLabel">Place Holder Variables</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">Client Name</div>
            <div class="col-sm-8 append-text-button">%name%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">PAN No</div>
            <div class="col-sm-8 append-text-button">%pan_no%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">GST</div>
            <div class="col-sm-8 append-text-button">%gst_no%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">Mobile No</div>
            <div class="col-sm-8 append-text-button">%mobile_no%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">Email</div>
            <div class="col-sm-8 append-text-button">%email%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">Address</div>
            <div class="col-sm-8 append-text-button">%address%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">Country</div>
            <div class="col-sm-8 append-text-button">%country%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">State</div>
            <div class="col-sm-8 append-text-button">%state%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">City</div>
            <div class="col-sm-8 append-text-button">%city%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">PIN</div>
            <div class="col-sm-8 append-text-button">%pin_code%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="YearsCustomModal" tabindex="-1" role="dialog" aria-labelledby="YearsCustomModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="YearsCustomModalLabel">Place Holder Variables</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">Current Date</div>
            <div class="col-sm-8 append-text-button">%CD%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">Calandar Year</div>
            <div class="col-sm-8 append-text-button">%CY%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">Financial Year</div>
            <div class="col-sm-8 append-text-button">%FY%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">Assessment Year</div>
            <div class="col-sm-8  append-text-button">%AY%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">Q1 Year</div>
            <div class="col-sm-8 append-text-button">%Q1%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">Q2 Year</div>
            <div class="col-sm-8 append-text-button">%Q2%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">Q3 Year</div>
            <div class="col-sm-8 append-text-button">%Q3%</div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-4 font-weight-bold">Q4 Year</div>
            <div class="col-sm-8 append-text-button">%Q4%</div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>


<input type="hidden" id="body_html" value='<?= isset($templateData) ? $templateData->body_html : '' ?>'>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->


<script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0/js/select2.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
<script>



$("#savedata").on("click", function() 
{
    var body_html = $('#summernote-basic').summernote('code');
    formData ={
    
      id : $('#doc_id').val(),
      document_name : $('#document_name').val(),
      body_html : body_html,
    };

 
   
    console.log(formData);
   
    $.ajax({
        url: '<?= base_url()."shared_document_edit"; ?>',
        type: 'POST',
        data: formData,
        json: true,
        success: function(response) {
          console.log(response.success);
        if(response.success){

            toastr.success('Data saved successfully ', 'Success');
             window.location.href = '<?= base_url()."shared_docs_list"; ?>';
          
        }else{
            toastr.warning('Something went wrong', 'Warning');
        }
            
        },
        error: function(xhr, status, error) {
            // Handle errors here
            console.error(xhr.responseText);
        }
    });

    
  
   
});

$(document).ready(function() {

   
   
    var lastCursorRange;
    $('#summernote-basic').summernote({
      height: 750, 
      toolbar: [
        // [groupName, [list of button]]
        ['style', ['style']],
        ['font', ['bold', 'italic', 'underline', 'clear' ]],
        ['fontname', ['fontname']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph' , 'height']],
        ['table', ['table']],
        ['insert', [ 'picture']],
        ['view', ['fullscreen', 'codeview', 'help']],
        ['mybutton', ['customButton','Years']] // Custom button group
      ],

      buttons: {
        customButton: function() {
          var ui = $.summernote.ui;
          // create button
          var button = ui.button({
            contents: 'Client Details', 
            tooltip: 'Client Details Place Holders',
            click: function() {
              saveCursorPosition();
              $('#customModal').modal('show');
            }
          });
          return button.render();   
        },
        Years: function() {
          var ui = $.summernote.ui;
          // create button
          var button = ui.button({
            contents: 'Date & Year', 
            tooltip: 'Date & Year Place Holders',
            click: function() {
              saveCursorPosition();
              $('#YearsCustomModal').modal('show');
            }
          });
          return button.render();   
        }
      }
    });

    setTimeout(() => 
    {
        $('#summernote-basic').summernote('code', $('#body_html').val());
      
    }, 500);


    // Save the cursor position
    function saveCursorPosition() {
            var selection = window.getSelection();
            if (selection.rangeCount > 0) {
                lastCursorRange = selection.getRangeAt(0);
                console.log('Cursor Range Saved:', lastCursorRange);
            }
        }

        // Handle text insertion from modals
        $(document).on('click', '.append-text-button', function() {
            var textToInsert = $(this).text();
            $('#customModal').modal('hide');
            $('#YearsCustomModal').modal('hide');
            $('#summernote-basic').summernote('focus');
            if (lastCursorRange) {
                var selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(lastCursorRange);
                document.execCommand('insertText', false, textToInsert);
                console.log('Inserted text:', textToInsert);
            } else {
                $('#summernote-basic').summernote('editor.insertText', textToInsert);
            }
        });



});


</script>