{% extends 'base.html.twig' %}

{% block title %}Buying A Fiberglass Pool - Step 3 | {{ parent() }}{% endblock %}

{% block body %}
    <h1>STEP 3: Buying A Fiberglass Pool - Pool Estimate Calculator.</h1>
    <p>Now that you have explored the different pool types and options available to you, it's time to <strong><i>calculate a cost for your pool</i></strong>. The <strong><i>fiberglass pool estimate tool</i></strong> below will help give you a range of your total pool investment. PLEASE NOTE: These costs are REAL costs (including taxes). Unlike most pool installers, we include EVERYTHING it takes to complete your project. We believe it is the only honest way to present costs. What do we mean when we say <a href='{{ path('ourFivePointsOfDifference') }}'>'COMPLETE installation'</a>?</p>
    <div class="row justify-content-lg-center">
        <div class="col col-lg-6 formWrapper">
            {{ include(template) }}
            {% if fakeForm is defined %}
                {{ include('buying_a_pool_steps/_budgetForm.html.twig') }}
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(function () {
            $(document).on('submit', '.budgetEstimatorUnlock', function (event) {

                event.preventDefault();

                $.ajax({
                    url: '{{ path('unlockBudgetEstimator') }}',
                    method: 'POST',
                    data: $('.budgetEstimatorUnlock').serialize(),
                    beforeSend: function () {
                        $('.formWrapper button').prop('disabled', true).html('Please wait.');
                    },
                    success: function (data) {
                        $('.formWrapper').html(data);
                    },
                    error: function (jqXHR) {
                        $('.formWrapper').html(jqXHR.responseText);
                        scrollToError();
                    }
                });
            });

            $(document).on('submit', '.budgetEstimator', function (event) {

                event.preventDefault();

                $.ajax({
                    url: '{{ path('calculateBudgetEstimate') }}',
                    method: 'POST',
                    data: $('.budgetEstimator').serialize(),
                    beforeSend: function () {
                        $('.formWrapper button').prop('disabled', true).html('Please wait.');
                    },
                    success: function (data) {
                        $('.formWrapper').html(data);
                    },
                    error: function (jqXHR) {
                        $('.formWrapper').html(jqXHR.responseText);
                        scrollToError();
                    }
                });
            });
        });
    </script>
{% endblock %}