<?php
defined('ABSPATH') || exit;

// Track block usage (first render only)
if (function_exists('ezhp_track_block_usage')) {
    ezhp_track_block_usage('chinese-horoscope', $attributes);
}

echo "<!-- CHINESE HERO ACTIVE -->";

/* ---------------------------------------------------------
   SANITIZE INPUTS
--------------------------------------------------------- */
$ezhp_language  = sanitize_text_field($attributes['language'] ?? 'en');
$ezhp_hero_mode = sanitize_text_field($attributes['heroImageDisplayMode'] ?? 'inline');
$ezhp_hero_url  = esc_url($attributes['heroImageUrl'] ?? '');
$ezhp_hero_alt  = esc_attr($attributes['heroImageAlt'] ?? '');
$ezhp_align     = sanitize_text_field($attributes['heroImageAlignment'] ?? 'center');
$ezhp_wrap      = sanitize_text_field($attributes['heroImageTextWrap'] ?? 'none');
$ezhp_opacity   = floatval($attributes['heroImageOverlayOpacity'] ?? 50);
$ezhp_color_raw = sanitize_text_field($attributes['heroImageOverlayColor'] ?? 'black');
$ezhp_max_width = sanitize_text_field($attributes['heroImageMaxWidth'] ?? '40%');

// RTL language detection
$ezhp_rtl_languages = ['ar', 'he', 'fa', 'ur'];
$ezhp_is_rtl = in_array($ezhp_language, $ezhp_rtl_languages, true);
$ezhp_dir = $ezhp_is_rtl ? 'rtl' : 'ltr';

$ezhp_result_html = "";

/* ---------------------------------------------------------
   FRONTEND UI (date input + button)
--------------------------------------------------------- */


$ezhp_output  = '<div 
    class="wp-block ez-horoscope-block chinese-horoscope-block"
    dir="' . esc_attr($ezhp_dir) . '"
    data-ezhp-lang="' . esc_attr($ezhp_language) . '"
    data-hero-mode="' . esc_attr($ezhp_hero_mode) . '"
    data-hero-url="' . esc_url($ezhp_hero_url) . '"
    data-hero-alt="' . esc_attr($ezhp_hero_alt) . '"
    data-hero-wrap="' . esc_attr($ezhp_wrap) . '"
    data-hero-align="' . esc_attr($ezhp_align) . '"
    data-hero-opacity="' . esc_attr($ezhp_opacity) . '"
    data-hero-color="' . esc_attr($ezhp_color_raw) . '"
    data-hero-max-width="' . esc_attr($ezhp_max_width) . '"
    data-hide-heading="' . ( ! empty( $attributes['hideHeading'] ) ? '1' : '0' ) . '"
>';
$ezhp_output .= '<div class="ezhp-form">';
$ezhp_output .= '<label>Enter your birthdate:</label>';
$ezhp_output .= '<input type="date" class="ezhp-date-input" value="">';
$ezhp_output .= '<button type="button" class="ezhp-fetch-button wp-element-button">Get Horoscope</button>';


$ezhp_output .= '</div>';

/* ---------------------------------------------------------
   RESULT CONTAINER (JS fills it)
--------------------------------------------------------- */
$ezhp_output .= '<div class="chinese-horoscope-result"></div>';
$ezhp_output .= '</div>';

echo wp_kses(
    $ezhp_output,
    [
        'div' => [
            'class' => [],
            'dir' => [],
            'data-ezhp-lang' => [],
            'data-hero-mode' => [],
            'data-hero-url' => [],
            'data-hero-alt' => [],
            'data-hero-wrap' => [],
            'data-hero-align' => [],
            'data-hero-opacity' => [],
            'data-hero-color' => [],
            'data-hero-max-width' => [],
            'data-hide-heading' => [],
        ],
        'input' => [
            'type' => [],
            'class' => [],
            'value' => []
        ],
        'label' => [],
        'button' => [
            'type' => [],
            'class' => []
        ]
    ]
);