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

{% block title %}Pool Chemistry Calculator | {{ parent() }}{% endblock %}

{% block body %}
    <h1>Chemistry Calculator</h1>
    <p>
        By using this form you agree to the terms below.<br>
        <span style="font-size:150%;color:red;">CAUTION:</span>
    </p>
    <ul>
        <li>BEWARE OF THE DANGEROUS NATURE OF THE CHEMICALS YOU ARE HANDLING.</li>
        <li>DO NOT MIX ANY CHEMICALS WITH EACH OTHER.</li>
        <li>WATCH OUT FOR FUMES.</li>
        <li>SOME CHEMICALS GIVE OFF STRONG FUMES THAT CAN CAUSE SERIOUS PERSONAL INJURY IF INHALED IN SUFFICIENT QUANTITIES.</li>
        <li>Always remember <u>AAA</u>: <u>A</u>lways <u>A</u>dd <u>A</u>cid to water, never add water to acid.</li>
        <li>Always follow directions and guideline provided on labeling.</li>
        <li>This form does not take the place of professional pool service and consultation. And is to be used as reference only.</li>
    </ul>
    <div class="row justify-content-center">
        <div class="col-12 col-md-8 col-lg-6 findClientWrapper bg-info p-2 text-center">
            LPL Official Record Entry (optional)
            {{ include('support/_findClientForm.html.twig') }}
        </div>
        <div class="w-100"></div>
        <div class="col-12 col-md-8 col-lg-6 chemistryCalculatorWrapper p-2">
            {{ include('support/_chemistryCalculatorForm.html.twig') }}
        </div>
        <div class="w-100"></div>
        <div class="col-12 col-md-8 col-lg-6 calculatorResults text-center text-white p-3 m-3"></div>
        <div class="col-12 clientChemistryRecords"></div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function () {

            {# search for existing client #}
            function findClient() {
                if (($('.findClient-houseNumber').val().length > 0) && ($('.findClient-lastName').val().length > 2)) {
                    $.ajax({
                        type: 'POST',
                        url: '{{ path('checkForClient', { 'referrer' : app.request.attributes.get('_route') }) }}',
                        data: $('.findClient').serialize(),
                        dataType: 'json',
                        encode: true,
                        beforeSend: function () {
                            $('.findClientStatus').html('<div class="help-block text-center bg-warning p-1">Please wait while we look up your pool.</div>');
                        },
                        success: function (data) {
                            $('.chemistryCalculatorWrapper').html(data.chemistryForm);
                            $('.findClientStatus').html(data.message);
                            $('.clientChemistryRecords').html(data.chemistryRecords);
                            $('.calculatorResults').empty().removeClass('bg-success');
                        },
                        error: function (jqXHR) {
                            $('.findClientWrapper').html(jqXHR.responseText);
                            scrollToError();
                        }
                    });
                }
            }

            $('.findClient input').keyup(function () {
                findClient();
            });

            {# submit chemistry calculator #}
            $(document).on('submit', '.chemistryCalculator', function (event) {
                event.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: '{{ path('chemistryCalculatorSubmit') }}',
                    data: $('.chemistryCalculator').serialize(),
                    dataType: 'json',
                    encode: true,
                    beforeSend: function () {
                        $('.chemistryCalculatorWrapper button').prop('disabled', true).html('Please wait.');
                    },
                    success: function (data) {
                        $('.chemistryCalculatorWrapper').html(data.chemistryForm);
                        {# .chemistryCalculatorWrapper must be populated first because it contains the .calculatorResults div #}
                        $('.calculatorResults').addClass('bg-success').html(data.adjustmentMessage);
                        $('.clientChemistryRecords').html(data.chemistryRecords);
                    },
                    error: function (jqXHR) {
                        $('.chemistryCalculatorWrapper').html(jqXHR.responseText);
                        scrollToError();
                    },
                });
            });

            $(document).on('click', '.resetCalculator', function (event) {
                event.preventDefault();
                findClient();
            });

        });
    </script>
{% endblock %}