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

<div id="syrus-chat-container">
    <button class="chat-toggle" type="button">
        <i class="bi bi-whatsapp"></i>
    </button>

    <div class="chat-container" style="display:none">

        <div class="chat-header">
            <div class="profile-picture-container">
                <img src="<?php echo isset($wa_settings['thumbnail_image']) ? $wa_settings['thumbnail_image'] : SYRUS_THEME_URI . '/assets/img/user-placeholder.png' ?>" alt="">
            </div>

            <div class="sender-container">
                <p class="name"><?php echo isset($wa_settings['sender_name']) ? $wa_settings['sender_name'] : esc_html('John Doe', 'syrus') ?></p>
                <p class="status">Online</p>
            </div>

            <div class="close-button">
                <i class="bi bi-x"></i>
            </div>


        </div>

        <div class="chat-body">
            <div class="message-container loading-container">
                <img src="<?php echo SYRUS_THEME_URI . '/assets/img/ellipsis-loader.svg' ?>" alt="Ellipsis loader image">
            </div>
                
            <div class="message-container" style="display:none">
                <p class="name"><?php echo isset($wa_settings['sender_name']) ? $wa_settings['sender_name'] : esc_html('John Doe', 'syrus') ?></p>
                <p class="content">
                    <?php echo isset($wa_settings['message_content']) ? stripslashes($wa_settings['message_content']) : esc_html('🌟 Welcome! How can we help you today? 🚀 Click to chat with us! 💬', 'syrus') ?>
                </p>
                <p class="time"><?php echo current_datetime()->format('H:i') ?></p>
            </div>
        </div>


        <div class="chat-footer">
            <a href="<?php echo isset($wa_settings['whatsapp_number']) ? 'https://api.whatsapp.com/send/?phone=' . $wa_settings['whatsapp_number'] : '#' ?>" target="_blank" id="syrus-chat-start-whatsapp-chat">
                <i class="bi bi-whatsapp me-2"></i> <?php _e('Start chat', 'syrus') ?>
            </a>
        </div>
    </div>
</div>