<?php

/**
 * OKE WA UIs
 *
 * User Interface class which will contain
 * UI for the front and admin panel
 */
class okewa_ui {

	/**
	 * @var array $agents
	 * @var array $settings
	 */
	public $agents;
	public $settings;
	public $btns_order;

	/**
	 * Dump everything for this class here
	 *
	 * @since 1.0
	 */
	public function __construct() {

		// Pull stored data
		$this->agents  = get_option( 'okewa_agents' );
		$this->settings = get_option( 'okewa_settings' );

		// Buttons Sorting
		$this->btns_order = explode( '&', str_replace( 'sort=', '', isset($this->agents['btns_order']) ? $this->agents['btns_order'] : '' ) );	

	}


	/**
	 * Admin Page UI
	 *
	 * @since 1.0
	 */
	public function admin_page() {
		?>
        <div class="wrap" id="okewa-wrap">
            <h1>
				<?php echo get_admin_page_title(); ?>
            </h1>
            <form method="post" action="options.php">
				<?php

				// Button builder
				$this->agent_builder();

				// General settings
				$this->general_settings();

				?>
            </form>
        </div>
		<?php
	}


	/**
	 * Button Builder UI Part
	 *
	 * @since 1.0
	 */
	public function agent_builder() {
		?>
        <div class="okewa-panel">
			<?php settings_fields( 'okewa_storage' ); ?>
            <input type="hidden" name="okewa_agents[btns_order]" id="okewa-btns-order"
                   value="<?php echo $this->agents['btns_order'] ?>">
            <header class="okewa-panel-header">
				<?php _e( 'Manage Agents', 'okewa-text-domain' ); ?>
            </header>
            <div class="okewa-panel-body">
                <p><?php _e( 'Click button below to add agents. You can drag and drop the agent to reorder them. Click each item to setup more configuration.', 'okewa-text-domain' ); ?></p>
                <p><a href="#" class="button okewa-add-btn"><?php _e( 'Add Agent', 'okewa-text-domain' ); ?></a></p>

                <ul id="okewa-sortable-buttons">
					<?php

					// Buttons exists
					if ( isset( $this->agents['btns'] ) ) {

						// Buttons loop + ordering
						foreach ( $this->btns_order AS $btn_key => $btn_id ) {
							?>
                            <li id="okewa_btn_<?php echo $btn_id; ?>">
                                <header>
                                    <i class="fa fa-caret-down" aria-hidden="true"></i>
									<strong>Agent:</strong> <?php echo $this->agents['btns'][ $btn_id ]['name']; ?>
                                </header>
                                <div class="okewa-btn-body">
                                    <div class="okewa-body-left">
                                        <p>
                                            <label for="agent-name-<?php echo $btn_id; ?>">Agent Name</label>
                                            <input type="text"
                                                   id="agent-name-<?php echo $btn_id; ?>"
                                                   class="widefat"
                                                   name="okewa_agents[btns][<?php echo $btn_id; ?>][name]"
                                                   value="<?php echo $this->agents['btns'][ $btn_id ]['name']; ?>">
                                        </p>
                                        <p>
                                            <label for="agent-number-<?php echo $btn_id; ?>">Whatsapp Number</label>
                                            <input type="text"
                                                   placeholder="62"
                                                   id="agent-number-<?php echo $btn_id; ?>"
                                                   class="widefat"
                                                   name="okewa_agents[btns][<?php echo $btn_id; ?>][number]"
                                                   value="<?php echo $this->agents['btns'][ $btn_id ]['number']; ?>">
                                        </p>
                                        <p>
                                            <label for="agent-position-<?php echo $btn_id; ?>">Agent Position</label>
                                            <input type="text"
                                                   placeholder="Customer Support <?php echo $btn_id; ?>"
                                                   id="agent-position-<?php echo $btn_id; ?>"
                                                   class="widefat"
                                                   name="okewa_agents[btns][<?php echo $btn_id; ?>][position]"
                                                   value="<?php echo $this->agents['btns'][ $btn_id ]['position']; ?>">
                                        </p>
                                        <p>
                                            <label for="agent-photo-<?php echo $btn_id; ?>">Profile Picture</label>
                                            <input type="text"
                                                   placeholder="Link to your picture file (jpg/png)"
                                                   id="agent-photo-<?php echo $btn_id; ?>"
                                                   class="widefat"
                                                   name="okewa_agents[btns][<?php echo $btn_id; ?>][photo]"
                                                   value="<?php echo $this->agents['btns'][ $btn_id ]['photo']; ?>">
                                        </p>
                                        <p>
                                            <label for="agent-shortbio-<?php echo $btn_id; ?>">Short Biography</label>
                                            <input type="text"
                                                   placeholder="140 character about agent"
                                                   id="agent-shortbio-<?php echo $btn_id; ?>"
                                                   class="widefat"
                                                   name="okewa_agents[btns][<?php echo $btn_id; ?>][shortbio]"
                                                   value="<?php echo $this->agents['btns'][ $btn_id ]['shortbio']; ?>">
                                        </p>
                                        <p>
                                            <label for="agent-intro-<?php echo $btn_id; ?>">Greeting Chat</label>
                                            <input type="text"
                                                   placeholder="Hi, What can i do for you?"
                                                   id="agent-intro-<?php echo $btn_id; ?>"
                                                   class="widefat"
                                                   name="okewa_agents[btns][<?php echo $btn_id; ?>][intro]"
                                                   value="<?php echo $this->agents['btns'][ $btn_id ]['intro']; ?>">
                                        </p>
                                    </div>
                                    <div class="okewa-body-right">
                                        <p>
                                            <label>Availability</label>
                                            <input type="checkbox"
                                                   id="agent-avail-0-day-<?php echo $btn_id; ?>"
                                                   class="open-new-window"
                                                   name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_0_day]"
                                                   value="1"
												<?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_0_day'] ) && $this->agents['btns'][ $btn_id ]['avail_0_day'] == 1 ) ? ' checked="checked"' : ''; ?>>
											<label class="inline" for="agent-avail-0-day-<?php echo $btn_id; ?>">Sunday</label>
											<select id="agent-avail-0-start-<?php echo $btn_id; ?>" name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_0_start]">
											    <?php for($i = 0; $i < 24; $i++): ?>
                                                  <option <?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_0_start'] ) && $this->agents['btns'][ $btn_id ]['avail_0_start'] == $i ) ? ' selected="selected"' : ''; ?> value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
                                                <?php endfor ?>
                                            </select> - 
											<select id="agent-avail-0-end-<?php echo $btn_id; ?>" name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_0_end]">
											    <?php for($i = 0; $i < 24; $i++): ?>
                                                  <option <?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_0_end'] ) && $this->agents['btns'][ $btn_id ]['avail_0_end'] == $i ) ? ' selected="selected"' : ''; ?> value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
                                                <?php endfor ?>
                                            </select>
                                        </p>
                                        <p>
                                            <input type="checkbox"
                                                   id="agent-avail-1-day-<?php echo $btn_id; ?>"
                                                   class="open-new-window"
                                                   name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_1_day]"
                                                   value="1"
												<?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_1_day'] ) && $this->agents['btns'][ $btn_id ]['avail_1_day'] == 1 ) ? ' checked="checked"' : ''; ?>>
											<label class="inline" for="agent-avail-1-day-<?php echo $btn_id; ?>">Monday</label>
											<select id="agent-avail-1-start-<?php echo $btn_id; ?>" name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_1_start]">
											    <?php for($i = 0; $i < 24; $i++): ?>
                                                  <option <?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_1_start'] ) && $this->agents['btns'][ $btn_id ]['avail_1_start'] == $i ) ? ' selected="selected"' : ''; ?> value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
                                                <?php endfor ?>
                                            </select> - 
											<select id="agent-avail-1-end-<?php echo $btn_id; ?>" name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_1_end]">
											    <?php for($i = 0; $i < 24; $i++): ?>
                                                  <option <?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_1_end'] ) && $this->agents['btns'][ $btn_id ]['avail_1_end'] == $i ) ? ' selected="selected"' : ''; ?> value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
                                                <?php endfor ?>
                                            </select>
                                        </p>
                                        <p>
                                            <input type="checkbox"
                                                   id="agent-avail-2-day-<?php echo $btn_id; ?>"
                                                   class="open-new-window"
                                                   name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_2_day]"
                                                   value="1"
												<?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_2_day'] ) && $this->agents['btns'][ $btn_id ]['avail_2_day'] == 1 ) ? ' checked="checked"' : ''; ?>>
											<label class="inline" for="agent-avail-2-day-<?php echo $btn_id; ?>">Tueday</label>
											<select id="agent-avail-2-start-<?php echo $btn_id; ?>" name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_2_start]">
											    <?php for($i = 0; $i < 24; $i++): ?>
                                                  <option <?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_2_start'] ) && $this->agents['btns'][ $btn_id ]['avail_2_start'] == $i ) ? ' selected="selected"' : ''; ?> value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
                                                <?php endfor ?>
                                            </select> - 
											<select id="agent-avail-2-end-<?php echo $btn_id; ?>" name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_2_end]">
											    <?php for($i = 0; $i < 24; $i++): ?>
                                                  <option <?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_2_end'] ) && $this->agents['btns'][ $btn_id ]['avail_2_end'] == $i ) ? ' selected="selected"' : ''; ?> value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
                                                <?php endfor ?>
                                            </select>
                                        </p>
                                        <p>
                                            <input type="checkbox"
                                                   id="agent-avail-3-day-<?php echo $btn_id; ?>"
                                                   class="open-new-window"
                                                   name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_3_day]"
                                                   value="1"
												<?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_3_day'] ) && $this->agents['btns'][ $btn_id ]['avail_3_day'] == 1 ) ? ' checked="checked"' : ''; ?>>
											<label class="inline" for="agent-avail-3-day-<?php echo $btn_id; ?>">Wednesday</label>
											<select id="agent-avail-3-start-<?php echo $btn_id; ?>" name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_3_start]">
											    <?php for($i = 0; $i < 24; $i++): ?>
                                                  <option <?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_3_start'] ) && $this->agents['btns'][ $btn_id ]['avail_3_start'] == $i ) ? ' selected="selected"' : ''; ?> value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
                                                <?php endfor ?>
                                            </select> - 
											<select id="agent-avail-3-end-<?php echo $btn_id; ?>" name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_3_end]">
											    <?php for($i = 0; $i < 24; $i++): ?>
                                                  <option <?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_3_end'] ) && $this->agents['btns'][ $btn_id ]['avail_3_end'] == $i ) ? ' selected="selected"' : ''; ?> value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
                                                <?php endfor ?>
                                            </select>
                                        </p>
                                        <p>
                                            <input type="checkbox"
                                                   id="agent-avail-4-day-<?php echo $btn_id; ?>"
                                                   class="open-new-window"
                                                   name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_4_day]"
                                                   value="1"
												<?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_4_day'] ) && $this->agents['btns'][ $btn_id ]['avail_4_day'] == 1 ) ? ' checked="checked"' : ''; ?>>
											<label class="inline" for="agent-avail-4-day-<?php echo $btn_id; ?>">Thursday</label>
											<select id="agent-avail-4-start-<?php echo $btn_id; ?>" name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_4_start]">
											    <?php for($i = 0; $i < 24; $i++): ?>
                                                  <option <?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_4_start'] ) && $this->agents['btns'][ $btn_id ]['avail_4_start'] == $i ) ? ' selected="selected"' : ''; ?> value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
                                                <?php endfor ?>
                                            </select> - 
											<select id="agent-avail-4-end-<?php echo $btn_id; ?>" name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_4_end]">
											    <?php for($i = 0; $i < 24; $i++): ?>
                                                  <option <?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_4_end'] ) && $this->agents['btns'][ $btn_id ]['avail_4_end'] == $i ) ? ' selected="selected"' : ''; ?> value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
                                                <?php endfor ?>
                                            </select>
                                        </p>                                        
                                        <p>
                                            <input type="checkbox"
                                                   id="agent-avail-5-day-<?php echo $btn_id; ?>"
                                                   class="open-new-window"
                                                   name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_5_day]"
                                                   value="1"
												<?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_5_day'] ) && $this->agents['btns'][ $btn_id ]['avail_5_day'] == 1 ) ? ' checked="checked"' : ''; ?>>
											<label class="inline" for="agent-avail-5-day-<?php echo $btn_id; ?>">Friday</label>
											<select id="agent-avail-5-start-<?php echo $btn_id; ?>" name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_5_start]">
											    <?php for($i = 0; $i < 24; $i++): ?>
                                                  <option <?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_5_start'] ) && $this->agents['btns'][ $btn_id ]['avail_5_start'] == $i ) ? ' selected="selected"' : ''; ?> value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
                                                <?php endfor ?>
                                            </select> - 
											<select id="agent-avail-5-end-<?php echo $btn_id; ?>" name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_5_end]">
											    <?php for($i = 0; $i < 24; $i++): ?>
                                                  <option <?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_5_end'] ) && $this->agents['btns'][ $btn_id ]['avail_5_end'] == $i ) ? ' selected="selected"' : ''; ?> value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
                                                <?php endfor ?>
                                            </select>
                                        </p>                                        
                                        <p>
                                            <input type="checkbox"
                                                   id="agent-avail-6-day-<?php echo $btn_id; ?>"
                                                   class="open-new-window"
                                                   name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_6_day]"
                                                   value="1"
												<?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_6_day'] ) && $this->agents['btns'][ $btn_id ]['avail_6_day'] == 1 ) ? ' checked="checked"' : ''; ?>>
											<label class="inline" for="agent-avail-6-day-<?php echo $btn_id; ?>">Saturday</label>
											<select id="agent-avail-6-start-<?php echo $btn_id; ?>" name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_6_start]">
											    <?php for($i = 0; $i < 24; $i++): ?>
                                                  <option <?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_6_start'] ) && $this->agents['btns'][ $btn_id ]['avail_6_start'] == $i ) ? ' selected="selected"' : ''; ?> value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
                                                <?php endfor ?>
                                            </select> - 
											<select id="agent-avail-6-end-<?php echo $btn_id; ?>" name="okewa_agents[btns][<?php echo $btn_id; ?>][avail_6_end]">
											    <?php for($i = 0; $i < 24; $i++): ?>
                                                  <option <?php echo ( isset( $this->agents['btns'][ $btn_id ]['avail_6_end'] ) && $this->agents['btns'][ $btn_id ]['avail_6_end'] == $i ) ? ' selected="selected"' : ''; ?> value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
                                                <?php endfor ?>
                                            </select>
                                        </p>                                        
                                    </div>
                                    <div class="okewa-btn-controls">
                                        <a href="#" class="okewa-remove-btn">Delete</a> |
                                        <a href="#" class="okewa-close-btn">Close</a>
                                    </div>
                                </div>
                            </li>
							<?php
						}
					}
					?>
                </ul>

            </div>
            <footer class="okewa-panel-footer">
                <input type="submit" class="button-primary"
                       value="<?php _e( 'Save Agents', 'okewa-text-domain' ); ?>">
            </footer>
        </div>
		<?php
		return true;
	}


	/**
	 * General Settings UI Part
	 *
	 * @since 1.0
	 */
	public
	function general_settings() {
		?>
        <div class="okewa-panel">
			<?php settings_fields( 'okewa_storage' ); ?>
            <header class="okewa-panel-header">
				<?php _e( 'General Settings', 'okewa-text-domain' ); ?>
            </header>
            <h3 class="okewa-panel-title">
                <?php _e( 'Widget', 'okewa-text-domain' ); ?>
            </h3>
            <div class="okewa-panel-body">
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-widget-col">
                            <strong><?php _e( 'Widget Color', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <input type="text"
                               name="okewa_settings[widget_col]"
                               id="okewa-widget-col" class="widefat okewa-colorpicker"
                               value="<?php echo isset( $this->settings['widget_col'] ) ? $this->settings['widget_col'] : '#0dc152' ?>">
                    </div>
                </div>
                
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-pos-left">
                            <strong><?php _e( 'Widget Position', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <label for="okewa-pos-left">
                            <input type="radio"
                                   name="okewa_settings[widget_pos]"
                                   id="okewa-pos-left"
                                   value="left"
								<?php echo ( isset( $this->settings['widget_pos'] ) && $this->settings['widget_pos'] == 'left' ) ? ' checked="checked"' : ''; ?>>
							<?php _e( 'Left', 'okewa-text-domain' ); ?>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <label for="okewa-pos-right">
                            <input type="radio"
                                   name="okewa_settings[widget_pos]"
                                   id="okewa-pos-right"
                                   value="right"
								<?php echo ( isset( $this->settings['widget_pos'] ) && $this->settings['widget_pos'] == 'right' ) ? ' checked="checked"' : ''; ?>>
							<?php _e( 'Right', 'okewa-text-domain' ); ?>
                        </label>
                    </div>
                </div>
                
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-style-1">
                            <strong><?php _e( 'Widget Style', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col imagecol">
                        <label for="okewa-style-1">
                            <input type="radio"
                                   name="okewa_settings[widget_style]"
                                   id="okewa-style-1"
                                   value="1"
								<?php echo ( isset( $this->settings['widget_style'] ) && $this->settings['widget_style'] == '1' ) ? ' checked="checked"' : ''; ?>>
							<img class="okewa-style-img" src="<?php echo plugins_url( 'assets/img/btn-1.png' , __FILE__ ); ?>" />
                        </label>
                    </div>
                    <div class="okewa-col imagecol">
                        <label for="okewa-style-2">
                            <input type="radio"
                                   name="okewa_settings[widget_style]"
                                   id="okewa-style-2"
                                   value="2"
								<?php echo ( isset( $this->settings['widget_style'] ) && $this->settings['widget_style'] == '2' ) ? ' checked="checked"' : ''; ?>>
							<img class="okewa-style-img" src="<?php echo plugins_url( 'assets/img/btn-2.png' , __FILE__ ); ?>" />
                        </label>
                    </div>
                    <div class="okewa-col imagecol">
                        <label for="okewa-style-3">
                            <input type="radio"
                                   name="okewa_settings[widget_style]"
                                   id="okewa-style-3"
                                   value="3"
								<?php echo ( isset( $this->settings['widget_style'] ) && $this->settings['widget_style'] == '3' ) ? ' checked="checked"' : ''; ?>>
							<img class="okewa-style-img" src="<?php echo plugins_url( 'assets/img/btn-3.png' , __FILE__ ); ?>" />
                        </label>
                    </div>
                </div>

                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-mode-1">
                            <strong><?php _e( 'Widget Mode', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <label for="okewa-mode-1">
                            <input type="radio"
                                   name="okewa_settings[widget_mode]"
                                   id="okewa-mode-1"
                                   value="1"
								<?php echo ( isset( $this->settings['widget_mode'] ) && $this->settings['widget_mode'] == '1' ) ? ' checked="checked"' : ''; ?>>
							<?php _e( 'Reply Mode', 'okewa-text-domain' ); ?>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <label for="okewa-mode-2">
                            <input type="radio"
                                   name="okewa_settings[widget_mode]"
                                   id="okewa-mode-2"
                                   value="2"
								<?php echo ( isset( $this->settings['widget_mode'] ) && $this->settings['widget_mode'] == '2' ) ? ' checked="checked"' : ''; ?>>
							<?php _e( 'Direct Mode', 'okewa-text-domain' ); ?>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <label for="okewa-mode-3">
                            <input type="radio"
                                   name="okewa_settings[widget_mode]"
                                   id="okewa-mode-3"
                                   value="3"
								<?php echo ( isset( $this->settings['widget_mode'] ) && $this->settings['widget_mode'] == '3' ) ? ' checked="checked"' : ''; ?>>
							<?php _e( 'Rotation Mode', 'okewa-text-domain' ); ?>
                        </label>
                    </div>
                </div>

                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-widget-title">
                            <strong><?php _e( 'Widget Title', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col doublecol">
                        <input type="Text"
                               placeholder="Need help? Let's chat with us!"
                               name="okewa_settings[widget_title]"
                               id="okewa-widget-title" class="widefat"
                               value="<?php echo isset( $this->settings['widget_title'] ) ? $this->settings['widget_title'] : '' ?>">

                    </div>
                </div>
                
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-widget-desc">
                            <strong><?php _e( 'Widget Description', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col doublecol">
                        <textarea cols="2"
                               placeholder="We are here to help you! Do not hesitate to ask us anything. Click below to start chat."
                               name="okewa_settings[widget_desc]"
                               id="okewa-widget-desc" class="widefat"><?php echo isset( $this->settings['widget_desc'] ) ? $this->settings['widget_desc'] : '' ?></textarea>
                    </div>
                </div>

                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-widget-replyto">
                            <strong><?php _e( 'Reply-to Text', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col doublecol">
                        <input type="Text"
                               placeholder="Reply to"
                               name="okewa_settings[widget_replyto]"
                               id="okewa-widget-replyto" class="widefat"
                               value="<?php echo isset( $this->settings['widget_replyto'] ) ? $this->settings['widget_replyto'] : '' ?>">

                    </div>
                </div>
                
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-widget-auto">
                            <strong><?php _e( 'Auto Open on', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <input type="number"
                               name="okewa_settings[widget_auto]"
                               id="okewa-widget-auto" class="small-text"
                               value="<?php echo isset( $this->settings['widget_auto'] ) ? intval( $this->settings['widget_auto'] ) : '' ?>">
                        <?php _e( 'Seconds', 'okewa-text-domain' ); ?>
                        <small><?php _e( '(leave blank or 0 to disable)<br>Desktop Only', 'okewa-text-domain' ); ?></small>
                    </div>
                </div>
                
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-z-index">
                            <strong><?php _e( 'Z-Index', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <input type="number"
                               name="okewa_settings[widget_z_index]"
                               id="okewa-z-index" class="small-text"
                               value="<?php echo isset( $this->settings['widget_z_index'] ) ? intval( $this->settings['widget_z_index'] ) : 999 ?>">

                    </div>
                </div>

                <div class="okewa-row">
                    <div class="okewa-col">
                        <label>
                            <strong><?php _e( 'Show Widget On', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <p>
                            <label for="show-on-pages">
                                <input type="checkbox"
                                       name="okewa_settings[show_on_pages]"
                                       id="show-on-pages"
                                       value="1"
									<?php echo ( isset( $this->settings['show_on_pages'] ) && $this->settings['show_on_pages'] == 1 ) ? ' checked="checked"' : ''; ?>>
								<?php _e( 'Pages', 'okewa-text-domain' ); ?>
                            </label>
                        </p>
                        <p>
                            <label for="show-on-posts">
                                <input type="checkbox"
                                       name="okewa_settings[show_on_posts]"
                                       id="show-on-posts"
                                       value="1"
									<?php echo ( isset( $this->settings['show_on_posts'] ) && $this->settings['show_on_posts'] == 1 ) ? ' checked="checked"' : ''; ?>>
								<?php _e( 'Posts', 'okewa-text-domain' ); ?>
                            </label>
                        </p>
                        <p>
                            <label for="show-on-products">
                                <input type="checkbox"
                                       name="okewa_settings[show_on_products]"
                                       id="show-on-products"
                                       value="1"
									<?php echo ( isset( $this->settings['show_on_products'] ) && $this->settings['show_on_products'] == 1 ) ? ' checked="checked"' : ''; ?>>
								<?php _e( 'Products', 'okewa-text-domain' ); ?>
                            </label>
                        </p>
                        <p>
                            <label for="show-on-frontpage">
                                <input type="checkbox"
                                       name="okewa_settings[show_on_frontpage]"
                                       id="show-on-frontpage"
                                       value="1"
									<?php echo ( isset( $this->settings['show_on_frontpage'] ) && $this->settings['show_on_frontpage'] == 1 ) ? ' checked="checked"' : ''; ?>>
								<?php _e( 'Front Page', 'okewa-text-domain' ); ?>
                            </label>
                        </p>
                    </div>
                </div>

                <div class="okewa-row">
                    <div class="okewa-col">
                        <label>
                            <strong><?php _e( 'Disable Widget On', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <p>
                            <label for="disable-desktop">
                                <input type="checkbox"
                                       name="okewa_settings[disable_desktop]"
                                       id="disable-desktop"
                                       value="1"
									<?php echo ( isset( $this->settings['disable_desktop'] ) && $this->settings['disable_desktop'] == 1 ) ? ' checked="checked"' : ''; ?>>
								<?php _e( 'Desktop', 'okewa-text-domain' ); ?>
                            </label>
                        </p>
                        <p>
                            <label for="disable-mobile">
                                <input type="checkbox"
                                       name="okewa_settings[disable_mobile]"
                                       id="disable-mobile"
                                       value="1"
									<?php echo ( isset( $this->settings['disable_mobile'] ) && $this->settings['disable_mobile'] == 1 ) ? ' checked="checked"' : ''; ?>>
								<?php _e( 'Mobile', 'okewa-text-domain' ); ?>
                            </label>
                        </p>
                    </div>
                </div>                
            </div>
            
            <h3 class="okewa-panel-title">
                <?php _e( 'Woocommerce', 'okewa-text-domain' ); ?>
            </h3>
            <div class="okewa-panel-body">
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-woo-btn">
                            <strong><?php _e( 'Enable Whatsapp Order Button', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <label for="okewa-woo-btn">
                            <input type="checkbox"
                                   name="okewa_settings[woo_btn]"
                                   id="okewa-woo-btn"
                                   value="1"
								<?php echo ( isset( $this->settings['woo_btn'] ) && $this->settings['woo_btn'] == 1 ) ? ' checked="checked"' : ''; ?>>
                        </label>
                    </div>
                </div>
                
                <div class="okewa-woo-option">
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-woo-btn-number">
                            <strong><?php _e( 'Whatsapp Number Destination For Order', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col doublecol">
                        <input type="text"
                               placeholder="62"
                               name="okewa_settings[woo_btn_number]"
                               id="okewa-woo-btn-number" class="widefat"
                               value="<?php echo isset( $this->settings['woo_btn_number'] ) ? $this->settings['woo_btn_number'] : '' ?>">
                    </div>
                </div>
                
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-woo-btn-text">
                            <strong><?php _e( 'Order Button Text', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col doublecol">
                        <input type="text"
                               placeholder="Order via Whatsapp"
                               name="okewa_settings[woo_btn_text]"
                               id="okewa-woo-btn-text" class="widefat"
                               value="<?php echo isset( $this->settings['woo_btn_text'] ) ? $this->settings['woo_btn_text'] : '' ?>">
                    </div>
                </div>
                
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-woo-btn-style-1">
                            <strong><?php _e( 'Order Button Style', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col imagecol">
                        <label for="okewa-woo-btn-style-1">
                            <input type="radio"
                                   name="okewa_settings[woo_btn_style]"
                                   id="okewa-woo-btn-style-1"
                                   value="1"
								<?php echo ( isset( $this->settings['woo_btn_style'] ) && $this->settings['woo_btn_style'] == '1' ) ? ' checked="checked"' : ''; ?>>
							<img class="okewa-style-img" src="<?php echo plugins_url( 'assets/img/btn-style-1.png' , __FILE__ ); ?>" />
                        </label>
                    </div>
                    <div class="okewa-col imagecol">
                        <label for="okewa-woo-btn-style-2">
                            <input type="radio"
                                   name="okewa_settings[woo_btn_style]"
                                   id="okewa-woo-btn-style-2"
                                   value="2"
								<?php echo ( isset( $this->settings['woo_btn_style'] ) && $this->settings['woo_btn_style'] == '2' ) ? ' checked="checked"' : ''; ?>>
							<img class="okewa-style-img" src="<?php echo plugins_url( 'assets/img/btn-style-2.png' , __FILE__ ); ?>" />
                        </label>
                    </div>
                    <div class="okewa-col imagecol">
                        <label for="okewa-woo-btn-style-3">
                            <input type="radio"
                                   name="okewa_settings[woo_btn_style]"
                                   id="okewa-woo-btn-style-3"
                                   value="3"
								<?php echo ( isset( $this->settings['woo_btn_style'] ) && $this->settings['woo_btn_style'] == '3' ) ? ' checked="checked"' : ''; ?>>
							<img class="okewa-style-img" src="<?php echo plugins_url( 'assets/img/btn-style-3.png' , __FILE__ ); ?>" />
                        </label>
                    </div>
                </div>
                
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-woo-btn-col">
                            <strong><?php _e( 'Order Button Color', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <input type="text"
                               name="okewa_settings[woo_btn_col]"
                               id="okewa-woo-btn-col" class="widefat okewa-colorpicker"
                               value="<?php echo isset( $this->settings['woo_btn_col'] ) ? $this->settings['woo_btn_col'] : '#0dc152' ?>">
                    </div>
                </div>
                
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-woo-atc">
                            <strong><?php _e( 'Disable Add To Cart Button', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <label for="okewa-woo-atc">
                            <input type="checkbox"
                                   name="okewa_settings[woo_disable_atc]"
                                   id="okewa-woo-atc"
                                   value="1"
								<?php echo ( isset( $this->settings['woo_disable_atc'] ) && $this->settings['woo_disable_atc'] == 1 ) ? ' checked="checked"' : ''; ?>>
                        </label>
                    </div>
                </div>
                
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-woo-prefix">
                            <strong><?php _e( 'Prefix Text Order on Whatsapp', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col doublecol">
                        <textarea rows="2"
                               placeholder="Hi, I want to order:"
                               name="okewa_settings[woo_prefix]"
                               id="okewa-woo-prefix" class="widefat"><?php echo isset( $this->settings['woo_prefix'] ) ? $this->settings['woo_prefix'] : '' ?></textarea>
                    </div>
                </div>
                
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-woo-confirm">
                            <strong><?php _e( 'Enable Whatsapp Payment Confirmation Button on Email', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <label for="okewa-woo-confirm">
                            <input type="checkbox"
                                   name="okewa_settings[woo_confirm]"
                                   id="okewa-woo-confirm"
                                   value="1"
								<?php echo ( isset( $this->settings['woo_confirm'] ) && $this->settings['woo_confirm'] == 1 ) ? ' checked="checked"' : ''; ?>>
                        </label>
                    </div>
                </div>

                <div class="okewa-confirm-option">
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-woo-confirm-number">
                            <strong><?php _e( 'Whatsapp Number Destination For Confirmation', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col doublecol">
                        <input type="text"
                               placeholder="62"
                               name="okewa_settings[woo_confirm_number]"
                               id="okewa-woo-confirm-number" class="widefat"
                               value="<?php echo isset( $this->settings['woo_confirm_number'] ) ? $this->settings['woo_confirm_number'] : '' ?>">
                    </div>
                </div>

                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-woo-confirm-text">
                            <strong><?php _e( 'Payment Confirmation Button Text', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col doublecol">
                        <input type="text"
                               placeholder="Confirm Payment"
                               name="okewa_settings[woo_confirm_text]"
                               id="okewa-woo-confirm-text" class="widefat"
                               value="<?php echo isset( $this->settings['woo_confirm_text'] ) ? $this->settings['woo_confirm_text'] : '' ?>">
                    </div>
                </div>
                
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-woo-confirm-style-1">
                            <strong><?php _e( 'Confirmation Button Style', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col imagecol">
                        <label for="okewa-woo-confirm-style-1">
                            <input type="radio"
                                   name="okewa_settings[woo_confirm_style]"
                                   id="okewa-woo-confirm-style-1"
                                   value="1"
								<?php echo ( isset( $this->settings['woo_confirm_style'] ) && $this->settings['woo_confirm_style'] == '1' ) ? ' checked="checked"' : ''; ?>>
							<img class="okewa-style-img" src="<?php echo plugins_url( 'assets/img/btn-style-1.png' , __FILE__ ); ?>" />
                        </label>
                    </div>
                    <div class="okewa-col imagecol">
                        <label for="okewa-woo-confirm-style-2">
                            <input type="radio"
                                   name="okewa_settings[woo_confirm_style]"
                                   id="okewa-woo-confirm-style-2"
                                   value="2"
								<?php echo ( isset( $this->settings['woo_confirm_style'] ) && $this->settings['woo_confirm_style'] == '2' ) ? ' checked="checked"' : ''; ?>>
							<img class="okewa-style-img" src="<?php echo plugins_url( 'assets/img/btn-style-2.png' , __FILE__ ); ?>" />
                        </label>
                    </div>
                    <div class="okewa-col imagecol">
                        <label for="okewa-woo-confirm-style-3">
                            <input type="radio"
                                   name="okewa_settings[woo_confirm_style]"
                                   id="okewa-woo-confirm-style-3"
                                   value="3"
								<?php echo ( isset( $this->settings['woo_confirm_style'] ) && $this->settings['woo_confirm_style'] == '3' ) ? ' checked="checked"' : ''; ?>>
							<img class="okewa-style-img" src="<?php echo plugins_url( 'assets/img/btn-style-3.png' , __FILE__ ); ?>" />
                        </label>
                    </div>
                </div>
                
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-woo-confirm-col">
                            <strong><?php _e( 'Confirmation Button Color', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <input type="text"
                               name="okewa_settings[woo_confirm_col]"
                               id="okewa-woo-confirm-col" class="widefat okewa-colorpicker"
                               value="<?php echo isset( $this->settings['woo_confirm_col'] ) ? $this->settings['woo_confirm_col'] : '#0dc152' ?>">
                    </div>
                </div>                
                </div>
                
                </div>
            </div>

            <h3 class="okewa-panel-title">
                <?php _e( 'Post', 'okewa-text-domain' ); ?>
            </h3>
            <div class="okewa-panel-body">
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-post-btn">
                            <strong><?php _e( 'Enable Whatsapp Post Sharing', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col">
                        <label for="okewa-post-btn">
                            <input type="checkbox"
                                   name="okewa_settings[post_btn]"
                                   id="okewa-post-btn"
                                   value="1"
								<?php echo ( isset( $this->settings['post_btn'] ) && $this->settings['post_btn'] == 1 ) ? ' checked="checked"' : ''; ?>>
                        </label>
                    </div>
                </div>
                
                <div class="okewa-post-option">
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-post-btn-text">
                            <strong><?php _e( 'Sharing Button Text', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col doublecol">
                        <input type="text"
                               name="okewa_settings[post_btn_text]"
                               id="okewa-post-btn-text" class="widefat"
                               value="<?php echo isset( $this->settings['post_btn_text'] ) && $this->settings['post_btn_text']!== '' ? $this->settings['post_btn_text'] : 'Share on Whatsapp' ?>">
                    </div>
                </div>
                
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-post-prefix">
                            <strong><?php _e( 'Prefix Text Sharing on Whatsapp', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col doublecol">
                        <textarea rows="2"
                               name="okewa_settings[post_prefix]"
                               id="okewa-post-prefix" class="widefat"><?php echo isset( $this->settings['post_prefix'] ) && $this->settings['post_prefix'] !== '' ? $this->settings['post_prefix'] : 'Check out this article:' ?></textarea>
                    </div>
                </div>
                </div>
            </div>
            
            <h3 class="okewa-panel-title">
                <?php _e( 'Facebook Pixel Code', 'okewa-text-domain' ); ?>
            </h3>
            <div class="okewa-panel-body">
                <div class="okewa-row">
                    <div class="okewa-col">
                        <label for="okewa-fb-pixel">
                            <strong><?php _e( 'Pixel Code', 'okewa-text-domain' ); ?>:</strong>
                        </label>
                    </div>
                    <div class="okewa-col doublecol">
                        <textarea rows="4"
                               placeholder="Paste pixel code here with script tag"
                               name="okewa_settings[fb_pixel]"
                               id="okewa-fb-pixel" class="widefat"><?php echo isset( $this->settings['fb_pixel'] ) ? $this->settings['fb_pixel'] : '' ?></textarea>
                    </div>
                </div>
            </div>            
            
            <footer class="okewa-panel-footer">
                <input type="submit" class="button-primary"
                       value="<?php _e( 'Save Settings', 'okewa-text-domain' ); ?>">
            </footer>
        </div>

        <div class="okewa-panel">
            <header class="okewa-panel-header">
				<?php _e( 'Shortcode Generator', 'okewa-text-domain' ); ?>
            </header>
            <div class="okewa-panel-body">
                <div class="okewa-row">
                    <div class="okewa-sc-body">
                        <div class="okewa-body-left">
                            <div class="okewa-row">
                                <div class="okewa-col">
                                    <label for="okewa-sc-btn-text">
                                        <strong><?php _e( 'Button Text', 'okewa-text-domain' ); ?>:</strong>
                                    </label>
                                </div>
                                <div class="okewa-col doublecol">
                                    <input type="text"
                                       placeholder="Contact us via whatsapp!"
                                       id="okewa-sc-btn-text" class="widefat">
                                </div>
                            </div>
                            <div class="okewa-row">
                                <div class="okewa-col">
                                    <label for="okewa-sc-btn-cta-1">
                                        <strong><?php _e( 'Button Action', 'okewa-text-domain' ); ?>:</strong>
                                    </label>
                                </div>
                                <div class="okewa-col smallcol">
                                    <label for="okewa-sc-btn-cta-1">
                                        <input type="radio"
                                               name="okewa-sc-btn-cta"
                                               id="okewa-sc-btn-cta-1">
            							<?php _e( 'Direct Chat', 'okewa-text-domain' ); ?>
                                    </label>
                                </div>
                                <div class="okewa-col smallcol">
                                    <label for="okewa-sc-btn-cta-2">
                                        <input type="radio"
                                               name="okewa-sc-btn-cta"
                                               id="okewa-sc-btn-cta-2">
            							<?php _e( 'Join Group', 'okewa-text-domain' ); ?>
                                    </label>
                                </div>
                            </div>                                      
                            <div class="okewa-sc-chat">
                            <div class="okewa-row">
                                <div class="okewa-col">
                                    <label for="okewa-sc-btn-number">
                                        <strong><?php _e( 'Whatsapp Number', 'okewa-text-domain' ); ?>:</strong>
                                    </label>
                                </div>
                                <div class="okewa-col doublecol">
                                    <input type="text"
                                       placeholder="62"
                                       id="okewa-sc-btn-number" class="widefat">
                                </div>
                            </div>
                            <div class="okewa-row">
                                <div class="okewa-col">
                                    <label for="okewa-sc-btn-msg">
                                        <strong><?php _e( 'Predefined Message', 'okewa-text-domain' ); ?>:</strong>
                                    </label>
                                </div>
                                <div class="okewa-col doublecol">
                                    <textarea rows="2"
                                       placeholder="Hello..."
                                       id="okewa-sc-btn-msg" class="widefat"></textarea>
                                </div>
                            </div>
                            </div>
                            <div class="okewa-sc-group">
                            <div class="okewa-row">
                                <div class="okewa-col">
                                    <label for="okewa-sc-btn-group">
                                        <strong><?php _e( 'Whatsapp Group Link', 'okewa-text-domain' ); ?>:</strong>
                                    </label>
                                </div>
                                <div class="okewa-col doublecol">
                                    <input type="text"
                                       placeholder="https://chat.whatsapp.com/XXXXX"
                                       id="okewa-sc-btn-group" class="widefat">
                                </div>
                            </div>
                            </div>
                            <div class="okewa-row">
                                <div class="okewa-col">
                                    <label for="okewa-sc-btn-bg">
                                        <strong><?php _e( 'Background Color', 'okewa-text-domain' ); ?>:</strong>
                                    </label>
                                </div>
                                <div class="okewa-col">
                                    <input type="text"
                                       value="#0dc152"
                                       id="okewa-sc-btn-bg" class="widefat okewa-colorpicker">
                                </div>
                            </div>                            
                            <div class="okewa-row">
                                <div class="okewa-col">
                                    <label for="okewa-sc-btn-font">
                                        <strong><?php _e( 'Font Color', 'okewa-text-domain' ); ?>:</strong>
                                    </label>
                                </div>
                                <div class="okewa-col">
                                    <input type="text"
                                       value="#ffffff"
                                       id="okewa-sc-btn-font" class="widefat okewa-colorpicker">
                                </div>
                            </div>                            
                            <div class="okewa-row">
                                <div class="okewa-col">
                                    <label for="okewa-sc-btn-style-1">
                                        <strong><?php _e( 'Button Style', 'okewa-text-domain' ); ?>:</strong>
                                    </label>
                                </div>
                                <div class="okewa-col smallcol imagecol">
                                    <label for="okewa-sc-btn-style-1">
                                        <input type="radio"
                                               name="okewa-sc-btn-style"
                                               value="1"
                                               checked="checked"
                                               id="okewa-sc-btn-style-1">
            							<img class="okewa-style-img" src="<?php echo plugins_url( 'assets/img/btn-style-1.png' , __FILE__ ); ?>" />
                                    </label>
                                </div>
                                <div class="okewa-col smallcol imagecol">
                                    <label for="okewa-sc-btn-style-2">
                                        <input type="radio"
                                               name="okewa-sc-btn-style"
                                               value="2"
                                               id="okewa-sc-btn-style-2">
            							<img class="okewa-style-img" src="<?php echo plugins_url( 'assets/img/btn-style-2.png' , __FILE__ ); ?>" />
                                    </label>
                                </div>
                                <div class="okewa-col smallcol imagecol">
                                    <label for="okewa-sc-btn-style-3">
                                        <input type="radio"
                                               name="okewa-sc-btn-style"
                                               value="3"
                                               id="okewa-sc-btn-style-3">
            							<img class="okewa-style-img" src="<?php echo plugins_url( 'assets/img/btn-style-3.png' , __FILE__ ); ?>" />
                                    </label>
                                </div>
                            </div>  
                            <div class="okewa-row">
                                <div class="okewa-col">
                                    <label for="okewa-sc-btn-fw">
                                        <strong><?php _e( 'Full Width Button', 'okewa-text-domain' ); ?>:</strong>
                                    </label>
                                </div>
                                <div class="okewa-col">
                                    <label for="okewa-sc-btn-fw">
                                        <input type="checkbox"
                                               id="okewa-sc-btn-fw">
                                    </label>
                                </div>
                            </div>   
                            <div class="okewa-row">
                                <div class="okewa-col">
                                    <label for="okewa-sc-btn-size-1">
                                        <strong><?php _e( 'Button Size', 'okewa-text-domain' ); ?>:</strong>
                                    </label>
                                </div>
                                <div class="okewa-col smallcol">
                                    <label for="okewa-sc-btn-size-1">
                                        <input type="radio"
                                               name="okewa-sc-btn-size"
                                               value=""
                                               checked="checked"
                                               id="okewa-sc-btn-size-1">
            							<?php _e( 'Large', 'okewa-text-domain' ); ?>
                                    </label>
                                </div>
                                <div class="okewa-col smallcol">
                                    <label for="okewa-sc-btn-size-2">
                                        <input type="radio"
                                               name="okewa-sc-btn-size"
                                               value="small"
                                               id="okewa-sc-btn-size-2">
            							<?php _e( 'Small', 'okewa-text-domain' ); ?>
                                    </label>
                                </div>
                            </div>                              
                        </div>
                        <div class="okewa-body-right">
                            <p>
                                <label for="okewa-generated" class="okewa-generated">Generated Shortcode:</label>
                                <textarea rows="6" id="okewa-generated" class="widefat">[okewa number="" msg="" group="" bg="#0dc152" color="#ffffff" style="1" fw="0" size=""][/okewa]</textarea>
                                <a href="#" class="button-primary okewa-copy"><?php _e( 'Copy Shortcode', 'okewa-text-domain' ); ?></a>
                            </p>                            
                        </div>
                    </div>
                </div>
            </div>
            <footer class="okewa-panel-footer">
                <a href="#" class="button-primary okewa-generate"><?php _e( 'Generate', 'okewa-text-domain' ); ?></a>
            </footer>
        </div>
		<?php
		return true;
	}


	/**
	 * Icons UI Part
	 *
	 * @since 1.0
	 */
	public function icons() {

		// Show on
		if ( ( $this->settings['show_on_pages'] && get_post_type() == 'page' && ! is_front_page() ) ||
		     ( $this->settings['show_on_posts'] && ( get_post_type() == 'post' ) ) ||
		     ( $this->settings['show_on_products'] && ( get_post_type() == 'product' ) ) ||
		     ( $this->settings['show_on_frontpage'] && is_front_page() ) ) {

			// Buttons exists
			if ( isset( $this->agents['btns'] ) ) {
				?>

                <div class="okewa-style_<?php echo ( isset( $this->settings['widget_style'] ) ) ? $this->settings['widget_style'] : '1'; ?> <?php echo ( isset( $this->settings['widget_pos'] ) && $this->settings['widget_pos'] == 'right' ) ? 'okewa-right' : ''; ?>">  
                  <div id="okewa-floating_cta" class="animated bounceInUp" style="background:<?php echo $this->settings['widget_col']; ?>; z-index: <?php echo $this->settings['widget_z_index']; ?>;">
                    <span class="okewa-fc_text"><?php echo ( isset( $this->settings['widget_title'] ) && $this->settings['widget_title'] != '' ) ? $this->settings['widget_title'] : 'Need help? Let\'s chat with us!'; ?></span>
                    <img class="okewa-fc_icon" src="<?php echo plugins_url( 'assets/img/whatsapp.png' , __FILE__ ); ?>" />
                  </div>
                  
                  <div id="okewa-floating_popup" class="animated" style="z-index: <?php echo $this->settings['widget_z_index']; ?>">
                  <?php if ( isset( $this->settings['widget_mode'] ) && $this->settings['widget_mode'] !== '3' ) { ?>      
                  <div class="okewa-multiple_cs">
                    <div class="okewa-header" style="background:<?php echo $this->settings['widget_col']; ?>;">
                      <img class="okewa-close" src="<?php echo plugins_url( 'assets/img/close.png' , __FILE__ ); ?>" />    
                      <?php
    					// Buttons loop + ordering
    					foreach ( $this->btns_order AS $btn_key => $btn_id ) { ?>
                          <img class="okewa-avatar" src="<?php echo ( isset( $this->agents['btns'][ $btn_id ]['photo'] ) && $this->agents['btns'][ $btn_id ]['photo'] != '' ) ? $this->agents['btns'][ $btn_id ]['photo'] : plugins_url( 'assets/img/user.png' , __FILE__ ); ?>" />
						<?php } ?>                        
                      <p class="okewa-intro"><?php echo ( isset( $this->settings['widget_desc'] ) && $this->settings['widget_desc'] != '' ) ? $this->settings['widget_desc'] : 'We are here to help you! Do not hesitate to ask us anything. Click below to start chat.'; ?></p>
                    </div>  
                    <div class="okewa-chat">
					<?php
					// Buttons loop + ordering
					foreach ( $this->btns_order AS $btn_key => $btn_id ) { ?>
	                      <div class="list-cs_<?php echo $btn_id; ?>" href="#cs_<?php echo $btn_id; ?>" data-no="<?php echo ( isset( $this->settings['widget_mode'] ) && $this->settings['widget_mode'] == '2' ) ? $this->agents['btns'][ $btn_id ]['number'] : ''; ?>">
                            <img class="okewa-avatar" src="<?php echo ( isset( $this->agents['btns'][ $btn_id ]['photo'] ) && $this->agents['btns'][ $btn_id ]['photo'] != '' ) ? $this->agents['btns'][ $btn_id ]['photo'] : plugins_url( 'assets/img/user.png' , __FILE__ ); ?>" />
                            <div class="okewa-cs_profile">
                              <p class="okewa-cs_position"><?php echo ( isset( $this->agents['btns'][ $btn_id ]['position'] ) && $this->agents['btns'][ $btn_id ]['position'] != '' ) ? $this->agents['btns'][ $btn_id ]['position'] : 'Customer Support'; ?></p>
                              <h3 class="okewa-cs_name"><?php echo $this->agents['btns'][ $btn_id ]['name']; ?></h3>
                              <small class="okewa-cs_status">Online</small>
                            </div>
                          </div>  
						<?php } ?>                        
                    </div>  
                  </div>
  				  <?php } ?>                        

				<?php
				// Buttons loop + ordering
				foreach ( $this->btns_order AS $btn_key => $btn_id ) { ?>
                  <div id="cs_<?php echo $btn_id; ?>">
                    <div class="okewa-header" style="background:<?php echo $this->settings['widget_col']; ?>;">
                      <img class="okewa-close" src="<?php echo plugins_url( 'assets/img/close.png' , __FILE__ ); ?>" />    
                      <img class="okewa-avatar" src="<?php echo ( isset( $this->agents['btns'][ $btn_id ]['photo'] ) && $this->agents['btns'][ $btn_id ]['photo'] != '' ) ? $this->agents['btns'][ $btn_id ]['photo'] : plugins_url( 'assets/img/user.png' , __FILE__ ); ?>" />
                      <p class="okewa-intro"><strong><?php echo $this->agents['btns'][ $btn_id ]['name']; ?></strong><?php echo $this->agents['btns'][ $btn_id ]['shortbio']; ?></p>
                    </div>  
                    <div class="okewa-chat">
                      <span class="okewa-chat_opening"><?php echo ( isset( $this->agents['btns'][ $btn_id ]['intro'] ) && $this->agents['btns'][ $btn_id ]['intro'] != '' ) ? $this->agents['btns'][ $btn_id ]['intro'] : 'Hi, What can i do for you?'; ?> <small class="okewa-timestamp">00.00</small> <img src="<?php echo plugins_url( 'assets/img/tick.png' , __FILE__ ); ?>" /></span>      
                    </div>  
                    <div class="okewa-input">
                      <input class="okewa-input_content"  data-no="<?php echo $this->agents['btns'][ $btn_id ]['number']; ?>" placeholder="<?php echo ( isset( $this->settings['widget_replyto'] ) && $this->settings['widget_replyto'] != '' ) ? $this->settings['widget_replyto'] : 'Reply to'; ?> <?php echo $this->agents['btns'][ $btn_id ]['name']; ?>"></input>
                      <img class="okewa-input_icon" src="<?php echo plugins_url( 'assets/img/send.png' , __FILE__ ); ?>" />
                    </div>  
                  </div>
				<?php } ?>                        
						
                  </div>  
                </div>

                <script type="text/javascript">
                jQuery(function ($) {
                   $(document).ready(function() {
                    <?php if ( isset( $this->settings['widget_mode'] ) && $this->settings['widget_mode'] !== '3' ) { ?>
                       $("#okewa-floating_cta, .open-wa").click(function(e) {
                	      e.preventDefault();
                          var $popup = $('#okewa-floating_popup');
                          if ($popup.is(':visible')) {
                            $("#okewa-floating_popup").removeClass('bounceInUp');
                            $("#okewa-floating_popup").addClass('bounceOutDown');
                            $("#okewa-floating_popup").delay(1000).hide(0);
                          }
                          else {
                            $("#okewa-floating_popup").show();
                            $("#okewa-floating_popup").removeClass('bounceOutDown');
                            $("#okewa-floating_popup").addClass('bounceInUp');
                          }
                        });
                        $("#okewa-floating_popup .okewa-multiple_cs .okewa-header .okewa-close").click(function() {
                            Cookies.set("okewaclose", 1, { expires : 1 });
                            $("#okewa-floating_popup").removeClass('bounceInUp');
                            $("#okewa-floating_popup").addClass('bounceOutDown');
                            $("#okewa-floating_popup").delay(1000).hide(0);  
                        });
                        $("#okewa-floating_popup div[id*='cs_'] .okewa-header .okewa-close").click(function() {
                          $("#okewa-floating_popup div[id*='cs_']").removeClass('active animated fadeIn').hide();
                          $('#okewa-floating_popup .okewa-multiple_cs').show().addClass('animated fadeIn');
                        });
    				<?php } else { ?>                        
                       $("#okewa-floating_popup").css({'background':'transparent','box-shadow':'none','overflow':'inherit'});
					   if ($(window).width() > 767) {
                       		$("#cs_<?php echo ( isset( $this->settings['rotation'] ) ) ? $this->settings['rotation']-1 : '0'; ?>").css({'overflow':'hidden','border-radius':'8px','box-shadow':'0px 0px 30px rgba(0, 0, 0, 0.3)'});
					   } else {						   
                       		$("#cs_<?php echo ( isset( $this->settings['rotation'] ) ) ? $this->settings['rotation']-1 : '0'; ?>").css({'overflow':'hidden','border-radius':'0px','box-shadow':'0px 0px 30px rgba(0, 0, 0, 0)','height':'100%','background':'#fff'});
					   }	   
                       $("#okewa-floating_cta, .open-wa").click(function(e) {
                	      e.preventDefault();
                          var $popup = $('#cs_<?php echo ( isset( $this->settings['rotation'] ) ) ? $this->settings['rotation']-1 : '0'; ?>');
                          if ($popup.is(':visible')) {
                            $("#cs_<?php echo ( isset( $this->settings['rotation'] ) ) ? $this->settings['rotation']-1 : '0'; ?>").removeClass('animated bounceInUp');
                            $("#cs_<?php echo ( isset( $this->settings['rotation'] ) ) ? $this->settings['rotation']-1 : '0'; ?>").addClass('animated bounceOutDown');
                            $("#cs_<?php echo ( isset( $this->settings['rotation'] ) ) ? $this->settings['rotation']-1 : '0'; ?>").delay(1000).hide(0);
						    $("#okewa-floating_popup").delay(1000).hide(0); 							  
                          }
                          else {
						    $("#okewa-floating_popup").show(); 							  
                            $("#cs_<?php echo ( isset( $this->settings['rotation'] ) ) ? $this->settings['rotation']-1 : '0'; ?>").show();
                            $("#cs_<?php echo ( isset( $this->settings['rotation'] ) ) ? $this->settings['rotation']-1 : '0'; ?>").removeClass('animated bounceOutDown');
                            $("#cs_<?php echo ( isset( $this->settings['rotation'] ) ) ? $this->settings['rotation']-1 : '0'; ?>").addClass('animated bounceInUp');
                          }
                        });
                        $("#okewa-floating_popup .okewa-header .okewa-close").click(function() {
                            Cookies.set("okewaclose", 1, { expires : 1 });
                            $("#cs_<?php echo ( isset( $this->settings['rotation'] ) ) ? $this->settings['rotation']-1 : '0'; ?>").removeClass('animated bounceInUp');
                            $("#cs_<?php echo ( isset( $this->settings['rotation'] ) ) ? $this->settings['rotation']-1 : '0'; ?>").addClass('animated bounceOutDown');
                            $("#cs_<?php echo ( isset( $this->settings['rotation'] ) ) ? $this->settings['rotation']-1 : '0'; ?>").delay(1000).hide(0);  
						    $("#okewa-floating_popup").delay(1000).hide(0); 							  
                        });
    				<?php } ?>                        

                    <?php if ( isset( $this->settings['widget_mode'] ) && $this->settings['widget_mode'] == '1' ) { ?>
                        $('#okewa-floating_popup .okewa-multiple_cs .okewa-chat div[class*="list-cs_"]:not(".offline")').click(function() {
                          var $target = $($(this).attr('href')),
                              $other = $target.siblings('.active'),
                              animIn = function () {
                                $target.addClass('active').show().addClass('animated fadeIn');
                              };        
                          $('#okewa-floating_popup .okewa-multiple_cs').hide();
                          var dt = new Date();
                          var time = dt.getHours() + ":" + dt.getMinutes();
                          $('#okewa-floating_popup .okewa-chat .okewa-chat_opening .okewa-timestamp').html(time);
                          if (!$target.hasClass('active') && $other.length > 0) {
                            $other.each(function(index, self) {
                              var $this = $(this);
                              $this.removeClass('active');
                            });
                          } else if (!$target.hasClass('active')) {
                            animIn();
                          }
                        });
    				<?php } ?>                        
                    
                      $('#okewa-floating_popup .okewa-input .okewa-input_icon').click(function() {
                          var message = $(this).closest('.okewa-input').find('.okewa-input_content').val();
                          var number = $(this).closest('.okewa-input').find('.okewa-input_content').data('no');
                          <?php if ( isset( $this->settings['widget_mode'] ) && $this->settings['widget_mode'] == '3' ) { ?>
                              window.location.href = "<?php echo plugins_url( 'okewa-send-rotation.php' , __FILE__ ); ?>?no="+number+"&msg="+message+"&id=<?php echo ( isset( $this->settings['rotation'] ) ) ? $this->settings['rotation'] : '1'; ?>";
          				  <?php } else { ?>
                              window.location.href = "<?php echo plugins_url( 'okewa-send.php' , __FILE__ ); ?>?no="+number+"&msg="+message+"";
          				  <?php } ?>                        
                      });
                      $("#okewa-floating_popup .okewa-input .okewa-input_content").keypress(function(e) {
                        if(e.which == 13) {
                          var message = $(this).val();
                          var number = $(this).data('no');
                          <?php if ( isset( $this->settings['widget_mode'] ) && $this->settings['widget_mode'] == '3' ) { ?>
                              window.location.href = "<?php echo plugins_url( 'okewa-send-rotation.php' , __FILE__ ); ?>?no="+number+"&msg="+message+"&id=<?php echo ( isset( $this->settings['rotation'] ) ) ? $this->settings['rotation'] : '1'; ?>";
          				  <?php } else { ?>
                              window.location.href = "<?php echo plugins_url( 'okewa-send.php' , __FILE__ ); ?>?no="+number+"&msg="+message+"";
          				  <?php } ?>                        
                        }
                        });
                        $('#okewa-floating_popup .okewa-multiple_cs .okewa-chat div[class*="list-cs_"]:not(".offline")').click(function() {
                          if ($(this).data('no') !== '') {
                          var number = $(this).data('no');
                          window.location.href = "<?php echo plugins_url( 'okewa-send.php' , __FILE__ ); ?>?no="+number+"";
                          }
                        });    
                      if ($(window).width() > 767) {
                        <?php if ( $this->settings['disable_desktop'] !== '1' ) { ?>
                            // Open chat after x seconds on desktop
                            <?php if ( isset( $this->settings['widget_auto'] ) && $this->settings['widget_auto'] != '0' && $this->settings['widget_auto'] != '' ) { ?>
                            setTimeout(function() {
                                <?php if ( isset( $this->settings['widget_mode'] ) && $this->settings['widget_mode'] == '3' ) { ?>
                                if ( $("#okewa-floating_popup #cs_<?php echo ( isset( $this->settings['rotation'] ) ) ? $this->settings['rotation']-1 : '0'; ?>").css('display') == 'none' ) {
                				<?php } else { ?>
                                if ( $("#okewa-floating_popup").css('display') == 'none' ) {
              				    <?php } ?>                        
              				        if (!Cookies.get('okewaclose')) {
                                      $("#okewa-floating_cta").trigger('click');
                                    }
                                }
                            }, <?php echo $this->settings['widget_auto'].'000'; ?>);
                            <?php } ?>
                        <?php } else { ?>
                            $("#okewa-floating_cta").hide();
                        <?php } ?>
                      } else {
                        <?php if ( $this->settings['disable_mobile'] ) { ?>
                            $("#okewa-floating_cta").hide();
                        <?php } ?>
                      }
                    });
                    var hours = new Date().getHours();
                    <?php foreach ( $this->btns_order AS $btn_key => $btn_id ) { ?>
                        <?php if ( isset( $this->agents['btns'][ $btn_id ]['avail_'.date('w').'_day'] ) ) { ?>
                            if (hours >= <?php echo $this->agents['btns'][ $btn_id ]['avail_'.date('w').'_start']; ?> && hours <= <?php echo $this->agents['btns'][ $btn_id ]['avail_'.date('w').'_end']; ?>) {
                                // do nothing
                            } else {
                                $('.list-cs_<?php echo $btn_id; ?>').addClass('offline');
                                $('.list-cs_<?php echo $btn_id; ?> .okewa-cs_status').html('Offline');
                            }
                        <?php } else {?>
                            $('.list-cs_<?php echo $btn_id; ?>').addClass('offline');
                            $('.list-cs_<?php echo $btn_id; ?> .okewa-cs_status').html('Offline');
                        <?php } ?>
                    <?php } ?>
                	$(".okewa-woo .okewa-btn").click(function(e) {
                	    e.preventDefault();
                	    var product_val = [];
                        $("form.cart select option:selected, .woocommerce .quantity .qty").each(function () {
                            var x = ($(this).val());
                            if ( x !== '' ) {
                                product_val.push(x);
                            }
                        });
                        var number = $(this).data('no');
                        var prefix = "<?php echo ( isset( $this->settings['woo_prefix'] ) && $this->settings['woo_prefix'] != '' ) ? $this->settings['woo_prefix'] : 'Hi, I want to order:'; ?>";
                        var message = "<?php echo get_the_title(); ?> (" + product_val.join(' / ') + " Item" + ")%nl%nl" + "<?php echo get_permalink(); ?>";
                        window.location.href = "<?php echo plugins_url( 'okewa-send.php' , __FILE__ ); ?>?no="+number+"&msg=*"+prefix+"*%nl"+message+"";
                    });

                });
                </script>
				<?php
			}
		}

	}

}