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

    ?>



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

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

    <div class="parlayCalc">
        <form method="get" action="" onsubmit="return(false);">
            <div class="parlayCalculator">
                <div class="row">
                    <div class="ParlayCalcRow">
                        <div class="row">
                            <div class="label_box">
                                <label for="bet">
                                    <b>Bet 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 Bet.
                                            </li>
                                        </ul>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input_box">
                                <input class="wager" type="text" id="wager" name="wager" value="10"
                                    onblur="calculate_parlay();">
                            </div>
                        </div>
                    </div>

                    <div class="ParlayCalcRow">
                        <div class="row">
                            <div class="label_box">
                                <label for="amounttowin">
                                    <b>&nbsp;</b>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input_box">
                                <div class="ParlayCalcSubmit">
                                    <input class="covers-Calculators-resetBtn" type="button" id="add_bet" name="add_bet"
                                        onclick="addBet();" value="Add Bet" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bets_container">
                    <div class="row">
                        <div class="ParlayCalcRow">
                            <div class="row">
                                <div class="label_box">
                                    <label for="us-parlay">
                                        <b>Bet 1</b>
                                    </label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input_box">
                                    <input id="bet_1" class="parlayInput" placeholder="eg -110" type="text"
                                        onblur="calculate_parlay();">
                                </div>
                            </div>
                        </div>
                        <div class="ParlayCalcRow">
                        </div>
                    </div>
                </div>

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


                <div class="row">
                    <div class="ParlayCalcRow payout">
                        <div class="row">
                            <div class="label_box">
                                <label>
                                    <b>Parlay Odds</b>
                                    <div class="poppover">
                                        <a class="popover__trigger">?</a>
                                        <ul class="popover__menu">
                                            <li class="popover__menu-item">This is the implied probability of earning
                                                the "To Win" amount in American Odds format.</li>
                                        </ul>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input_box">
                                <input type="text" id="payoutOdds" name="payoutOdds" style="cursor:initial;border:none;"
                                    readonly="" value="+100">
                            </div>
                        </div>
                    </div>
                    <div class="ParlayCalcRow payout">
                        <div class="row">
                            <div class="label_box">
                                <label>
                                    <b>To Win</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="payout" name="payout" style="cursor:initial;border:none;"
                                    readonly="" value="$0.00">
                            </div>
                        </div>
                    </div>
                </div>

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

<?php
}
?>