<?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-hedging-calculator_" . $block["id"];

    ?>



<style>
<?php echo '#'.$block_unique_id;

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

    <div class="hedgingCalc">
        <form method="get" action="" onsubmit="return(false);">
            <div class="hedgingCalculator">
                <div class="row">
                    <div class="HedgingCalcRow">
                        <div class="row">
                            <div class="label_box">
                                <label for="us-odds">
                                    <b>My Odds</b>
                                    <div class="poppover">
                                        <a class="popover__trigger">?</a>
                                        <ul class="popover__menu">
                                            <li class="popover__menu-item">My Odds Explanation</li>
                                        </ul>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input_box">
                                <input id="initial_odds" class="american-odds hedgingInput" placeholder="eg -110" type="text"
                                    name="initial_odds" onblur="calculate_hedging();">
                            </div>
                        </div>
                    </div>
                    <div class="HedgingCalcRow">
                        <div class="row">
                            <div class="label_box">
                                <label for="decimal-odds">
                                    <b>Bet Amount</b>
                                    <div class="poppover">
                                        <a class="popover__trigger">?</a>
                                        <ul class="popover__menu">
                                            <li class="popover__menu-item">The amount of money you are going to bet.
                                            </li>
                                        </ul>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input_box">
                                <input id="bet_amount" class="decimal-odds" placeholder="$0,00" type="text"
                                    name="bet_amount" onblur="calculate_hedging();">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="HedgingCalcRow">
                        <div class="row">
                            <div class="label_box">
                                <label for="us-odds">
                                    <b>Hedge 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="hedge_odds" class="american-odds hedgingInput" placeholder="eg -110" type="text"
                                    name="hedge_odds" onblur="calculate_hedging();">
                            </div>
                        </div>
                    </div>
                    <div class="HedgingCalcRow">
                        <div class="row">
                            <div class="label_box">
                                <label for="decimal-odds">
                                    <b>Hedge Amount</b>
                                    <div class="poppover">
                                        <a class="popover__trigger">?</a>
                                        <ul class="popover__menu">
                                            <li class="popover__menu-item">The hedge amount explanation.</li>
                                        </ul>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input_box">
                                <input id="hedge_amount" class="decimal-odds" placeholder="eg 1.91" type="text"
                                    name="hedge_amount" readonly>
                            </div>
                        </div>
                    </div>
                </div>

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

                <div class="row">
                    <div class="HedgingCalcRow 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">The total amount of money you will receive.
                                            </li>
                                        </ul>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input_box">
                                <input type="text" id="hedgeTotalPayout" name="hedgeTotalPayout" style="cursor:initial;border:none;"
                                    readonly="" value="+100">
                            </div>
                        </div>
                    </div>
                    <div class="HedgingCalcRow payout">
                        <div class="row">
                            <div class="label_box">
                                <label>
                                    <b>Hedge Profit</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 (the original wager is removed from the calculation to
                                                leave only the profit amount).</li>
                                        </ul>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input_box">
                                <input type="text" id="hedgeProfit" name="hedgeProfit" style="cursor:initial;border:none;"
                                    readonly="" value="$0.00">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="HedgingCalcRow">
                        <div class="HedgingCalcSubmit">
                            <input class="covers-Calculators-resetBtn" onclick="resetHedgeCalculator('<?php echo $block_unique_id; ?>')" type="button"
                                value="Reset" name="button">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<?php
}
?>