<div id="<?php echo esc_attr( $data['id'] ); ?>" class="fab-container fab-notice notice <?php echo isset( $data['dismissible'] ) && $data['dismissible'] ? 'is-dismissible' : ''; ?>">
    <div class="<?php echo esc_attr( $data['classes'] ); ?>">
        <!-- Notice Header -->
        <h3 class="flex items-center text-lg">
            <img src="<?php echo esc_url( $data['logo'] ); ?>" alt="Floating Awesome Button" class="w-6 h-6 mr-2">
            <span class="font-semibold"><?php echo esc_html( $data['title'] ); ?></span>
        </h3>

        <!-- Notice Content -->
        <p class="py-2 typewriter" data-message="<?php echo esc_attr( $data['message'] ); ?>"></p>

        <!-- Notice Button -->
        <div class="flex justify-start gap-x-2">
            <?php foreach ( $data['buttons'] as $button ) : ?>
                <?php if ( isset( $button['action'] ) ) : ?>
                    <button class="<?php echo esc_attr( $button['classes'] ); ?>" data-action="<?php echo esc_attr( $button['action'] ); ?>">
                        <?php echo esc_html( $button['message'] ); ?>
                    </button>
                <?php else : ?>
                    <a href="<?php echo esc_url( $button['url'] ); ?>" class="<?php echo esc_attr( $button['classes'] ); ?>" target="<?php echo esc_attr( $button['target'] ?? '_self' ); ?>">
                        <?php echo esc_html( $button['message'] ); ?>
                    </a>
                <?php endif; ?>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<script>
    jQuery( document ).ready( function( $ ) {
        // Typewriter effect.
        const element = $('#<?php echo esc_attr( $data['id'] ); ?> .typewriter');
        const message = element.data('message');
        let i = 0;
        function typeWriter() {
            if (i < message.length) {
                element.text(element.text() + message.charAt(i));
                i++;
                setTimeout(typeWriter, 40);
            }
        }
        typeWriter();

        // Action notice.
        jQuery( '#<?php echo esc_attr( $data['id'] ); ?>' ).on( 'click', 'button[data-action]', function() {
            fetch( '<?php echo esc_url( $data['rest_api']['action'] ); ?>', {
                method: 'POST',
                headers: {
                    'X-WP-Nonce': '<?php echo esc_attr( $data['nonce'] ); ?>',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    notice_id: '<?php echo esc_attr( $data['id'] ); ?>',
                    action: jQuery( this ).data( 'action' ),
                }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    jQuery('#<?php echo esc_attr( $data['id'] ); ?>').fadeOut();
                }
            });
        } );

        // Dismiss notice.
        jQuery( '#<?php echo esc_attr( $data['id'] ); ?>' ).on( 'click', '.notice-dismiss', function() {
            fetch( '<?php echo esc_url( $data['rest_api']['dismiss'] ); ?>', {
                method: 'POST',
                headers: {
                    'X-WP-Nonce': '<?php echo esc_attr( $data['nonce'] ); ?>',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    notice_id: '<?php echo esc_attr( $data['id'] ); ?>',
                }),
            });
        } );
    } );
</script>
