<?php
if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}
if (isset($_POST['save_design_settings']) && isset($_POST['_wpnonce']) && wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['_wpnonce'])), 'doobert-chatbot-settings')) {
    $bubble_icon_bk = isset($_POST['bubble_icon_bk']) ? sanitize_hex_color($_POST['bubble_icon_bk']) : '';
    $bubble_icon_hover_bk = isset($_POST['bubble_icon_hover_bk']) ? sanitize_hex_color($_POST['bubble_icon_hover_bk']) : '';
    $bubble_icon_ic_bk = isset($_POST['bubble_icon_ic_bk']) ? sanitize_hex_color($_POST['bubble_icon_ic_bk']) : '';
    $bubble_icon_border = isset($_POST['bubble_icon_border']) ? sanitize_hex_color($_POST['bubble_icon_border']) : '';
    $bubble_icon_ic_hover_bk = isset($_POST['bubble_icon_ic_hover_bk']) ? sanitize_hex_color($_POST['bubble_icon_ic_hover_bk']) : '';

    $header_bk_color = isset($_POST['header_bk_color']) ? sanitize_hex_color($_POST['header_bk_color']) : '#3181b0';
    $header_font_color = isset($_POST['header_font_color']) ? sanitize_hex_color($_POST['header_font_color']) : '#ffffff';
    $close_icon_bk_color = isset($_POST['close_icon_bk_color']) ? sanitize_hex_color($_POST['close_icon_bk_color']) : '#ffffff';
    $close_icon_front_color = isset($_POST['close_icon_front_color']) ? sanitize_hex_color($_POST['close_icon_front_color']) : '#3181b0';
    $close_icon_border_color = isset($_POST['close_icon_border_color']) ? sanitize_hex_color($_POST['close_icon_border_color']) : '#3181b0';
    $header_logo = isset($_POST['header_logo']) ? sanitize_url($_POST['header_logo']) : '';

    $body_logo = isset($_POST['body_logo']) ? sanitize_url($_POST['body_logo']) : '';
    $cb_body_bk = isset($_POST['cb_body_bk']) ? sanitize_hex_color($_POST['cb_body_bk']) : '#ffffff';
    $cb_default_msg_color = isset($_POST['cb_default_msg_color']) ? sanitize_hex_color($_POST['cb_default_msg_color']) : '#3181b0';
    $cb_body_chat_bk = isset($_POST['cb_body_chat_bk']) ? sanitize_hex_color($_POST['cb_body_chat_bk']) : '#e6e7ec';
    $cb_body_chat_front_color = isset($_POST['cb_body_chat_front_color']) ? sanitize_hex_color($_POST['cb_body_chat_front_color']) : '#000000';
    $cb_body_user_bk = isset($_POST['cb_body_user_bk']) ? sanitize_hex_color($_POST['cb_body_user_bk']) : '#3181b0';
    $cb_body_user_front_color = isset($_POST['cb_body_user_front_color']) ? sanitize_hex_color($_POST['cb_body_user_front_color']) : '#ffffff';
    $scroll_bar_color = isset($_POST['scroll_bar_color']) ? sanitize_hex_color($_POST['scroll_bar_color']) : '#3181b0';
    $send_message_bk = isset($_POST['send_message_bk']) ? sanitize_hex_color($_POST['send_message_bk']) : '#d4d4d4';
    $send_message_button_bk = isset($_POST['send_message_button_bk']) ? sanitize_hex_color($_POST['send_message_button_bk']) : '#3181b0';
    $send_message_button_icon_color = isset($_POST['send_message_button_icon_color']) ? sanitize_hex_color($_POST['send_message_button_icon_color']) : '#ffffff';
    $doobert_chatbot_position = !empty($_POST['doobert_chatbot_position']) ? sanitize_text_field($_POST['doobert_chatbot_position']) : '';
    $array = array(
        'doobert_chatbot_position' => $doobert_chatbot_position,
        'bubble_icon_bk' => $bubble_icon_bk,
        'bubble_icon_hover_bk' => $bubble_icon_hover_bk,
        'bubble_icon_ic_bk' => $bubble_icon_ic_bk,
        'bubble_icon_border' => $bubble_icon_border,
        'bubble_icon_ic_hover_bk' => $bubble_icon_ic_hover_bk,
        'header_bk_color' => $header_bk_color,
        'header_font_color' => $header_font_color,
        'close_icon_bk_color' => $close_icon_bk_color,
        'close_icon_front_color' => $close_icon_front_color,
        'close_icon_border_color' => $close_icon_border_color,
        'header_logo' => $header_logo,
        'body_logo' => $body_logo,
        'cb_body_bk' => $cb_body_bk,
        'cb_default_msg_color' => $cb_default_msg_color,
        'cb_body_chat_bk' => $cb_body_chat_bk,
        'cb_body_chat_front_color' => $cb_body_chat_front_color,
        'cb_body_user_bk' => $cb_body_user_bk,
        'cb_body_user_front_color' => $cb_body_user_front_color,
        'scroll_bar_color' => $scroll_bar_color,
        'send_message_bk' => $send_message_bk,
        'send_message_button_bk' => $send_message_button_bk,
        'send_message_button_icon_color' => $send_message_button_icon_color
    );

    update_option('_doobert_chatbot_design_settings', $array);
}
// delete_option('_doobert_chatbot_design_settings');
$settings_design = get_option('_doobert_chatbot_design_settings');
$bubble_icon_bk = isset($settings_design['bubble_icon_bk']) ? sanitize_hex_color($settings_design['bubble_icon_bk']) : '#ffffff';
$doobert_chatbot_position = isset($settings_design['doobert_chatbot_position']) ? $settings_design['doobert_chatbot_position'] : '';
$bubble_icon_hover_bk = isset($settings_design['bubble_icon_hover_bk']) ? sanitize_hex_color($settings_design['bubble_icon_hover_bk']) : '#8ca7b7';
$bubble_icon_ic_bk = isset($settings_design['bubble_icon_ic_bk']) ? sanitize_hex_color($settings_design['bubble_icon_ic_bk']) : '#3181b0';
$bubble_icon_border = isset($settings_design['bubble_icon_border']) ? sanitize_hex_color($settings_design['bubble_icon_border']) : '#3181b0';
$bubble_icon_ic_hover_bk = isset($settings_design['bubble_icon_ic_hover_bk']) ? sanitize_hex_color($settings_design['bubble_icon_ic_hover_bk']) : '#ffffff';
?>
<form method="post" action="">

    <?php wp_nonce_field('doobert-chatbot-settings'); ?>

    <h3><?php echo esc_html__('Main Bubble Icon Settings', 'doobert-chatbot'); ?></h3>
    <div class="dflex dflexbublle">
        <table class="form-table">
            <tr>
                <th><?php echo esc_html__('Chat Bubble Position', 'doobert-chatbot'); ?></th>
                <td>
                    <select id="doobert_chatbot_position" name="doobert_chatbot_position">
                        <option <?php selected($doobert_chatbot_position, 'right-bottom'); ?> value="right-bottom"><?php echo esc_html__('Right Bottom', 'doobert-chatbot'); ?></option>
                        <option <?php selected($doobert_chatbot_position, 'left-bottom'); ?> value="left-bottom"><?php echo esc_html__('Left Bottom', 'doobert-chatbot'); ?></option>
                        <option <?php selected($doobert_chatbot_position, 'left-center'); ?> value="left-center"><?php echo esc_html__('Left Center', 'doobert-chatbot'); ?></option>
                        <option <?php selected($doobert_chatbot_position, 'right-center'); ?> value="right-center"><?php echo esc_html__('Right Center', 'doobert-chatbot'); ?></option>
                    </select>
                </td>
            </tr>
            <tr>
                <th><?php echo esc_html__('Background Color', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="bubble_icon_bk" value="<?php echo esc_attr($bubble_icon_bk); ?>" /></td>
            </tr>
            <tr>
                <th><?php echo esc_html__('Background Hover Color', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="bubble_icon_hover_bk" value="<?php echo esc_attr($bubble_icon_hover_bk); ?>" /></td>
            </tr>

            <tr>
                <th><?php echo esc_html__('Icon Color', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="bubble_icon_ic_bk" value="<?php echo esc_attr($bubble_icon_ic_bk); ?>" /></td>
            </tr>
            <tr>
                <th><?php echo esc_html__('Icon Hover Color', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="bubble_icon_ic_hover_bk" value="<?php echo esc_attr($bubble_icon_ic_hover_bk); ?>" /></td>
            </tr>

            <tr>
                <th><?php echo esc_html__('Border Color', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="bubble_icon_border" value="<?php echo esc_attr($bubble_icon_border); ?>" /></td>
            </tr>

        </table>
        <div class="bubble_design">
            <div class="bubble_design1">
                <h4><?php echo esc_html__('Chatbot Icon', 'doobert-chatbot'); ?></h4>
                <div class="chat-icon" class="">
                    <svg id="chat_ic_svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="225.000000pt" height="225.000000pt" viewBox="0 0 225.000000 225.000000" preserveAspectRatio="xMidYMid meet">
                        <g transform="translate(0.000000,225.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none" style="fill: red;">
                            <path d="M354 2071 c-98 -33 -144 -91 -169 -208 -21 -100 -21 -579 0 -651 29 -95 109 -161 226 -185 l64 -13 5 -234 c3 -160 9 -235 16 -237 19 -6 138 106 359 338 50 52 97 104 106 115 15 20 29 21 265 27 287 7 331 15 399 78 78 72 87 107 97 399 13 363 -5 470 -90 540 -19 16 -57 34 -84 40 -31 6 -250 10 -596 9 -493 0 -552 -2 -598 -18z m290 -395 c51 -21 76 -60 76 -117 0 -68 -36 -109 -103 -116 -90 -10 -142 35 -142 124 0 41 5 57 25 78 42 46 86 55 144 31z m724 -6 c69 -42 77 -137 16 -197 -28 -29 -38 -33 -86 -33 -82 0 -128 45 -128 125 0 103 108 160 198 105z m-338 -19 c52 -51 52 -125 1 -180 -24 -26 -37 -31 -74 -31 -25 0 -57 4 -71 10 -37 14 -66 67 -66 119 0 36 6 49 34 77 31 31 40 34 91 34 49 0 60 -4 85 -29z"></path>
                            <path d="M1834 1846 c-3 -7 -4 -35 -2 -62 3 -47 4 -49 46 -64 24 -8 48 -23 53 -32 6 -10 11 -165 12 -360 2 -480 12 -461 -256 -466 -118 -2 -174 -7 -180 -15 -4 -7 -7 -61 -6 -122 2 -132 2 -135 -11 -135 -6 0 -71 61 -146 135 l-135 135 -105 0 -104 0 -47 -42 c-56 -50 -82 -80 -83 -91 0 -5 23 -6 51 -2 28 4 96 4 152 0 l102 -7 181 -179 c157 -156 185 -179 212 -179 53 0 66 38 70 213 4 170 -10 153 133 160 142 7 223 57 275 169 l29 63 3 266 c4 330 -8 510 -35 548 -42 57 -194 106 -209 67z"></path>
                        </g>
                    </svg>
                </div>
            </div>

            <div class="bubble_design2">
                <h4><?php echo esc_html__('Hover Icon', 'doobert-chatbot'); ?></h4>
                <div class="chat-icon" class="">
                    <svg id="chat_ic_svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="225.000000pt" height="225.000000pt" viewBox="0 0 225.000000 225.000000" preserveAspectRatio="xMidYMid meet">
                        <g transform="translate(0.000000,225.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none" style="fill: red;">
                            <path d="M354 2071 c-98 -33 -144 -91 -169 -208 -21 -100 -21 -579 0 -651 29 -95 109 -161 226 -185 l64 -13 5 -234 c3 -160 9 -235 16 -237 19 -6 138 106 359 338 50 52 97 104 106 115 15 20 29 21 265 27 287 7 331 15 399 78 78 72 87 107 97 399 13 363 -5 470 -90 540 -19 16 -57 34 -84 40 -31 6 -250 10 -596 9 -493 0 -552 -2 -598 -18z m290 -395 c51 -21 76 -60 76 -117 0 -68 -36 -109 -103 -116 -90 -10 -142 35 -142 124 0 41 5 57 25 78 42 46 86 55 144 31z m724 -6 c69 -42 77 -137 16 -197 -28 -29 -38 -33 -86 -33 -82 0 -128 45 -128 125 0 103 108 160 198 105z m-338 -19 c52 -51 52 -125 1 -180 -24 -26 -37 -31 -74 -31 -25 0 -57 4 -71 10 -37 14 -66 67 -66 119 0 36 6 49 34 77 31 31 40 34 91 34 49 0 60 -4 85 -29z"></path>
                            <path d="M1834 1846 c-3 -7 -4 -35 -2 -62 3 -47 4 -49 46 -64 24 -8 48 -23 53 -32 6 -10 11 -165 12 -360 2 -480 12 -461 -256 -466 -118 -2 -174 -7 -180 -15 -4 -7 -7 -61 -6 -122 2 -132 2 -135 -11 -135 -6 0 -71 61 -146 135 l-135 135 -105 0 -104 0 -47 -42 c-56 -50 -82 -80 -83 -91 0 -5 23 -6 51 -2 28 4 96 4 152 0 l102 -7 181 -179 c157 -156 185 -179 212 -179 53 0 66 38 70 213 4 170 -10 153 133 160 142 7 223 57 275 169 l29 63 3 266 c4 330 -8 510 -35 548 -42 57 -194 106 -209 67z"></path>
                        </g>
                    </svg>
                </div>
            </div>

        </div>
    </div>

    <h3>
        <?php echo esc_html__('Header Area Settings', 'doobert-chatbot'); ?>
    </h3>

    <?php
    $header_bk_color = isset($settings_design['header_bk_color']) ? sanitize_hex_color($settings_design['header_bk_color']) : '#3181b0';
    $header_font_color = isset($settings_design['header_font_color']) ? sanitize_hex_color($settings_design['header_font_color']) : '#ffffff';
    $close_icon_bk_color = isset($settings_design['close_icon_bk_color']) ? sanitize_hex_color($settings_design['close_icon_bk_color']) : '#ffffff';
    $close_icon_front_color = isset($settings_design['close_icon_front_color']) ? sanitize_hex_color($settings_design['close_icon_front_color']) : '#3181b0';
    $close_icon_border_color = isset($settings_design['close_icon_border_color']) ? sanitize_hex_color($settings_design['close_icon_border_color']) : '#3181b0';
    $header_logo = isset($settings_design['header_logo']) ? sanitize_url($settings_design['header_logo']) : '';
    ?>
    <div class="dflex chatbotheader">
        <table class="form-table">
            <tr>
                <th><?php echo esc_html__('Header Background Color', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="header_bk_color" value="<?php echo esc_attr($header_bk_color); ?>"></td>
            </tr>
            <tr>
                <th><?php echo esc_html__('Header Front Color', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="header_font_color" value="<?php echo esc_attr($header_font_color); ?>"></td>
            </tr>
            <tr>
                <th><?php echo esc_html__('Header Logo (112 X 112 recommended)r', 'doobert-chatbot'); ?></th>
                <td><input type="text" class="logo_upload" name="header_logo" value="<?php echo esc_url($header_logo); ?>">
                    <?php
                    if (!empty($header_logo)) {
                    ?>
                        <a href="<?php echo esc_url($header_logo); ?>" target="_blank"><?php echo esc_html__('view', 'doobert-chatbot'); ?></a>&nbsp;
                        <span class="clear_logo">Clear</span>
                    <?php
                    }
                    ?>
                </td>

            </tr>

            <tr>
                <th><?php echo esc_html__('Close Icon Background Color', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="close_icon_bk_color" value="<?php echo esc_attr($close_icon_bk_color); ?>"></td>
            </tr>

            <tr>
                <th><?php echo esc_html__('Close Icon Front Color', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="close_icon_front_color" value="<?php echo esc_attr($close_icon_front_color); ?>"></td>
            </tr>

            <tr>
                <th><?php echo esc_html__('Close Icon Border Color', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="close_icon_border_color" value="<?php echo esc_attr($close_icon_border_color); ?>"></td>
            </tr>
        </table>
        <div class="headerarea">

            <div class="hparent">
                <div class="chat-box show_chat" style="right: 0px;">
                    <div class="chat-close-button">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="40.000000pt" height="40.000000pt" viewBox="0 0 40.000000 40.000000" preserveAspectRatio="xMidYMid meet">
                            <g transform="translate(0.000000,40.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
                                <path d="M66 323 c-3 -4 23 -36 58 -72 l66 -66 -60 -59 c-33 -32 -60 -62 -60 -67 0 -22 29 -5 82 48 l58 57 59 -58 c39 -39 65 -57 77 -54 16 3 11 12 -31 54 -88 88 -87 77 -15 149 49 50 60 66 48 70 -11 5 -35 -13 -75 -54 l-59 -61 -59 60 c-57 58 -74 68 -89 53z"></path>
                            </g>
                        </svg>
                    </div>
                    <div class="chat_header_top">
                        <div class="chat-header">
                            <div class="chat_d_icon"><img src="<?php echo esc_attr(DOOBERT_CHAPI_URL) . 'assets/icon_d2.png' ?>"></div>
                            <h4>Hello!</h4>
                        </div>
                        <div class="langauge_selection_div"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <h3><?php echo esc_html__('Chatbot Body Design Settings', 'doobert-chatbot'); ?></h3>
    <?php
    $body_logo = isset($settings_design['body_logo']) ? sanitize_url($settings_design['body_logo']) : '';
    $cb_body_bk = isset($settings_design['cb_body_bk']) ? sanitize_hex_color($settings_design['cb_body_bk']) : '#ffffff';
    $cb_default_msg_color = isset($settings_design['cb_default_msg_color']) ? sanitize_hex_color($settings_design['cb_default_msg_color']) : '#3181b0';
    $cb_body_chat_bk = isset($settings_design['cb_body_chat_bk']) ? sanitize_hex_color($settings_design['cb_body_chat_bk']) : '#e6e7ec';
    $cb_body_chat_front_color = isset($settings_design['cb_body_chat_front_color']) ? sanitize_hex_color($settings_design['cb_body_chat_front_color']) : '#000000';
    $cb_body_user_bk = isset($settings_design['cb_body_user_bk']) ? sanitize_hex_color($settings_design['cb_body_user_bk']) : '#3181b0';
    $cb_body_user_front_color = isset($settings_design['cb_body_user_front_color']) ? sanitize_hex_color($settings_design['cb_body_user_front_color']) : '#ffffff';
    $scroll_bar_color = isset($settings_design['scroll_bar_color']) ? sanitize_hex_color($settings_design['scroll_bar_color']) : '#3181b0';
    $send_message_placeholder = isset($settings_design['send_message_placeholder']) ? sanitize_text_field(stripslashes($settings_design['send_message_placeholder'])) : 'Type your message...';
    $send_message_bk = isset($settings_design['send_message_bk']) ? sanitize_hex_color($settings_design['send_message_bk']) : '#d4d4d4';
    $send_message_button_bk = isset($settings_design['send_message_button_bk']) ? sanitize_hex_color($settings_design['send_message_button_bk']) : '#3181b0';
    $send_message_button_icon_color = isset($settings_design['send_message_button_icon_color']) ? sanitize_hex_color($settings_design['send_message_button_icon_color']) : '#ffffff';
    ?>
    <div class="dflex chatbody">
        <table class="form-table">
            <tr>
                <th><?php echo esc_html__('Chat Logo (112 X 112 recommended)', 'doobert-chatbot'); ?></th>
                <td><input type="text" class="logo_upload" name="body_logo" value="<?php echo esc_url($body_logo); ?>">
                    <?php
                    if (!empty($body_logo)) {
                    ?>
                        <a href="<?php echo esc_url($body_logo); ?>" target="_blank"><?php echo esc_html__('view', 'doobert-chatbot'); ?></a>&nbsp;
                        <span class="clear_logo">Clear</span>
                    <?php
                    }
                    ?>
                </td>
            </tr>

            <tr>
                <th><?php echo esc_html__('Chatbot Background', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="cb_body_bk" value="<?php echo esc_attr($cb_body_bk); ?>"></td>
            </tr>

            <tr>
                <th><?php echo esc_html__('Default Messages Color and border color', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="cb_default_msg_color" value="<?php echo esc_attr($cb_default_msg_color); ?>"></td>
            </tr>

            <tr>
                <th><?php echo esc_html__('Chatbot Chat response Background', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="cb_body_chat_bk" value="<?php echo esc_attr($cb_body_chat_bk); ?>"></td>
            </tr>

            <tr>
                <th><?php echo esc_html__('Chatbot Chat Front response Color', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="cb_body_chat_front_color" value="<?php echo esc_attr($cb_body_chat_front_color); ?>"></td>
            </tr>

            <tr>
                <th><?php echo esc_html__('User Chat Background', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="cb_body_user_bk" value="<?php echo esc_attr($cb_body_user_bk); ?>"></td>
            </tr>

            <tr>
                <th><?php echo esc_html__('User Chat Front Color', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="cb_body_user_front_color" value="<?php echo esc_attr($cb_body_user_front_color); ?>"></td>
            </tr>

            <tr>
                <th><?php echo esc_html__('Scroll Bar color', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="scroll_bar_color" value="<?php echo esc_attr($scroll_bar_color); ?>"></td>
            </tr>

            <tr>
                <th><?php echo esc_html__('Send Message input Background', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="send_message_bk" value="<?php echo esc_attr($send_message_bk); ?>"></td>
            </tr>

            <tr>
                <th><?php echo esc_html__('Send Message Button Background', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="send_message_button_bk" value="<?php echo esc_attr($send_message_button_bk); ?>"></td>
            </tr>

            <tr>
                <th><?php echo esc_html__('Send Message Button Icon color', 'doobert-chatbot'); ?></th>
                <td><input type="color" name="send_message_button_icon_color" value="<?php echo esc_attr($send_message_button_icon_color); ?>"></td>
            </tr>
        </table>
        <div class="chatbody_data">

            <div class="chat-box" class="show_chat">
                <div class="chat_load">
                    <div id="chat-body">
                        <div id="default_msgs">
                            <div class="columns response_msg">
                                <div class="column actual_chat">
                                    <img class="chat_icon" src="https://doobert.com/nitropack_static/AakKqWoVmAPmegFKSsoJuXCzrYzupsVO/assets/images/optimized/rev-6450b23/doobert.com/wp-content/plugins/doobert-chatbot/assets/icon-paw2.png">
                                    <div class="notification is-success">
                                        <div class="msg notification_part default_msgs_top"><?php echo esc_html__('Hello! What question can I answer for you?', 'doobert-chatbot'); ?></div>
                                    </div>
                                </div>
                            </div>
                            <div class="pre_defined_msg">
                                <div class="pre_button"><?php echo esc_html__('Why shop with Doobert?', 'doobert-chatbot'); ?></div>
                            </div>
                        </div>

                        <div class="chat_time"><?php echo esc_html__('Today', 'doobert-chatbot'); ?><span><?php echo esc_html__('16:49', 'doobert-chatbot'); ?></span></div>
                        <?php
                        for ($i = 1; $i <= 2; $i++) {
                        ?>
                            <div class="messageHistory chat_content">
                                <div class="columns user_msg">
                                    <div class="column is-one-third"></div>
                                    <div class="column user_column">
                                        <div class="notification is-success uchat">
                                            <div class="msg notification_part user_mgs"> <?php echo esc_html__('How do I contact the Doobert Support Team?', 'doobert-chatbot'); ?></div>
                                        </div>
                                        <div class="user_avatar_outer"><img class="user_avatar" src="<?php echo esc_attr(DOOBERT_CHAPI_URL) . 'assets/avatar.png' ?>"></div>
                                    </div>
                                </div>
                                <div class="columns response_msg">
                                    <div class="column actual_chat">
                                        <img src="<?php echo esc_attr(DOOBERT_CHAPI_URL) . 'assets/icon-paw2.png' ?>" class="chat_icon">
                                        <div class="notification is-success reschat">
                                            <div class="msg notification_part response_msg"><?php echo esc_html__('You can contact the Doobert Support Team via email or book a call with one of their dedicated team members', 'doobert-chatbot'); ?> <a target="_blank" class="document_link" href="https://doobert.com/support"><?php echo esc_html__('Support,', 'doobert-chatbot'); ?> </a><?php echo esc_html__('. Their email address is help@doobert.com', 'doobert-chatbot'); ?> <a target="_blank" class="document_link" href="https://doobert.com/organization-faqs-case-management"><?php echo esc_html__('FAQ - Case Management, ', 'doobert-chatbot'); ?></a>.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php
                        }
                        ?>
                    </div>
                    <div id="chat-footer"> <textarea id="message-input" placeholder=""></textarea>
                        <button id="send-message"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20" viewBox="0 0 20 20">
                                <title><?php echo esc_html__('Send', 'doobert-chatbot'); ?></title>
                                <path d="M0 0l20 10-20 10v-20zM0 8v4l10-2-10-2z"></path>
                            </svg></button>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <input type="submit" class="button button-primary" name="save_design_settings" value="<?php echo esc_html__('Save Settings', 'doobert-chatbot'); ?>">
</form>