<?php
/**
 * Admin UI Meta Box View for NotiPulse
 *
 * @package NotiPulse
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

// Security Nonce Field.
wp_nonce_field( 'notipulse_save_meta_box_data', 'notipulse_meta_box_nonce' );

// Retrieve post meta safely.
$value = get_post_meta( $post->ID, 'notipulse_meta_key', true );
if ( ! is_array( $value ) ) {
	$value = maybe_unserialize( $value );
}
if ( ! is_array( $value ) ) {
	$value = array();
}

$notipulse_type          = isset( $value['notipulse_type'] ) ? $value['notipulse_type'] : 'Success';
$bg_color                = isset( $value['bg_color'] ) ? $value['bg_color'] : '';
$bg_color_opacity        = isset( $value['bg_color_opacity'] ) && '' !== $value['bg_color_opacity'] ? $value['bg_color_opacity'] : '6';
$notipulse_position      = isset( $value['notipulse_position'] ) ? $value['notipulse_position'] : 'Top';
$notipulse_head          = isset( $value['notipulse_head'] ) ? $value['notipulse_head'] : 'NotiPulse';
$head_tags               = isset( $value['head_tags'] ) ? $value['head_tags'] : 'h2';
$headline_color          = isset( $value['headline_color'] ) ? $value['headline_color'] : '';
$head_top_mar            = isset( $value['head_top_mar'] ) ? $value['head_top_mar'] : '0';
$head_btm_mar            = isset( $value['head_btm_mar'] ) ? $value['head_btm_mar'] : '0';
$head_lft_mar            = isset( $value['head_lft_mar'] ) ? $value['head_lft_mar'] : '0';
$head_ryt_mar            = isset( $value['head_ryt_mar'] ) ? $value['head_ryt_mar'] : '0';
$head_top_pad            = isset( $value['head_top_pad'] ) && '' !== $value['head_top_pad'] ? $value['head_top_pad'] : '40';
$head_btm_pad            = isset( $value['head_btm_pad'] ) ? $value['head_btm_pad'] : '0';
$head_lft_pad            = isset( $value['head_lft_pad'] ) ? $value['head_lft_pad'] : '0';
$head_ryt_pad            = isset( $value['head_ryt_pad'] ) ? $value['head_ryt_pad'] : '0';

$notipulse_content       = isset( $value['notipulse_content'] ) && '' !== $value['notipulse_content'] ? $value['notipulse_content'] : __( 'Thank you for using this plugin, there are pre-defined templates and lots of features.', 'notipulse' );
$text_color              = isset( $value['text_color'] ) ? $value['text_color'] : '';
$font_size               = isset( $value['font_size'] ) && '' !== $value['font_size'] ? $value['font_size'] : '18';
$line_height             = isset( $value['line_height'] ) && '' !== $value['line_height'] ? $value['line_height'] : '28';
$content_top_mar         = isset( $value['content_top_mar'] ) ? $value['content_top_mar'] : '0';
$content_btm_mar         = isset( $value['content_btm_mar'] ) ? $value['content_btm_mar'] : '0';
$content_lft_mar         = isset( $value['content_lft_mar'] ) ? $value['content_lft_mar'] : '0';
$content_ryt_mar         = isset( $value['content_ryt_mar'] ) ? $value['content_ryt_mar'] : '0';
$content_top_pad         = isset( $value['content_top_pad'] ) && '' !== $value['content_top_pad'] ? $value['content_top_pad'] : '10';
$content_btm_pad         = isset( $value['content_btm_pad'] ) && '' !== $value['content_btm_pad'] ? $value['content_btm_pad'] : '20';
$content_lft_pad         = isset( $value['content_lft_pad'] ) && '' !== $value['content_lft_pad'] ? $value['content_lft_pad'] : '15';
$content_ryt_pad         = isset( $value['content_ryt_pad'] ) && '' !== $value['content_ryt_pad'] ? $value['content_ryt_pad'] : '15';

$notipulse_link          = isset( $value['notipulse_link'] ) ? $value['notipulse_link'] : '';
$notipulse_btn_txt       = isset( $value['notipulse_btn_txt'] ) ? $value['notipulse_btn_txt'] : '';
$open_in                 = isset( $value['open_in'] ) ? $value['open_in'] : 'Same Window';
$notipulse_btn_bg_clr    = isset( $value['notipulse_btn_bg_clr'] ) ? $value['notipulse_btn_bg_clr'] : '';
$notipulse_btn_txt_clr   = isset( $value['notipulse_btn_txt_clr'] ) ? $value['notipulse_btn_txt_clr'] : '';
$notipulse_btn_size      = isset( $value['notipulse_btn_size'] ) ? $value['notipulse_btn_size'] : 'Small';

$countdown_on_off        = isset( $value['countdown_on_off'] ) ? $value['countdown_on_off'] : 'Off';
$countdown_date_time     = isset( $value['countdown_date_time'] ) ? $value['countdown_date_time'] : '';
$countdown_top_mar       = isset( $value['countdown_top_mar'] ) && '' !== $value['countdown_top_mar'] ? $value['countdown_top_mar'] : '0';
$countdown_btm_mar       = isset( $value['countdown_btm_mar'] ) && '' !== $value['countdown_btm_mar'] ? $value['countdown_btm_mar'] : '20';
$countdown_lft_mar       = isset( $value['countdown_lft_mar'] ) && '' !== $value['countdown_lft_mar'] ? $value['countdown_lft_mar'] : '0';
$countdown_ryt_mar       = isset( $value['countdown_ryt_mar'] ) && '' !== $value['countdown_ryt_mar'] ? $value['countdown_ryt_mar'] : '0';
$countdown_top_pad       = isset( $value['countdown_top_pad'] ) && '' !== $value['countdown_top_pad'] ? $value['countdown_top_pad'] : '5';
$countdown_btm_pad       = isset( $value['countdown_btm_pad'] ) && '' !== $value['countdown_btm_pad'] ? $value['countdown_btm_pad'] : '5';
$countdown_lft_pad       = isset( $value['countdown_lft_pad'] ) && '' !== $value['countdown_lft_pad'] ? $value['countdown_lft_pad'] : '5';
$countdown_ryt_pad       = isset( $value['countdown_ryt_pad'] ) && '' !== $value['countdown_ryt_pad'] ? $value['countdown_ryt_pad'] : '5';
$countdown_font_size     = isset( $value['countdown_font_size'] ) && '' !== $value['countdown_font_size'] ? $value['countdown_font_size'] : '16';
$countdown_bg_clr        = isset( $value['countdown_bg_clr'] ) ? $value['countdown_bg_clr'] : '';
$countdown_txt_clr       = isset( $value['countdown_txt_clr'] ) ? $value['countdown_txt_clr'] : '';

$display_in              = isset( $value['display_in'] ) ? explode( ',', $value['display_in'] ) : array( 'All Pages' );
$user_roles              = isset( $value['user_roles'] ) ? $value['user_roles'] : '';
$notipulse_time          = isset( $value['notipulse_time'] ) ? $value['notipulse_time'] : 'Every Time On Page Load';
$notipulse_close_when    = isset( $value['notipulse_close_when'] ) ? $value['notipulse_close_when'] : 'Do not close - visitor will have to manually close.';
$notipulse_how_much_time = isset( $value['notipulse_how_much_time'] ) ? $value['notipulse_how_much_time'] : '5';
?>

<div class="mn-main np-main">
    <div class="mn-wrapper np-wrapper">
        <div class="mn_tabs np_tabs">
            <ul class="lft_tabs">
                <li><a href="#tab1"><?php esc_html_e( 'General Settings', 'notipulse' ); ?></a></li>
                <li><a href="#tab2"><?php esc_html_e( 'Content Settings', 'notipulse' ); ?></a></li>
                <li><a href="#tab3"><?php esc_html_e( 'CTA Button Settings', 'notipulse' ); ?></a></li>
                <li><a href="#tab4"><?php esc_html_e( 'Countdown Settings', 'notipulse' ); ?></a></li>
                <li><a href="#tab5"><?php esc_html_e( 'Advance Settings', 'notipulse' ); ?></a></li>
            </ul>
        </div>
        <div class="admin_main">
            <div class="form-data">
                <!-- Tab 1: General Settings -->
                <div class="mn-general-tab common tab-content" id="tab1">
                    <h1><?php esc_html_e( 'General Settings:', 'notipulse' ); ?></h1>
                    <table class="mn-tbl form-table">
                        <tr>
                            <th><?php esc_html_e( 'Premade Templates:', 'notipulse' ); ?></th>
                            <td>
                                <select name="notipulse_type" id="notipulse_type">
                                    <optgroup label="<?php esc_attr_e( 'Alerts', 'notipulse' ); ?>">
                                        <option value="Success" <?php selected( $notipulse_type, 'Success' ); ?>><?php esc_html_e( 'Success', 'notipulse' ); ?></option>
                                        <option value="Warning" <?php selected( $notipulse_type, 'Warning' ); ?>><?php esc_html_e( 'Warning', 'notipulse' ); ?></option>
                                        <option value="Info" <?php selected( $notipulse_type, 'Info' ); ?>><?php esc_html_e( 'Info', 'notipulse' ); ?></option>
                                        <option value="Danger" <?php selected( $notipulse_type, 'Danger' ); ?>><?php esc_html_e( 'Danger', 'notipulse' ); ?></option>
                                        <option value="Simple" <?php selected( $notipulse_type, 'Simple' ); ?>><?php esc_html_e( 'Simple', 'notipulse' ); ?></option>
                                    </optgroup>
                                    <optgroup label="<?php esc_attr_e( 'Announcements', 'notipulse' ); ?>">
                                        <option value="Welcome Announcement" <?php selected( $notipulse_type, 'Welcome Announcement' ); ?>><?php esc_html_e( 'Welcome Announcement', 'notipulse' ); ?></option>
                                        <option value="Black Friday" <?php selected( $notipulse_type, 'Black Friday' ); ?>><?php esc_html_e( 'Black Friday', 'notipulse' ); ?></option>
                                        <option value="Policy Update Announcement" <?php selected( $notipulse_type, 'Policy Update Announcement' ); ?>><?php esc_html_e( 'Policy Update Announcement', 'notipulse' ); ?></option>
                                        <option value="Holiday Announcement" <?php selected( $notipulse_type, 'Holiday Announcement' ); ?>><?php esc_html_e( 'Holiday Announcement', 'notipulse' ); ?></option>
                                        <option value="Product Launch" <?php selected( $notipulse_type, 'Product Launch' ); ?>><?php esc_html_e( 'Product Launch', 'notipulse' ); ?></option>
                                    </optgroup>
                                    <optgroup label="<?php esc_attr_e( 'Custom', 'notipulse' ); ?>">
                                        <option value="Custom" <?php selected( $notipulse_type, 'Custom' ); ?>><?php esc_html_e( 'Custom', 'notipulse' ); ?></option>
                                    </optgroup>
                                </select>
                            </td>
                        </tr>
                        <tr class="mn_samples" <?php echo ( 'Custom' === $notipulse_type ) ? 'style="display:none"' : ''; ?>>
                            <td colspan="2">
                                <img class="success_img" src="<?php echo esc_url( NOTIPULSE_URL . 'assets/images/success_notify.png' ); ?>" alt="<?php esc_attr_e( 'Success Sample', 'notipulse' ); ?>" <?php echo ( 'Success' === $notipulse_type || '' === $notipulse_type ) ? 'style="display:block"' : ''; ?>>
                                <img class="warning_img" src="<?php echo esc_url( NOTIPULSE_URL . 'assets/images/warning_notify.png' ); ?>" alt="<?php esc_attr_e( 'Warning Sample', 'notipulse' ); ?>" <?php echo ( 'Warning' === $notipulse_type ) ? 'style="display:block"' : ''; ?>>
                                <img class="info_img" src="<?php echo esc_url( NOTIPULSE_URL . 'assets/images/info_notify.png' ); ?>" alt="<?php esc_attr_e( 'Info Sample', 'notipulse' ); ?>" <?php echo ( 'Info' === $notipulse_type ) ? 'style="display:block"' : ''; ?>>
                                <img class="danger_img" src="<?php echo esc_url( NOTIPULSE_URL . 'assets/images/danger_notify.png' ); ?>" alt="<?php esc_attr_e( 'Danger Sample', 'notipulse' ); ?>" <?php echo ( 'Danger' === $notipulse_type ) ? 'style="display:block"' : ''; ?>>
                                <img class="simple_img" src="<?php echo esc_url( NOTIPULSE_URL . 'assets/images/simple_notify.png' ); ?>" alt="<?php esc_attr_e( 'Simple Sample', 'notipulse' ); ?>" <?php echo ( 'Simple' === $notipulse_type ) ? 'style="display:block"' : ''; ?>>
                                <img class="holiday_notify" src="<?php echo esc_url( NOTIPULSE_URL . 'assets/images/holiday_notify.png' ); ?>" alt="<?php esc_attr_e( 'Holiday Sample', 'notipulse' ); ?>" <?php echo ( 'Holiday Announcement' === $notipulse_type ) ? 'style="display:block"' : ''; ?>>
                                <img class="black_friday_info" src="<?php echo esc_url( NOTIPULSE_URL . 'assets/images/black_friday_info.png' ); ?>" alt="<?php esc_attr_e( 'Black Friday Sample', 'notipulse' ); ?>" <?php echo ( 'Black Friday' === $notipulse_type ) ? 'style="display:block"' : ''; ?>>
                                <img class="policy_update_notify" src="<?php echo esc_url( NOTIPULSE_URL . 'assets/images/policy_update_notify.png' ); ?>" alt="<?php esc_attr_e( 'Policy Update Sample', 'notipulse' ); ?>" <?php echo ( 'Policy Update Announcement' === $notipulse_type ) ? 'style="display:block"' : ''; ?>>
                                <img class="product_launch_notify" src="<?php echo esc_url( NOTIPULSE_URL . 'assets/images/product_launch_notify.png' ); ?>" alt="<?php esc_attr_e( 'Product Launch Sample', 'notipulse' ); ?>" <?php echo ( 'Product Launch' === $notipulse_type ) ? 'style="display:block"' : ''; ?>>
                                <img class="welcome_notify" src="<?php echo esc_url( NOTIPULSE_URL . 'assets/images/welcome_notify.png' ); ?>" alt="<?php esc_attr_e( 'Welcome Sample', 'notipulse' ); ?>" <?php echo ( 'Welcome Announcement' === $notipulse_type ) ? 'style="display:block"' : ''; ?>>
                            </td>
                        </tr>
                        <tr class="none <?php echo ( 'Custom' !== $notipulse_type ) ? 'hidden' : ''; ?>">
                            <th><?php esc_html_e( 'Background Color:', 'notipulse' ); ?></th>
                            <td><input type="text" class="wp-color-picker-field" name="bg_color" id="bg_color" value="<?php echo esc_attr( $bg_color ); ?>"></td>
                        </tr>
                        <tr class="none <?php echo ( 'Custom' !== $notipulse_type ) ? 'hidden' : ''; ?>">
                            <th><?php esc_html_e( 'BG Color Opacity:', 'notipulse' ); ?></th>
                            <td>
                                <input type="range" name="bg_color_opacity" id="bg_color_opacity" min="1" max="10" value="<?php echo esc_attr( $bg_color_opacity ); ?>">
                                <output id="range_weight_disp"><?php echo esc_html( $bg_color_opacity ); ?></output>
                            </td>
                        </tr>
                        <tr>
                            <th><?php esc_html_e( 'Notification Position:', 'notipulse' ); ?></th>
                            <td>
                                <select name="notipulse_position" id="notipulse_position">
                                    <option value="Top" <?php selected( $notipulse_position, 'Top' ); ?>><?php esc_html_e( 'Top', 'notipulse' ); ?></option>
                                    <option value="Popup" <?php selected( $notipulse_position, 'Popup' ); ?>><?php esc_html_e( 'Popup', 'notipulse' ); ?></option>
                                    <option value="Bottom" <?php selected( $notipulse_position, 'Bottom' ); ?>><?php esc_html_e( 'Bottom', 'notipulse' ); ?></option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </div>

                <!-- Tab 2: Content Settings -->
                <div class="common tab-content" id="tab2" style="display: none;">
                    <div class="mn-headline-tab common">
                        <h1><?php esc_html_e( 'Headline Settings:', 'notipulse' ); ?></h1>
                        <table class="mn-tbl form-table">
                            <tr>
                                <th><?php esc_html_e( 'Headline:', 'notipulse' ); ?></th>
                                <td>
                                    <input type="text" name="notipulse_head" id="notipulse_head" placeholder="<?php esc_attr_e( 'Type here...', 'notipulse' ); ?>" value="<?php echo esc_attr( $notipulse_head ); ?>">
                                </td>
                            </tr>
                            <tr>
                                <th><?php esc_html_e( 'Headline Tag:', 'notipulse' ); ?></th>
                                <td>
                                    <select name="head_tags" id="head_tags">
                                        <option value="h1" <?php selected( $head_tags, 'h1' ); ?>>H1</option>
                                        <option value="h2" <?php selected( $head_tags, 'h2' ); ?>>H2</option>
                                        <option value="h3" <?php selected( $head_tags, 'h3' ); ?>>H3</option>
                                        <option value="h4" <?php selected( $head_tags, 'h4' ); ?>>H4</option>
                                        <option value="h5" <?php selected( $head_tags, 'h5' ); ?>>H5</option>
                                        <option value="h6" <?php selected( $head_tags, 'h6' ); ?>>H6</option>
                                    </select>
                                </td>
                            </tr>
                            <tr class="none <?php echo ( 'Custom' !== $notipulse_type ) ? 'hidden' : ''; ?>">
                                <th><?php esc_html_e( 'Color:', 'notipulse' ); ?></th>
                                <td>
                                    <input type="text" class="wp-color-picker-field" name="headline_color" id="headline_color" value="<?php echo esc_attr( $headline_color ); ?>">
                                </td>
                            </tr>
                            <tr class="space">
                                <th><?php esc_html_e( 'Margin (px):', 'notipulse' ); ?></th>
                                <td>
                                    <input type="number" name="head_top_mar" id="head_top_mar" placeholder="<?php esc_attr_e( 'Top', 'notipulse' ); ?>" value="<?php echo esc_attr( $head_top_mar ); ?>">
                                    <input type="number" name="head_btm_mar" id="head_btm_mar" placeholder="<?php esc_attr_e( 'Bottom', 'notipulse' ); ?>" value="<?php echo esc_attr( $head_btm_mar ); ?>">
                                    <input type="number" name="head_lft_mar" id="head_lft_mar" placeholder="<?php esc_attr_e( 'Left', 'notipulse' ); ?>" value="<?php echo esc_attr( $head_lft_mar ); ?>">
                                    <input type="number" name="head_ryt_mar" id="head_ryt_mar" placeholder="<?php esc_attr_e( 'Right', 'notipulse' ); ?>" value="<?php echo esc_attr( $head_ryt_mar ); ?>">
                                </td>
                            </tr>
                            <tr class="space">
                                <th><?php esc_html_e( 'Padding (px):', 'notipulse' ); ?></th>
                                <td>
                                    <input type="number" name="head_top_pad" id="head_top_pad" placeholder="<?php esc_attr_e( 'Top', 'notipulse' ); ?>" value="<?php echo esc_attr( $head_top_pad ); ?>">
                                    <input type="number" name="head_btm_pad" id="head_btm_pad" placeholder="<?php esc_attr_e( 'Bottom', 'notipulse' ); ?>" value="<?php echo esc_attr( $head_btm_pad ); ?>">
                                    <input type="number" name="head_lft_pad" id="head_lft_pad" placeholder="<?php esc_attr_e( 'Left', 'notipulse' ); ?>" value="<?php echo esc_attr( $head_lft_pad ); ?>">
                                    <input type="number" name="head_ryt_pad" id="head_ryt_pad" placeholder="<?php esc_attr_e( 'Right', 'notipulse' ); ?>" value="<?php echo esc_attr( $head_ryt_pad ); ?>">
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="mn-content-tab common">
                        <h1><?php esc_html_e( 'Content Settings:', 'notipulse' ); ?></h1>
                        <table class="mn-tbl form-table">
                            <tr>
                                <th><?php esc_html_e( 'Content:', 'notipulse' ); ?></th>
                                <td>
                                    <?php
                                    $settings = array(
                                        'editor_height' => 250,
                                        'media_buttons' => false,
                                        'textarea_name' => 'notipulse_content',
                                    );
                                    wp_editor( $notipulse_content, 'notipulse_content_editor', $settings );
                                    ?>
                                </td>
                            </tr>
                            <tr class="none <?php echo ( 'Custom' !== $notipulse_type ) ? 'hidden' : ''; ?>">
                                <th><?php esc_html_e( 'Text Color:', 'notipulse' ); ?></th>
                                <td><input type="text" class="wp-color-picker-field" name="text_color" id="text_color" value="<?php echo esc_attr( $text_color ); ?>"></td>
                            </tr>
                            <tr>
                                <th><?php esc_html_e( 'Font Size (px):', 'notipulse' ); ?></th>
                                <td><input type="number" name="font_size" id="font_size" max="99" placeholder="<?php esc_attr_e( 'Type here..', 'notipulse' ); ?>" value="<?php echo esc_attr( $font_size ); ?>"></td>
                            </tr>
                            <tr>
                                <th><?php esc_html_e( 'Line Height (px):', 'notipulse' ); ?></th>
                                <td><input type="number" name="line_height" id="line_height" max="109" placeholder="<?php esc_attr_e( 'Type here..', 'notipulse' ); ?>" value="<?php echo esc_attr( $line_height ); ?>"></td>
                            </tr>
                            <tr class="space">
                                <th><?php esc_html_e( 'Margin (px):', 'notipulse' ); ?></th>
                                <td>
                                    <input type="number" name="content_top_mar" id="content_top_mar" placeholder="<?php esc_attr_e( 'Top', 'notipulse' ); ?>" value="<?php echo esc_attr( $content_top_mar ); ?>">
                                    <input type="number" name="content_btm_mar" id="content_btm_mar" placeholder="<?php esc_attr_e( 'Bottom', 'notipulse' ); ?>" value="<?php echo esc_attr( $content_btm_mar ); ?>">
                                    <input type="number" name="content_lft_mar" id="content_lft_mar" placeholder="<?php esc_attr_e( 'Left', 'notipulse' ); ?>" value="<?php echo esc_attr( $content_lft_mar ); ?>">
                                    <input type="number" name="content_ryt_mar" id="content_ryt_mar" placeholder="<?php esc_attr_e( 'Right', 'notipulse' ); ?>" value="<?php echo esc_attr( $content_ryt_mar ); ?>">
                                </td>
                            </tr>
                            <tr class="space">
                                <th><?php esc_html_e( 'Padding (px):', 'notipulse' ); ?></th>
                                <td>
                                    <input type="number" name="content_top_pad" id="content_top_pad" placeholder="<?php esc_attr_e( 'Top', 'notipulse' ); ?>" value="<?php echo esc_attr( $content_top_pad ); ?>">
                                    <input type="number" name="content_btm_pad" id="content_btm_pad" placeholder="<?php esc_attr_e( 'Bottom', 'notipulse' ); ?>" value="<?php echo esc_attr( $content_btm_pad ); ?>">
                                    <input type="number" name="content_lft_pad" id="content_lft_pad" placeholder="<?php esc_attr_e( 'Left', 'notipulse' ); ?>" value="<?php echo esc_attr( $content_lft_pad ); ?>">
                                    <input type="number" name="content_ryt_pad" id="content_ryt_pad" placeholder="<?php esc_attr_e( 'Right', 'notipulse' ); ?>" value="<?php echo esc_attr( $content_ryt_pad ); ?>">
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- Tab 3: CTA Button Settings -->
                <div class="common tab-content" id="tab3" style="display: none;">
                    <div class="mn-content-tab common">
                        <table class="mn-tbl form-table">
                            <h1><?php esc_html_e( 'CTA Button Settings:', 'notipulse' ); ?></h1>
                            <tr>
                                <th><?php esc_html_e( 'Button Link:', 'notipulse' ); ?></th>
                                <td>
                                    <input type="text" name="notipulse_link" id="notipulse_link" placeholder="https://example.com" value="<?php echo esc_url( $notipulse_link ); ?>">
                                </td>
                            </tr>
                            <tr>
                                <th><?php esc_html_e( 'Button Text:', 'notipulse' ); ?></th>
                                <td>
                                    <input type="text" name="notipulse_btn_txt" id="notipulse_btn_txt" placeholder="<?php esc_attr_e( 'Type here...', 'notipulse' ); ?>" value="<?php echo esc_attr( $notipulse_btn_txt ); ?>">
                                </td>
                            </tr>
                            <tr>
                                <th><?php esc_html_e( 'Open In:', 'notipulse' ); ?></th>
                                <td>
                                    <select name="open_in" id="open_in">
                                        <option value="Same Window" <?php selected( $open_in, 'Same Window' ); ?>><?php esc_html_e( 'Same Window', 'notipulse' ); ?></option>
                                        <option value="_blank" <?php selected( $open_in, '_blank' ); ?>><?php esc_html_e( 'New Window', 'notipulse' ); ?></option>
                                    </select>
                                </td>
                            </tr>
                            <tr class="none <?php echo ( 'Custom' !== $notipulse_type ) ? 'hidden' : ''; ?>">
                                <th><?php esc_html_e( 'Button BG Color:', 'notipulse' ); ?></th>
                                <td>
                                    <input type="text" class="wp-color-picker-field" name="notipulse_btn_bg_clr" id="notipulse_btn_bg_clr" value="<?php echo esc_attr( $notipulse_btn_bg_clr ); ?>">
                                </td>
                            </tr>
                            <tr class="none <?php echo ( 'Custom' !== $notipulse_type ) ? 'hidden' : ''; ?>">
                                <th><?php esc_html_e( 'Button Text Color:', 'notipulse' ); ?></th>
                                <td>
                                    <input type="text" class="wp-color-picker-field" name="notipulse_btn_txt_clr" id="notipulse_btn_txt_clr" value="<?php echo esc_attr( $notipulse_btn_txt_clr ); ?>">
                                </td>
                            </tr>
                            <tr>
                                <th><?php esc_html_e( 'Button Size:', 'notipulse' ); ?></th>
                                <td>
                                    <select name="notipulse_btn_size" id="notipulse_btn_size">
                                        <option value="Small" <?php selected( $notipulse_btn_size, 'Small' ); ?>><?php esc_html_e( 'Small', 'notipulse' ); ?></option>
                                        <option value="Medium" <?php selected( $notipulse_btn_size, 'Medium' ); ?>><?php esc_html_e( 'Medium', 'notipulse' ); ?></option>
                                        <option value="Large" <?php selected( $notipulse_btn_size, 'Large' ); ?>><?php esc_html_e( 'Large', 'notipulse' ); ?></option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- Tab 4: Countdown Settings -->
                <div class="common tab-content" id="tab4" style="display: none;">
                    <div class="mn-content-tab common">
                        <table class="mn-tbl form-table">
                            <h1><?php esc_html_e( 'Countdown Settings:', 'notipulse' ); ?></h1>
                            <tr>
                                <th><?php esc_html_e( 'Countdown On/Off:', 'notipulse' ); ?></th>
                                <td>
                                    <select name="countdown_on_off" id="countdown_on_off">
                                        <option value="Off" <?php selected( $countdown_on_off, 'Off' ); ?>><?php esc_html_e( 'Off', 'notipulse' ); ?></option>
                                        <option value="On" <?php selected( $countdown_on_off, 'On' ); ?>><?php esc_html_e( 'On', 'notipulse' ); ?></option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th><?php esc_html_e( 'Select Date/Time:', 'notipulse' ); ?></th>
                                <td>
                                    <input type="datetime-local" name="countdown_date_time" id="countdown_date_time" value="<?php echo esc_attr( $countdown_date_time ); ?>">
                                </td>
                            </tr>
                            <tr class="space">
                                <th><?php esc_html_e( 'Margin (px):', 'notipulse' ); ?></th>
                                <td>
                                    <input type="number" name="countdown_top_mar" id="countdown_top_mar" placeholder="<?php esc_attr_e( 'Top', 'notipulse' ); ?>" value="<?php echo esc_attr( $countdown_top_mar ); ?>">
                                    <input type="number" name="countdown_btm_mar" id="countdown_btm_mar" placeholder="<?php esc_attr_e( 'Bottom', 'notipulse' ); ?>" value="<?php echo esc_attr( $countdown_btm_mar ); ?>">
                                    <input type="number" name="countdown_lft_mar" id="countdown_lft_mar" placeholder="<?php esc_attr_e( 'Left', 'notipulse' ); ?>" value="<?php echo esc_attr( $countdown_lft_mar ); ?>">
                                    <input type="number" name="countdown_ryt_mar" id="countdown_ryt_mar" placeholder="<?php esc_attr_e( 'Right', 'notipulse' ); ?>" value="<?php echo esc_attr( $countdown_ryt_mar ); ?>">
                                </td>
                            </tr>
                            <tr class="space">
                                <th><?php esc_html_e( 'Padding (px):', 'notipulse' ); ?></th>
                                <td>
                                    <input type="number" name="countdown_top_pad" id="countdown_top_pad" placeholder="<?php esc_attr_e( 'Top', 'notipulse' ); ?>" value="<?php echo esc_attr( $countdown_top_pad ); ?>">
                                    <input type="number" name="countdown_btm_pad" id="countdown_btm_pad" placeholder="<?php esc_attr_e( 'Bottom', 'notipulse' ); ?>" value="<?php echo esc_attr( $countdown_btm_pad ); ?>">
                                    <input type="number" name="countdown_lft_pad" id="countdown_lft_pad" placeholder="<?php esc_attr_e( 'Left', 'notipulse' ); ?>" value="<?php echo esc_attr( $countdown_lft_pad ); ?>">
                                    <input type="number" name="countdown_ryt_pad" id="countdown_ryt_pad" placeholder="<?php esc_attr_e( 'Right', 'notipulse' ); ?>" value="<?php echo esc_attr( $countdown_ryt_pad ); ?>">
                                </td>
                            </tr>
                            <tr>
                                <th><?php esc_html_e( 'Font Size (px):', 'notipulse' ); ?></th>
                                <td>
                                    <input type="number" name="countdown_font_size" id="countdown_font_size" value="<?php echo esc_attr( $countdown_font_size ); ?>" placeholder="<?php esc_attr_e( 'Type here...', 'notipulse' ); ?>">
                                </td>
                            </tr>
                            <tr class="none <?php echo ( 'Custom' !== $notipulse_type ) ? 'hidden' : ''; ?>">
                                <th><?php esc_html_e( 'Countdown BG Color:', 'notipulse' ); ?></th>
                                <td>
                                    <input type="text" class="wp-color-picker-field" name="countdown_bg_clr" id="countdown_bg_clr" value="<?php echo esc_attr( $countdown_bg_clr ); ?>">
                                </td>
                            </tr>
                            <tr class="none <?php echo ( 'Custom' !== $notipulse_type ) ? 'hidden' : ''; ?>">
                                <th><?php esc_html_e( 'Countdown Text Color:', 'notipulse' ); ?></th>
                                <td>
                                    <input type="text" class="wp-color-picker-field" name="countdown_txt_clr" id="countdown_txt_clr" value="<?php echo esc_attr( $countdown_txt_clr ); ?>">
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- Tab 5: Advance Settings -->
                <div class="mn-advance-tab common tab-content" id="tab5" style="display: none;">
                    <h1><?php esc_html_e( 'Advance Settings:', 'notipulse' ); ?></h1>
                    <table class="mn-tbl form-table">
                        <tr>
                            <th><?php esc_html_e( 'Display In:', 'notipulse' ); ?></th>
                            <td>
                                <select name="display_in[]" id="display_in" style="min-height: 150px;" multiple>
                                    <option disabled style="font-weight: 700;"><?php esc_html_e( 'Pages', 'notipulse' ); ?></option>
                                    <option value="All Pages" <?php echo in_array( 'All Pages', $display_in, true ) || in_array( '', $display_in, true ) ? 'selected' : ''; ?>>- <?php esc_html_e( 'All Pages', 'notipulse' ); ?></option>
                                    <?php
                                    $get_pages = get_pages();
                                    if ( ! empty( $get_pages ) ) {
                                        foreach ( $get_pages as $page_item ) {
                                            $page_title = $page_item->post_title;
                                            $selected   = in_array( $page_title, $display_in, true ) ? 'selected' : '';
                                            echo '<option value="' . esc_attr( $page_title ) . '" ' . esc_attr( $selected ) . '>- ' . esc_html( $page_title ) . '</option>';
                                        }
                                    }

                                    $post_types = get_post_types(
                                        array(
                                            'public'   => true,
                                            '_builtin' => false,
                                        )
                                    );
                                    if ( $post_types ) {
                                        echo '<option disabled style="font-weight: 700;">' . esc_html__( 'Post Types', 'notipulse' ) . '</option>';
                                        foreach ( $post_types as $pt ) {
                                            if ( 'e-landing-page' !== $pt && 'elementor_library' !== $pt ) {
                                                $selected = in_array( $pt, $display_in, true ) ? 'selected' : '';
                                                echo '<option value="' . esc_attr( $pt ) . '" ' . esc_attr( $selected ) . '>- ' . esc_html( $pt ) . '</option>';
                                            }
                                        }
                                    }
                                    ?>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th><?php esc_html_e( 'User Role:', 'notipulse' ); ?></th>
                            <td>
                                <select name="user_roles" id="user_roles">
                                    <option value=""><?php esc_html_e( 'All User Roles (or Guests)', 'notipulse' ); ?></option>
                                    <?php
                                    global $wp_roles;
                                    if ( ! empty( $wp_roles->roles ) ) {
                                        foreach ( $wp_roles->roles as $role_key => $role_details ) {
                                            $role_name = isset( $role_details['name'] ) ? $role_details['name'] : $role_key;
                                            $selected  = ( $role_name === $user_roles ) ? 'selected' : '';
                                            echo '<option value="' . esc_attr( $role_name ) . '" ' . esc_attr( $selected ) . '>' . esc_html( $role_name ) . '</option>';
                                        }
                                    }
                                    ?>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th><?php esc_html_e( 'Notification Frequency:', 'notipulse' ); ?></th>
                            <td>
                                <select name="notipulse_time" id="notipulse_time">
                                    <option value="Every Time On Page Load" <?php selected( $notipulse_time, 'Every Time On Page Load' ); ?>><?php esc_html_e( 'Every Time On Page Load', 'notipulse' ); ?></option>
                                    <option value="1 Time On Page Load" <?php selected( $notipulse_time, '1 Time On Page Load' ); ?>><?php esc_html_e( '1 Time On Page Load (Per Session)', 'notipulse' ); ?></option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th><?php esc_html_e( 'Close When:', 'notipulse' ); ?></th>
                            <td>
                                <select name="notipulse_close_when" id="notipulse_close_when">
                                    <option value="Do not close - visitor will have to manually close." <?php selected( $notipulse_close_when, 'Do not close - visitor will have to manually close.' ); ?>><?php esc_html_e( 'Do not close - visitor will have to manually close.', 'notipulse' ); ?></option>
                                    <option value="After a time delay" <?php selected( $notipulse_close_when, 'After a time delay' ); ?>><?php esc_html_e( 'After a time delay', 'notipulse' ); ?></option>
                                </select>
                            </td>
                        </tr>
                        <tr class="timeWrap <?php echo ( 'After a time delay' === $notipulse_close_when ) ? '' : 'hidden'; ?>">
                            <th><?php esc_html_e( 'After How Much Time (In seconds)?', 'notipulse' ); ?></th>
                            <td>
                                <input type="number" name="notipulse_how_much_time" id="notipulse_how_much_time" value="<?php echo esc_attr( $notipulse_how_much_time ); ?>" placeholder="<?php esc_attr_e( 'In seconds', 'notipulse' ); ?>">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>