<?php
    global $syrus;
    $wa_settings = get_option("syrus_theme_whatsapp_settings");
    $wa_settings = $wa_settings ? unserialize($wa_settings) : [];
?>

<h2><?php esc_html_e("WhatsApp",'syrus') ?></h2>
<p class="m-0"><?php esc_html_e("Here you can edit WhatsApp popup settings",'syrus') ?></p>
<hr class="mt-1 mb-4">

<form action="<?php echo admin_url('admin-post.php'); ?>" method="POST" id="form-whatsapp-settings">
    <?php wp_nonce_field('save_whatsapp_settings') ?>
    <input type="hidden" name="action" value="save_whatsapp_settings">
    <input type="hidden" name="thumbnail_image" value="<?php echo isset($wa_settings['thumbnail_image']) ? $wa_settings['thumbnail_image'] : '' ?>">
</form>

<div class="row">

    <div class="col-md-12 d-flex justify-content-start align-items-center mb-4">
        <input class="me-4" name="enable_popup_mobile" type="checkbox" role="switch" id="enable-popup-mobile" form="form-whatsapp-settings" <?php echo isset($wa_settings['enable_popup_mobile']) && $wa_settings['enable_popup_mobile'] ? 'checked' : '' ?>>
        <label for="enable-popup-mobile"><?php esc_html_e('Enable popup on mobile', 'syrus') ?></label>
    </div>

    <div class="col-md-12 d-flex justify-content-start align-items-center mb-4">
        <input class="me-4" name="enable_popup_desktop" type="checkbox" role="switch" id="enable-popup-desktop" form="form-whatsapp-settings" <?php echo isset($wa_settings['enable_popup_desktop']) && $wa_settings['enable_popup_desktop'] ? 'checked' : '' ?>>
        <label for="enable-popup-desktop"><?php esc_html_e('Enable popup on desktop', 'syrus') ?></label>
    </div>

    <div class="col-md-12 d-flex justify-content-start align-items-center mb-4">
        <img class="whatsapp-profile-picture-thumbnail me-4" src="<?php echo isset($wa_settings['thumbnail_image']) ? $wa_settings['thumbnail_image'] : SYRUS_THEME_URI . '/assets/img/user-placeholder.png' ?>" alt="">
        <input type="file" accept="image/png, image/gif, image/jpeg, image/webp" name="whatsapp_profile_picture_uploader" autocomplete="off">
    </div>

    <div class="col-md-2 d-flex justify-content-start align-items-center mb-4">
        <input type="text" class="form-control" value="<?php echo isset($wa_settings['sender_name']) ? $wa_settings['sender_name'] : '' ?>" placeholder="<?php esc_attr_e('John Doe', 'syrus') ?>" name="sender_name" id="sender-name" form="form-whatsapp-settings">
    </div>

    <div class="col-md-10 d-flex justify-content-start align-items-center mb-4">
        <label for="sender-name"><?php esc_html_e('Sender name', 'syrus') ?></label>
    </div>

    <div class="col-md-2 d-flex justify-content-start align-items-center mb-4">
        <textarea class="form-control" id="message-content" name="message_content" placeholder="<?php esc_attr_e('🌟 Welcome! How can we help you today? 🚀 Click to chat with us! 💬', 'syrus') ?>" rows="5" form="form-whatsapp-settings"><?php echo isset($wa_settings['message_content']) ? stripslashes($wa_settings['message_content']) : '' ?></textarea>
    </div>

    <div class="col-md-10 d-flex justify-content-start align-items-center mb-4">
        <label for="message-content"><?php esc_html_e('Message content', 'syrus') ?></label>
    </div>
    
    <div class="col-md-2 d-flex justify-content-start align-items-center mb-4">
        <input type="tel" class="form-control" value="<?php echo isset($wa_settings['whatsapp_number']) ? '+' . $wa_settings['whatsapp_number'] : '' ?>" name="whatsapp_number" id="whatsapp-number" placeholder="+XX XXX XXX XXXX" form="form-whatsapp-settings">
    </div>

    <div class="col-md-10 d-flex justify-content-start align-items-center mb-4">
        <label for="whatsapp-number"><?php esc_html_e('WhatsApp number', 'syrus') ?></label>
    </div>

    <div class="col-md-2 d-flex justify-content-start align-items-center mb-4">
        <input type="number" class="form-control" min="0" name="message_delay" id="message-delay" placeholder="1" step="0.5" value="<?php echo isset($wa_settings['message_delay']) ? $wa_settings['message_delay'] / 1000 : '' ?>" form="form-whatsapp-settings">
    </div>

    <div class="col-md-10 d-flex justify-content-start align-items-center mb-4">
        <label for="message-delay"><?php esc_html_e('Message delay', 'syrus') ?></label>
    </div>

    <div class="col-md-2 d-flex justify-content-start align-items-center mb-4">
        <div class="input-group">
            <div class="input-group-text">
                <input class="mt-0" type="checkbox" name="enable_popup_delay_mobile" value="" autcomplete="off" form="form-whatsapp-settings" <?php echo isset($wa_settings['popup_delay_mobile']) && $wa_settings['popup_delay_mobile'] ? 'checked' : '' ?>>
            </div>
            <input type="number" class="form-control" min="0" name="popup_delay_mobile" id="popup-delay-mobile" value="<?php echo isset($wa_settings['popup_delay_mobile']) ? $wa_settings['popup_delay_mobile'] / 1000 : '' ?>" placeholder="1" step="0.5" form="form-whatsapp-settings">
        </div>
    </div>

    <div class="col-md-10 d-flex justify-content-start align-items-center mb-4">
        <label for="popup-delay-mobile"><?php esc_html_e('Automatic open popup after n seconds', 'syrus') ?></label>
    </div>

    <div class="col-md-12">
        <button type="submit" class="btn btn-primary" form="form-whatsapp-settings"><?php esc_html_e('Save settings', 'syrus') ?></button>
    </div>

</div>


