<div class="tab-pane fade" id="Chatbot" role="tabpanel" aria-labelledby="Chatbot-tab">
    <div class="row">
        <div class="col-xxl-9">
            <!-- section top section -->
            <div class="bda-section-padding-bot ">
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-24 bda-mb-10 title-light">{{__("Bubble")}}</h4>
                            <p>{{__("Customize the bubble of the widget.")}}</p>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Bubble Icon")}}</h4>
                            <p>{{__("Select a suitable SVG icon.")}}</p>
                            @if($chatbotData?->bubble_icon)
                                <a href="{{ getImageUrl($chatbotData?->bubble_icon) }}"
                                   class="primary">{{__("Download Previous")}}</a>
                            @endif
                        </div>
                        <div class="col-md-6 mt-4 mt-md-0">
                            <label for="bubbleIcon"
                                   class="bda-from-control d-flex justify-content-between gap-3 cursor-pointer">
                                <input type="file" id="bubbleIcon" placeholder="" class="d-none file-input"
                                       name="bubble_icon" accept="image/svg+xml">
                                <p class="bia-fs-16 placeholder-color bit-fi-lato file-name">{{__("Choose file")}}</p>
                                <span>
                                    <img class="bda-input-icon-bot" src="{{asset("assets/images/icon/font-file.svg")}}" alt="{{__('Bubble Icon')}}">
                                </span>
                            </label>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Icon Color")}}</h4>
                            <p>{{__("Change the color of your icon.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <div class="d-flex align-items-center justify-content-end h-100">
                                <input type="color" class="bda-bot-form-color"
                                       value="{{$chatbotData->bubble_icon_Color??'#32b3d0'}}" name="bubble_icon_Color"
                                       id="previewBubbleIconColor">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Bubble Background")}}</h4>
                            <p>{{__("Match the Background to your Brand.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <div class="d-flex align-items-center justify-content-end h-100">
                                <input type="color" class="bda-bot-form-color"
                                       value="{{$chatbotData->bubble_background??'#E0A800'}}" name="bubble_background"
                                       id="bubbleBackground">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Bubble Position")}}</h4>
                            <p>{{__("Determine the position of the bubble on the screen.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <select name="bubble_position" class="bda-from-control" name="bubble_position"
                                    id="bubblePosition">
                                <option
                                    value="{{BUBBLE_POSITION_RIGHT}}" {{$chatbotData?->bubble_position == BUBBLE_POSITION_RIGHT?'selected':''}}>{{__("Right")}}</option>
                                <option
                                    value="{{BUBBLE_POSITION_LEFT}}" {{$chatbotData?->bubble_position == BUBBLE_POSITION_LEFT?'selected':''}}>{{_("left")}}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <!-- section top section -->
            <div class="bda-section-padding-bot bda-mt-30">
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-24 bda-mb-10 title-light">{{__("Header")}}</h4>
                            <p>{{__("Customize the header of your chatbot.")}}</p>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Header Logo")}}</h4>
                            <p>{{__("Upload an SVG file to be used in the header. The maximum size
                                is 1KB.")}}</p>
                            @if($chatbotData?->header_logo)
                                <a href="{{ getImageUrl($chatbotData?->header_logo) }}"
                                   class="primary">{{__("Download Previous")}}</a>
                            @endif
                        </div>
                        <div class="col-md-6 mt-4 mt-md-0">
                            <label for="headerLogo"
                                   class="bda-from-control d-flex justify-content-between gap-3 cursor-pointer">
                                <input type="file" id="headerLogo" placeholder="" class="d-none file-input"
                                       name="header_logo">
                                <p class="bia-fs-16 placeholder-color bit-fi-lato file-name">{{__("Choose file")}}</p>
                                <span>
                                      <img class="bda-input-icon-bot"
                                           src="{{asset("assets/images/icon/font-file.svg")}}"
                                           alt="{{__("Header Logo")}}">
                                </span>
                            </label>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Chatbot Title")}}</h4>
                            <p>{{__("Enter the title of your Chatbot.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <div class="d-flex align-items-center justify-content-end h-100">
                                <input type="text" class="bda-from-control" placeholder="{{__("Title")}}"
                                       name="header_title" value="{{$chatbotData?->header_title}}" id="headerTitle">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Title Color")}}</h4>
                            <p>{{__("Change the color of your title.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <div class="d-flex align-items-center justify-content-end h-100">
                                <input type="color" class="bda-bot-form-color"
                                       value="{{$chatbotData->header_title_color??'#32b3d0'}}" name="header_title_color"
                                       id="headerTitleColor">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Chatbot Subtitle")}}</h4>
                            <p>{{__("Enter the Subtitle of your Chatbot.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <input type="text" class="bda-from-control" placeholder="{{__("Subtitle")}}"
                                   value="{{$chatbotData?->header_subtitle}}" name="header_subtitle"
                                   id="headerSubtitle">
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Subtitle Color")}}</h4>
                            <p>{{__("Change the color of your sub title.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <div class="d-flex align-items-center justify-content-end h-100">
                                <input type="color" class="bda-bot-form-color"
                                       value="{{$chatbotData->header_subtitle_color??'#ffffff'}}"
                                       name="header_subtitle_color" id="headerSubtitleColor">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-pt-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Background Color")}}</h4>
                            <p>{{__("The color of your title.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <div class="d-flex align-items-center justify-content-end h-100">
                                <input type="color" class="bda-bot-form-color"
                                       value="{{$chatbotData->header_background_color??'#fff'}}"
                                       name="header_background_color" id="previewHeaderBackgroundColor">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- section top section -->
            <div class="bda-section-padding-bot bda-mt-30">
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-24 bda-mb-10 title-light">{{__("Body")}}</h4>
                            <p>{{__("Customize the body of your chatbot.")}}</p>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Initial Messages")}}</h4>
                            <p>{{__("Enter each message in a new line.")}}</p>
                        </div>
                        <div class="col-md-6 mt-4 mt-md-0">
                            <textarea class="bda-from-control" placeholder="{{__("Messages")}}"
                                      name="body_initial_messages" id="bodyInitialMessages">{{$chatbotData?->body_initial_messages}}</textarea>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Chatbot Message Color")}}</h4>
                            <p>{{__("Change the text color of a chatbot message.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <div class="d-flex align-items-center justify-content-end h-100">
                                <input type="color" class="bda-bot-form-color"
                                       value="{{$chatbotData?->body_chatbot_message_color??'#32b3d0'}}"
                                       name="body_chatbot_message_color" id="ChatbotMessageColor">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Chatbot Message Background")}}</h4>
                            <p>{{__("Change the background of a chatbot message.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <div class="d-flex align-items-center justify-content-end h-100">
                                <input type="color" class="bda-bot-form-color"
                                       value="{{$chatbotData?->body_chatbot_message_background??'#32b3d0'}}"
                                       name="body_chatbot_message_background" id="previewBodyChatbotMessageBackground">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("User Message Color")}}</h4>
                            <p>{{__("Change the text color of a user message.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <div class="d-flex align-items-center justify-content-end h-100">
                                <input type="color" class="bda-bot-form-color"
                                       value="{{$chatbotData?->body_user_message_color??'#32b3d0'}}"
                                       name="body_user_message_color" id="previewBodyUserMessageColor">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("User Message Background")}}</h4>
                            <p>{{__("Change the background of a user message.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <div class="d-flex align-items-center justify-content-end h-100">
                                <input type="color" class="bda-bot-form-color"
                                       value="{{$chatbotData?->body_user_message_background??'#32b3d0'}}"
                                       name="body_user_message_background" id="previewBodyUserMessageBackground">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-pt-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Body Background")}}</h4>
                            <p>{{__("Change the background of the body.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <div class="d-flex align-items-center justify-content-end h-100">
                                <input type="color" class="bda-bot-form-color"
                                       value="{{$chatbotData?->body_background??'#32b3d0'}}" name="body_background"
                                       id="previewBodyBackground">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- section top section -->
            <div class="bda-section-padding-bot bda-mt-30">
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-24 bda-mb-10 title-light">{{__("Footer")}}</h4>
                            <p>{{__("Customize the footer of your chatbot.")}}</p>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Message Placeholder")}}</h4>
                            <p>{{__("Change the message placeholder.")}}</p>
                        </div>
                        <div class="col-md-6 mt-4 mt-md-0">
                            <input type="text" class="bda-from-control" placeholder="{{__("Messages")}}"
                                   name="footer_message_placeholder"
                                   value="{{$chatbotData?->footer_message_placeholder}}" id="footerMessagePlaceholder">
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Message Placeholder Color")}}</h4>
                            <p>{{__("Change the text color of your message placeholder.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <div class="d-flex align-items-center justify-content-end h-100">
                                <input type="color" class="bda-bot-form-color"
                                       value="{{$chatbotData?->footer_message_placeholder_color??'#32b3d0'}}"
                                       name="footer_message_placeholder_color" id="footerMessagePlaceholderColor">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-border-bottom bda-pt-30 bda-pb-30">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Message Color")}}</h4>
                            <p>{{__("Change the text color of your message.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <div class="d-flex align-items-center justify-content-end h-100">
                                <input type="color" class="bda-bot-form-color"
                                       value="{{$chatbotData?->footer_message_color??'#32b3d0'}}"
                                       name="footer_message_color" id="previewFooterMessageColor">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- single sub section -->
                <div class="bda-sub-section-bot bda-pt-30 ">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="bda-fs-18 bda-mb-10 title-light">{{__("Footer Background")}}</h4>
                            <p>{{__("Change the Background of the footer.")}}</p>
                        </div>
                        <div class="col-md-6  mt-4 mt-md-0">
                            <div class="d-flex align-items-center justify-content-end h-100">
                                <input type="color" class="bda-bot-form-color"
                                       value="{{$chatbotData?->footer_background??'#32b3d0'}}" name="footer_background"
                                       id="footerBackground">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('user.chatbot.partial.chat-window')
    </div>
</div>
