<admin-page-header [title]="'Live Chat Settings'"></admin-page-header>

<div class="row">
    
    <!-- {{-- Start SSL data  --}} -->
    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
            <div class="card-header border-0">
                <h4 class="card-title">{{'SSL Data' | translate}}</h4>
            </div>
            <!-- action="{{ route('admin.livechatssldstore') }}" method="POST" -->
            <form [formGroup]="livechatssldstore"
            (ngSubmit)="LiveChatSettings(livechatssldstore, 'livechatssldstore')">
                <div class="card-body pt-2">
                    <div class="alert bg-warning-transparent text-dark mx-3 p-5" role="alert">
                        <h4 class="mb-2">{{ 'How does it work?' | translate }}
                        </h4>
                        <p class="mb-0 fs-14">
                            {{ 'The "SSL Data Setting" section facilitates secure connection establishment between the application and the user’s server through SSL certificates. Admins need to input the SSL Certificate and SSL Key data obtained from their server into the designated text areas. Once the data is provided and saved, the section transitions into a disabled mode, indicating a successful connection setup. This ensures secure transmission of data between the application and the server, enhancing data protection and integrity.' | translate }}
                        </p><br>
                        <p class="mb-0 fs-14">
                            <b>{{ 'Note'| translate }} : {{ 'If you are familiar with what SSL Certificate and SSL Key are, then please reach out to your hosting provider.'| translate }}</b>
                        </p>
                    </div>
                    <div class="d-flex">
                        <div class="col-sm-12 col-md-6">
                            <div class="form-group">
                                <label class="form-label">{{'SSL Certificate'| translate}} <span class="text-red">*</span></label>
                                <textarea type="text" formControlName="sslcertificate" rows="10" class="form-control" placeholder="Enter SSL certificate" [readonly]="setting?.serverssldomainname == domainname">{{setting?.serversslcertificate}}</textarea>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6">
                            <div class="form-group">
                                <label class="form-label">{{'SSL Key'| translate}} <span class="text-red">*</span></label>
                                <textarea type="text" formControlName="sslkey" rows="10" class="form-control " placeholder="Enter SSL certificate" [readonly]="setting?.serverssldomainname == domainname">{{setting?.serversslkey}}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 card-footer ">
                    <div class="form-group float-end ">
                    <button type="submit" class="btn btn-secondary" [disabled]="setting?.serverssldomainname == domainname">{{'Save Changes'| translate}}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- {{-- End SSL data  --}} -->
    <!-- {{-- LiveChat  --}} -->
    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
            <div class="card-header border-0">
                <h4 class="card-title">{{'LiveChat' | translate}}</h4>
            </div>
            <form id="livechat_enable_form" [formGroup]="livechatCredentials"
            (ngSubmit)="LiveChatSettings(livechatCredentials, 'livechatLivechatCredentials')">
                <div class="card-body pt-2">
                    <div class="alert bg-warning-transparent text-dark m p-5" role="alert">
                        <h4 class="mb-2">{{ 'Usage'| translate }} :
                        </h4>
                        <p class="mb-0 fs-14">
                            {{ 'Enter the desired port number received from your hosting provider in the input field, for example, "8443" or "8445." Ensure that the provided port number is available and open on your server. If the port is not open, contact your hosting provider to make it accessible on your server.'| translate }}
                        </p><br>
                        <p class="mb-0 fs-14">
                            <b>{{ 'Note'| translate }} : {{ 'Users utilizing the Linux OS on their server must ensure they have "SUDO" access for proper configuration.'| translate }}</b>
                        </p>
                    </div>
                    <div class="switch_section my-0">
                        <div class="switch-toggle d-flex d-md-max-block mt-4 ms-0">
                            <a class="onoffswitch2">
                                <input type="checkbox" formControlName="liveChat_hidden" id="liveChat_hidden" class=" toggle-class onoffswitch2-checkbox" [disabled]="setting?.serverssldomainname == null || setting?.serverssldomainname != domainname">
                                <label for="liveChat_hidden" class="toggle-class onoffswitch2-label" ></label>
                            </a>
                            <label class="form-label ps-3 ps-md-max-0">{{'Enable LiveChat'| translate}}</label>
                            <small class="text-muted ps-2 ps-md-max-0"><i>({{'Enabling this setting will make the live chat function visible to customers, giving them the ability to begin a chat.'| translate}})</i></small>
                        </div>
                    </div>
                    <div class="form-group d-flex d-md-max-block">

                        <label  class="form-label">{{'Enter Port number for LiveChat'| translate}}</label>
                        <small class="text-muted ps-2 ps-md-max-0"><i>({{'The liveChat connection will be established by the given port number.'| translate}})</i></small>
                    </div>
                    <input type="number" placeholder="{{'Port number for LiveChat'| translate}}" formControlName="liveChatPort" class="form-control" value="{{ setting?.liveChatPort }}" [readonly]="setting?.serverssldomainname == null || setting?.serverssldomainname != domainname">
                </div>
                <div class="col-md-12 card-footer ">
                    <div class="form-group float-end ">
                    <button class="btn btn-secondary" id="livechatsubmitbtn" [disabled]="setting?.serverssldomainname == null || setting?.serverssldomainname != domainname">{{'Save Changes' | translate}}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- {{-- End LiveChat  --}} -->
    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
            <div class="card-header border-0">
                <h4 class="card-title">{{ 'Live Chat Script' | translate }}</h4>
            </div>
            <div class="card-body">
                <label><small><i>({{ 'Copy the provided script tag link. Navigate to "App Setting->External Chat" and paste the copied script tag link into the "External Chat" text area, and enable the "External Chat Enable/Disable" switch. Administrators can seamlessly integrate the chat icon into the application’s landing page, enhancing customer engagement and support capabilities. And moreover, you can also use this below script tag link on any other website, but make sure that you paste this code snippet just before the end of the body tag. ' | translate}})</i></small></label>
                <div class="form-group mb-0">
                    <div class="input-group">
                        <input type="text" class="form-control liveChatScriptLink" name="mail_username" readonly
                            id="mail_username"
                            [value]="livechatPath"
                            autocomplete="off">
                        <button class="btn btn-primary p-2 liveChatScriptLinkCopyBtn" ngxClipboard [cbContent]="livechatPath" >
                            <i class="fa fa-clone" data-bs-toggle="tooltip" title=""
                                data-bs-original-title="fa fa-clone" aria-label="fa fa-clone"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Customer File Setting-->
    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">         
            <form [formGroup]="FileSettings"
                (ngSubmit)="LiveChatSettings(FileSettings, 'livechatLiveChatFileSettings')">
                <div class="card-header d-flex justify-content-between align-items-center py-2">
                    <div>
                        <h4 class="card-title">{{ 'Customer Live Chat File Setting' | translate }}</h4>
                        <small class="ms-2 text-primary cursor-pointer notificationButton font-weight-bold d-none"
                        style="cursor: pointer;">Enable notification permission</small>
                    </div>
                    <div class="switch-toggle d-flex mt-4">
                        <a class="onoffswitch2">
                            <label class="custom-switch m-0">
                                <app-check-box-input
                                    classText="toggle-class onoffswitch2-checkbox enablemenus"
                                    placeholder="Subject" [isRequired]="false"
                                    nameField="liveChatFileUpload"
                                    [isChecked]="['1', 'true'].includes(setting?.liveChatFileUpload)? true : false"
                                    idField="liveChatFileUpload"></app-check-box-input>
                            </label>
                        </a>
                        <div class="ps-3">
                            <label class="form-label">Customer File Upload</label>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mt-4">
                        <div class="col-sm-12 col-md-4">
                            <div class="form-group ">
                                <label class="form-label">{{ 'Maximum File Upload’s' | translate }}</label>
                                <app-number-input maxlength="2" classText="form-control" nameField="livechatMaxFileUpload" [value]="setting?.livechatMaxFileUpload" placeholder="Max FileUpload"></app-number-input>
                            </div>
                        </div>

                        <div class="col-sm-12 col-md-4">
                            <div class="form-group mb-0 ">
                                <label class="form-label">{{ 'Live Chat File Upload’s Maximum Size' | translate
                                    }}</label>
                                <div class="d-flex align-items-center gap-2">
                                    <app-number-input maxlength="2" classText="form-control w-100"
                                        nameField="livechatFileUploadMax" [value]="setting?.livechatFileUploadMax"
                                        placeholder="Max FileUpload Size"></app-number-input>
                                    <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 mb-0 ">
                                <label class="form-label">{{ 'Live Chat File Types Allowed' | translate }}</label>
                                    <app-ng-select-input nameField="livechatFileUploadTypes" [tagslist]="tagslist"
                                        idField="tags" classText="form-control nodropdown" placeholder="Tags"
                                        [addTag]="true" [hideSelected]="true" [multiple]="true" bindLabel="name" bindValue="name"
                                        [initailSelect]="initailSelect" [isOpen]="false"></app-ng-select-input>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer ">
                    <div class="form-group mb-0 float-end">
                        <input type="submit" class="btn btn-secondary my-2" [value]="'Save Changes' | translate" />
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Customer End File Setting-->

    <!-- Agent File Setting-->
    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
            <form [formGroup]="agentLiveChat"
                (ngSubmit)="LiveChatSettings(agentLiveChat, 'livechatLiveChatFileSettings')">
            <div class="card-header d-flex justify-content-between align-items-center py-2">
                <div>
                    <h4 class="card-title">{{ 'Agent Live Chat File Setting' | translate}}</h4>
                    <small class="ms-2 text-primary cursor-pointer notificationButton font-weight-bold d-none"
                        style="cursor: pointer;">Enable notification permission</small>
                </div>
                <div class="switch-toggle d-flex mt-4">

                    <a class="onoffswitch2">
                        <label class="custom-switch m-0">
                            <app-check-box-input
                                classText="toggle-class onoffswitch2-checkbox enablemenus"
                                placeholder="Subject" [isRequired]="false"
                                nameField="liveChatAgentFileUpload"
                                [isChecked]="['1', 'true'].includes(setting?.liveChatAgentFileUpload)? true : false"
                                idField="liveChatAgentFileUpload"></app-check-box-input>
                        </label>
                    </a>

                    <div class="ps-3">
                        <label class="form-label">{{ 'Agent File Upload' | translate }}</label>
                    </div>
                </div>
            </div>
                <div class="card-body">
                    <div class="row mt-4">
                        <div class="col-sm-12 col-md-4">
                            <div class="form-group ">
                                <label class="form-label">{{ 'Maximum File Upload’s' | translate }}</label>
                                    <app-number-input maxlength="2" classText="form-control"
                                        nameField="AgentlivechatMaxFileUpload"
                                        [value]="setting?.AgentlivechatMaxFileUpload"
                                        placeholder="Max FileUpload"></app-number-input>
                            </div>
                        </div>

                        <div class="col-sm-12 col-md-4">
                            <div class="form-group mb-0 ">
                                <label class="form-label">{{ 'Live Chat File Upload’s Maximum Size' | translate
                                    }}</label>
                                <div class="d-flex align-items-center gap-2">
                                    <app-number-input maxlength="2" classText="form-control"
                                        nameField="AgentlivechatFileUploadMax"
                                        [value]="setting?.AgentlivechatFileUploadMax"
                                        placeholder="Max FileUpload Size"></app-number-input>
                                    <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 mb-0 ">
                                <label class="form-label">{{ 'Live Chat File Types Allowed' | translate }}</label>
                                <app-ng-select-input nameField="AgentlivechatFileUploadTypes" [tagslist]="tagslist" idField="AgentlivechatFileUploadTypes" classText="form-control nodropdown" placeholder="Tags" [addTag]="true" [hideSelected]="true" [multiple]="true" bindLabel="name" bindValue="name" [initailSelect]="initailSelectAgentlivechatFileUploadTypes" [isOpen]="false"></app-ng-select-input>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="card-footer ">
                    <div class="form-group mb-0 float-end">
                        <input type="submit" class="btn btn-secondary my-2" [value]="'Save Changes' | translate">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Agent File Setting-->


    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
            <div class="card-header d-flex justify-content-between align-items-center py-2">
                <h4 class="card-title"> {{'Live Chat Sounds' | translate}}</h4>
            </div>
            <form [formGroup]="liveChatNotificationsound"
                (ngSubmit)="LiveChatSettings(liveChatNotificationsound, 'livechatLiveChatNotificationsSound')">
                <div class="card-body">
                    <label class="form-label">{{ 'Upload Your Sound' | translate}} <small><i>({{ 'You can add your custom sounds for the notifications when a new chat is created or a new reply is created.' | translate }})</i></small></label>
                    <div class="d-flex">
                        <div class="input-group file-browse">
                            <app-file-input nameField="uploadSound" idField="uploadSound" classText="form-control" class="w-100"
                                placeholder="Upload Song" value="" accept="audio/mp3,audio/*;capture=microphone"
                                (valueChanged)="handlePatchValue($event, liveChatNotificationsound, 'uploadSound' )"></app-file-input>
                        </div>
                        <a routerLink='/admin/live-chat/notification-sounds' class="btn ms-3 btn-danger">{{'View All Sounds' |
                            translate}}</a>
                    </div>
                </div>
                <div class="card-footer ">
                    <div class="form-group mb-0 float-end">
                        <input type="submit" class="btn btn-secondary my-2" value="{{ 'Save Changes' | translate }}">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
            <div class="card-header d-flex justify-content-between align-items-center py-2">
                <h4 class="card-title"> {{'Live Chat Icon' | translate}}</h4>
            </div>
            <form [formGroup]="liveChatIconSetting"
                (ngSubmit)="LiveChatSettings(liveChatIconSetting, 'livechatLiveChatIconSound')">
                <div class="card-body">
                    <label class="form-label">{{ 'Upload Your Sound' | translate}} <small><i>({{ 'You can add your custom sounds for the notifications when a new chat is created or a new reply is created.' | translate }})</i></small></label>
                    <div class="d-flex">
                        <div class="input-group file-browse">
                            <app-file-input nameField="livechaticon" idField="livechaticon" classText="form-control" class="w-100"
                                placeholder="Upload Song" value="" 
                                (valueChanged)="handlePatchValue($event, liveChatIconSetting, 'livechaticon' )"></app-file-input>
                        </div>
                    </div>
                    <small class="text-muted"><i>{{ 'Allowed extensions are jpg,jpeg,png,svg and should not be more than 512kb.' | translate }}</i></small>
                </div>
                <div class="">
                    @if (setting?.liveChatIcon){
                        <img [src]="url + '/uploads/livechaticon/' + setting?.liveChatIcon" class="br-5"
                            width ="75" height="75" alt="logo">
                            <input type="hidden" formControlName="delete_icon" [value]="deleteIconFlag ? 1 : 0">
                            <button type="submit" class="feather feather-trash-2 text-danger" (click)="deleteIcon()"></button>
                    }
                </div>
                <div class="card-footer ">
                    <div class="form-group mb-0 float-end">
                        <input type="submit" class="btn btn-secondary my-2" value="{{ 'Save Changes' | translate }}">
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
            <form [formGroup]="liveChatNotification"
                (ngSubmit)="LiveChatSettings(liveChatNotification, 'livechatLiveChatNotificationsSetting')">
                <div class="card-header d-flex justify-content-between align-items-center py-2">
                    <h4 class="card-title">{{ 'Live Chat Notifications Setting' | translate }}</h4>
                    <div class="switch-toggle d-flex mt-4">
                        <a class="onoffswitch2">
                            <label class="custom-switch m-0">
                                <app-check-box-input classText="toggle-class onoffswitch2-checkbox enablemenus"
                                    placeholder="Subject" [isRequired]="false" nameField="notificationsSounds"
                                    [isChecked]="['1', 'true'].includes(setting?.notificationsSounds)? true : false"
                                    idField="notificationsSounds"></app-check-box-input>
                            </label>
                        </a>
                        <div class="ps-3">
                            <label class="form-label">{{ 'Live Chat Notifications' | translate }}</label>
                        </div>
                    </div>
                </div>
                <div class="card-body">


                    <div class="form-group mt-2">
                        <label class="form-label">{{ 'Notification Type' | translate }} <small><i>({{ 'You can choose different sounds for incoming messages and customer replies, manage web notifications for chats by enabling or disabling them, and customize the notification sound to play once or in a continuous loop.' | translate }})</i></small></label>
                        <app-ng-select-input nameField="notificationType" [tagslist]="notificationPlayTypeList"
                            idField="notificationType" classText="form-control nodropdown"
                            placeholder="Livechat Flow load" [addTag]="false" [hideSelected]="false" [multiple]="false"
                              bindLabel="name" bindValue="name" bindValue="name" [initailSelect]="setting?.notificationType" [isOpen]="true"
                            [isRequired]="true"></app-ng-select-input>
                    </div>

                    <div class="table-responsive mt-4">
                        <table class="table table-bordered card-table table-vcenter text-nowrap mb-0">
                            <thead>
                                <tr>
                                    <th>{{'Notification type' | translate}}</th>
                                    <th>{{'Web notification' | translate}}</th>
                                    <th>{{'notification sound' | translate}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>{{'New message' | translate}}</td>
                                    <td>
                                        <label class="custom-switch m-0">
                                            <app-check-box-input
                                                classText="toggle-class onoffswitch2-checkbox enablemenus"
                                                placeholder="Subject" [isRequired]="false" nameField="newMessageWebNot"
                                                [isChecked]="['1', 'true'].includes(setting?.newMessageWebNot)? true : false"
                                                idField="newMessageWebNot"></app-check-box-input>
                                        </label>
                                    </td>
                                    <td class="notify-sound">
                                        <app-ng-select-input nameField="newMessageSound" [tagslist]="data?.sounds"
                                            idField="newMessageSound"
                                            classText="form-control NewMessageSound nodropdown"
                                            placeholder="Livechat Flow load" [addTag]="false" [hideSelected]="false"
                                            [multiple]="false"   bindLabel="name" bindValue="name" bindValue="name" bindValue="name"
                                            [initailSelect]="setting?.newMessageSound"
                                            [isOpen]="true"></app-ng-select-input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>{{'New Chat request' | translate}}</td>
                                    <td>
                                        <label class="custom-switch m-0">
                                            <app-check-box-input
                                                classText="toggle-class onoffswitch2-checkbox enablemenus"
                                                placeholder="Subject" [isRequired]="false"
                                                nameField="newChatRequestWebNot"
                                                [isChecked]="['1', 'true'].includes(setting?.newChatRequestWebNot)? true : false"
                                                idField="newChatRequestWebNot"></app-check-box-input>
                                        </label>
                                    </td>
                                    <td class="notify-sound">
                                        <app-ng-select-input nameField="newChatRequestSound" [tagslist]="data?.sounds"
                                            idField="newChatRequestSound"
                                            classText="form-control NewMessageSound nodropdown"
                                            placeholder="Livechat Flow load" [addTag]="false" [hideSelected]="false"
                                            [multiple]="false"   bindLabel="name" bindValue="name" bindValue="name"
                                            [initailSelect]="setting?.newChatRequestSound"
                                            [isOpen]="true"></app-ng-select-input>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="card-footer ">
                    <div class="form-group mb-0 float-end">
                        <input type="submit" class="btn btn-secondary my-2" value="{{ 'Save Changes' | translate }}">
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
            <form [formGroup]="operatorsNotifications"
                (ngSubmit)="LiveChatSettings(operatorsNotifications, 'operatorsNotificationsSetting')">
                <div class="card-header d-flex justify-content-between align-items-center py-2">
                    <h4 class="card-title">{{ 'Operators Notifications Setting' | translate }}</h4>
                    <div class="switch-toggle d-flex mt-4">
                        <a class="onoffswitch2">
                            <label class="custom-switch m-0">
                                <app-check-box-input
                                    classText="toggle-class onoffswitch2-checkbox enablemenus"
                                    placeholder="Subject" [isRequired]="false"
                                    nameField="operatorsNotificationsSounds"
                                    [isChecked]="['1', 'true'].includes(setting?.operatorsNotificationsSounds)? true : false"
                                    idField="operatorsNotificationsSounds"></app-check-box-input>
                            </label>
                        </a>
                        <div class="ps-3">
                            <label class="form-label">{{ 'Operators Notifications' | translate
                                }}</label>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <label for=""> <small><i>({{ 'You can choose different sounds for incoming chats and operator responses, toggle web notifications on or off for different chats, and specify if the notification sound plays once or continuously.' | translate }})</i></small></label>
                    <div class="table-responsive mt-4">
                        <table class="table table-bordered card-table table-vcenter text-nowrap mb-0">
                            <thead>
                                <tr>
                                    <th>Notification type</th>
                                    <th>Web notification</th>
                                    <th>notification sound</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Agent to Agent</td>
                                    <td>
                                        <label class="custom-switch m-0">
                                            <app-check-box-input
                                                classText="toggle-class onoffswitch2-checkbox enablemenus"
                                                placeholder="Subject" [isRequired]="false"
                                                nameField="operatorsAgentToAgentWebNot"
                                                [isChecked]="['1', 'true'].includes(setting?.operatorsAgentToAgentWebNot)? true : false"
                                                idField="operatorsAgentToAgentWebNot"></app-check-box-input>
                                        </label>
                                    </td>
                                    <td class="notify-sound">
                                        <app-ng-select-input nameField="operatorsAgentToAgentSound"
                                            [tagslist]="data?.sounds" idField="operatorsAgentToAgentSound"
                                            classText="form-control operatorsNewMessageSound nodropdown"
                                            placeholder="Livechat Flow load" [addTag]="false" [hideSelected]="false"
                                            [multiple]="false"   bindLabel="name" bindValue="name" bindValue="name" bindValue="name"
                                            [initailSelect]="setting?.operatorsAgentToAgentSound"
                                            [isOpen]="true"></app-ng-select-input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Group Chat</td>
                                    <td>
                                        <label class="custom-switch m-0">
                                            <app-check-box-input
                                                classText="toggle-class onoffswitch2-checkbox enablemenus"
                                                placeholder="Subject" [isRequired]="false"
                                                nameField="operatorsGroupChatWebNot"
                                                [isChecked]="['1', 'true'].includes(setting?.operatorsGroupChatWebNot)? true : false"
                                                idField="operatorsGroupChatWebNot"></app-check-box-input>
                                        </label>
                                    </td>
                                    <td class="notify-sound">
                                        <app-ng-select-input nameField="operatorsGroupChatSound"
                                            [tagslist]="data?.sounds" idField="operatorsGroupChatSound"
                                            classText="form-control operatorsNewMessageSound nodropdown"
                                            placeholder="Livechat Flow load" [addTag]="false" [hideSelected]="false"
                                            [multiple]="false"  bindLabel="name" bindValue="name" bindValue="name"
                                            [initailSelect]="setting?.operatorsGroupChatSound"
                                            [isOpen]="true"></app-ng-select-input>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="card-footer ">
                    <div class="form-group mb-0 float-end">
                        <input type="submit" class="btn btn-secondary my-2" value="{{ 'Save Changes' | translate  }}">
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
            <div class="card-header border-0">
                <h4 class="card-title">{{ 'Live Chat Flow Setting' | translate }}</h4>
                <small class="ms-1"><i>({{ 'If ’For a single unique user’ is selected previous livechat customers need not go through the livechat flow. If ’Every 24 hours’ is selected previous customers also have will have to through the livechat flow.' | translate }})</i></small>
            </div>
            <form [formGroup]="liveChatFlowload"
                (ngSubmit)="LiveChatSettings(liveChatFlowload, 'livechatLiveChatFlowSettings')">
                <div class="card-body">
                    <div class="col-sm-12 col-md-12">
                        <div class="form-group mb-0">
                            <app-ng-select-input nameField="liveChatFlowload" [tagslist]="liveChatFlowloadList"
                                idField="liveChatFlowload" classText="form-control nodropdown"
                                placeholder="Livechat Flow load" [addTag]="false" [hideSelected]="false"
                                [multiple]="false"  bindLabel="name" bindValue="name" [initailSelect]="setting?.liveChatFlowload"
                                [isOpen]="true"></app-ng-select-input>
                        </div>
                    </div>
                </div>
                <div class="card-footer ">
                    <div class="form-group mb-0 float-end my-2">
                        <button type="submit" class="btn btn-secondary">{{ 'Save Changes' | translate }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="col-xl-6 col-lg-6">
        <div class="card ">
            <div class="card-header border-0">
                <h4 class="card-title">{{ 'Live Chat Icon Size' | translate }}</h4>
            </div>
            <small class="ms-5"><i>({{ 'This setting determines the size of the chat icon displayed to customers: selecting "small" shows a small icon, while "large" shows a larger icon.' | translate }})</i></small>
            <form [formGroup]="livechatIconSize"
                (ngSubmit)="LiveChatSettings(livechatIconSize, 'livechatLiveChatIconSize')">
                <div class="card-body">
                    <div class="form-group mb-4">
                        <label class="form-label">{{ 'Select Size' | translate }}</label>
                        <app-ng-select-input nameField="livechatIconSize" [tagslist]="liveChatIconSizeList"
                            idField="livechatIconSize" classText="form-control nodropdown"
                            placeholder="Livechat Position" [addTag]="false" [hideSelected]="false" [multiple]="false"
                            bindLabel="name" bindValue="name" [initailSelect]="setting?.livechatIconSize"
                            [isOpen]="true"></app-ng-select-input>
                    </div>
                </div>
                <div class="col-md-12 card-footer ">
                    <div class="form-group float-end ">
                        <input type="submit" class="btn btn-secondary my-2" value="{{ 'Save Changes' | translate  }}">
                    </div>
                </div>
            </form>
        </div>
    </div>


    <!-- LiveChat position -->
    <div class="col-xl-6 col-lg-6">
        <div class="card ">
            <div class="card-header border-0">
                <h4 class="card-title">{{ 'LiveChat Position' | translate }}</h4>
                <small class="ms-1"><i>({{ 'This setting determines the position of the chat icon on the browser.' | translate }})</i></small>
            </div>
            <form [formGroup]="liveChatPosition"
                (ngSubmit)="LiveChatSettings(liveChatPosition, 'livechatLiveChatPosition')">

                <div class="card-body">
                    <div class="form-group mb-4">
                        <label class="form-label">{{ 'Select LiveChat Position' | translate }}</label>
                        <app-ng-select-input nameField="livechatPosition" [tagslist]="iveChatPositionList"
                            idField="livechatPosition" classText="form-control nodropdown"
                            placeholder="Livechat Position" [addTag]="false" [hideSelected]="false" [multiple]="false"
                            bindLabel="name" bindValue="name" [initailSelect]="setting?.livechatPosition"
                            [isOpen]="true"></app-ng-select-input>
                    </div>
                </div>
                <div class="col-md-12 card-footer ">
                    <div class="form-group float-end ">
                        <input type="submit" class="btn btn-secondary my-2" value="{{ 'Save Changes' | translate  }}">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- End LiveChat position -->

    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
            <div class="card-header border-0">
                <h4 class="card-title">{{ 'Live Chat Offline/Online Setting' | translate }}</h4>
            </div>
            <form [formGroup]="livechat" (ngSubmit)="LiveChatSettings(livechat, 'livechatLiveChatOfflineSetting')">
                <div class="card-body">
                    <div class="col-xl-12 col-md-6 border-bottom">
                        <div class="form-group">
                            <label class="form-label">{{"Online status Message" | translate }} <span class="text-red">*</span><small><i>({{ 'The message in the input below will be sent to customers as a greeting when live chat operators are online.' | translate }})</i></small></label>
                            <app-text-input classText="form-control" placeholder="Subject"
                                [validationRules]="['required']" nameField="OnlineStatusMessage"
                                [value]="setting?.OnlineStatusMessage" idField="OnlineStatusMessage"></app-text-input>
                        </div>
                    </div>
                    <div class="switch_section my-0 ps-3">
                        <div class="switch-toggle d-flex d-md-max-block mt-4">
                            <a class="onoffswitch2">
                                <app-check-box-input classText="toggle-class onoffswitch2-checkbox enablemenus"
                                    placeholder="Subject" [isRequired]="false" nameField="offlineDisplayLiveChat"
                                    [isChecked]="['1', 'true'].includes(setting?.offlineDisplayLiveChat)? true : false"
                                    idField="offlineDisplayLiveChat"></app-check-box-input>
                            </a>
                            <label class="form-label ps-3 ps-md-max-0">{{ 'Display LiveChat when offline' | translate }} <small><i>({{ 'If enabled, this setting allows customers to see the live chat icon even during offline hours.' | translate }})</i></small></label>
                        </div>
                    </div>
                    <div class="col-xl-12 col-md-6">
                        <div class="form-group">
                            <label class="form-label">{{ 'Offline status Message' | translate }} <span class="text-red">*</span> <small><i>({{ 'This message will be sent to customers as a greeting when they start a new chat outside business hours or on holidays.' | translate }})</i></small></label>
                            <app-text-input classText="form-control " placeholder="Subject"
                                [validationRules]="['required']" nameField="OfflineStatusMessage"
                                [value]="setting?.OfflineStatusMessage" idField="OfflineStatusMessage"></app-text-input>
                        </div>
                    </div>
                    <div class="col-xl-12 col-md-6">
                        <div class="form-group">
                            <label class="form-label">{{ 'Offline Message' | translate }} <span class="text-red">*</span> <small><i>({{ 'This message will be sent to customers as a reply to their message outside business hours or on holidays.' | translate }})</i></small></label>
                            <app-textarea-input classText="form-control " placeholder="Subject"
                                [validationRules]="['required']" nameField="OfflineMessage"
                                [value]="setting?.OfflineMessage" idField="OfflineMessage"></app-textarea-input>
                        </div>
                    </div>
                </div>
                <div class="card-footer ">
                    <div class="form-group mb-0 float-end my-2">
                        <button type="submit" class="btn btn-secondary">{{ 'Save Changes' | translate }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <!-- Auto Solve Setting-->
    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
            <form [formGroup]="livechatAutoSave"
                (ngSubmit)="LiveChatSettings(livechatAutoSave, 'livechatLivechatAutosave')">
                <div class="card-header d-flex justify-content-between align-items-center py-2">
                    <h4 class="card-title">{{ 'Auto Solve' | translate }}</h4>
                    <div class="switch-toggle d-flex mt-4">

                        <a class="onoffswitch2">
                            <label class="custom-switch m-0">
                                <app-check-box-input
                                    classText="toggle-class onoffswitch2-checkbox enablemenus"
                                    placeholder="Subject" [isRequired]="false"
                                    nameField="enableAutoSlove"
                                    [isChecked]="['1', 'true'].includes(setting?.enableAutoSlove)? true : false"
                                    idField="enableAutoSlove"></app-check-box-input>
                            </label>
                        </a>

                        <div class="ps-3">
                            <label class="form-label">{{ 'Enable Auto Solve' | translate }}</label>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mt-4">

                        <label><small class="ms-1"><i>({{ 'If you activate this feature, a notification will be sent to the customer’s email informing them that a response has been sent when there is no reply from their end within the specified time in the first box, measured in minutes. The chat will be automatically closed if the customer fails to respond to the previous email within the time specified in the second input.' | translate  }})</i></small></label>
                        <div class="col-sm-12 col-md-6 col-xxl-4">
                            <div class="form-group ">
                                <label class="form-label">{{ 'No response from the customer email sender timer' |
                                    translate }}</label>
                                <div class="d-flex justify-content-center align-items-center">
                                    <app-number-input maxlength="2" classText="form-control"
                                        nameField="autoSloveEmailTimer" [value]="setting?.autoSloveEmailTimer"
                                        placeholder="Auto Slove Email Timer"></app-number-input>
                                    <span class="ms-2 font-weight-bold">{{"Minutes" | translate}}</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-12 col-md-6 col-xxl-4">
                            <div class="form-group mb-0 ">
                                <label class="form-label">{{ 'After sending the email, resolve the timer' | translate
                                    }}</label>
                                <div class="d-flex justify-content-center align-items-center">
                                    <app-number-input maxlength="2" classText="form-control"
                                        nameField="autoSloveCloseTimer" [value]="setting?.autoSloveCloseTimer"
                                        placeholder="Auto Slove Close Timer"></app-number-input>
                                    <span class="ms-2 font-weight-bold">{{"Minutes" | translate}}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="card-footer ">
                    <div class="form-group mb-0 float-end">
                        <input type="submit" class="btn btn-secondary my-2" value="{{ 'Save Changes' | translate  }}">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- End Auto Solve Setting-->

        <!-- Auto Delete livechat Setting-->
        <div class="col-xl-12 col-lg-12 col-md-12">
            <div class="card ">
                <div class="card-header border-0">
                    <h4 class="card-title">{{ 'Auto Delete livechat'  | translate  }}</h4>
                </div>
                <form [formGroup]="livechatAutoDelete"
                (ngSubmit)="LiveChatSettings(livechatAutoDelete, 'livechatLivechatAutoDelete')">
                    <div class="card-body">
                        <div class="">
                            <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">
                                                <app-check-box-input
                                                classText="toggle-class onoffswitch2-checkbox"
                                                placeholder="AUTO_DELETE_LIVECHAT_ENABLE" [isRequired]="false"
                                                nameField="AUTO_DELETE_LIVECHAT_ENABLE"
                                                [isChecked]="['1', 'true'].includes(setting?.AUTO_DELETE_LIVECHAT_ENABLE)? true : false"
                                                idField="AUTO_DELETE_LIVECHAT_ENABLE"></app-check-box-input>
                                            </a>
                                            <div class="ps-3">
                                                <label class="form-label">{{ 'Auto Delete Livechat'  | translate  }} <small class="text-muted "><i>({{ 'If enabled, chats older than the specified number of days will be automatically deleted.'  | translate  }})</i></small></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12">
                                <div
                                    class="form-group d-flex d-md-max-block">
                                    
                                    <app-number-input maxlength="2" style="width:min-content" classText="form-control w-8 w-lg-max-30 ms-2"
                                        nameField="AUTO_DELETE_LIVECHAT_IN_MONTHS" [value]="setting?.AUTO_DELETE_LIVECHAT_IN_MONTHS"
                                        placeholder="Days"></app-number-input>
                                    <label
                                        class="form-label mt-2 ms-2">{{ 'Auto Delete Livechats In Days'  | translate  }}</label>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="card-footer ">
                        <div class="form-group mb-0 text-end">
                            <button type="submit" class="btn btn-secondary">{{'Save Changes' | translate }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- End Auto Delete livechat Setting-->

    <div class="col-xl-6 col-lg-6 col-md-6">
        <div class="card ">
            <div class="card-header border-0">
                <h4 class="card-title">{{'Livechat Feedback' | translate }}</h4>
            </div>
            <form [formGroup]="feedBack" (ngSubmit)="LiveChatSettings(feedBack, 'livechatFeedbackDropdown')">
                <div class="card-body">

                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-xl-12">
                            <div class="form-group">
                                <label class="form-label">{{ 'Feedback Qeustion' | translate  }} <span class="text-red">*</span> <small><i>({{ 'This is the feedback question for a customer when they are close the chat it will show along with the rating.' | translate  }})</i></small></label>
                                <app-text-input classText="form-control " placeholder="Enter Feedback question"
                                    [validationRules]="['required']" nameField="LivechatCustFeedbackQuestion"
                                    [value]="setting?.LivechatCustFeedbackQuestion" idField="LivechatCustFeedbackQuestion"></app-text-input>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12">
                            <div class="form-group">
                                <label class="form-label">{{'Your problem has been rectified' | translate }}<span class="text-red">*</span> <small><i>({{ 'This is the feedback question for a customer when they are close the chat it will show along with the rating.' | translate  }})</i></small></label>
                                <div class="d-flex">
                                    <app-ng-select-input nameField="livechatFeedbackDropdown" [tagslist]="tagslist"
                                        idField="livechatFeedbackDropdown" classText="form-control nodropdown"
                                        placeholder="Tags" [addTag]="true" [hideSelected]="true" [multiple]="true"
                                        bindLabel="name" bindValue="name" [initailSelect]="initailSelectlivechatFeedbackDropdown"
                                        [isOpen]="false"></app-ng-select-input>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer ">
                    <div class="form-group float-end">
                        <input type="submit" class="btn btn-secondary" value="{{'Save Changes' | translate }}">
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
            <div class="card-header border-0">
                <h4 class="card-title">{{ 'Set a text when multiple operators are online'  | translate  }}</h4>
            </div>
            <form [formGroup]="LivechatCustWelcome"
            (ngSubmit)="LiveChatSettings(LivechatCustWelcome, 'LivechatCustWelcomeMsg')">
                <div class="card-body pt-0">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-xl-12">
                            <div class="form-group">
                                <label class="form-label">{{ 'Multiple Operators Text'| translate }} <span class="text-red">*</span> <small><i>({{ 'When there are multiple livechat operators, customers in the livechat window will see the text provided in the input field below.'| translate }})</i></small></label>
                                <app-text-input classText="form-control " placeholder="Enter Feedback question"
                                [validationRules]="['required']" nameField="LivechatCustWelcomeMsg"
                                [value]="setting?.LivechatCustWelcomeMsg" idField="LivechatCustWelcomeMsg"></app-text-input>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer ">
                    <div class="form-group float-end">
                        <button type="submit" class="btn btn-secondary">{{'Save Changes' | translate }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>