How to cancel ticket from Service Portal with mandatory comments ServiceNow workingcode widget

Cancel button in Service Portal to cancel ticket with mandatory comment field.

Widget Name: Ticket Cancel Button

HTML:

<div class="panel b" ng-if="data.showWidget">
  <div class="panel-heading bg-primary">Actions</div>
  <div class="panel-body">
    <button type="button" class="btn btn-primary btn-block" ng-click="c.openModalResolve()" ng-if="data.showResolve">Rescheduled</button>
    <button type="button" class="btn btn-default btn-block" ng-click="c.openModalStatus()" ng-if="data.showStatus">Request Status</button>
    <button type="button" class="btn btn-danger btn-block" ng-click="c.openModalCancel()" ng-if="data.showCancel">Cancel</button>
    <button type="button" class="btn btn-default btn-block" ng-click="c.openModalReopen()" ng-if="data.showReopen">Reopen</button>
  </div>
</div>
 <script type="text/ng-template" id="modalTemplateResolve">
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">Provide a reason for the resolve</h4>
  </div>
      <div class="panel-body wrapper-xl">
      <form name="modalTemplateResolve" ng-submit="c.uiAction('resolve')">
        <div class="form-group">
          <textarea required sp-autosize="true" ng-required="true" ng-model="data.resolveComments" id="resolveComments" placeholder="Comments required" class="form-control ng-pristine ng-valid ng-scope ng-empty ng-touched" aria-invalid="false" style="overflow: hidden; word-wrap: break-word; resize: horizontal;"></textarea>
  </div>
        <input class="btn btn-primary" type="submit" />
  </form>
  </div>
  </div>
</script>
 <script type="text/ng-template" id="modalTemplateCancel">
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">Provide a reason for the cancel</h4>
  </div>
      <div class="panel-body wrapper-xl">
      <form name="modalTemplateResolve" ng-submit="c.uiAction('cancel')">
        <div class="form-group">
          <textarea required sp-autosize="true" ng-required="true" ng-model="data.cancelComments" id="cancelComments" placeholder="Comments required" class="form-control ng-pristine ng-valid ng-scope ng-empty ng-touched" aria-invalid="false" style="overflow: hidden; word-wrap: break-word; resize: horizontal;"></textarea>
  </div>
        <input class="btn btn-primary" type="submit" />
  </form>
  </div>
  </div>
</script>
 <script type="text/ng-template" id="modalTemplateStatus">
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">Provide any additional information</h4>
  </div>
      <div class="panel-body wrapper-xl">
      <form name="modalTemplateStatus" ng-submit="c.uiAction('status')">
        <div class="form-group">
          <textarea required sp-autosize="true" ng-required="true" ng-model="data.statusComments" id="statusComments" placeholder="Comments required" class="form-control ng-pristine ng-valid ng-scope ng-empty ng-touched" aria-invalid="false" style="overflow: hidden; word-wrap: break-word; resize: horizontal;"></textarea>
  </div>
        <input class="btn btn-primary" type="submit" />
  </form>
  </div>
  </div>
</script>
 <script type="text/ng-template" id="modalTemplateReopen">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">Rescheduled</h4>
  </div>
    <div class="panel-body wrapper-xl">
      <form name="modalTemplateReopen" ng-submit="c.uiAction('reopen')">
        <div class="form-group">
                 Window start
  <input type="datetime-local" required sp-autosize="true" ng-required="true" ng-model="data.statedate" id="reopenComments" placeholder="Start date required" class="form-control ng-pristine ng-valid ng-scope ng-empty ng-touched" aria-invalid="false" style="overflow: hidden; word-wrap: break-word; resize: horizontal;"></textarea>
    Window End
  <input type="datetime-local" required sp-autosize="true" ng-required="true" ng-model="data.enddate" id="reopenComments" placeholder="End Date required" class="form-control ng-pristine ng-valid ng-scope ng-empty ng-touched" aria-invalid="false" style="overflow: hidden; word-wrap: break-word; resize: horizontal;"></textarea>
    </div>
        <input class="btn btn-primary" type="submit" />
  </form>
  </div>
  </div>
</script>

Server Script:

(function() {
     // Get table & sys_id
    data.table = input.table || $sp.getParameter("table");
    data.sys_id = input.sys_id || $sp.getParameter("sys_id");
     // Valid GlideRecord
    gr = new GlideRecord(data.table);
    if (!gr.isValid())
        return;
     // Valid sys_id
    if (!gr.get(data.sys_id))
        return;
     if (data.table == 'wu_appointment') {
        data.showWidget = true;
      //  data.showResolve = true;
        data.showCancel = true;
        //   data.showStatus = true;
        //   data.showReopen = false;
    } else {
        data.showWidget = false;
        data.showResolve = false;
        data.showCancel = false;
        data.showStatus = false;
        data.showReopen = false;
    }
     //input
    if (input && input.action) {
        var action = input.action;
          if (data.table == 'wu_appointment') {
            if (action == 'cancel' && input.resolveComments != '') {
                //	 gr.setValue('incident_state', 6);
                gr.setValue('state', 7);
                gr.setValue('resolved_by', gs.getUserID());
                gr.setValue('close_code', 'Closed/Resolved by Caller');
                gr.setValue('close_notes', "Closed by caller with comment: " + input.cancelComments);
                //gr.work_notes = 'Closed by caller with comment: ' + input.resolveComments;
                gr.update();
            }
//             if (action == 'reopen') {
                //                 gr.setValue('window_start', new GlideDateTime(input.statedate));
//                 gr.setValue('window_end', new GlideDateTime(input.enddate));
 //                 gr.update();
//             }
        }
    }
})();

Client Controller:

function($uibModal, $scope, spUtil) {
 var c = this;
  $scope.$on('record.updated', function(name, data) {
  c.data.cancelComments = '';
  c.data.statusComments = '';
  c.data.resolveComments = '';
  c.data.reopenComments = '';
  spUtil.update($scope);
 })
  c.uiAction = function(action) {
  c.data.action = action;
  c.data.cancelComments=c.data.cancelComments
// 		if(action=="reopen")
// 			{
// 		c.data.startdate=c.data.statedate
// 				c.data.enddate=c.data.enddate
     // 			}
  c.server.update().then(function() {
   c.data.action = undefined;
  })
  c.modalInstance.close();
 }
 c.openModalResolve = function() {
  c.modalInstance = $uibModal.open({
   templateUrl: 'modalTemplateReopen',
   scope: $scope
  });
 }
 c.openModalCancel = function() {
  c.modalInstance = $uibModal.open({
   templateUrl: 'modalTemplateCancel',
   scope: $scope
  });
 }
 c.openModalStatus = function() {
  c.modalInstance = $uibModal.open({
   templateUrl: 'modalTemplateStatus',
   scope: $scope
  });
 }
 c.openModalReopen = function() {
  c.modalInstance = $uibModal.open({
   templateUrl: 'modalTemplateReopen',
   scope: $scope
  });
 }
 c.closeModal = function() {
  c.modalInstance.close();
 }
}