<?php

if (isset($block['data']['preview_image_help'])) {    /* rendering in inserter preview  */
    echo '<img src="' . $block['data']['preview_image_help'] . '" style="width:100%; height:auto;">';
} else {
    $ftm_oc_box_bg_color                = (get_field('ftm_oc_box_bg_color') != '' ? get_field('ftm_oc_box_bg_color'): '#efefef');
    $ftm_oc_reset_hover_bg_color        = (get_field('ftm_oc_reset_hover_bg_color') != '' ? get_field('ftm_oc_reset_hover_bg_color') : '#fd4f00');
    $ftm_oc_reset_hover_color           = (get_field('ftm_oc_reset_hover_color') != '' ? get_field('ftm_oc_reset_hover_color') : '#ffffff');    
    $ftm_oc_reset_button_bg_color       = (get_field('ftm_oc_reset_button_bg_color') != '' ? get_field('ftm_oc_reset_button_bg_color') : '#d8d8d8');
    $ftm_oc_reset_button_font_color     = (get_field('ftm_oc_reset_button_font_color') != '' ? get_field('ftm_oc_reset_button_font_color') : '#444444');
    $ftm_oc_total_results_bg_color      = (get_field('ftm_oc_total_results_bg_color') != '' ? get_field('ftm_oc_total_results_bg_color') : '#444444');
    $ftm_oc_total_results_font_color    = (get_field('ftm_oc_total_results_font_color') != '' ? get_field('ftm_oc_total_results_font_color') : '#ffffff');
    $ftm_oc_labels_color                = (get_field('ftm_oc_labels_color') != '' ? get_field('ftm_oc_labels_color') : '#000000');
    $ftm_oc_font_color                  = (get_field('ftm_oc_font_color') != '' ? get_field('ftm_oc_font_color') : '#000000');
    $block_unique_id                    = "ftm-odds-calculator_" . $block["id"];

    ?>



<style>
<?php echo '#'.$block_unique_id; ?> 
{
    --ftm-odds-wrapper-bg: <?php echo $ftm_oc_box_bg_color; ?>;
    --ftm-odds-reset_hover_bg_color : <?php echo $ftm_oc_reset_hover_bg_color; ?>;
    --ftm-odds-reset_hover_color : <?php echo $ftm_oc_reset_hover_color; ?>;
    --ftm-odds-reset_button_bg: <?php echo $ftm_oc_reset_button_bg_color ; ?>;
    --ftm-odds-eset_button_font_color: <?php echo $ftm_oc_reset_button_font_color; ?>;
    --ftm-odds-total_results_bg: <?php echo $ftm_oc_total_results_bg_color; ?>;
    --ftm-odds-total_results_font_color: <?php echo $ftm_oc_total_results_font_color; ?>;
    --ftm-odds-labels_color: <?php echo $ftm_oc_labels_color; ?>;
    --ftm-odds-font_color: <?php echo $ftm_oc_font_color; ?>;    
}
</style>
<div id="<?php echo $block_unique_id;?>" class="ftm-odds_calculator">

    <div class="oddsCalc">
        <form method="get" action="" onsubmit="return(false);">
            <div class="oddsCalculator">
                <div class="row">
                    <div class="OddsCalcRow">
                        <div class="row">
                            <div class="label_box">
                                <label for="bet">
                                    <b>Bet/Wager Amount</b>
                                    <div class="poppover">
                                        <a class="popover__trigger" data-toggle="popover">?</a>
                                        <ul class="popover__menu">
                                            <li class="popover__menu-item">Enter the amount of money you plan to wager.
                                            </li>
                                        </ul>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input_box">
                                <input class="wager" type="text" id="HTB_placeHolder" name="bet" value="100"
                                    onblur="oddsConverter(this);">
                            </div>
                        </div>
                    </div>

                    <div class="OddsCalcRow">
                        <div class="row">
                            <div class="label_box">
                                <label for="amounttowin">
                                    <b>To Win:</b>
                                    <div class="poppover">
                                        <a class="popover__trigger" data-toggle="popover">?</a>
                                        <ul class="popover__menu">
                                            <li class="popover__menu-item">
                                                Some bettors prefer to wager a “to win” amount. Enter the amount of
                                                money you want to win with your wager.
                                            </li>
                                        </ul>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input_box">
                                <input type="text" id="amountttowin" placeholder="eg 100" name="amounttowin"
                                    onblur="oddsConverter(this);">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="OddsCalcRow">
                        <div class="row">
                            <div class="label_box">
                                <label for="us-odds">
                                    <b>American Odds</b>
                                    <div class="poppover">
                                        <a class="popover__trigger">?</a>
                                        <ul class="popover__menu">
                                            <li class="popover__menu-item">American odds are displayed in hundreds and
                                                thousands (-110, +500, +1500, etc). Be sure to enter the minus sign (-)
                                                if applicable to your odds.</li>
                                        </ul>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input_box">
                                <input id="HTB_placeHolder" class="american-odds" placeholder="eg -110" type="text"
                                    name="us_odds" onblur="oddsConverter(this);">
                            </div>
                        </div>
                    </div>
                    <div class="OddsCalcRow">
                        <div class="row">
                            <div class="label_box">
                                <label for="decimal-odds">
                                    <b>Decimal Odds</b>
                                    <div class="poppover">
                                        <a class="popover__trigger">?</a>
                                        <ul class="popover__menu">
                                            <li class="popover__menu-item">Decimal odds are displayed as a number
                                                greater than one, usually with up to two decimal points (1.10, 1.90,
                                                4.50, etc).</li>
                                        </ul>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input_box">
                                <input id="HTB_placeHolder" class="decimal-odds" placeholder="eg 1.91" type="text"
                                    name="decimal_odds" onblur="oddsConverter(this);">
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="OddsCalcRow">
                        <div class="row">
                            <div class="label_box">
                                <label for="fractional-odds">
                                    <b>Fractional Odds</b>
                                    <div class="poppover">
                                        <a class="popover__trigger">?</a>
                                        <ul class="popover__menu">
                                            <li class="popover__menu-item">Fractional odds are displayed as a fraction
                                                (1/2 , 10/11, 12/1, etc).</li>
                                        </ul>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input_box">
                                <input id="HTB_placeHolder" class="fractional-odds" placeholder="eg 10/11" type="text"
                                    name="fractional_odds" onblur="oddsConverter(this);">
                            </div>
                        </div>
                    </div>
                    <div class="OddsCalcRow">
                        <div class="row">
                            <div class="label_box">
                                <label for="implied-probability">
                                    <b>Implied Probability:</b>
                                    <div class="poppover">
                                        <a class="popover__trigger">?</a>
                                        <ul class="popover__menu">
                                            <li class="popover__menu-item">Implied probability is displayed as a
                                                percentage (10%, 52.38%, 83.33%, etc).</li>
                                        </ul>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input_box">
                                <input id="HTB_placeHolder" class="implied-prob" placeholder="eg 40%" type="text"
                                    name="implied_probability" onblur="oddsConverter(this);">
                            </div>
                        </div>
                    </div>


                </div>

                <div class="row">
                    <div id="<?php echo $block_unique_id; ?>_oddsError" class="covers-Calculators-errorField">
                        <div>
                            <span id="<?php echo $block_unique_id; ?>_oddsErrorText">
                                Error
                            </span>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="OddsCalcRow payout">
                        <div class="row">
                            <div class="label_box">
                                <label>
                                    <b>Total Payout</b>
                                    <div class="poppover">
                                        <a class="popover__trigger">?</a>
                                        <ul class="popover__menu">
                                            <li class="popover__menu-item">This is the amount you will receive if
                                                you win your bet (original wager amount plus profit).</li>
                                        </ul>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input_box">
                                <input type="text" id="payout" name="payout" style="cursor:initial;border:none;"
                                    readonly="">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="OddsCalcRow" >
                        <div class="OddsCalcSubmit">
                            <input class="covers-Calculators-resetBtn" onclick="clearForm(this.form)" type="button"
                                value="Reset" name="button">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<?php
}
?>