<admin-page-header [title]="'Ticket Setting'"></admin-page-header>

<!-- Ticket Settings-->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card overflow-hidden">
    <div class="card-header border-0">
      <h4 class="card-title">{{'Ticket Setting' | translate | titlecase}}</h4>
    </div>
    <form #FormData="ngForm" (ngSubmit)="TicketSetting(FormData, 'ticketSetting')">
      <div class="card-body">
        <div class="row">

          <!---Custom TICKET ID--->
          <div class="border-bottom">
            <div class="col-sm-12 col-md-12 ">
              <div class="form-group mt-2 ms-7 ">
                <div class="pb-2">
                  <label class="form-label pb-0 mb-0"> {{'Custom Ticket Id' | translate | titlecase}} <span class="text-red">*</span></label>
                  <small class="text-muted "><i>{{'Simply customise your ticket ID. For example, SPT-1 is the ticket id. You can only customise the first letters of the ticket ID of your choice. It displays SPT-1 for the registered user and SPTG-1 for the guest user. By default, the letter "G" represents the guest user.' | translate | titlecase}}</i></small>
                </div>
                <input #customerticketId="ngModel" [class.is-invalid]="customerticketId.invalid && customerticketId.touched" required type="text" class="form-control w-20 w-lg-max-30 ms-2 " name="ticketid"
                  [ngModel]="responce?.setting?.CUSTOMER_TICKETID" [value]="responce?.setting?.CUSTOMER_TICKETID">
                @if ((customerticketId.invalid && customerticketId.touched) || customerticketId.dirty) {
                  <div>
                    @if (customerticketId.errors?.['required']) {
                      <small class="text-danger">{{'Custom Ticket Id is required' | translate | titlecase}}</small>
                    }
                  </div>
                }

              </div>
            </div>
          </div>
          <!---  End Custom TICKET ID--->

          <!---TICKET Character Limit--->
          <div class="border-bottom">
            <div class="col-sm-12 col-md-12 ">
              <div class="form-group mt-2 ms-7 ">
                <div class="pb-2">
                  <label class="form-label pb-0 mb-0"> {{'Ticket Title Character Limit' | translate | titlecase}}<span class="text-red">*</span></label>
                  <small class="text-muted "><i>{{'Basically, this setting is used for the limit of ticket titles.Which means the ticket`s title allows the maximum character entered value.' |
                  translate}}</i></small>
                </div>
                <input min="1" #tickettitlelimit="ngModel" [class.is-invalid]="tickettitlelimit.invalid && tickettitlelimit.touched" required type="number" class="form-control w-20 w-lg-max-30 ms-2 " name="ticketcharacter"
                  [ngModel]="responce?.setting?.TICKET_CHARACTER" [value]="responce?.setting?.TICKET_CHARACTER">
                @if ((tickettitlelimit.invalid && tickettitlelimit.touched) || tickettitlelimit.dirty) {
                  <div>
                    @if (tickettitlelimit.errors?.['required']) {
                      <small class="text-danger">{{'Ticket Title Character Limit is required' | translate | titlecase}}</small>
                    }
                  </div>
                }

              </div>
            </div>
          </div>
          <!---  End TICKET Character Limit--->

          <!--- New Customers from creating tickets continously--->
          <div class="border-bottom">
            <div class="col-sm-12 col-md-12">
              <div class="form-group ">
                <div class="switch_section">
                  <div class="switch-toggle d-flex mt-4">
                    <span class="onoffswitch2">
                      <input type="checkbox" id="restrictionofcreating" name="RESTRICT_TO_CREATE_TICKET" [ngModel]="responce?.setting?.RESTRICT_TO_CREATE_TICKET == 'on' ? true : false"
                        [value]="responce?.setting?.RESTRICT_TO_CREATE_TICKET == 'on' ? true : false"
                        [checked]="responce?.setting?.RESTRICT_TO_CREATE_TICKET == 'on' ? true : false" class=" toggle-class onoffswitch2-checkbox" >
                      <label for="restrictionofcreating" class="toggle-class onoffswitch2-label"></label>
                    </span>
                    <div class="ps-3">
                      <label class="form-label">{{'Restrict Customers from creating tickets continously' | translate | titlecase}}</label>
                      <small class="text-muted ">
                        <i>({{'If you enable this ticket setting, customers cannot create multiple tickets at a time. Customers will be restricted to the value specified in "Maximum Number Of Tickets Allowed" untill the given timeframe "In Hours"' | translate | titlecase}})</i>
                      </small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="">
              <div class="col-sm-12 col-md-12">
                <div class="form-group d-flex d-md-max-block ">
                  <input type="number" id="maximumallowtickets" [ngModel]="responce?.setting?.MAXIMUM_ALLOW_TICKETS" [value]="responce?.setting?.MAXIMUM_ALLOW_TICKETS" [min]="1"
                    [maxlength]="2" class="form-control wd-5 w-lg-max-30 ms-7 ps-3  " name="MAXIMUM_ALLOW_TICKETS" autocomplete="off">
                  <label for="maximumallowtickets" class="form-label mt-2 ms-2 text-wrap">{{'Maximum Number Of Tickets Allowed' | translate | titlecase}}</label>
                </div>
              </div>
              <div class="col-sm-12 col-md-12">
                <div class="form-group d-flex d-md-max-block ">
                  <input type="number" id="maximumallowhours" [ngModel]="responce?.setting?.MAXIMUM_ALLOW_HOURS" [value]="responce?.setting?.MAXIMUM_ALLOW_HOURS" [min]="1" [maxlength]="2"
                    class="form-control wd-5 w-lg-max-30 ms-7 ps-3 " name="MAXIMUM_ALLOW_HOURS" autocomplete="off">
                  <label for="maximumallowhours" class="form-label mt-2 ms-2">{{'In Hours' | translate | titlecase}}</label>
                </div>
              </div>
            </div>
          </div>

          <!--- end Customers from creating tickets continously--->

          <!--- Restrict Customer From Replying To Ticket Continously --->

          <div class="border-bottom">
            <div class="col-sm-12 col-md-12">
              <div class="form-group ">
                <div class="switch_section">
                  <div class="switch-toggle d-flex mt-4">
                    <span class="onoffswitch2">
                      <input type="checkbox" id="restricttoreply" name="RESTRICT_TO_REPLY_TICKET" [ngModel]="responce?.setting?.RESTRICT_TO_REPLY_TICKET == 'on' ? true : false"
                        [value]="responce?.setting?.RESTRICT_TO_REPLY_TICKET == 'on' ? true : false" [checked]="responce?.setting?.RESTRICT_TO_REPLY_TICKET == 'on' ? true : false"
                        class=" toggle-class onoffswitch2-checkbox" >
                      <label for="restricttoreply" class="toggle-class onoffswitch2-label"></label>
                    </span>
                    <div class="ps-3">
                      <label class="form-label">{{'Restrict Customer From Replying To Ticket Continously' | translate | titlecase}}</label>
                      <small class="text-muted ">
                        <i>({{'If you enable this ticket setting, customers can not "Reply" their tickets within the mentioned hours and tickets in the input fields as below.' |
                        translate}})</i></small>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
              <div class="col-sm-12 col-md-12">
                <div class="form-group d-flex d-md-max-block ">
                  <input type="number" id="maximumallowreplies" [maxlength]="2" class="form-control wd-5 w-lg-max-30 ms-7 ps-3  " name="MAXIMUM_ALLOW_REPLIES" value="1" autocomplete="off" [min]="1"
                    [ngModel]="responce?.setting?.MAXIMUM_ALLOW_REPLIES" [value]="responce?.setting?.MAXIMUM_ALLOW_REPLIES">
                  <label for="maximumallowreplies" class="form-label mt-2 ms-2">{{'Maximum Allow Tickets' | translate | titlecase}}</label>
                </div>

              </div>
              <div class="col-sm-12 col-md-12">
                <div class="form-group d-flex d-md-max-block ">
                  <input type="number" id="repliesallowhours" [maxlength]="2" class="form-control wd-5 w-lg-max-30 ms-7 ps-3 " name="REPLY_ALLOW_IN_HOURS" [min]="1"
                    [ngModel]="responce?.setting?.REPLY_ALLOW_IN_HOURS" [value]="responce?.setting?.REPLY_ALLOW_IN_HOURS" autocomplete="off">
                  <label for="repliesallowhours" class="form-label mt-2 ms-2">{{'Reply Allow In Hours' | translate | titlecase}}</label>
                </div>

              </div>
            </div>

            <!--- end Customers from creating tickets continously--->

            <div class="border-bottom">
              <div class="col-sm-12 col-md-12">
                <div class="form-group ">
                  <div class="switch_section">
                    <div class="switch-toggle d-flex mt-4">
                      <span class="onoffswitch2">
                        <input type="checkbox" id="responsetime" name="AUTO_RESPONSETIME_TICKET" [ngModel]="responce?.setting?.AUTO_RESPONSETIME_TICKET == 'yes' ? true : false"
                          [value]="responce?.setting?.AUTO_RESPONSETIME_TICKET == 'yes' ? true : false"
                          [checked]="responce?.setting?.AUTO_RESPONSETIME_TICKET == 'yes' ? true : false" class=" toggle-class onoffswitch2-checkbox">

                        <label for="responsetime" class="toggle-class onoffswitch2-label"></label>
                      </span>
                      <div class="ps-3">
                        <label class="form-label">{{'Ticket Auto responce Time Enable' | translate | titlecase}}</label>
                        <small class="text-muted ">
                          <i>({{'This setting is used to change the ticket status to "Waiting for responce" when a customer doesn’t reply to the ticket within the mentioned hours in the input field, and an email will also be sent to the customer. If you disable this ticket setting, then it won’t change the ticket status.' | translate | titlecase}})</i></small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-12 col-md-12">
                  <div class="form-group d-flex d-md-max-block">
                    <input type="number" [maxlength]="2" class="form-control wd-5 w-lg-max-30 ms-5" name="autoresponsetickettime" [ngModel]="responce?.setting?.AUTO_RESPONSETIME_TICKET_TIME" [min]="1"
                      [value]="responce?.setting?.AUTO_RESPONSETIME_TICKET_TIME">
                    <label class="form-label mt-2 ms-2 text-wrap">{{'Ticket Auto responce time in Hours' | translate | titlecase}}</label>
                  </div>

                </div>
              </div>
              <!--- END AUTO responce TICKET--->

              <!---AUTO CLOSE TICKET--->
              <div class="border-bottom">
                <div class="col-sm-12 col-md-12">
                  <div class="form-group">
                    <div class="switch_section">
                      <div class="switch-toggle d-flex mt-4">
                        <span class="onoffswitch2">
                          <input type="checkbox" id="myonoffswitch1" name="AUTO_CLOSE_TICKET" [ngModel]="responce?.setting?.AUTO_CLOSE_TICKET == 'yes' ? true : false"
                            [value]="responce?.setting?.AUTO_CLOSE_TICKET == 'yes' ? true : false" class=" toggle-class onoffswitch2-checkbox"
                            [checked]="responce?.setting?.AUTO_CLOSE_TICKET == 'yes' ? true : false">
                          <label for="myonoffswitch1" class="toggle-class onoffswitch2-label"></label>
                        </span>
                        <div class="ps-3">
                          <label class="form-label">{{'Auto Close Ticket Enable/Disable' | translate | titlecase}}</label>
                          <small class="text-muted ">
                            <i>{{'If you disable this ticket setting, the inactive ticket won’t be closed automatically. Users will need to close the ticket manually. If it is enabled, the inactive ticket will close automatically after the completion of the days that are mentioned in the input field below.' | translate | titlecase}}</i></small>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="col-sm-12 col-md-12">
                    <div class="form-group d-flex d-md-max-block ">
                      <input type="number" [maxlength]="2" class="form-control wd-5 w-lg-max-30 ms-7" name="autoclosetickettime" [ngModel]="responce?.setting?.AUTO_CLOSE_TICKET_TIME" [min]="1"
                        [value]="responce?.setting?.AUTO_CLOSE_TICKET_TIME">
                      <label class="form-label  mt-2 ms-2">{{'Auto Close Days' | translate | titlecase}}</label>
                    </div>
                  </div>
                </div>
                <!--- END AUTO CLOSE TICKET--->

                <!---RE-OPEN TICKET--->
                <div class="border-bottom">
                  <div class="col-sm-12 col-md-12">
                    <div class="form-group ">
                      <div class="switch_section">
                        <div class="switch-toggle d-flex mt-4">
                          <span class="onoffswitch2">
                            <input type="checkbox" id="myonoffswitch18" name="USER_REOPEN_ISSUE" [ngModel]="responce?.setting?.USER_REOPEN_ISSUE == 'yes' ? true : false"
                              [value]="responce?.setting?.USER_REOPEN_ISSUE == 'yes' ? true : false" [checked]="responce?.setting?.USER_REOPEN_ISSUE == 'yes' ? true : false"
                              class=" toggle-class onoffswitch2-checkbox" checked>
                            <label for="myonoffswitch18" class="toggle-class onoffswitch2-label"></label>
                          </span>
                          <div class="ps-3">
                            <label class="form-label">{{'Customer Re-Open Ticket Enable' | translate | titlecase}}</label>
                            <small class="text-muted ">
                              <i>{{'If you disable this ticket setting, customers can not "Re-Open" their tickets. If it is enabled, then the customers can "Re-Open" their tickets within the mentioned days in the input field below.' | translate | titlecase}}</i></small>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-12 col-md-12">
                      <div class="form-group d-flex d-md-max-block ">
                        <input type="number" [maxlength]="2" class="form-control wd-5 w-lg-max-30 ms-7 ps-3  " name="userreopentime" [ngModel]="responce?.setting?.USER_REOPEN_TIME" [min]="1"
                          [value]="responce?.setting?.USER_REOPEN_TIME">
                        <label class="form-label mt-2 ms-2">{{'Re-Open Days' | translate | titlecase}}</label>
                      </div>
                    </div>
                  </div>
                  <!---END RE-OPEN TICKET--->

                  <!--- Customer/Ticket Violation --->
                  <div class="border-bottom">
                    <div class="col-sm-12 col-md-12">
                      <div class="form-group">
                        <div class="switch_section">
                          <div class="switch-toggle d-flex mt-4">
                            <a class="onoffswitch2">
                              <input type="checkbox" id="cust_or_tick_viol"
                                name="cust_or_tick_violation" value="yes"
                                class=" toggle-class onoffswitch2-checkbox"
                                [ngModel]="responce?.setting?.cust_or_tick_violation == 'yes'"
                                [checked]="responce?.setting?.cust_or_tick_violation == 'yes'">
                              <label for="cust_or_tick_viol"
                              class="toggle-class onoffswitch2-label"></label>
                            </a>
                            <div class="ps-3">
                              <label
                              class="form-label">{{ 'Customer/Ticket Violation' | translate | titlecase }}</label>
                              <small class="text-muted ">
                                <i>({{ 'Customers who breach policies can be issued a ticket violation.' | translate| titlecase }})</i></small>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!---END Customer/Ticket Violation --->


                    <!--- Customer Restrict Edit Reply --->
                    <div class="border-bottom">
                      <div class="col-sm-12 col-md-12">
                        <div
                          class="form-group">
                          <div class="switch_section">
                            <div class="switch-toggle d-flex mt-4">
                              <a class="onoffswitch2">
                                <input type="checkbox" id="custrestrictreplyedit"
                                  name="CUSTOMER_RESTRICT_EDIT_REPLY"
                                  class=" toggle-class onoffswitch2-checkbox" [checked]="responce?.setting?.CUSTOMER_RESTRICT_EDIT_REPLY == 'yes' ? true : false" [ngModel]="responce?.setting?.CUSTOMER_RESTRICT_EDIT_REPLY == 'yes' ? true : false">
                                <label for="custrestrictreplyedit"
                                class="toggle-class onoffswitch2-label"></label>
                              </a>
                              <div class="ps-3">
                                <label
                                class="form-label">{{ 'Customer Restrict To Edit Reply' | translate | titlecase}}</label>
                                <small
                                  class="text-muted"><i>({{ 'If you enable this ticket setting, the last reply for the ticket is not editable for the customer.' | translate | titlecase}})</i></small>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-sm-12 col-md-12 ms-7 ps-3 ">
                          <div
                            class="form-group d-flex d-md-max-block">
                            <input type="number" maxlength="2" class="form-control wd-5 w-lg-max-30 ms-2 " 
                              name="custreplyeditwithintime" [ngModel]="responce?.setting?.custreplyeditwithintime" [min]="1" >
                            <label
                            class="form-label mt-2 ms-2">{{ 'Reply edit within the time in minutes' | translate | titlecase}}</label>
                          </div>

                        </div>
                      </div>
                      <!--- END Customer Restrict Edit Reply --->


                      <!---AUTO OVERDUE TICKET--->
                      <div class="border-bottom">
                        <div class="col-sm-12 col-md-12">
                          <div class="form-group ">
                            <div class="switch_section">
                              <div class="switch-toggle d-flex mt-4">
                                <span class="onoffswitch2">
                                  <input type="checkbox" id="myonoffswitchs1" name="AUTO_OVERDUE_TICKET" [ngModel]="responce?.setting?.AUTO_OVERDUE_TICKET == 'yes' ? true : false"
                                    [value]="responce?.setting?.AUTO_OVERDUE_TICKET == 'yes' ? true : false" class=" toggle-class onoffswitch2-checkbox"
                                    [checked]="responce?.setting?.AUTO_OVERDUE_TICKET == 'yes' ? true : false">
                                  <label for="myonoffswitchs1" class="toggle-class onoffswitch2-label"></label>
                                </span>
                                <div class="ps-3">
                                  <label class="form-label">{{'Auto Ticket Overdue Enable' | translate | titlecase}}</label>
                                  <small class="text-muted ">
                                    <i>{{'If you disable this ticket setting, the "overdue" status won’t be reflected on the tickets table in the admin panel. If it is enabled and the users of an admin panel don’t give a reply to the customer within the mentioned days, then the ticket status changes to "Overdue".' | translate | titlecase}}</i></small>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="col-sm-12 col-md-12">
                            <div class="form-group d-flex d-md-max-block">
                              <input type="number" [maxlength]="2" class="form-control wd-5 w-lg-max-30 ms-7" name="autooverduetickettime" [ngModel]="responce?.setting?.AUTO_OVERDUE_TICKET_TIME" [min]="1"
                                [value]="responce?.setting?.AUTO_OVERDUE_TICKET_TIME">
                              <label class="form-label mt-2 ms-2">{{'Auto Overdue Ticket In Days' | translate | titlecase}}</label>
                            </div>
                          </div>
                          <div class="col-sm-12 col-md-12">
                            <div class="form-group">
                              <div class="switch_section">
                                <div class="switch-toggle d-flex mt-4">
                                  <a class="onoffswitch2">
                                    <input type="checkbox" id="autooverduecust" name="AUTO_OVERDUE_CUSTOMER" class=" toggle-class onoffswitch2-checkbox" [checked]="responce?.setting?.AUTO_OVERDUE_CUSTOMER == 'yes' ? true : false" [ngModel]="responce?.setting?.AUTO_OVERDUE_CUSTOMER == 'yes' ? true : false" >
                                    <label for="autooverduecust"
                                    class="toggle-class onoffswitch2-label"></label>
                                  </a>
                                  <div class="ps-3">
                                    <label
                                      class="form-label">{{ 'Send Mail To customer' | translate }}<small
                                      class="text-muted ">
                                      <i>({{ 'If you enable this ticket setting, an email will be sent to the customer when the ticket is in overdue status.' | translate }})</i></small></label>

                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!--- END AUTO OVERDUE TICKET--->

                          <!--- New Auto Delete Trashed Tickets--->

                          <div class="border-bottom">
                            <div class="col-sm-12 col-md-12">
                              <div class="form-group ">
                                <div class="switch_section">
                                  <div class="switch-toggle d-flex mt-4">
                                    <span class="onoffswitch2">
                                      <input type="checkbox" [ngModel]="responce?.setting?.trashed_ticket_autodelete == 'on' ? true : false"
                                        [value]="responce?.setting?.trashed_ticket_autodelete == 'on' ? true : false"
                                        [checked]="responce?.setting?.trashed_ticket_autodelete == 'on' ? true : false" id="myonoffswitchs13" name="trashed_ticket_autodelete"
                                        class="toggle-class onoffswitch2-checkbox">
                                      <label for="myonoffswitchs13" class="toggle-class onoffswitch2-label"></label>
                                    </span>
                                    <div class="ps-3">
                                      <label class="form-label">{{'Auto Delete Trashed Tickets' | translate | titlecase}}</label>
                                      <small class="text-muted ">
                                        <i>({{'If you enable this ticket setting, trashed tickets will be deleted automatically deleted after the time mentioned in the below input field.' | translate | titlecase}})</i></small>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="col-sm-12 col-md-12">
                                <div class="form-group d-flex d-md-max-block ">
                                  <input type="number" [ngModel]="responce?.setting?.trashed_ticket_delete_time" [maxlength]="2" class="form-control wd-5 w-lg-max-30 ms-5" name="trashed_ticket_delete_time" [min]="1"
                                    value="" autocomplete="off">
                                  <label class="form-label mt-2 ms-2 text-wrap">{{'Trashed Tickets Auto Delete In Days' | translate | titlecase}}</label>
                                </div>
                              </div>
                            </div>

                            <!--- End Auto Delete Trashed Tickets--->


                            <!---AUTO NOTIFY DELETE TICKET--->
                            <div class="border-bottom">
                              <div class="col-sm-12 col-md-12">
                                <div class="form-group ">
                                  <div class="switch_section">
                                    <div class="switch-toggle d-flex mt-4">
                                      <span class="onoffswitch2">
                                        <input type="checkbox" id="autodeletenotifications" name="AUTO_NOTIFICATION_DELETE_ENABLE"
                                          [ngModel]="responce?.setting?.AUTO_NOTIFICATION_DELETE_ENABLE == 'on' ? true : false"
                                          [value]="responce?.setting?.AUTO_NOTIFICATION_DELETE_ENABLE == 'on' ? true : false" class=" toggle-class onoffswitch2-checkbox"
                                          [checked]="responce?.setting?.AUTO_NOTIFICATION_DELETE_ENABLE == 'on' ? true : false">
                                        <label for="autodeletenotifications" class="toggle-class onoffswitch2-label"></label>
                                      </span>
                                      <div class="ps-3">
                                        <label class="form-label">{{'Auto Delete Notifications Enable' | translate | titlecase}}</label>
                                        <small class="text-muted ">
                                          <i>{{'If you disable this notification setting, the read notification won’t be deleted from both panels, i.e., the customer and admin panel. If it is enabled, then the read notifications will be deleted after the completion of the mentioned days in the input field.' | translate | titlecase}}</i></small>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="col-sm-12 col-md-12">
                                  <div class="form-group d-flex d-md-max-block ">
                                    <input type="number" [maxlength]="2" class="form-control wd-5 w-lg-max-30 ms-7" name="autonotificationdeletedays" [ngModel]="responce?.setting?.AUTO_NOTIFICATION_DELETE_DAYS" [min]="1"
                                      [value]="responce?.setting?.AUTO_NOTIFICATION_DELETE_DAYS">
                                    <label class="form-label mt-2 ms-2">{{'Auto Delete Notification In Days' | translate | titlecase}}</label>
                                  </div>
                                </div>
                              </div>
                              <!--- END AUTO  NOTIFY DELETE TICKET--->

                              <!--- Employee Name Privacy--->


                              <div class="border-bottom">
                                <div class="col-sm-12 col-md-12">
                                  <div class="form-group">
                                    <div class="switch_section">
                                      <div class="switch-toggle d-flex mt-4">
                                        <span class="onoffswitch2">
                                          <input type="checkbox" id="customer_panel_employee_protect" name="customer_panel_employee_protect"
                                            [ngModel]="responce?.setting?.customer_panel_employee_protect == 'on' ? true : false"
                                            [value]="responce?.setting?.customer_panel_employee_protect == 'on' ? true : false" class=" toggle-class onoffswitch2-checkbox"
                                            [checked]="responce?.setting?.customer_panel_employee_protect == 'on' ? true : false">
                                          <label for="customer_panel_employee_protect" class="toggle-class onoffswitch2-label"></label>
                                        </span>
                                        <div class="ps-3">
                                          <label class="form-label">{{'Employee Name Privacy' | translate | titlecase}}</label>
                                          <small class="text-muted ">
                                            <i>{{'If you "Enable" this setting, customers will only be able to see the name that you give in the below input field. They will not be able to see the employees name and role.' | translate | titlecase}}</i></small>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="col-sm-12 col-md-12">
                                    <div class="form-group d-flex d-md-max-block">
                                      <input type="text" class="form-control w-20 w-lg-max-30 ms-7" [ngModel]="responce?.setting?.employeeprotectname" name="employeeprotectname"
                                        value="{{responce?.setting?.employeeprotectname}}">
                                    </div>
                                  </div>
                                </div>

                                <!--- END Employee Name Privacy--->


                                <!--- GUEST TICKET --->
                                <div class="border-bottom">
                                  <div class="col-sm-12 col-md-12">
                                    <div class="form-group ">
                                      <div class="switch_section">
                                        <div class="switch-toggle d-flex mt-4">
                                          <span class="onoffswitch2">
                                            <input type="checkbox" id="myonoffswitch2" name="GUEST_TICKET" [ngModel]="responce?.setting?.GUEST_TICKET == 'yes' ? true : false"
                                              [value]="responce?.setting?.GUEST_TICKET == 'yes' ? true : false" class=" toggle-class onoffswitch2-checkbox"
                                              [checked]="responce?.setting?.GUEST_TICKET == 'yes' ? true : false">
                                            <label for="myonoffswitch2" class="toggle-class onoffswitch2-label"></label>
                                          </span>
                                          <div class="ps-3">
                                            <label class="form-label">{{'Guest Ticket Enable' | translate | titlecase}}</label>
                                            <small class="text-muted"><i>{{'If you disable this ticket setting, the "Guest Ticket" option will disappear from the application in the header section.' |
                                            translate}}</i></small>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <!--- END GUEST TICKET --->


                                <!--- New Note Created Mail to Admin --->
                                <div class="border-bottom">
                                  <div class="col-sm-12 col-md-12">
                                    <div class="form-group ">
                                      <div class="switch_section">
                                        <div class="switch-toggle d-flex mt-4">
                                          <span class="onoffswitch2">
                                            <input [ngModel]="responce?.setting?.NOTE_CREATE_MAILS == 'on' ? true : false" [value]="responce?.setting?.NOTE_CREATE_MAILS == 'on' ? true : false"
                                              [checked]="responce?.setting?.NOTE_CREATE_MAILS == 'on' ? true : false" type="checkbox" id="notecreatemails" name="NOTE_CREATE_MAILS"
                                              class=" toggle-class onoffswitch2-checkbox">
                                            <label for="notecreatemails" class="toggle-class onoffswitch2-label"></label>
                                          </span>
                                          <div class="ps-3">
                                            <label class="form-label">{{'Note Created Mail to Admin' | translate | titlecase}}</label>
                                            <small class="text-muted"><i>({{'If you enable this ticket setting, an email will be sent to superadmin when a ticket note is created.' | translate | titlecase}})</i></small>
                                          </div>
                                        </div>
                                      </div>

                                    </div>
                                  </div>
                                </div>
                                <!--- End Note Created Mail to Admin --->

                                <!-- Customer File Upload in Ticket -->
                                <div class="border-bottom">
                                  <div class="col-sm-12 col-md-12">
                                    <div class="form-group">
                                      <div class="switch_section">
                                        <div class="switch-toggle d-flex mt-4">
                                          <span class="onoffswitch2">
                                            <input type="checkbox" id="myonoffswitch1823" name="USER_FILE_UPLOAD_ENABLE" [ngModel]="responce?.setting?.USER_FILE_UPLOAD_ENABLE == 'yes' ? true : false"
                                              [value]="responce?.setting?.USER_FILE_UPLOAD_ENABLE == 'yes' ? true : false" class=" toggle-class onoffswitch2-checkbox"
                                              [checked]="responce?.setting?.USER_FILE_UPLOAD_ENABLE == 'yes' ? true : false">
                                            <label for="myonoffswitch1823" class="toggle-class onoffswitch2-label"></label>
                                          </span>
                                          <div class="ps-3">
                                            <label class="form-label">{{'Customer File Upload for Ticket' | translate | titlecase}}</label>
                                            <small class="text-muted"><i>{{'If you disable this ticket setting, the "File Upload" option will disappear from the "Tickets" page, while creating or replying to the ticket to the registered customers.' | translate | titlecase}}</i></small>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <!-- End Customer File Upload in Ticket -->

                                <!-- Guest User File Upload in Ticket -->
                                <div class="border-bottom">
                                  <div class="col-sm-12 col-md-12">
                                    <div class="form-group ">
                                      <div class="switch_section">
                                        <div class="switch-toggle d-flex mt-4">
                                          <span class="onoffswitch2">
                                            <input type="checkbox" id="myonoffswitch1825" name="GUEST_FILE_UPLOAD_ENABLE" [ngModel]="responce?.setting?.GUEST_FILE_UPLOAD_ENABLE == 'yes' ? true : false"
                                              [value]="responce?.setting?.GUEST_FILE_UPLOAD_ENABLE == 'yes' ? true : false" class=" toggle-class onoffswitch2-checkbox"
                                              [checked]="responce?.setting?.GUEST_FILE_UPLOAD_ENABLE == 'yes' ? true : false">
                                            <label for="myonoffswitch1825" class="toggle-class onoffswitch2-label"></label>
                                          </span>
                                          <div class="ps-3">
                                            <label class="form-label">{{'Guest User File Upload in Ticket' | translate | titlecase}}</label>
                                            <small class="text-muted "><i>{{'If you disable this ticket setting, the "File Upload" option will disappear from the "Guest Ticket" page while creating or replying to the ticket to the guest users.' | translate | titlecase}}</i></small>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <!-- End Guest User File Upload in Ticket -->

                                <!--- GUEST TICKET OTP Enable --->
                                <div class="border-bottom">
                                  <div class="col-sm-12 col-md-12">
                                    <div class="form-group ">
                                      <div class="switch_section">
                                        <div class="switch-toggle d-flex mt-4">
                                          <span class="onoffswitch2">
                                            <input type="checkbox" id="myonoffswitcho2" name="GUEST_TICKET_OTP" [ngModel]="responce?.setting?.GUEST_TICKET_OTP == 'yes' ? true : false"
                                              [value]="responce?.setting?.GUEST_TICKET_OTP == 'yes' ? true : false" class=" toggle-class onoffswitch2-checkbox"
                                              [checked]="responce?.setting?.GUEST_TICKET_OTP == 'yes' ? true : false">
                                            <label for="myonoffswitcho2" class="toggle-class onoffswitch2-label"></label>
                                          </span>
                                          <div class="ps-3">
                                            <label class="form-label">{{'Guest Ticket OTP Disable' | translate | titlecase}}</label>
                                            <small class="text-muted"><i>{{'If you enable this ticket setting, the "Guest Ticket OTP" option will be disabled.' | translate | titlecase}}</i></small>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <!--- END GUEST TICKET OTP Enable --->

                                <!--- Customer TICKET Enable --->
                                <div class="border-bottom">
                                  <div class="col-sm-12 col-md-12">
                                    <div class="form-group ">
                                      <div class="switch_section">
                                        <div class="switch-toggle d-flex mt-4">
                                          <span class="onoffswitch2">
                                            <input type="checkbox" id="myonoffswitch2e" name="CUSTOMER_TICKET" [ngModel]="responce?.setting?.CUSTOMER_TICKET == 'yes' ? true : false"
                                              [value]="responce?.setting?.CUSTOMER_TICKET == 'yes' ? true : false" class=" toggle-class onoffswitch2-checkbox"
                                              [checked]="responce?.setting?.CUSTOMER_TICKET == 'yes' ? true : false">
                                            <label for="myonoffswitch2e" class="toggle-class onoffswitch2-label"></label>
                                          </span>
                                          <div class="ps-3">
                                            <label class="form-label">{{'Customer Create Ticket Disable' | translate | titlecase}}</label>
                                            <small class="text-muted"><i>{{'If you enable this ticket setting, the "Customer Ticket" option will disappear from the application in the user dashboard.' |
                                            translate}}</i></small>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <!--- END Customer TICKET Enable --->

                                <!--- ADMIN TICKET RATING ENABLE/DISABLE --->
                                <div class="border-bottom">
                                  <div class="col-sm-12 col-md-12">
                                    <div class="form-group ">
                                      <div class="switch_section">
                                        <div class="switch-toggle d-flex mt-4">
                                          <span class="onoffswitch2">
                                            <input type="checkbox" id="ticket_rating" name="ticket_rating" [ngModel]="responce?.setting?.ticketrating == 'on' ? true : false"
                                              [value]="responce?.setting?.ticketrating == 'on' ? true : false" class=" toggle-class onoffswitch2-checkbox"
                                              [checked]="responce?.setting?.ticketrating == 'on' ? true : false">
                                            <label for="ticket_rating" class="toggle-class onoffswitch2-label"></label>
                                          </span>
                                          <div class="ps-3">
                                            <label class="form-label">{{'Rating Page Disable' | translate | titlecase}}</label>
                                            <small class="text-muted"><i>{{'If you "Enable" this setting, the "Rating Page" will not appear to the customers after closing the ticket.' | translate | titlecase}}</i></small>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <!--- END ADMIN TICKET RATING ENABLE/DISABLE --->

                                <!--- ADMIN TICKET CC MAIL ENABLE/DISABLE --->
                                <div class="border-bottom">
                                  <div class="col-sm-12 col-md-12">
                                    <div class="form-group ">
                                      <div class="switch_section">
                                        <div class="switch-toggle d-flex mt-4">
                                          <span class="onoffswitch2">
                                            <input type="checkbox" id="cc_email" name="cc_email" [ngModel]="responce?.setting?.cc_email == 'on' ? true : false"
                                              [value]="responce?.setting?.cc_email == 'on' ? true : false" class=" toggle-class onoffswitch2-checkbox"
                                              [checked]="responce?.setting?.cc_email == 'on' ? true : false">
                                            <label for="cc_email" class="toggle-class onoffswitch2-label"></label>
                                          </span>
                                          <div class="ps-3">
                                            <label class="form-label">{{'CC Mail Enable/Disable' | translate | titlecase}}</label>
                                            <small class="text-muted"><i>{{'If you "Enable" this "CC Mail" setting, the CC Mail input field options will appear on the Create Ticket, Admin Create Ticket, and Guest Ticket.' |
                                            translate}}</i></small>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <!--- END ADMIN TICKET CC MAIL ENABLE/DISABLE --->

                                <!---TICKET Length--->
                                <div>
                                  <div class="col-sm-12 col-md-12">
                                    <div class="form-group ">
                                      <div class="switch_section">
                                        <div class="switch-toggle d-flex mt-4">
                                          <span class="onoffswitch2">
                                            <input type="checkbox" id="LengthTextFieldStatus" name="LengthTextFieldStatus" [ngModel]="responce?.setting?.LengthTextFieldStatus == 'on' ? true : false"
                                              [value]="responce?.setting?.LengthTextFieldStatus == 'on' ? true : false"
                                              [checked]="responce?.setting?.LengthTextFieldStatus == 'on' ? true : false" class=" toggle-class onoffswitch2-checkbox" >
                                            <label for="LengthTextFieldStatus" class="toggle-class onoffswitch2-label"></label>
                                          </span>
                                          <div class="ps-3">
                                            <label class="form-label">{{'Ticket Input Length' | translate | titlecase}}</label>
                                            <small class="text-muted ">
                                              <i>({{'By adjusting the value in the below fields one is min and max length"' | translate | titlecase}})</i>
                                            </small>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="">
                                    <div class="col-sm-12 col-md-12">
                                      <div class="form-group d-flex d-md-max-block ">
                                        <input type="number" id="minLengthTextField" [ngModel]="responce?.setting?.minLengthTextField" [value]="responce?.setting?.minLengthTextField" class="form-control wd-5 w-lg-max-30 ms-7 ps-3  " min="1" name="minLengthTextField" autocomplete="off"/>
                                        <label for="minLengthTextField" class="form-label mt-2 ms-2 text-wrap">{{'Min Descritpion Length' | translate | titlecase}}</label>
                                      </div>
                                    </div>
                                    <div class="col-sm-12 col-md-12">
                                      <div class="form-group d-flex d-md-max-block ">
                                        <input type="number" id="maxLengthTextField" [ngModel]="responce?.setting?.maxLengthTextField" [value]="responce?.setting?.maxLengthTextField" min="1"
                                          class="form-control wd-5 w-lg-max-30 ms-7 ps-3 " name="maxLengthTextField" autocomplete="off">
                                        <label for="maxLengthTextField" class="form-label mt-2 ms-2">{{'Max Descritpion Length' | translate | titlecase}}</label>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <!---  End TICKET Length--->

                                <!---  End TICKET EMPLOYEE SECRET NAME (Privacy Name)--->




                              </div>
                            </div>
                            <div class="card-footer ">
                              <div class="form-group float-end">
                                <button [disabled]="FormData.invalid || sendingResponse['ticketSetting']" type="submit" class="btn btn-secondary">{{'Save Changes' | translate | titlecase}}@if (sendingResponse['ticketSetting']) {
                                  <i
                                  class="fa fa-spinner fa-spin mx-1"></i>
                                }</button>
                              </div>
                            </div>
                          </form>
                        </div>
                      </div>
                      <!-- End Ticket Settings-->

                      <!-- File Setting-->
                      <div class="col-xl-12 col-lg-12 col-md-12">
                        <div class="card overflow-hidden">
                          <div class="card-header border-0">
                            <h4 class="card-title">{{'File Setting' | translate | titlecase}}</h4>
                          </div>
                          <div class="card-body">
                            <form #FormData2="ngForm" (ngSubmit)="FileSetting(FormData2.value, 'fileSetting')" id="FileSetting">
                              <div class="row">
                              <div class="row">
                                  <div class="mb-2 border-0">
                                      <h4 class="card-title">{{ 'For Admin Panel Users'| translate }}</h4>
                                  </div>
                                  <div class="col-sm-12 col-md-4">
                                      <div class="form-group">
                                          <label class="form-label">{{ 'Maximum File Upload’s' | translate }} <span class="text-red">*</span> </label>

                                          <div class="d-flex justify-content-center align-items-center">
                                              <input type="number" maxlength="2"
                                                  class="form-control"
                                                  name="usermaxfileupload"
                                                  [ngModel]="responce?.setting?.USER_MAX_FILE_UPLOAD" min="0"
                                                  oninput="validity.valid||(value='');">
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-sm-12 col-md-4">
                                      <div class="form-group">
                                          <label class="form-label">{{ 'File Upload’s Maximum Size' | translate }} <span class="text-red">*</span> </label>
                                          <div class="d-flex justify-content-center align-items-center">
                                              <input type="number" maxlength="2"
                                                  class="form-control"
                                                  name="userfileuploadmaxsize"
                                                  [ngModel]="responce?.setting?.USER_FILE_UPLOAD_MAX_SIZE" min="0"
                                                  oninput="validity.valid||(value='');">
                                              <span class="ms-2 font-weight-bold">{{ 'MB' | translate }}</span>
                                          </div>      
                                      </div>
                                  </div>
      
                                  <div class="col-sm-12 col-md-4">
                                      <div class="form-group">
                                          <label class="form-label">{{ 'File Types Allowed' | translate }} <span class="text-red">*</span> </label>
                                          <div class="d-flex">
                                            <ng-select [items]="[]" class="form-control nodropdown" [(ngModel)]="userfileTypes" [isOpen]="false" [addTag]="true" [multiple]="true" [selectOnTab]="true"  name="userfileuploadtypes" [maxSelectedItems]="10">
                                            </ng-select>
                                          </div>
                                      </div>
                                  </div>
                              </div>
      
                              <div class="row">
                                  <div class="mb-2 border-0">
                                      <h4 class="card-title">{{ 'For Customers / Guests' | translate }}</h4>
                                  </div>
                                  <div class="col-sm-12 col-md-4">
                                    <div class="form-group">
                                      <label class="form-label">{{'Max File Upload' | translate | titlecase}}</label>
                                      <div class="d-flex justify-content-center align-items-center">
                                        <input [ngModel]="responce?.setting?.MAX_FILE_UPLOAD && responce?.setting?.MAX_FILE_UPLOAD" type="number" [maxlength]="2" class="form-control" id="maxfileupload" [min]="0"
                                          name="maxfileupload" value="">
  
                                      </div>
                                    </div>
                                  </div>
                                  <div class="col-sm-12 col-md-4">
                                    <div class="form-group">
                                      <label class="form-label">{{'Max File Size Upload' | translate | titlecase}}
                                        <span class="text-danger">*</span></label>
                                        <div class="d-flex justify-content-center align-items-center">
                                          <input [ngModel]="responce?.setting?.FILE_UPLOAD_MAX && responce?.setting?.FILE_UPLOAD_MAX" type="number" [maxlength]="2" class="form-control" name="fileuploadmax" [min]="0"
                                            value="">
                                          <span class="ms-2 font-weight-bold">{{'MB' | translate | titlecase}}</span>
                                        </div>
                                      </div>
                                    </div>
  
                                    <div class="col-sm-12 col-md-4">
                                      <div class="form-group ">
                                        <label class="form-label">{{'Allow File Types' | translate | titlecase}}
                                          <span class="text-danger">*</span>
                                        </label>
                                        <div class="d-flex">
                                          <ng-select [items]="[]" class="form-control nodropdown" [(ngModel)]="fileTypes" [isOpen]="false" [addTag]="true" [multiple]="true" [selectOnTab]="true"  name="fileuploadtypes" [maxSelectedItems]="10">
                                          </ng-select>
                                        </div>
                                        <small>{{'use extension without dot notation' | translate | titlecase}}</small>
  
                                      </div>
                                    </div>
                                  </div>
                              </div>
                            </form>
                          </div>
                          <div class="card-footer ">
                            <div class="form-group float-end">
                              <button [disabled]="sendingResponse['fileSetting']" form="FileSetting" type="submit" class="btn btn-secondary">{{'Save Changes' | translate | titlecase}}@if (sendingResponse['fileSetting']) {
                                <i class="fa fa-spinner fa-spin mx-1"></i>
                              }</button>
                            </div>
                          </div>
                        </div>
                      </div>
                        <!-- End File Setting-->