{# title #}
{# classified \App\ClassifiedsBundle\Entity\Classified #}
{# user_points_amount int #}
{# slug string #}
{# sections \App\SectionsBundle\Twig\SectionsExtension #}

{% extends ':default:subpage.html.twig' %}

{% block sidebar %}
    {% include ':blocks:sidebar_sections.html.twig' with { clickable: true } %}
    {{ classifieds_categories_block() }}
    {% include ':blocks:sidebar_ads_text_block.html.twig' %}
    {{ sidebar_promoted_companies(3) }}
    {% include '@Catalog/frontend/blocks/sidebar_top_companies.html.twig' %}
    {{ sidebar_promoted_classifieds() }}
    {% include ':blocks:we_recommend.html.twig' %}
{% endblock %}

{% block subpage_content %}
    {% set payment_options = {
        button_text: 'Zapłać teraz',
        currency: 'pln',
        description: 'Podbicie ogłoszenia',
        params: {
            type: 'classified_raise',
            id: classified.id
        }
    } %}

    <div class="raise_classified">
        <div class="alert--info">
            <i class="fa fa-info"></i>
            <b>Podbijanie ogłoszenia</b>
            <span>
                {{- ' ' ~ classified.locale.name -}}
            </span>
        </div>

        <div class="form-group">
            <label class="control-label required" for="raise_classified__points">Ilość punktów</label>
            <select
                id="raise_classified__points"
                name="raise_classified_points"
                required=""
                class="form-control"
            >
                <option value="">-- Wybierz --</option>
                <option value="1">1</option>
                <option value="3">3</option>
                <option value="5">5</option>
                <option value="10">10</option>
            </select>
        </div>

        <div id="rc_payment_types" style="display: none;">
            {% include ':blocks:payment_radios.html.twig' with {
                payment_radios_name: 'payment_type',
                sms_price: 0,
                online_price: 0,
                modifier: 'one_row',
                points_amount: user_points_amount
            } %}
        </div>

        <div id="rc_pay_now1-points" class="rc_payment_button" style="display: none;">
            <form
                action="{{ path('raise_classified_own_points', { slug: slug, section: sections.currentSectionSlug }) }}"
                method="post"
            >
                <input type="hidden" name="points" value="1">
                <button
                    class="btn btn--dark btn--nott"
                >
                    {{- 'Zapłać teraz' -}}
                </button>
            </form>
        </div>

        <div id="rc_pay_now1-sms" class="rc_payment_button" style="display: none;">
            {{ dotpay_sms_button({
                button_text: 'Zapłać teraz',
                params: {
                    type: 'classified_raise_1',
                    id: classified.id
                }
            }) }}
            <span class="hidden" id="rc_pay_now1-sms_price">{{ 2.46 }}</span>
        </div>

        <div id="rc_pay_now1-online" class="rc_payment_button" style="display: none;">
            {{ dotpay_button(
                payment_options|merge({
                    params: payment_options.params|merge({points: 1}),
                    price: '1.23'
                })
            ) }}
        </div>

        <div id="rc_pay_now3-points" class="rc_payment_button" style="display: none;">
            <form
                action="{{ path('raise_classified_own_points', { slug: slug, section: sections.currentSectionSlug }) }}"
                method="post"
            >
                <input type="hidden" name="points" value="3">
                <button
                    class="btn btn--dark btn--nott"
                >
                    {{- 'Zapłać teraz' -}}
                </button>
            </form>
        </div>

        <div id="rc_pay_now3-sms" class="rc_payment_button" style="display: none;">
            {{ dotpay_sms_button({
                button_text: 'Zapłać teraz',
                params: {
                    type: 'classified_raise_3',
                    id: classified.id
                }
            }) }}
            <span class="hidden" id="rc_pay_now3-sms_price">{{ 4.92 }}</span>
        </div>

        <div id="rc_pay_now3-online" class="rc_payment_button" style="display: none;">
            {{ dotpay_button(
                payment_options|merge({
                    params: payment_options.params|merge({points: 3}),
                    price: '2.46'
                })
            ) }}
        </div>

        <div id="rc_pay_now5-points" class="rc_payment_button" style="display: none;">
            <form
                action="{{ path('raise_classified_own_points', { slug: slug, section: sections.currentSectionSlug }) }}"
                method="post"
            >
                <input type="hidden" name="points" value="5">
                <button
                    class="btn btn--dark btn--nott"
                >
                    {{- 'Zapłać teraz' -}}
                </button>
            </form>
        </div>

        <div id="rc_pay_now5-sms" class="rc_payment_button" style="display: none;">
            {{ dotpay_sms_button({
                button_text: 'Zapłać teraz',
                params: {
                    type: 'classified_raise_5',
                    id: classified.id
                }
            }) }}
            <span class="hidden" id="rc_pay_now5-sms_price">{{ 7.38 }}</span>
        </div>

        <div id="rc_pay_now5-online" class="rc_payment_button" style="display: none;">
            {{ dotpay_button(
                payment_options|merge({
                    params: payment_options.params|merge({points: 5}),
                    price: '3.69'
                })
            ) }}
        </div>

        <div id="rc_pay_now10-points" class="rc_payment_button" style="display: none;">
            <form
                action="{{ path('raise_classified_own_points', { slug: slug, section: sections.currentSectionSlug }) }}"
                method="post"
            >
                <input type="hidden" name="points" value="10">
                <button
                    class="btn btn--dark btn--nott"
                >
                    {{- 'Zapłać teraz' -}}
                </button>
            </form>
        </div>

        <div id="rc_pay_now10-sms" class="rc_payment_button" style="display: none;">
            {{ dotpay_sms_button({
                button_text: 'Zapłać teraz',
                params: {
                    type: 'classified_raise_10',
                    id: classified.id
                }
            }) }}
            <span class="hidden" id="rc_pay_now10-sms_price">{{ 12.30 }}</span>
        </div>

        <div id="rc_pay_now10-online" class="rc_payment_button" style="display: none;">
            {{ dotpay_button(
                payment_options|merge({
                    params: payment_options.params|merge({points: 10}),
                    price: '6.15'
                })
            ) }}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        $(function() {
            var $pointsSelect      = $('#raise_classified__points');
            var $paymentTypes      = $('#rc_payment_types');
            var pointsValue        = $pointsSelect.val();
            var checkedPaymentType = $paymentTypes.find('input[name=payment_type]:checked').val();
            var byPointsContainer  = $('#rc_payment_by_points');
            var byPointsMax        = byPointsContainer.data('max');

            function showProperPaymentBtn() {
                $('.rc_payment_button').hide();

                if(pointsValue !== '') {
                    $('#rc_pay_now' + pointsValue + '-' + checkedPaymentType).show();
                }
            }

            $('input[name=payment_type]').change(function() {
                checkedPaymentType = $(this).val();

                showProperPaymentBtn();
            });

            $pointsSelect.change(function() {
                pointsValue = $(this).val();

                byPointsContainer.find('input[name=points]').val(pointsValue);

                if(byPointsMax >= pointsValue) {
                    byPointsContainer.show();
                } else {
                    byPointsContainer.hide();
                }

                showProperPaymentBtn();

                if(pointsValue !== '') {
                    $paymentTypes.show();

                    var $smsButton    = $('#rc_pay_now' + pointsValue + '-sms');
                    var $onlineButton = $('#rc_pay_now' + pointsValue + '-online');

                    $onlineButton.removeClass('hidden');

                    var smsFormName    = $smsButton.find('form').attr('name');
                    var onlineFormName = $onlineButton.find('form').attr('name');

                    console.log(smsFormName);

                    var smsPrice    = $('#rc_pay_now' + pointsValue + '-sms_price').text();
                    var onlinePrice = $onlineButton.find('#' + onlineFormName + '_price').val();

                    $paymentTypes.find('.payment_radios__radio--sms .price').text(smsPrice);
                    $paymentTypes.find('.payment_radios__radio--online .price').text(onlinePrice);
                } else {
                    $paymentTypes.hide();
                }
            });
        });
    </script>
{% endblock %}