<?php

/**
 * Donate Box Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

// Create id attribute allowing for custom "anchor" value.
$id = 'donate-box-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'donate-box';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}

$custom_text = get_field( 'custom_text' );
$donate_link_text = get_field( 'donate_link_text' );
$donate_custom_link = get_field( 'donate_custom_link' );

?>

<style type="text/css">

    <?php 
        $bg_color = get_field( 'donate_background_color' );
        $new_bg_color_hsl = hexToHsl( $bg_color );
    ?>

    :root {
        /*
            New BG color
        --------------------------------------- */
        --new-bg-hue: <?php echo $new_bg_color_hsl[0] ?> !important;
        --new-bg-saturation: <?php echo $new_bg_color_hsl[1] ?>% !important;
        --new-bg-light: <?php echo ( $new_bg_color_hsl[2] - 5 ) ?>% !important;
    }

</style>

<section id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
    <div class="donate-box__inner" data-bg-color="<?php echo $bg_color ?>">
        <?php echo $custom_text ?>
        <a href="<?php echo $donate_custom_link ?>" class="cta"><?php echo $donate_link_text ?></a>
    </div>
</section>

<?php printf( "<script>window.dispatchEvent( new Event('acf/loaded/donate-box'));</script>" );