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

</span>{% endblock %}
{% block content %}
    {% if MSG is defined %} <strong><span class="sitefont-error-red"> {{ MSG }}</span></strong><br><br>{% endif %}

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

<br>

    {{ form_start(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>Order Contact:</strong></span>
            </div>
        </div>
        {% if form.saveCP is defined %}
            <div class="u-form-row">{{ form_widget(form.saveCP) }}{{ form_label(form.saveCP, null,{'label_attr': {'style': 'display: inline; padding-left: 10px;'}} ) }}</div>
        {% else %}
            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.
        {% endif %}
        {% if form.ordercontactprofile is defined %}
            <div class="u-form-row">{{ form_label(form.ordercontactprofile) }}{{ form_widget(form.ordercontactprofile) }}</div>
        {% endif %}

        <div class="u-form-row">
            <div class="fluid Stackable-50-50-C1 u-left-col">
                {{ form_errors(form.ocfname) }}{{ form_label(form.ocfname) }}{{ form_widget(form.ocfname) }}
            </div>
            <div class="fluid Stackable-50-50-C2 u-right-col">
                {{ form_errors(form.oclname) }}{{ form_label(form.oclname) }}{{ form_widget(form.oclname) }}
            </div>
        </div>
        <div class="u-form-row">
            {{ form_errors(form.occompany) }}{{ form_label(form.occompany) }}{{ form_widget(form.occompany) }}
        </div>
        <div class="u-form-row">
            {{ form_errors(form.ocadd1) }}{{ form_label(form.ocadd1) }}{{ form_widget(form.ocadd1) }}
        </div>
        <div class="u-form-row">
            {{ form_errors(form.ocadd2) }}{{ form_label(form.ocadd2) }}{{ form_widget(form.ocadd2) }}
        </div>
        <div class="u-form-row">
            <div class="fluid Stackable-50-50-C1 u-left-col">
                {{ form_errors(form.occity) }}{{ form_label(form.occity) }}{{ form_widget(form.occity) }}
            </div>
            <div class="fluid Stackable-50-50-C2 u-right-col">
                {{ form_errors(form.ocstate) }}{{ form_label(form.ocstate) }}{{ form_widget(form.ocstate) }}
            </div>
        </div>
        <div class="u-form-row">
            {{ form_errors(form.oczip) }}{{ form_label(form.oczip) }}{{ form_widget(form.oczip) }}
        </div>
        <div class="u-form-row">
            <div class="fluid Stackable-50-50-C1 u-left-col">
                {{ form_errors(form.ocphone) }}{{ form_label(form.ocphone) }}{{ form_widget(form.ocphone) }}
            </div>
            <div class="fluid Stackable-50-50-C2 u-right-col">
                {{ form_errors(form.ocemail) }}{{ form_label(form.ocemail) }}{{ form_widget(form.ocemail) }}
            </div>
        </div>

        <div class="u-form-row">
            <div class="fluid" style="display: block; background-color: #39B092; padding: 8px; color: #FFFFFF;">
                <span class="sitefontrmed sitefont-med"><strong>Shipping Address OR Pickup Contact:</strong></span>
            </div>
        </div>

        {% if form.saveSP is defined %}
            <div class="u-form-row">{{ form_widget(form.saveSP) }}{{ form_label(form.saveSP, null,{'label_attr': {'style': 'display: inline; padding-left: 10px;'}} ) }}</div>{% endif %}
        {% if form.shipcontactprofile is defined %}
        <div class="u-form-row">{{ form_label(form.shipcontactprofile) }}{{ form_widget(form.shipcontactprofile) }}</div>{% endif %}
        <div class="u-form-row">
            <button type="button" class="u-small-button" onClick="copyOrderContactValues();">Copy Address from Order Contact Above
            </button>
        </div>
        <div class="u-form-row">
            <div class="fluid Stackable-50-50-C1 u-left-col">
                {{ form_errors(form.sfname) }}{{ form_label(form.sfname) }}{{ form_widget(form.sfname) }}
            </div>
            <div class="fluid Stackable-50-50-C2 u-right-col">
                {{ form_errors(form.slname) }}{{ form_label(form.slname) }}{{ form_widget(form.slname) }}
            </div>
        </div>
        <div class="u-form-row">
            {{ form_errors(form.scompany) }}{{ form_label(form.scompany) }}{{ form_widget(form.scompany) }}
        </div>
        <div class="u-form-row">
            {{ form_errors(form.sadd1) }}{{ form_label(form.sadd1) }}{{ form_widget(form.sadd1) }}
        </div>
        <div class="u-form-row">
            {{ form_errors(form.sadd2) }}{{ form_label(form.sadd2) }}{{ form_widget(form.sadd2) }}
        </div>
        <di class="u-form-row">
            <div class="fluid Stackable-50-50-C1 u-left-col">
                {{ form_errors(form.scity) }}{{ form_label(form.scity) }}{{ form_widget(form.scity) }}
            </div>
            <div class="fluid Stackable-50-50-C2 u-right-col">
                {{ form_errors(form.sstate) }}{{ form_label(form.sstate) }}{{ form_widget(form.sstate) }}
            </div>
        </di>
        <div class="u-form-row">
            {{ form_errors(form.szip) }}{{ form_label(form.szip) }}{{ form_widget(form.szip) }}
        </div>
        <div class="u-form-row">
            <div class="fluid Stackable-50-50-C1 u-left-col">
                {{ form_errors(form.sphone) }}{{ form_label(form.sphone) }}{{ form_widget(form.sphone) }}
            </div>
            <div class="fluid Stackable-50-50-C2 u-right-col">
                {{ form_errors(form.semail) }}{{ form_label(form.semail) }}{{ form_widget(form.semail) }}
            </div>
        </div>
        <div class="u-form-row">
            <div class="fluid" style="display: block; background-color: #39B092; padding: 8px; color: #FFFFFF;">
                <span class="sitefontrmed sitefont-med"><strong>Order Comments / PO Number:</strong></span>
            </div>
        </div>

        <div class="u-form-row">
            <div class="fluid Stackable-50-50-C2 u-left-col">
                {{ form_errors(form.comments) }}{{ form_label(form.comments) }}{{ form_widget(form.comments) }}
            </div>
            <div class="fluid Stackable-50-50-C2 u-right-col">
                {{ form_errors(form.ponumber) }}{{ form_label(form.ponumber) }}{{ form_widget(form.ponumber) }}
            </div>
        </div>
        {% if hascustom == true %}
            <div class="fluid">
                Your order contains custom items. Be sure to inform us in the order comments above if you would like
                your order delivered (and how) or if you will be picking it up!
            </div>
        {% endif %}
        {{ form_widget(form.shippingoption) }}

        {% 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>Shipping / Pickup Options:</strong></span>
                </div>
            </div>
            <p>Please enter a shipping zip code to view your <strong>pickup</strong> and
                <strong>shipping</strong> options.</p>
            <div id="shipping-tools">

                <input type="button" class="u-small-button" name="shipping-options-submit"
                       value="Get Ship/Pickup Options" onclick="submitZipCode()"/>
            </div>
            <div id="shipping-tools"></div>
            <div id="shipping-options-wrapper" style="display:none; padding-top: 20px;"></div>
           <!-- <table>
                <tr class="cart-shipping">
                    <td>

                    </td>
                </tr>
            </table> -->
        {% endif %}
        <div class="fluid" style="padding-top: 20px; padding-bottom: 20px;">
<button type="submit" class="u-small-button">Continue to Billing</button><br>

        </div>
        {% if MSG is defined %} <strong><span class="sitefont-error-red"> {{ MSG }}</span></strong><br>{% endif %}
        {{ form_end(form) }}
    </div>
   <!-- <div class="fluid Stackable-50-50-C2 u-right-col">

    </div> -->
<script>
    function getOrderContactValues(){
        ocvalues = {
            fname:  $("#form_ocfname").val(),
            lname:  $("#form_oclname").val(),
            companyname:   $("#form_occompany").val(),
            add1: $("#form_ocadd1").val(),
            add2: $("#form_ocadd2").val(),
            city: $("#form_occity").val(),
            state: $("#form_ocstate").val(),
            zip: $("#form_oczip").val(),
            phone: $("#form_ocphone").val(),
            email: $("#form_ocemail").val()
        };

        return ocvalues;
    }

    function copyOrderContactValues() {
        updateShipContactprofile(getOrderContactValues());

    }

    function updateShipContactprofile(data) {
        $("#form_sfname").val(data.fname);
        $("#form_slname").val(data.lname);
        $("#form_scompany").val(data.companyname);
        $("#form_sadd1").val(data.add1);
        $("#form_sadd2").val(data.add2);
        $("#form_scity").val(data.city);
        $("#form_sstate").val(data.state);
        $("#form_szip").val(data.zip);
        $("#form_sphone").val(data.phone);
        $("#form_semail").val(data.email);

        if($("#form_szip").val()!='')submitZipCode();
    }

</script>

            {% if form.ordercontactprofile is defined %}
                <script>



                function getProfile(type,id){
                    $.post('{{ path('cps_account_get_profile') }}?pid=' + id, function(data) {
                        if(type==1){
                            updateOrderContactprofile(data);
                        }
                        else if(type==2){
                            updateShipContactprofile(data);
                        }
                    });


                }
                function updateOrderContactprofile(data) {
                    $("#form_ocfname").val(data.fname);
                    $("#form_oclname").val(data.lname);
                    $("#form_occompany").val(data.companyname);
                    $("#form_ocadd1").val(data.add1);
                    $("#form_ocadd2").val(data.add2);
                    $("#form_occity").val(data.city);
                    $("#form_ocstate").val(data.state);
                    $("#form_oczip").val(data.zip);
                    $("#form_ocphone").val(data.phone);
                    $("#form_ocemail").val(data.email);
                }



                $( ".shipcontactprofile" )
                    .change(function () {
                            if($(this).val()!=""){
                                getProfile(2,$(this).val());
                            }
                    });

                $( ".ordercontactprofile" )
                    .change(function () {
                            if($(this).val()!=""){
                                getProfile(1,$(this).val());
                            }
                    });

                </script>
            {% endif %}

            <script type="text/javascript">

                var cartweight = "{{ cartweight }}";
                var subtotal = "{{ subtotal }}";
                subtotal = parseFloat(subtotal.replace(",",""));
                var optionTax;
                var currentTax = 0;
                var returnedShippingData;
                //var shippingSelectObject;
                var shipping = 0;
                //var shippingID;


                function submitZipCode() {
                    var zipcode = $('#form_szip').val();
                    if(zipcode.length == 5 && $.isNumeric(zipcode)) {
                        $("#shipping-tools").html("<img src='{{ asset('/images/loading.gif') }}'>");
                        $("#shipping-options-wrapper").fadeOut();

                        $.post("{{ path('CartGetShippingAndTax_Base') }}/zip/" + zipcode + "/weight/" + cartweight + "/taxable/" + subtotal, function(data) {
                            $("#shipping-tools").html("");
                            currentTax = 0;
                            optionTax = data.optionTax;
                            returnedShippingData = data.form;
                            updateShippingOptions();
                        })
                    } else {
                        alert('You must enter a valid zip code in the shipping zip field.');
                    }
                }

                function findTax(shippingId) {
                    return optionTax[shippingId];
                }

                function updateTax(shippingId) {
                    if(shippingId == 'X') {
                        currentTax = 0;
                    } else {
                        currentTax = findTax(shippingId);
                    }
                    jQuery("#tax-monetary").html(currentTax.toFixed(2));
                    jQuery("tr.row-tax").fadeIn();
                    updateTotal();
                }

                function updateShipping(shippingCharge) {
                    shippingCharge = parseFloat(shippingCharge);
                    jQuery("#shipping-monetary").html(shippingCharge.toFixed(2));
                    jQuery("tr.row-shipping").fadeIn();
                    window.shipping = shippingCharge;
                    updateTotal();
                }

                function updateTotal() {
                    var total = (Math.round( (subtotal + currentTax + shipping) * 100 ) / 100 ).toFixed(2);
                    jQuery("#total-monetary").html(addCommas(total));
                }

                function updateShippingOptions()
                {


                    var wrapper = jQuery("#shipping-options-wrapper");
                    wrapper.html(returnedShippingData);
                    window.shippingSelectObject = jQuery("#shipping-selection");
                    //rememberShipping();
                    updateShipping(parseShippingPrice(window.shippingSelectObject.children(':selected').text()));
                    updateTax(window.shippingSelectObject.children(':selected').val());
                    wrapper.fadeIn();
                }

                function selectShippingOption(selection)
                {
                    window.shippingSelectObject = selection;
                    var selected = selection.children(':selected');
                    $("#form_shippingoption").val(selected.val());
                    var shippingId = selected.val();
                    var priceText = selected.text();
                    var price = parseShippingPrice(priceText);
                    updateTax(shippingId);
                    updateShipping(price);

                }

                function parseShippingPrice(priceText)
                {
                    var textarr = priceText.split("($");
                    if(typeof textarr[1] === 'undefined') {
                        var price = 0;
                    } else {
                        var price = textarr[1].substring(0, textarr[1].length-1);
                    }
                    return price;
                }

                $("#shipping-zip").keypress(function(e){
                    if(e.keyCode == 13) {
                        submitZipCode();
                        return false;
                    }
                });

                $(document).ready(function() {

                    var $zipfield = $('#form_szip');
                    var zipcode = $zipfield.val();
                    if(zipcode.length == 5) {
                        submitZipCode();
                    }
                    $zipfield.keyup(function(){
                        if($(this).val().length == 5) submitZipCode();
                    });
                    $(document).on("change", "#shipping-selection", function(){ selectShippingOption(jQuery(this)); });
                });

                function addCommas(nStr) {
                    nStr += '';
                    x = nStr.split('.');
                    x1 = x[0];
                    x2 = x.length > 1 ? '.' + x[1] : '';
                    var rgx = /(\d+)(\d{3})/;
                    while (rgx.test(x1)) {
                        x1 = x1.replace(rgx, '$1' + ',' + '$2');
                    }
                    return x1 + x2;
                }

            </script>



{% endblock %}