<admin-page-header [title]="'Bot Response Settings'"></admin-page-header>

<div class="row">
    <!-- Bot Resoponse -->
    <div class="col-xl-12 col-lg-12 col-md-12">
        <div class="card ">
            <div class="card-header border-0">
                <h4 class="card-title">{{'Bot Response' | translate}}</h4>
            </div>
            <!-- botsettingstore -->
            <form [formGroup]="responseSetting" (ngSubmit)="botResponse(responseSetting, 'botsettingstore')">
                <div class="form-group">
                    <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"
                                    placeholder="botresponseenable" [isRequired]="false"
                                    nameField="botresponseenable"
                                    [isChecked]="setting?.['botresponseenable'] == 'on'? true : false"
                                    idField="botresponseenable"></app-check-box-input>
                            </a>
                            <label class="form-label ps-3 ps-md-max-0">{{'Enable Bot Response' | translate}}</label>
                            <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you enable this setting, when the customer created tikcet, employees are not answered to that ticket below mentioned time then the "Bot Response" will send to customer.' | translate}})</i></small>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12 col-lg-6">
                            <div class="form-group">
                                <label class="form-label">{{'Bot Name' | translate}} <span class="text-red">*</span></label>
                                <app-text-input
                                nameField = "bot_name"
                                [value]   = "setting?.['bot_name']"
                                idField = "bot_name"
                                classText   = "form-control"
                                placeholder = "Bot Name"
                                [validationRules]="['required']"
                                ></app-text-input>
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-4">
                            <div class="form-group botresponsetime-form-group">
                                <label class="form-label">{{'Bot Response Time' | translate}} ({{'In Minutes / Hours' | translate}}) <span class="text-red">*</span></label>
                                <div class="input-group mb-3 gap-3">
                                    <app-number-input maxlength="2" classText="form-control input-group-prepend"
                                        nameField="botsresponse_time" [value]="setting?.botsresponse_time"
                                        placeholder="botsresponse_time"></app-number-input>
                                    <div>
                                        <app-ng-select-input nameField="time_detection" [tagslist]="timeTypeList" [initailSelect]="setting?.['time_detection']"
                                        idField="time_detection" classText="form-control custom-select select2 mw-10" placeholder="Tags"
                                        [addTag]="false" [hideSelected]="false" [multiple]="false" bindLabel="name" bindValue="value"
                                       [isOpen]="false"></app-ng-select-input>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6">
                            <div class="form-group">
                                <label class="form-label">{{'Working Hours Response' | translate}} <span class="text-red">*</span></label>
                                <app-editor-input 
                                nameField = "response_description"
                                [value] = "setting?.['response_description']"
                                idField = "response_description"
                                classText = ""
                                placeholder = "Response Description"
                                [isRequired] = true
                                ></app-editor-input>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6">
                            <div class="form-group">
                                <label class="form-label">{{'Non-Working Hours Response' | translate}} <span class="text-red">*</span></label>
                                <app-editor-input 
                                nameField = "response_description_exclude_business_hours"
                                [value] = "setting?.['response_description_exclude_business_hours']"
                                idField = "response_description_exclude_business_hours"
                                classText = ""
                                placeholder = "Response Description Exclude Business Hours"
                                [isRequired] = true
                                ></app-editor-input>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="form-group">
                        <label class="form-label">{{'Bot Image' | translate}}</label>
                        <div class="input-group file-browser">
                            <app-file-input nameField="image" idField="image" classText="form-control"
                                placeholder="Upload" value="" accept="image/png, image/jpeg,image/jpg"
                                (valueChanged)="handlePatchValue($event, responseSetting, 'image' )"></app-file-input>
                        </div>
                        <small class="text-muted"><i>{{'The file size should not be more than 5MB' | translate}}</i></small>
                    </div>
                    @if (data?.['bot_imagePreview'] != null){
                        <div class="file-image-1">
                            <div class="product-image custom-ul">
                                <a href="javascript:;">
                                    <img [src]="data?.['bot_imagePreview']" class="br-5" alt="{{setting?.['bot_image']}}">
                                </a>
                                <ul class="icons">
                                    <li><a href="javascript:(0);" class="bg-danger delete-image" (click)="removeBotImage()"><i class="fe fe-trash"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    }
                </div>
                <div class="card-footer clearfix">
                    <div class="col-xl-12 col-lg-12 col-md-12">
                        <label class="form-label">{{'Bot Dynamic fields' | translate}}</label>
                        <div class="d-flex">
                            @for (list of botresposeList; track list.name) {
                                <span class="badge bg-light text-dark me-2"> {{list.name}} </span>
                            }
                        </div>
                    </div>
                </div>
                <div class="card-footer clearfix">
                    <div class="form-group float-end mb-0 btn-list">
                        <button type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- End Bot Resoponse -->
</div>