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

{% block title %}Pool Service | {{ parent() }}{% endblock %}

{% block body %}
    <h1>Luxury Pools Service Request Form</h1>
    <div class="row">
        <div class="col-12">
            <h4>Want to save yourself the cost of a service call?? Have a look at our <a href="{{ path('poolFAQsAndTroubleshooting') }}">FAQs and troubleshooting page</a>.</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <p style="font-weight:900;">Service calls within 30 miles of our shop are $79, outside of 30 miles $159. If we have multiple service calls in the area, we may decrease the service call fee at our discretion. Hourly rate is $75/hour ($99/hour on all autocover related calls), with a half hour minimum.</p>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-12 col-md-8 col-lg-6 findClientWrapper bg-info p-2 text-center">
            Existing Client Lookup (required)
            <br>
            Enter in the required fields below to request your pool service
            {{ include('support/_findClientForm.html.twig') }}
        </div>
        <div class="w-100"></div>
        <div class="col-12 col-md-8 col-lg-6 poolServiceFormWrapper p-2"></div>
    </div>
{% endblock %}

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

            {# search for existing client #}
            $('.findClient input').keyup(function () {
                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) {
                            $('.poolServiceFormWrapper').html(data.poolServiceForm);
                            $('.findClientStatus').html(data.message);
                        },
                        error: function (jqXHR) {
                            $('.findClientWrapper').html(jqXHR.responseText);
                            scrollToError();
                        }
                    });
                }
            });

            {# submit pool service #}
            $(document).on('submit', '.poolService', function (event) {
                event.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: '{{ path('poolServiceSubmit') }}',
                    data: $('.poolService').serialize(),
                    dataType: 'json',
                    encode: true,
                    beforeSend: function () {
                        $('.poolServiceFormWrapper button').prop('disabled', true).html('Please wait.');
                    },
                    success: function (data) {
                        $('.poolServiceFormWrapper').empty();
                        $('.findClientWrapper').removeClass('bg-info').addClass('bg-success').addClass('text-white').html(data.message);
                    },
                    error: function (jqXHR) {
                        $('.poolServiceFormWrapper').html(jqXHR.responseText);
                        scrollToError();
                    },
                });
            });

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