{% extends 'base.html.twig' %}
{% block stylesheets %}
    <style>
        .form-design {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #4e82be;
            color: #ffffff;
        }

        .pad-15 {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        p {
            font-size: 24px;
        }

        .footer {
            padding-top: 15px;
            padding-bottom: 15px;
            /*background-color: #0d47a1 !important;*/
        }

        .modal-body {
            background-color: #4e82be;
            color: #ffffff;
        }

        .finance-button {
            height: 75px !important;
            font-size: 36px !important;
            color: #000 !important;
            border: 4px solid black !important;
            background-color: #4aa24b !important;
            border-radius: 20px !important;
            font-weight: bold !important;
        }

        .cash-button {
            height: 75px !important;
            font-size: 36px !important;
            color: #000 !important;
            border: 4px solid black !important;
            background-color: #efa743 !important;
            border-radius: 20px !important;
            font-weight: bold !important;
        }

        .skip-button {
            height: 75px !important;
            font-size: 36px !important;
            color: #000 !important;
            border: 4px solid black !important;
            background-color: #f6f6f6 !important;
            border-radius: 20px !important;
            font-weight: bold !important;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pickerjs@1.2.1/dist/picker.css">
{% endblock %}
{% block modal %}
    <div class="modal modal-info fade scale" id="modal-default-submit" tabindex="-1" role="dialog"
         aria-labelledby="modal-default-info" aria-hidden="true">
        <div class="modal-dialog modal-primary" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center">Your preapproval<br/> has been<br/> submitted. Your<br/> sales rep
                                will get <br/>back to you shortly.</h3>
                            <a href="{{ path('pre_check_dashboard', {'hash' : hash}) }}"
                               class="btn btn-block btn-success">Continue</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal modal-info fade scale" id="modal-cash-submit" tabindex="-1" role="dialog"
         aria-labelledby="modal-default-info" aria-hidden="true">
        <div class="modal-dialog modal-primary" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center">Your sales rep will get back to you shortly.</h3>
                            <a href="{{ path('pre_check_dashboard', {'hash' : hash}) }}"
                               class="btn btn-block btn-success">Continue</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Cash Modal-->
    <div class="modal fade" id="cashModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Confirmation</h4>
                </div>
                <div class="modal-body text-center">
                    <h1>I wish to make a cash purchase.</h1>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-large" data-dismiss="modal">No</button>
                    <button type="button" class="btn btn-success btn-large" id="cashYes">Yes</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block body %}
    <div class="container-fluid">
        <div class="row" style="background-color:#0d47a1;height: 90px;">
            <div class="col-xs-12 text-center" style="padding:10px;">
                <span class="text-white text-uppercase logo-text">
                    <img src="{{ asset('images/PreviewLogo.png') }}" height="50px;"/>
                </span>
                <p class="text-white powered-by">
                    Powered by <img src="http://member.iserviceauto.com/iServiceLogo.png" height="20px;">
                </p>
            </div>
        </div>
        <div id="payment-option" class="row form-design">
            <div class="col-xs-12 text-center pad-15">
                <h1>I'm thinking of...</h1>
            </div>
            <div class="col-xs-12 pad-15">
                <button id="finance" class="btn btn-block finance-button">Financing or Leasing</button>
            </div>
            <div class="col-xs-12 pad-15">
                <button id="cash" class="btn btn-block cash-button" data-toggle="modal" data-target="#cashModal">
                    Paying Cash
                </button>
            </div>
            <div class="col-xs-12 pad-15">
                <button id="skip" class="btn btn-block skip-button">Skip</button>
            </div>
        </div>
        <div id="precheck" class="row form-design">
            <div class="col-xs-12 text-center">
                <h1>Get Preapproved Now</h1>
                <p>(for this car or similar)</p>
                <p>Should take 1 minute</p>
                <p><b>This Will NOT affect your credit score</b></p>
            </div>
            <div class="col-xs-12 pad-15">
                <input type="text" id="firstName" placeholder="First Name (required)" class="form-control" required>
            </div>
            <div class="col-xs-12 pad-15">
                <input type="text" id="lastName" placeholder="Last Name (required)" class="form-control" required>
            </div>
            <div class="col-xs-12 pad-15">
                <input type="text" id="address1" placeholder="Address 1 (required)" class="form-control" required>
            </div>
            <div class="col-xs-12 pad-15">
                <input type="text" id="address2" placeholder="Address 2" class="form-control"/>
            </div>
            <div class="col-xs-12 pad-15">
                <input type="text" id="dob" placeholder="Date of birth (required)" class="form-control" required>
            </div>
            <div class="col-xs-12 pad-15">
                <input type="text" id="city" placeholder="City (required)" class="form-control" required>
            </div>
            <div class="col-xs-12 pad-15">
                <select id="state" class="form-control" name="state" required>
                    <option value="">Select a State (required)</option>
                    <option>AL</option>
                    <option>AK</option>
                    <option>AS</option>
                    <option>AZ</option>
                    <option>AR</option>
                    <option>CA</option>
                    <option>CO</option>
                    <option>CT</option>
                    <option>DE</option>
                    <option>DC</option>
                    <option>FM</option>
                    <option>FL</option>
                    <option>GA</option>
                    <option>GU</option>
                    <option>HI</option>
                    <option>ID</option>
                    <option>IL</option>
                    <option>IN</option>
                    <option>IA</option>
                    <option>KS</option>
                    <option>KY</option>
                    <option>LA</option>
                    <option>ME</option>
                    <option>MH</option>
                    <option>MD</option>
                    <option>MA</option>
                    <option>MI</option>
                    <option>MN</option>
                    <option>MS</option>
                    <option>MO</option>
                    <option>MT</option>
                    <option>NE</option>
                    <option>NV</option>
                    <option>NH</option>
                    <option>NJ</option>
                    <option>NM</option>
                    <option>NY</option>
                    <option>NC</option>
                    <option>ND</option>
                    <option>MP</option>
                    <option>OH</option>
                    <option>OK</option>
                    <option>OR</option>
                    <option>PW</option>
                    <option>PA</option>
                    <option>PR</option>
                    <option>RI</option>
                    <option>SC</option>
                    <option>SD</option>
                    <option>TN</option>
                    <option>TX</option>
                    <option>UT</option>
                    <option>VT</option>
                    <option>VI</option>
                    <option>VA</option>
                    <option>WA</option>
                    <option>WV</option>
                    <option>WI</option>
                    <option>WY</option>
                </select>
            </div>
            <div class="col-xs-12 pad-15">
                <input type="text" id="zip" placeholder="Zip (required)" class="form-control" required>
            </div>
            <div class="col-xs-12 pad-15">
                <button type="submit" id="submit" class="btn btn-success btn-block">Submit</button>
            </div>
        </div>
        <div class="row footer">
            <div class="col-xs-4">
                <a class="btn btn-info btn-block"
                   href="tel:1}">CALL</a>
            </div>
            <div class="col-xs-4">
                <a class="btn btn-info btn-block"
                   href="sms:{{ twilio_number }}">MESSAGE</a>
            </div>
            <div class="col-xs-4">
                <a class="btn btn-danger btn-block"
                   href="{{ path('pre_check_dashboard', {'hash' : hash}) }}">HOME</a>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/pickerjs@1.2.1/dist/picker.min.js"></script>
    <script type="text/javascript">
        let initialDate = new Date();
        initialDate.setDate(initialDate.getDate() - 20 * 365);
        var input  = document.getElementById('dob');
        var picker = new Picker(input, {
            date     : initialDate,
            headers  : true,
            format   : 'YYYY/MM/DD',
            title    : 'Pick your date of birth',
            cancel   : 'Cancel',
            confirm  : 'OK',
            year     : 'Year',
            month    : 'Month',
            day      : 'Day',
            hour     : 'Hour',
            increment: {
                year : 1,
                month: 1,
                day  : 1
            },

        });
        $('#precheck').hide();

        $('body').on('click', '#finance', function () {
            $('#payment-option').hide();
            $('#precheck').show();
        });

        $('body').on('click', '#cashYes', function () {
            $(this).attr('disabled', true);

            $.post('{{ member_url }}api/preview/customer-app/lead-request/new', {
                hash : '{{ hash }}',
                type : 'finance',
                field: 'cash',
            }, function (resp) {
                $('#cashModal').modal('hide');
                $('#modal-cash-submit').modal('show');
            }).error(function (e) {
                console.log(e);
                alert('Submission Failed, please try again');
                $(this).attr('disabled', false);
            });
        });

        $('body').on('click', '#submit', function () {
            $(this).attr('disabled', true);

            let dob        = picker.getDate().toLocaleDateString("en-US");
            var dataObject = {
                firstName: $('#firstName').val(),
                lastName : $('#lastName').val(),
                address1 : $('#address1').val(),
                address2 : $('#address2').val(),
                city     : $('#city').val(),
                state    : $('#state').val(),
                zip      : $('#zip').val(),
                dob      : dob
            };
            var invalid    = false;

            $.each(dataObject, function (k, v) {
                if (k == 'address2') {
                    return;
                }

                if (v.trim() == '') {
                    invalid = true;
                }
            });

            if (invalid == true) {
                alert('Please fill all required fields');
                $(this).attr('disabled', false);
                return;
            }

            // Validate zip code
            var zipRegex = /^\d{5}(?:-\d{4})?$/g;
            if (!zipRegex.test(dataObject.zip)) {
                alert('Please enter a valid zip code');
                $(this).attr('disabled', false);
                return;
            }

            $.post('{{ member_url }}api/preview/customer-app/credit-pull/new', {
                hash     : '{{ hash }}',
                firstName: dataObject.firstName,
                lastName : dataObject.lastName,
                address1 : dataObject.address1,
                address2 : dataObject.address2,
                city     : dataObject.city,
                state    : dataObject.state,
                zip      : dataObject.zip,
                dob      : dataObject.dob
            }, function (resp) {
                $('#modal-default-submit').modal('show');
            }).error(function (e) {
                console.log(e);
                alert('Submission Failed, please verify and try again');
                $(this).attr('disabled', false);
            });
        });

        $('body').on('hide.bs.modal', '#modal-cash-submit', function () {
            window.location.href = "{{ path('pre_check_dashboard', {'hash' : hash}) }}";
        });

        $('body').on('hide.bs.modal', '#modal-default-submit', function () {
            window.location.href = "{{ path('pre_check_dashboard', {'hash' : hash}) }}";
        });
    </script>

{% endblock %}