{% extends '@App/uibase/main/one-col-base.html.twig' %}
{% block content_header %}<span class="sitefont-green">REVIEW ORDER: <br>

</span>{% endblock %}
{% block content %}
    <style>
        .input-disabled {
            background-color: #EBEBE4;
            border: 1px solid #ABADB3;
            padding: 2px 1px;
        }
    </style>


    {% include '@App/content/ecompages/cart-items-review.html.twig' %}



    <br>
    <div class="fluid Stackable-50-50-C1"><strong>Order Contact:</strong><br>
        {{ ocfname }} {{ oclname }}<br>
        {{ ocadd1 }} <br>
        {% if ocadd2 != '' %}
            {{ ocadd2 }} <br>
        {% endif %}
        {{ occity }}, {{ ocstate }} {{ oczip }} <br>
        {{ ocphone }}<br>
        {{ ocemail }}
    </div>
    <div class="fluid Stackable-50-50-C2"><strong>Ship/Pickup Contact:</strong><br>
        {{ sfname }} {{ slname }}<br>
        {{ sadd1 }} <br>
        {% if sadd2 != '' %}
            {{ sadd2 }} <br>
        {% endif %}
        {{ scity }}, {{ sstate }} {{ szip }} <br>
        {{ sphone }}<br>
        {{ semail }}
    </div>


    {% if ponumber != '' %}
        <div class="fluid"><br><strong>Purchase Order #: </strong>
            {{ ponumber }}
            <br></div>
    {% else %}
        <div class="fluid"><br><br></div>
    {% endif %}

    {% if ocomments != '' %}
        <div class="fluid"><br><strong>Order Level Comments:</strong><br>
            {{ ocomments }}
            <br><br></div>
    {% else %}
        <div class="fluid"><br><br></div>
    {% endif %}
    <div class="fluid"><strong>Shipping Method:</strong> {{ shiplabel }}<br><br></div>

    {{ form_start(form, {'attr': {'id': 'billing_form'}}) }}
    {{ form_errors(form) }}
    <div class="fluid Stackable-80 u-left-col">
        <div class="u-form-row">
            <div class="fluid" style="display: block; background-color: #39B092; padding: 8px; color: #FFFFFF;">
                <span class="sitefontrmed sitefont-med"><strong>Billing Contact Address:</strong></span>
            </div>
        </div>
        {% if msg is defined %}
            <div class="u-form-row"><span class="box-contents sitefont-error-red"><b>{{ msg }}</b></span><br/></div>
        {% endif %}

        {% if msg2 is defined %}
            <div class="u-form-row"><span class="box-contents sitefont-error-red"><b>{{ msg2 }}</b></span><br></div>
        {% endif %}
        {% if form.saveBP is defined %}
            <div id="saveBP" class="u-form-row">
                {{ form_widget(form.saveBP) }}{{ form_label(form.saveBP, null,{'label_attr': {'style': 'display: inline; padding-left: 10px;'}} ) }}
            </div>
        {% endif %}

        {% if isGuest == 1 %}
            <div class="u-form-row"> You are missing out on some time saving features! You can save all of this
                information to your account. Log in, or create an account.
            </div>
        {% endif %}

        {% if form.billcontactprofile is defined %}
            <div class="u-form-row">{{ form_label(form.billcontactprofile) }}{{ form_widget(form.billcontactprofile) }}</div>
        {% endif %}
        <div class="u-form-row">
            <div class="fluid Stackable-50-50-C1 u-left-col">
                <button type="button" class="u-small-button" onClick="getSoData(1);">use order contact address</button>
            </div>
            <div class="fluid Stackable-50-50-C2 u-left-col">
                <button type="button" class="u-small-button" onClick="getSoData(2);">use shipping address</button>
            </div>
            <br>
        </div>
        <div class="u-form-row">
            <div class="fluid Stackable-50-50-C1 u-left-col">
                {{ form_errors(form.bfname) }}{{ form_label(form.bfname) }}{{ form_widget(form.bfname) }}
            </div>
            <div class="fluid Stackable-50-50-C2 u-right-col">
                {{ form_errors(form.blname) }}{{ form_label(form.blname) }}{{ form_widget(form.blname) }}
            </div>
        </div>

        <div class="u-form-row">
            {{ form_errors(form.badd1) }}{{ form_label(form.badd1) }}{{ form_widget(form.badd1) }}
        </div>

        <div class="u-form-row">
            {{ form_errors(form.badd2) }}{{ form_label(form.badd2) }}{{ form_widget(form.badd2) }}
        </div>

        <div class="u-form-row">
            <div class="fluid Stackable-50-50-C1 u-left-col">
                {{ form_errors(form.bcity) }}{{ form_label(form.bcity) }}{{ form_widget(form.bcity) }}
            </div>
            <div class="fluid Stackable-50-50-C2 u-right-col">
                {{ form_errors(form.bstate) }}{{ form_label(form.bstate) }}{{ form_widget(form.bstate) }}
            </div>
        </div>

        <div class="u-form-row">
            {{ form_errors(form.bzip) }}{{ form_label(form.bzip) }}{{ form_widget(form.bzip) }}
        </div>

        {% if hascustom == false %}
            <div class="u-form-row">
                <div class="fluid" style="display: block; background-color: #39B092; padding: 8px; color: #FFFFFF;">
                    <span class="sitefontrmed sitefont-med"><strong>Bill to account:</strong></span>
                </div>
            </div>

            <div id="saveBP" class="u-form-row">
                {{ form_widget(form.billtoaccount) }}{{ form_label(form.billtoaccount, null,{'label_attr': {'style': 'display: inline; padding-left: 10px;'}} ) }}
            </div>

            <div id="cardopts">

                <div class="u-form-row">
                    <div class="fluid" style="display: block; background-color: #39B092; padding: 8px; color: #FFFFFF;">
                        <span class="sitefontrmed sitefont-med"><strong> <strong>Pay with a Card:</strong></strong></span>
                    </div>
                </div>
                <div class="u-form-row">
                    <label for="form_cc1" class="required">Card Number:</label>
                    {{ form_errors(form.cc1) }}{{ form_errors(form.cc2) }}{{ form_errors(form.cc3) }}{{ form_errors(form.cc4) }}
                </div>
                <div class="u-form-row">
                    <div class="fluid Stackable-25x4-C1">
                      {{ form_widget(form.cc1) }}
                    </div>
                    <div class="fluid Stackable-25x4-C2">
                      {{ form_widget(form.cc2) }}
                    </div>
                    <div class="fluid Stackable-25x4-C3">
                        {{ form_widget(form.cc3) }}
                    </div>
                    <div class="fluid Stackable-25x4-C4">
                        {{ form_widget(form.cc4) }}
                    </div>
                </div>
                <div class="u-form-row">
                    <div class="fluid Stackable-25x4-C1 u-left-col">
                        {{ form_errors(form.ccexpmo) }}{{ form_label(form.ccexpmo) }}{{ form_widget(form.ccexpmo) }}
                    </div>
                    <div class="fluid Stackable-25x4-C2 u-right-col">
                        {{ form_errors(form.ccexpyr) }}{{ form_label(form.ccexpyr) }}{{ form_widget(form.ccexpyr) }}
                    </div>
                    <div class="fluid Stackable-25x4-C3">

                    </div>
                    <div class="fluid Stackable-25x4-C4">

                    </div>
                </div>
                <div class="u-form-row">
                    <div class="fluid Stackable-25x4-C1 u-left-col">
                        {{ form_errors(form.cvv) }}{{ form_label(form.cvv) }}{{ form_widget(form.cvv) }}
                    </div>
                    <div class="fluid Stackable-25x4-C2 u-right-col">
                        {{ form_errors(form.cardtype) }}{{ form_label(form.cardtype) }}{{ form_widget(form.cardtype) }}
                    </div>
                    <div class="fluid Stackable-25x4-C3">

                    </div>
                    <div class="fluid Stackable-25x4-C4">

                    </div>
                </div>

            </div>
        {% endif %}


        <div class="fluid" style="padding-top: 20px; padding-bottom: 20px;">
            <button type="submit" class="u-small-button">Place Order</button><br>
        </div>
        {{ form_end(form) }}
        <script>
            function getSoData(type) {

                if ($("#form_billcontactprofile").length && $("#form_billcontactprofile").val() != "") {
                    alert('You must deselect your saved profile before you can use this feature.');
                    return false;
                }

                $.post('{{ path('cps_cart_getsodata') }}?type=' + type, function (data) {
                    updateBillContactprofile(data, 2);
                });
            }

            function updateBillContactprofile(data, type) {
                $("#form_bfname").val(data.fname);
                $("#form_blname").val(data.lname);
                $("#form_badd1").val(data.add1);
                $("#form_badd2").val(data.add2);
                $("#form_bcity").val(data.city);
                $("#form_bstate").val(data.state);
                $("#form_bzip").val(data.zip);

                if (type == 1) {
                    $("#form_cc4").val(data.l4card);
                    $("#form_cc1").val('****');
                    $("#form_cc2").val('****');
                    $("#form_cc3").val('****');
                    $("#form_cvv").val('***');
                    $("#form_cardtype").val(data.cardtype);
                    $("#form_ccexpmo").val('**');
                    $("#form_ccexpyr").val('**');
                }

            }
            function autotab(original, destination) {
                if (original.getAttribute && original.value.length == original.getAttribute("maxlength"))
                    destination.focus()
            }
        </script>

        <script>
            $('#form_billtoaccount').change(function () {
                if (this.checked) {
                    $("#form_cc1").prop('required', false).hide();
                    $("#form_cc2").prop('required', false).hide();
                    $("#form_cc3").prop('required', false).hide();
                    $("#form_cc4").prop('required', false).hide();
                    $("#form_cvv").prop('required', false).hide();
                    $("#form_ccexpmo").prop('required', false).hide();
                    $("#form_ccexpyr").prop('required', false).hide();
                    $("#form_cardtype").prop('required', false).hide();
                    $("#cardopts").hide();
                    //$("#form_billcontactprofile").hide();

                    if (typeof modsaveBP !== 'undefined' && $.isFunction(modsaveBP)) {
                        modsaveBP('hide');
                    }

                    //uncheck save BP

                }
                if (!this.checked) {
                    $("#form_cc1").prop('required', true).show();
                    $("#form_cc2").prop('required', true).show();
                    $("#form_cc3").prop('required', true).show();
                    $("#form_cc4").prop('required', true).show();
                    $("#form_cvv").prop('required', true).show();
                    $("#form_ccexpmo").prop('required', true).show();
                    $("#form_ccexpyr").prop('required', true).show();
                    $("#form_cardtype").prop('required', true).show();
                    $("#cardopts").show();
                    //$("#form_billcontactprofile").show();

                    if (typeof modsaveBP !== 'undefined' && $.isFunction(modsaveBP)) {
                        if ($("#form_billcontactprofile").val() == "") {
                            modsaveBP('show');
                        }
                    }


                }
            });

        </script>
        {% if form.billcontactprofile is defined %}
            <script>

                $('#billing_form').submit(function () {

                    if ((($("#form_billcontactprofile").val() == '')) && (
                        ($("#form_cc1").is(":visible") && !$.isNumeric($("#form_cc1").val())) ||
                        ($("#form_cc2").is(":visible") && !$.isNumeric($("#form_cc2").val())) ||
                        ($("#form_cc3").is(":visible") && !$.isNumeric($("#form_cc3").val())) ||
                        ($("#form_cc4").is(":visible") && !$.isNumeric($("#form_cc4").val())) ||
                        ($("#form_cvv").is(":visible") && !$.isNumeric($("#form_cvv").val())) ||
                        ($("#form_ccexpmo").is(":visible") && !$.isNumeric($("#form_ccexpmo").val())) ||
                        ($("#form_ccexpyr").is(":visible") && !$.isNumeric($("#form_ccexpyr").val())) ||
                        ($("#form_bzip").is(":visible") && !$.isNumeric($("#form_bzip").val())))) {
                        alert("Please enter only numerical values for card information" + $("#form_billcontactprofile").val());
                        return false;
                    } else {
                        return true;
                    }
                });






                function updateBillContactprofile(data, type) {
                    $("#form_bfname").val(data.fname);
                    $("#form_blname").val(data.lname);
                    $("#form_badd1").val(data.add1);
                    $("#form_badd2").val(data.add2);
                    $("#form_bcity").val(data.city);
                    $("#form_bstate").val(data.state);
                    $("#form_bzip").val(data.zip);

                    if (type == 1) {
                        $("#form_cc4").val(data.l4card);
                        $("#form_cc1").val('****');
                        $("#form_cc2").val('****');
                        $("#form_cc3").val('****');
                        $("#form_cvv").val('***');
                        $("#form_cardtype").val(data.cardtype);
                        $("#form_ccexpmo").val('**');
                        $("#form_ccexpyr").val('**');
                    }

                }

                function getProfile(id) {
                    $.post('{{ path('cps_account_get_bill_profile') }}?pid=' + id, function (data) {
                        updateBillContactprofile(data, 1);
                    });
                }

                function modsaveBP(status) {
                    if (status == 'hide') {
                        $('#form_saveBP').prop('checked', false).hide();
                        $('#saveBP').hide();

                    }
                    if (status == 'show') {
                        $('#form_saveBP').show();
                        $('#saveBP').show();

                    }


                }

                $("#form_billcontactprofile")
                    .change(function () {
                        if ($(this).val() != "") {
                            getProfile($(this).val());
                            $('#form_bfname').attr('readonly', true).addClass('input-disabled');
                            $('#form_blname').attr('readonly', true).addClass('input-disabled');
                            $('#form_badd1').attr('readonly', true).addClass('input-disabled');
                            $('#form_badd2').attr('readonly', true).addClass('input-disabled');
                            $('#form_bcity').attr('readonly', true).addClass('input-disabled');
                            $('#form_bstate').attr('readonly', true).addClass('input-disabled');
                            $('#form_bzip').attr('readonly', true).addClass('input-disabled')

                            $('#form_cc1').attr('readonly', true).addClass('input-disabled').show();
                            $('#form_cc2').attr('readonly', true).addClass('input-disabled').show();
                            $('#form_cc3').attr('readonly', true).addClass('input-disabled').show();
                            $('#form_cc4').attr('readonly', true).addClass('input-disabled').show();
                            $('#form_cardtype').attr('readonly', true).addClass('input-disabled').show();
                            $('#form_cvv').attr('readonly', true).addClass('input-disabled').show();
                            $('#form_ccexpmo').attr('readonly', true).addClass('input-disabled').show();
                            $('#form_ccexpyr').attr('readonly', true).addClass('input-disabled').show();

                            $('#form_billtoaccount').prop('checked', false);
                            $('#form_saveBP').prop('checked', false);
                            $("#cardopts").show();
                            modsaveBP('hide');


                        }
                        if ($(this).val() == "") {
                            $('#form_bfname').attr('readonly', false).removeClass('input-disabled');
                            $('#form_blname').attr('readonly', false).removeClass('input-disabled');
                            $('#form_badd1').attr('readonly', false).removeClass('input-disabled');
                            $('#form_badd2').attr('readonly', false).removeClass('input-disabled');
                            $('#form_bcity').attr('readonly', false).removeClass('input-disabled');
                            $('#form_bstate').attr('readonly', false).removeClass('input-disabled');
                            $('#form_bzip').attr('readonly', false).removeClass('input-disabled');

                            $('#form_cc1').attr('readonly', false).removeClass('input-disabled').val('').show();
                            $('#form_cc2').attr('readonly', false).removeClass('input-disabled').val('').show();
                            $('#form_cc3').attr('readonly', false).removeClass('input-disabled').val('').show();
                            $('#form_cc4').attr('readonly', false).removeClass('input-disabled').val('').show();
                            $('#form_cardtype').attr('readonly', false).removeClass('input-disabled').show();
                            $('#form_cvv').attr('readonly', false).removeClass('input-disabled').val('').show();
                            $('#form_ccexpmo').attr('readonly', false).removeClass('input-disabled').val('').show();
                            $('#form_ccexpyr').attr('readonly', false).removeClass('input-disabled').val('').show();

                            $("#cardopts").show();

                            $('#form_billtoaccount').prop('checked', false);

                            if ($('#form_billtoaccount').prop('checked') == false) {
                                modsaveBP('show');
                            }
                        }
                    });



            </script>
        {% endif %}
    </div>

{% endblock %}