<?php
defined('ABSPATH') or die('No script kiddies please!!');
$selected_floating_templates = (!empty($ciws_floating_settings['layout']['floating_template'])) ? esc_attr($ciws_floating_settings['layout']['floating_template']) : 'ciws-floating-template-1';
$selected_floating_box_templates = (!empty($ciws_floating_settings['layout']['floating_box_template'])) ? esc_attr($ciws_floating_settings['layout']['floating_box_template']) : 'ciws-floating-box-template-1';
$button_fill_color = (!empty($ciws_floating_settings['layout']['button_fill_color'])) ? esc_attr($ciws_floating_settings['layout']['button_fill_color']) : '#5bd26d';
$button_text_color = (!empty($ciws_floating_settings['layout']['button_title_color'])) ? esc_attr($ciws_floating_settings['layout']['button_title_color']) : '#ffffff';
$button_head = (!empty($ciws_floating_settings['layout']['button_heading'])) ? esc_attr($ciws_floating_settings['layout']['button_heading']) : 'Need Help? Chat with us';
$selected_floating_position = (!empty($ciws_floating_settings['layout']['floating_position'])) ? esc_attr($ciws_floating_settings['layout']['floating_position']) : 'ciws-floating-right';
$customize = (!empty($ciws_floating_settings['layout']['customize_status'])) ? $ciws_floating_settings['layout']['customize_status'] : 0;
if ($customize != 1) {
    $button_fill_color  = '#5bd26d';
    $button_text_color  = '#ffffff';
}
$button_fill_color2 = (!empty($ciws_floating_settings['layout']['button_fill_color'])) ? esc_attr($ciws_floating_settings['layout']['button_fill_color']) : '#5bd26d';
$button_text_color2 = (!empty($ciws_floating_settings['layout']['button_title_color'])) ? esc_attr($ciws_floating_settings['layout']['button_title_color']) : '#ffffff';
$floating_title_text = (!empty($ciws_floating_settings['layout']['floating_title_text'])) ? esc_attr($ciws_floating_settings['layout']['floating_title_text']) : 'Start a Conversation';
$floating_sub_title_text = (!empty($ciws_floating_settings['layout']['floating_sub_title_text'])) ? esc_attr($ciws_floating_settings['layout']['floating_sub_title_text']) : 'Hi! Click one of our member below to chat on WhatsApp';
$floating_reply_info_text = (!empty($ciws_floating_settings['layout']['floating_reply_info_text'])) ? esc_attr($ciws_floating_settings['layout']['floating_reply_info_text']) : 'The team typically replies in a few minutes.';
$icon_img = (!empty($ciws_floating_settings['layout']['icon_img'])) ? $ciws_floating_settings['layout']['icon_img'] : 'ciws-whatsapp';
?>


<div class="ciws-settings-section ciws-settings-floating" data-settings-ref="layout" style="display:none;">

    <div class="ciws-setting-flex">
        <div class="ciws-setting-left">

            <div class="ciws-field-wrap">
                <label>
                    <?php esc_html_e('Button Heading', 'chat-in-website'); ?>
                </label>
                <div class="ciws-field ciws-checkbox-toggle">
                    <input name="ciws_floating_settings[layout][button_heading]" class="floating-button-heading"
                        type="text" value="<?php echo esc_attr($button_head); ?>" required="required" />
                </div>
            </div>

            <div class="ciws-field-wrap">
                <label>
                    <?php esc_html_e('Floating Icon Templates', 'chat-in-website'); ?>
                </label>
                <div class="ciws-field ciws-checkbox-toggle">
                    <select name="ciws_floating_settings[layout][floating_template]"
                        class="ciws-floating-template-dropdown ciws-select-option">

                        <?php for ($i = 1; $i <= 6; $i++) {
                        ?>
                            <option value="ciws-floating-template-<?php echo esc_attr($i); ?>" <?php echo selected($selected_floating_templates, 'ciws-floating-template-' . $i); ?>>
                                <?php esc_html_e('Template', 'chat-in-website'); ?>
                                <?php echo esc_html($i); ?>
                            </option>
                        <?php } ?>
                    </select>

                </div>
            </div>
            <div class="ciws-field-wrap">
                <label>
                    <?php esc_html_e('Icon Selection', 'chat-in-website'); ?>
                </label>
                <div class="ciws-field logo-select">


                    <div class="ciws-logo-template-previews-image">

                        <?php
                        $icons = [
                            'ciws-whatsapp' => 'whatsapp.png',
                            'chat-1' => 'chat-1.png'
                        ];
                        ?>

                        <ul class="ciws-icon-list">
                            <?php foreach ($icons as $logo => $filename): ?>
                                <li class="ciws-icon-prev <?php echo ($icon_img === $logo) ? 'ciws-active' : ''; ?>">
                                    <img data-logo="<?php echo esc_attr($logo); ?>" src="<?php echo esc_url(CIWS_IMG_DIR . '/' . $filename); ?>" class="image" />
                                </li>
                            <?php endforeach; ?>
                        </ul>

                        <input name="ciws_floating_settings[layout][icon_img]" class="floating-icon-img" type="hidden" value="<?php echo esc_attr($icon_img);
                                                                                                                                ?>" />

                    </div>

                </div>

            </div>

            <div class="ciws-field-wrap ciws-floating-box-template <?php echo ($box_status == 'floating') ? '' : esc_attr("ciws-field-hide"); ?>">
                <label>
                    <?php esc_html_e('Floating Box Templates', 'chat-in-website'); ?>
                </label>
                <div class="ciws-field ciws-checkbox-toggle">
                    <select name="ciws_floating_settings[layout][floating_box_template]" class="ciws-floating-box-template-dropdown">

                        <?php for ($i = 1; $i <= 2; $i++) {
                        ?>
                            <option value="ciws-box-template-<?php echo esc_attr($i); ?>" <?php echo selected($selected_floating_box_templates, 'ciws-box-template-' . $i); ?>>
                                <?php esc_html_e('Template', 'chat-in-website'); ?>
                                <?php echo esc_html($i); ?>
                            </option>
                        <?php } ?>
                    </select>

                </div>
            </div>
            <div class="ciws-field-wrap ciws-floating-box-template <?php echo ($box_status == 'floating') ? '' : esc_attr("ciws-field-hide"); ?>">
                <label>
                    <?php esc_html_e('Floating Box Text', 'chat-in-website'); ?>
                </label>
                <div class="ciws-field ciws-checkbox-toggle">
                    <input name="ciws_floating_settings[layout][floating_title_text]" type="text" class="ciws-floating-box-title" value="<?php echo esc_attr($floating_title_text); ?>" required="required" />
                </div>
            </div>
            <div class="ciws-field-wrap ciws-floating-box-template <?php echo ($box_status == 'floating') ? '' : esc_attr("ciws-field-hide"); ?>">
                <label>
                    <?php esc_html_e('Floating Box Sub Text', 'chat-in-website'); ?>
                </label>
                <div class="ciws-field ciws-checkbox-toggle">
                    <input name="ciws_floating_settings[layout][floating_sub_title_text]" type="text" class="ciws-floating-box-sub-title" value="<?php echo esc_attr($floating_sub_title_text); ?>" required="required" />
                </div>
            </div>
            <div class="ciws-field-wrap ciws-floating-box-template <?php echo ($box_status == 'floating') ? '' : esc_attr("ciws-field-hide"); ?>">
                <label>
                    <?php esc_html_e('Floating Box Reply Info Text', 'chat-in-website'); ?>
                </label>
                <div class="ciws-field ciws-checkbox-toggle">
                    <input name="ciws_floating_settings[layout][floating_reply_info_text]" type="text" class="ciws-floating-box-reply-title" value="<?php echo esc_attr($floating_reply_info_text); ?>" required="required" />
                </div>
            </div>
            <?php include('greeting-box-field.php'); ?>                
            <div class="ciws-field-wrap">
                <label>
                    <?php esc_html_e('Customize Status', 'chat-in-website'); ?>
                </label>
                <div class="ciws-field ciws-checkbox-toggle">
                    <input type="checkbox" class="ciws-customize-status" name="ciws_floating_settings[layout][customize_status]" value="1" <?php checked($customize, '1'); ?> />
                    <label></label>
                </div>
            </div>
            <div class="ciws-field-wrap ciws-customize-status-hide <?php echo ($customize != 1) ? esc_attr("ciws-field-hide") : ''; ?>">
                <label>
                    <?php esc_html_e('Button Fill color', 'chat-in-website'); ?>
                </label>
                <div class="ciws-field ">
                    <input type="text" name="ciws_floating_settings[layout][button_fill_color]"
                        class="ciws-form-field ciws-colorpicker ciws-floating-button-fill"
                        value="<?php echo (!empty($ciws_floating_settings['layout']['button_fill_color'])) ? esc_attr($ciws_floating_settings['layout']['button_fill_color']) : ''; ?>" />

                </div>
            </div>

            <div class="ciws-field-wrap ciws-customize-status-hide <?php echo ($customize != 1) ? esc_attr("ciws-field-hide") : ''; ?>">
                <label>
                    <?php esc_html_e('Button Title color', 'chat-in-website'); ?>
                </label>
                <div class="ciws-field ">
                    <input type="text" name="ciws_floating_settings[layout][button_title_color]"
                        class="ciws-form-field ciws-colorpicker ciws-floating-button-text-color"
                        value="<?php echo (!empty($ciws_floating_settings['layout']['button_title_color'])) ? esc_attr($ciws_floating_settings['layout']['button_title_color']) : ''; ?>" />
                </div>
            </div>

            <div class="ciws-field-wrap">
                <label>
                    <?php esc_html_e('Position', 'chat-in-website'); ?>
                </label>
                <div class="ciws-field ciws-checkbox-toggle">
                    <select name="ciws_floating_settings[layout][floating_position]"
                        class="ciws-floating-position-dropdown">


                        <option value="ciws-floating-right" <?php echo selected($selected_floating_position, 'ciws-floating-right'); ?>>
                            <?php esc_html_e('Right', 'chat-in-website'); ?>
                        </option>
                        <option value="ciws-floating-left" <?php echo selected($selected_floating_position, 'ciws-floating-left'); ?>>
                            <?php esc_html_e('Left', 'chat-in-website'); ?>

                        </option>

                    </select>

                </div>
            </div>

        </div>
        
    </div>


</div>