<table class="calculator_table custom_slider-ui to_div" cellpadding="0" cellspacing="0">
    <tbody valign="top" align="center">
    <tr>
        <td colspan="5">
            <span class="calculator_table__title"><?php echo __('Сколько камней нужно в баню');?></span>
            <i class="br10"></i>
        </td>
    </tr>
    <tr>
        <td colspan="5">
            <table cellspacing="0" cellpadding="0" width="100%">
                <tbody valign="top" align="center">
                    <tr>
                        <td align="left" valign="middle">
                            <i class="br20"></i>
                            <i class="br10 mobile_hide"></i>
                            <span class="calculator_table__item"><?php echo __('Размер бани');?></span>
                            <i class="br15"></i>
                        </td>
                        <td></td>
                        <td align="right" valign="middle">
                            <i class="br10 mobile_hide"></i>
                            <div class="calculator_table__value">
                                <nobr><span class="calculator_v">7,36</span>&nbsp;<?php echo __('м');?><sup class="fs_18">3</sup></nobr>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td width="1" align="left">
            <span class="calculator_table__opt_title"><?php echo __('Длина') . ' <span class="slider_prop__val"></span> ' . __('м');?></span>
            <i class="br10"></i>
            <div id="slider_length" class="slider_prop" data-min="2" data-max="10" data-start="2" data-connect="[true,false]" data-step="0.5"></div>
        </td>
        <td width="40"></td>
        <td width="1" align="left">
            <span class="calculator_table__opt_title"><?php echo __('Ширина') . ' <span class="slider_prop__val"></span> ' . __('м');?></span>
            <i class="br10"></i>
            <div id="slider_width" class="slider_prop" data-min="2" data-max="10" data-start="2" data-connect="[true,false]" data-step="0.5"></div>
        </td>
        <td width="40"></td>
        <td width="1" align="left">
            <span class="calculator_table__opt_title"><?php echo __('Высота') . ' <span class="slider_prop__val"></span> ' . __('м');?></span>
            <i class="br10"></i>
            <div id="slider_height" class="slider_prop" data-min="2" data-max="4" data-start="2" data-connect="[true,false]" data-step="0.5"></div>
        </td>
        <td></td>
    </tr>
    <tr>
        <td colspan="5">
            <table cellspacing="0" cellpadding="0" width="100%">
                <tbody valign="top" align="center">
                    <tr>
                        <td align="left" valign="middle">
                            <i class="br10"></i>
                            <i class="br50 mobile_hide"></i>
                            <span class="calculator_table__item"><?php echo __('Понадобится камней');?></span>
                        </td>
                        <td></td>
                        <td align="right" valign="middle">
                            <i class="br10"></i>
                            <i class="br50 mobile_hide"></i>
                            <div class="calculator_table__value">
                                <nobr><span class="calculator_kg">7,36</span>&nbsp;<?php echo __('кг');?></nobr>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left">
            <i class="br25"></i>
            <span class="calculator_table__item"><?php echo __('Сколько стоит');?></span>
        </td>
        <td></td>
        <td colspan="3" align="right">
            <i class="br25"></i>
            <div class="calculator_table__value calculator_cost"></div>
        </td>
    </tr>
    <tr>
        <td colspan="5">
            <i class="br40"></i>
            <a href="" class="btn green_btn calculator_table__btn">Добавить в корзину</a>
        </td>
    </tr>
    </tbody>
</table>

<?php
$offers_arr = array();
$culture = $sf_user->getCulture();
if(count($offers) > 0){
    foreach ($offers as $offer){

        if (strlen(stristr($offer['title'], ')')) > 3) {
            $title = stristr($offer['title'], ')');
            $title = str_replace(',', '' , $title);
            $title = str_replace(')', '', $title);

        } elseif (strlen(stristr($offer['title'], '(')) > 3) {
            $title = stristr($offer['title'], '(');
            $title = str_replace('(', ' ', $title);
            $title = str_replace(')', '', $title);

        } else {
            $title = $offer['title'];
        }

        $offers_arr[] = array('id' => $offer['id'], 'title' => $title, 'price' => $offer['price']);
    }
}
$json = json_encode($offers_arr);
?>
<script type="text/javascript">
    var calculator = {
        v: 1,
        kg: 0,
        cost: '',
        count: 0,
        offers: JSON.parse('<?php echo $json;?>'),
        updateCost: function() {
            var _this = this;
            _this.v = 1;
            $('.slider_prop').each(function(index, element){
                _this.v *= parseFloat(window[element.id+'_value']);
            });
            if(_this.v == NaN){
                return false;
            }
            _this.v = _this.v.toFixed(1);
            _this.kg = Math.ceil(_this.v) * 5;
            _this.count = _this.kg /10;
            _this.cost = '';
            if(_this.offers.length > 1){
                _this.offers.forEach(function(entry) {
                    _this.cost += '<label class="radio calculator_cost__item">' +
                                        '<input type="radio" class="not_custom" name="calculator_item" data-id="'+ entry.id +'">' +
                                        '<span class="radio_span"></span>' +
                                        '<span class="radio_text">' + entry.title + '&nbsp;<span class="calculator_cost__item__price">' + formatNum(_this.count * entry.price) + '&nbsp;<span class="rub">a</span></span></span>' +
                                    '</label>';
                });
            }else if(_this.offers.length == 1){
                _this.cost += '<nobr>' + formatNum(_this.count * _this.offers[0].price) + '&nbsp;<span class="rub">a</span></nobr>';
            }
            $('.calculator_v').text(_this.v);
            $('.calculator_kg').text(_this.kg);
            $('.calculator_cost').html(_this.cost);
        },

        btn: {

            disable: function() {
                $('.calculator_table__btn').addClass('btn_disabled').attr('disabled','disabled').text('Добавлено');
            },

            enable: function() {
                $('.calculator_table__btn').removeClass('btn_disabled').removeAttr('disabled').text('Добавить в корзину');
            }

        }
    };

    $('.slider_prop').each(function(index, element){
        window[element.id] = document.getElementById(element.id);
        window[element.id+'_value'] = document.getElementById(element.id);

        $(window[element.id]).before('<div class="slider_count"><span></span><span></span></div>');

        noUiSlider.create(window[element.id], {
            start: $(window[element.id]).data('start'),
            connect: $(window[element.id]).data('connect'),
            margin: 0,
            range: {
                'min': $(window[element.id]).data('min'),
                'max': $(window[element.id]).data('max')
            },
            step: $(window[element.id]).data('step')
        });

        window[element.id].noUiSlider.on('update', function( values, handle ) {
            var _this = this;
            $(_this.target).prev().find('span:first-child').text(this.options.range.min);
            $(_this.target).prev().find('span:last-child').text(this.options.range.max);

            values.forEach(function(value, index, array){
                value = parseFloat(value).toFixed(1);
                $(_this.target).closest('td').find('.slider_prop__val').text(value)
                $(_this.target).find('.noUi-origin .noUi-handle[data-handle='+index+']').text('');
                window[element.id+'_value'] = value;
            });
            calculator.updateCost();
            calculator.btn.enable();
        });
    });

    // Выбор предложения из Калькулятора
    $('body').on('change', '.calculator_cost__item > input[type="radio"]', function(e) {
        var id = $(this).data('id');
        $('.product_offer > input[type="radio"][data-id="'+ id +'"]').prop('checked', true);
        calculator.btn.enable();
    });

    // Выбор предложения из основного блока предложений
    $('body').on('change', '.product_offer > input[type="radio"]', function(e) {
        var id = $(this).data('id');
        $('.calculator_cost__item > input[type="radio"][data-id="'+ id +'"]').prop('checked', true);
    });

    // Добавление в корзину из Калькулятора
    $('.calculator_table__btn').click(function(e) {

        var count = calculator.kg/10;

        // Если несколько предложений
        if($('.calculator_cost__item').length > 0) {
            if($('.calculator_cost__item > input[type="radio"]:checked').length > 0) {
                var active_calc = $('.calculator_cost__item > input[type="radio"]:checked');
                var id = active_calc.data('id');
                var offer = $('.product_offer > input[type="radio"][data-id="'+ id +'"]').closest('.product_offer');
                var offer_inp = offer.find('.product_counter_val');
                //var new_val = parseInt(offer_inp.val()) + parseInt(count);
                var new_val = parseInt(count);

                offer_inp.val(new_val).trigger('keyup');

                calculator.btn.disable();

            } else {
                $('.calculator_cost').addClass('jump');
                setTimeout(function() {
                    $('.calculator_cost').removeClass('jump');
                }, 500);
            }

        // Если одно предложение
        } else {
            var offer = $('.product_offer');
            var offer_inp = offer.find('.product_counter_val');
            var new_val = parseInt(offer_inp.val()) + parseInt(count);

            offer_inp.val(new_val).trigger('keyup');
        }

        return false;
    });
</script>