@include('common.header')
<section class="content">
   <div class="col-lg-12" id="load-overlay" name="load-overlay" style="display:none;">
      <div id="loader" ></div>
      <div id="overlay"></div>
   </div>
   <div class="row">
   <div>
      <div class="col-xs-12">
         <div class="box">
            <div class="box-header">
               <h3 class="box-title">SMS Template List</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
               <table class="table table-bordered table-striped" id="data-table">
                  <thead>
                     <tr>
                        <th>Activity Code</th>
                        <th>Message</th>
                        <th>Action</th>
                     </tr>
                  </thead>
                  <tbody>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
   <!-- Modal form to add a post -->
   <div>
      <div id="editModal" class="modal fade" role="dialog">
         <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">×</button>
                  <h4 class="modal-title"><b>Edit</b> Message Template</h4>
               </div>
               <div class="modal-body">
                  <div>
                     <div class="alert alert-warning alert-dismissible" id="add-invalid-warning" style="display:none;">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        <h4><i class="icon fa fa-warning"></i> Alert!</h4>
                        <p id="add-invalid-warning-message"></p>
                     </div>
                     <form class="form-horizontal" role="form">
                        <div class="form-group">
                           <label class="control-label col-sm-4" for="title">*Activity Code:</label>
                           <div class="col-sm-8">
                              <input type="text" class="form-control" id="event-edit" disabled>
                           </div>
                        </div>
                        <div class="form-group">
                           <label class="control-label col-sm-4" for="title">Template Parameters</label>
                           <div class="col-sm-8">
                              <button type="button" class="btn bg-maroon margin btn-xs waybillField" data-value="consignee_name">Consignee Name</button>
                              <button type="button" class="btn bg-maroon margin btn-xs waybillField" data-value="cn_no">Waybill CN</button>
                              <button type="button" class="btn bg-maroon margin btn-xs waybillField" data-value="last_shipping_activity_date">Activity Date</button>
                           </div>
                        </div>
                        <div class="form-group">
                           <label class="control-label col-sm-4" for="title">*Template:</label>
                           <div class="col-sm-8">
                              <textarea type="text" rows="8" class="form-control" id="template-edit"></textarea>
                           </div>
                        </div>
                     </form>
                     <div class="modal-footer">
                        <button type="button" class="btn btn-success save" >
                        <span id="" class='glyphicon glyphicon-check'></span> SAVE
                        </button>
                        <button type="button" class="btn btn-warning" data-dismiss="modal">
                        <span class='glyphicon glyphicon-remove'></span> Close
                        </button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
@include('common.footer')
<script> 
   function reInitializeTable()
   {
     $(function () {
       $('#data-table').DataTable()
     })
   }
   
   $( document ).ready(function() 
   {
       template_list_get();
   });
   
   $('.select2').select2();
   
   function insertAtCaret(text) {
     const textarea = document.querySelector('#template-edit')
     textarea.setRangeText(
       text,
       textarea.selectionStart,
       textarea.selectionEnd,
       'end'
     )
   }
   
   $(document).on('click', '.edit-btn', function() {
       
       $('.modal-title').text('Edit');
       $('#event-edit').val($(this).data('event'));
       $('#template-edit').val($(this).data('template'));
       $('#editModal').modal('show');
   });
   
   
   //model add click 
   $('.modal-footer').on('click', '.save', function() {
          update_template()
   });
   
   $(document).on('click', '.waybillField', function() {
               var text  = "{"+"{"+$(this).data('value')+"}"+"}"
               insertAtCaret(text)
   });
   
   async function update_template()
       {
           var dataArray = {};
           dataArray['template']   = $("#template-edit").val();
           dataArray['event']      = $("#event-edit").val();
           dataArray['messenger']  = "sms"
           try {
               var stationMessengerServiceEndPoint =  messageApiPath+"/twirp/bbbmsg.v1.MessageTemplateService/Update";
               const result = await syncAjaxCall(dataArray , stationMessengerServiceEndPoint, "POST",bearerToken)
               $('#editModal').modal('hide');
               template_list_get()
           } catch (error) {
             
           }
        
           
       }
   
       async function template_list_get()
       {
           $("#load-overlay").show();
           var setting = {};
               setting['pageLimit']          = 100;
               setting['includePageSize']    = true;
               setting['pageOffset']         = 0;
           var dataArray                     = {};
               dataArray['page']             = setting;
   
           var stationMessengerServiceEndPoint =  messageApiPath+"/twirp/bbbmsg.v1.MessageTemplateService/Get";
           const result = await syncAjaxCall(dataArray , stationMessengerServiceEndPoint, "POST",bearerToken)
           tableData = result.results
           $("#data-table .template-data").remove();
           for(var key in tableData)
           {
               $('#data-table').append("<tr class='item"+tableData[key].warehouseCode+" template-data'>"+
                                                                   "<td>"+tableData[key].event+"</td>"+
                                                                   "<td>"+tableData[key].template+"</td>"+
                                                                   "<td><button type='button' class='edit-btn btn btn-warning' "+
                                                                   " data-event='"+tableData[key].event+"'"+
                                                                   " data-template='"+tableData[key].template+"')'><i class='fa fa-edit'></i></button></td>"+
                                                                   "</tr>");
           }
           reInitializeTable()
           $("#load-overlay").hide();
   
       }
   
   
   
       function add_model_show_warning($msg)
       {
                       $("#add-invalid-warning-message").html($msg);
                       $("#add-invalid-warning").show();
                       $("#add-invalid-warning").delay(3000).hide(0, function() {});
       }
   
       function edit_model_show_warning($msg)
       {
                       $("#edit-invalid-warning-message").html($msg);
                       $("#edit-invalid-warning").show();
                       $("#edit-invalid-warning").delay(3000).hide(0, function() {});
       }
   
</script>