@inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>

@Include("../../../_wrap/WrapMethods.cshtml")
@using System.Text.RegularExpressions
@using Dynamicweb.Core

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.min.css" media="screen">

@{
    string columnwidth = "col-lg-4 col-md-4";
}

<section>
    <form name="ordersubmit" id="ordersubmit" method="post" class="form-light form-horizontal">
        <div class="container">
            @foreach (LoopItem errors in GetLoop("ValidationErrors"))
            {
                @errors.GetValue("HeaderStart")
                <div class="row">
                    <div class="col-md-12">
                        <h4>@Translate("Ooops!", "Ooops!")</h4>
                    </div>
                </div>
                    @errors.GetValue("HeaderEnd")

                    <div class="row">
                        <div class="col-md-12">
                            <div class="alert alert-warning" role="alert"><a href="javascript:document.getElementById('@errors.GetString("Ecom:Cart.ValidationError.FieldSystemName")').focus();"><b>@errors.GetString("Ecom:Cart.ValidationError.ErrorMessage")</b></a></div>
                        </div>
                    </div>
            }

            <div class="row">&nbsp;</div>

            <div class="row">
                <div class="@columnwidth col-sm-6 col-xs-12">
                    @RenderReturningCustomer()
                    @RenderBillingAddress()
                    @RenderDeliveryAddress()
                </div>
                @if (Converter.ToBoolean(Pageview.Area.Item["CartShipping"]) ||
                     Converter.ToBoolean(Pageview.Area.Item["CartPayment"]) ||
                     Converter.ToBoolean(Pageview.Area.Item["CartVouchers"]) ||
                     Converter.ToBoolean(Pageview.Area.Item["CartGiftcards"]) ||
                     Converter.ToBoolean(Pageview.Area.Item["CartReccuringOrders"])) {
                    <div class="@columnwidth col-sm-6 col-xs-12">
                        @if (Converter.ToBoolean(Pageview.Area.Item["CartShipping"]))
                        {
                            @RenderShipping()
                        }
                        @if (Converter.ToBoolean(Pageview.Area.Item["CartPayment"]))
                        {
                            @RenderPayment()
                        }
                        @if (Converter.ToBoolean(Pageview.Area.Item["CartVouchers"]))
                        {
                            @RenderVoucher()
                        }
                        @if (Converter.ToBoolean(Pageview.Area.Item["CartGiftcards"]))
                        {
                            @RenderGiftcard()
                        }
                        @if (Converter.ToBoolean(Pageview.Area.Item["CartReccuringOrders"]))
                        {
                            @RenderRecurring()
                        }
                    </div>
                }

                <div class="@columnwidth col-sm-6 col-xs-12">
                    @RenderOrder()
                    @RenderComment()
                    @RenderSubmitOrder()
                </div>
            </div>
        </div>
    </form>
</section>


@helper RenderHeader(string icon, string title)
{
    <div class="form-header">
        <h2><span class="circle"><i class="fa fa-@icon fa-3"></i></span> @title</h2>
    </div>
}

@helper RenderReturningCustomer()
{
if (GetBoolean("Ecom:Cart.CreateUserInCheckout") && string.IsNullOrWhiteSpace(GetGlobalValue("Global:Extranet.UserName")))
{
        <div class="wp-block">

            @RenderHeader("user", Translate("Returning customer", "Returning customer"))

            <div class="form-group">
                <label for="EcomUserCreateUserName" class="control-label">@Translate("Username", "Username")</label>
                <input class="form-control" type="text" name="EcomUserCreateUserName" id="EcomUserCreateUserName" />
            </div>

            <div class="form-group">
                <label for="EcomUserCreatePassword" class="control-label">@Translate("New password", "New password")</label>
                <input class="form-control" type="password" name="EcomUserCreatePassword" id="EcomUserCreatePassword" />
            </div>

            <div class="form-group">
                <label for="EcomUserCreateConfirmPassword" class="control-label">@Translate("Confirm password", "Confirm password")</label>
                <input class="form-control" type="password" name="EcomUserCreateConfirmPassword" id="EcomUserCreateConfirmPassword" />
            </div>

            <div class="form-group">
                <input type="checkbox" name="EcomUserCreateNew" id="EcomUserCreateNew" checked='@GetBoolean("Ecom:User.CreateNew")' />
                <label class="checkbox-field" for="EcomUserCreateNew">
                    @Translate("Save me as customer", "Save me as customer")
                </label>
            </div>

            <div class="form-group">
                <div class="pull-left">
                    <h4>@Translate("Already a user?", "Already a user?")</h4>
                </div>
                @{ 
                    string signInPageId = (new Regex(@"\d+")).Match(Pageview.Area.Item["SignInPageId"].ToString()).Value;
                }
                <a class="btn btn-dw-primary pull-right" href='Default.aspx?ID=@signInPageId'>
                    @Translate("Sign in", "Sign in")
                </a>
            </div>
        </div>
}
}

@helper RenderBillingAddress()
{
    <div class="wp-block" id="BillingAddressBlock">

        @RenderHeader("file-text", Translate("Billing address", "Billing address"))

        @if (GetLoop("UserManagement:User.UserAddresses").Count > 0)
        {
        <div class="form-body">
            <div class="form-group address-selector">
                <select id="AddressList_main" class="form-control" onchange="FillAddress(this);">
                    @foreach (LoopItem address in GetLoop("UserManagement:User.UserAddresses"))
                    {
                        string selected = "";
                        if (address.GetBoolean("UserManagement:User.UserAddress.Default"))
                        {
                            selected = "selected=\"selected\"";
                        }
                        <option value="@address.GetString("UserManagement:User.UserAddress.ID")" @selected>@WrapMethods.Truncate(address.GetString("UserManagement:User.UserAddress.Description"), 10) (@WrapMethods.Truncate(address.GetString("UserManagement:User.UserAddress.Address"), 15))</option>
                    }
                </select>
            </div>
            <div class="form-group add-address-btn">
                @{ 
                    string userProfilePageId = (new Regex(@"\d+")).Match(Pageview.Area.Item["UserProfilePageId"].ToString()).Value;
                }
                <a href="Default.aspx?ID=@userProfilePageId&Action=ManageAddresses" class="btn btn-dw-primary">@Translate("Add new address", "Add new address")</a>
            </div>
        </div>
        }

        <div class="form-body">
            <div class="form-group">
                <label class="control-label" for="EcomOrderCustomerCompany">@Translate("Company", "Company")</label>
                <input type="text" class="form-control" name="EcomOrderCustomerCompany" id="EcomOrderCustomerCompany" value="@GetString("Ecom:Order.Customer.Company")" />
            </div>

            <div class="form-group">
                <label class="control-label" for="EcomOrderCustomerName">@Translate("Name", "Name")</label>
                <input type="text" class="form-control" name="EcomOrderCustomerName" id="EcomOrderCustomerName" value="@GetString("Ecom:Order.Customer.Name")" />
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label" for="EcomOrderCustomerPhone">@Translate("Phone", "Phone")</label>
                        <input type="tel" class="form-control short-control" name="EcomOrderCustomerPhone" id="EcomOrderCustomerPhone" value="@GetString("Ecom:Order.Customer.Phone")" />
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label" for="EcomOrderCustomerEmail">@Translate("Email", "Email")</label>
                        <input type="email" class="form-control" name="EcomOrderCustomerEmail" id="EcomOrderCustomerEmail" value="@GetString("Ecom:Order.Customer.Email")" />
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label" for="EcomOrderCustomerAddress">@Translate("Address", "Address")</label>
                <input type="text" class="form-control" name="EcomOrderCustomerAddress" id="EcomOrderCustomerAddress" value="@GetString("Ecom:Order.Customer.Address")" />
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label" for="EcomOrderCustomerZip">@Translate("Zip code", "Zip code")</label>
                        <input type="text" class="form-control short-control" name="EcomOrderCustomerZip" id="EcomOrderCustomerZip" value="@GetString("Ecom:Order.Customer.Zip")" />
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label" for="EcomOrderCustomerCity">@Translate("City", "City")</label>
                        <input type="text" class="form-control" name="EcomOrderCustomerCity" id="EcomOrderCustomerCity" value="@GetString("Ecom:Order.Customer.City")" />
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label" for="EcomOrderCustomerCountry">@Translate("Country", "Country")</label>
                <select name="EcomOrderCustomerCountry" id="EcomOrderCustomerCountry" class="form-control" onchange="updateCart();">
                    @foreach (LoopItem country in GetLoop("Countries"))
                    {
                        if (!string.IsNullOrWhiteSpace(country.GetString("Ecom:Country.IsCustomerCountryOrDefault")))
                        {
                            <option value="@country.GetString("Ecom:Country.Code2")" selected="selected">
                                @country.GetString("Ecom:Country.Name")
                            </option>
                        }
                        if (string.IsNullOrWhiteSpace(country.GetString("Ecom:Country.IsCustomerCountryOrDefault")))
                        {
                            <option value="@country.GetString("Ecom:Country.Code2")">
                                @country.GetString("Ecom:Country.Name")
                            </option>
                        }
                    }
                </select>
            </div>
        </div>
    </div>

    <div class="wp-block">
        <div class="form-group">
            @{
                var checkstring = "checked";

                if (string.IsNullOrWhiteSpace(GetString("Ecom:Order.Delivery.Address2")))
                {
                    checkstring = "";
                }
                else
                {
                    checkstring = "checked";
                }
            }

            <input type="checkbox" id="enableDelivery" onclick="showHideDelivery();" @checkstring />
            <label for="enableDelivery" class="checkbox-field">
                @Translate("Alternative delivering address", "Alternative delivering address")
            </label>
        </div>
    </div>
}

@helper RenderDeliveryAddress()
{
    <div class="wp-block hidden" id="deliveryInformation">
        <div class="form-header">
            <h2><span class="circle"><i class="fa fa-map-marker fa-3"></i></span> @Translate("Delivery address", "Delivery address")</h2>
        </div>

        @if (GetLoop("UserManagement:User.UserAddresses").Count > 0)
        {
        <div class="form-body">
            <div class="form-group address-selector">
                <select id="AddressList_delivery" class="form-control" onchange="FillAddressTwo(this);">
                    @foreach (LoopItem address in GetLoop("UserManagement:User.UserAddresses"))
                    {
                        string selected = "";
                        if (address.GetBoolean("UserManagement:User.UserAddress.Default"))
                        {
                            selected = "selected=\"selected\"";
                        }
                        <option value="@address.GetString("UserManagement:User.UserAddress.ID")" @selected>@WrapMethods.Truncate(address.GetString("UserManagement:User.UserAddress.Description"), 10) (@WrapMethods.Truncate(address.GetString("UserManagement:User.UserAddress.Address"), 15))</option>
                    }
                </select>
            </div>
            <div class="form-group add-address-btn">
                @{
                    string userProfilePageId = (new Regex(@"\d+")).Match(Pageview.Area.Item["UserProfilePageId"].ToString()).Value;
                }
                <a href="Default.aspx?ID=@userProfilePageId&Action=ManageAddresses" class="btn btn-dw-primary">@Translate("Add new address", "Add new address")</a>
            </div>
        </div>
                    }

        <div class="form-body">
            <div class="form-group">
                <label class="control-label" for="EcomOrderDeliveryCompany">@Translate("Company", "Company")</label>
                <input type="text" class="form-control" name="EcomOrderDeliveryCompany" id="EcomOrderDeliveryCompany" value="@GetString("Ecom:Order.Delivery.Company")" />
            </div>

            <div class="form-group">
                <label class="control-label" for="EcomOrderDeliveryName">@Translate("Name", "Name")</label>
                <input type="text" class="form-control" name="EcomOrderDeliveryName" id="EcomOrderDeliveryName" value="@GetString("Ecom:Order.Delivery.Name")" />
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label class="control-label" for="EcomOrderDeliveryPhone">@Translate("Phone", "Phone")</label>
                    <input type="tel" class="form-control short-control" name="EcomOrderDeliveryPhone" id="EcomOrderDeliveryPhone" value="@GetString("Ecom:Order.Delivery.Phone")" />
                </div>
                <div class="col-md-6">
                    <label class="control-label" for="EcomOrderDeliveryEmail">@Translate("Email", "Email")</label>
                    <input type="email" class="form-control" name="EcomOrderDeliveryEmail" id="EcomOrderDeliveryEmail" value="@GetString("Ecom:Order.Delivery.Email")" />
                </div>
            </div>

            <div class="form-group">
                <label class="control-label" for="EcomOrderDeliveryAddress">@Translate("Address", "Address")</label>
                <input type="text" class="form-control" name="EcomOrderDeliveryAddress" id="EcomOrderDeliveryAddress" value="@GetString("Ecom:Order.Delivery.Address")" />
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label class="control-label" for="EcomOrderDeliveryZip">@Translate("Zip code", "Zip code")</label>
                    <input type="text" class="form-control short-control" name="EcomOrderDeliveryZip" id="EcomOrderDeliveryZip" value="@GetString("Ecom:Order.Delivery.Zip")" />
                </div>
                <div class="col-md-6">
                    <label class="control-label" for="EcomOrderDeliveryCity">@Translate("City", "City")</label>
                    <input type="text" class="form-control" name="EcomOrderDeliveryCity" id="EcomOrderDeliveryCity" value="@GetString("Ecom:Order.Delivery.City")" />
                </div>
            </div>

            <div class="form-group">
                <label class="control-label" for="EcomOrderDeliveryCountry">@Translate("Country", "Country")</label>
                <select name="EcomOrderDeliveryCountry" id="EcomOrderDeliveryCountry" class="form-control" onchange="updateCart();">
                    @foreach (LoopItem country2 in GetLoop("Countries"))
                    {
                        if (!string.IsNullOrWhiteSpace(country2.GetString("Ecom:Country.IsDeliveryCountryOrDefault")))
                        {
                            <option value="@country2.GetString("Ecom:Country.Code2")" selected="selected">
                                @country2.GetString("Ecom:Country.Name")
                            </option>
                        }
                        if (string.IsNullOrWhiteSpace(country2.GetString("Ecom:Country.IsDeliveryCountryOrDefault")))
                        {
                            <option value="@country2.GetString("Ecom:Country.Code2")">
                                @country2.GetString("Ecom:Country.Name")
                            </option>
                        }
                    }
                </select>
            </div>
        </div>
    </div>
}

@helper RenderShipping()
{
if (GetLoop("Shippingmethods").Count > 0)
{
        <div class="wp-block">

            @RenderHeader("truck", Translate("Shipping", "Shipping"))

            <div class="form-body radio-group">
                @foreach (LoopItem shipping in GetLoop("Shippingmethods"))
                {
                    <label for="EcomCartShippingmethodID_@shipping.GetString("Ecom:Cart.Shippingmethod.ID")">
                        @if (!string.IsNullOrWhiteSpace(shipping.GetString("Ecom:Cart.Shippingmethod.IsSelected")))
                        {
                            <input onclick="updateCart();" type="radio" name="EcomCartShippingmethodID" id="EcomCartShippingmethodID_@shipping.GetString("Ecom:Cart.Shippingmethod.ID")" value="@shipping.GetString("Ecom:Cart.Shippingmethod.ID")" checked="checked" /><text>&nbsp;</text>
                        }
                        @if (string.IsNullOrWhiteSpace(shipping.GetString("Ecom:Cart.Shippingmethod.IsSelected")))
                        {
                            <input onclick="updateCart();" type="radio" name="EcomCartShippingmethodID" id="EcomCartShippingmethodID_@shipping.GetString("Ecom:Cart.Shippingmethod.ID")" value="@shipping.GetString("Ecom:Cart.Shippingmethod.ID")" /><text>&nbsp;</text>
                        }
                        @shipping.GetString("Ecom:Cart.Shippingmethod.Icon")
                        @shipping.GetString("Ecom:Cart.Shippingmethod.Name")
                        @if (string.IsNullOrWhiteSpace(shipping.GetString("Ecom:Cart.ShippingMethod.Price.IsZero")))
                        {
                            shipping.GetString("Ecom:Cart.ShippingMethod.Price");
                        }
                    </label><br />
                    if (!string.IsNullOrWhiteSpace(shipping.GetString("Ecom:Cart.Shippingmethod.IsSelected")) &&
                        !string.IsNullOrWhiteSpace(shipping.GetString("Ecom:ShippingProvider.Content")))
                    {
                        @shipping.GetString("Ecom:ShippingProvider.Content");
                    }
                }
            </div>
        </div>
}
}

@helper RenderPayment()
{
    <div class="wp-block">

        @RenderHeader("credit-card", Translate("Payment", "Payment"))

        <div class="form-body radio-group paymethods">
            @if (!string.IsNullOrWhiteSpace(GetGlobalValue("Global:Extranet.Name")))
            {
                var cards = GetLoop("SavedCards");
                if (cards.Count > 0)
                {
                    <div class="header">@Translate("Pay with saved cards", "Pay with saved cards")</div>
                    foreach (LoopItem card in cards)
                    {
                        string checkedAttr = card.GetBoolean("Ecom:SavedCard.IsSelected") ? "checked" : null;
                        <div class="radio-input">
                            <label>
                                <input onclick="clearRadioGroup('EcomCartPaymethodID');" type="radio" name="EcomCartSavedCardID" id="EcomCartSavedCardID_@(card.GetString("Ecom:SavedCard.ID"))" value="@card.GetString("Ecom:SavedCard.ID")" checked="@checkedAttr" />
                                @card.GetString("Ecom:SavedCard.Name")
                            </label>
                        </div>
                    }
                    <div class="or">@Translate("Or pay with one of these payment methods:", "Or pay with one of these payment methods:")</div>
                }
            }
            @foreach (LoopItem payment in GetLoop("Paymethods"))
            {
                <div class="radio-input">
                    <label>
                        @if (payment.GetBoolean("Ecom:Cart.Paymethod.IsSelected"))
                        {
                            <input onclick="clearRadioGroup('EcomCartSavedCardID');" type="radio" name="EcomCartPaymethodID" id="EcomCartPaymethodID_@payment.GetString("Ecom:Cart.Paymethod.ID")" value="@payment.GetString("Ecom:Cart.Paymethod.ID")" checked="checked" />
                        }
                        else
                        {
                            <input onclick="clearRadioGroup('EcomCartSavedCardID');" type="radio" name="EcomCartPaymethodID" id="EcomCartPaymethodID_@payment.GetString("Ecom:Cart.Paymethod.ID")" value="@payment.GetString("Ecom:Cart.Paymethod.ID")" />
                        }
                        @payment.GetString("Ecom:Cart.Paymethod.Icon")
                        @payment.GetString("Ecom:Cart.Paymethod.Name")
                    </label>
                    @if (string.IsNullOrWhiteSpace(payment.GetString("Ecom:Cart.Paymethod.Price.IsZero")))
                    {
                        payment.GetString("Ecom:Cart.Paymethod.Price");
                    }
                </div>
                @*SAVED CARDS*@
                string SavedCardName = payment.GetString("Ecom:Order.SavedCardName");
                bool SavedCardNameIsNull = string.IsNullOrWhiteSpace(SavedCardName);
                string a_checked = !SavedCardNameIsNull ? "checked" : "";
                if (payment.GetBoolean("Ecom:Cart.Paymethod.IsSelected") && payment.GetBoolean("Ecom:Cart.Paymethod.SupportSavedCard"))
                {
                <div class="savedcardname">
                    <input type="checkbox" name="EcomOrderSavedCardCreate" id="chkSavedCardCreate" onclick="onCreateSavedCardClick(this)" @a_checked value="true" />
                    <label for="chkSavedCardCreate">@Translate("Save used card", "Save used card")</label>
                    <div class="savedcardnameinput">
                        <input type="text" class="form-control" name="EcomOrderSavedCardName" id="EcomOrderSavedCardName" value="@SavedCardName" />
                    </div>
                </div>
                }
            }
        </div>
    </div>
}

@helper RenderRecurring()
{
if (!string.IsNullOrWhiteSpace(GetString("Ecom:Order.PaymentMethod.RecurringSupport")))
{
        <div class="wp-block">
            @{
                string RecurringEnabled = "";
                string Interval = "";
                string recurringShow = "hidden";

                if (!string.IsNullOrWhiteSpace(GetString("Ecom:Order.Recurring.Enabled")))
                {
                    RecurringEnabled = "checked=\"checked\"";
                    recurringShow = "show";
                }

                if (!string.IsNullOrWhiteSpace(GetString("Ecom:Order.Recurring.Interval")))
                {
                    Interval = "value=\"" + @GetString("Ecom:Order.Recurring.Interval") + "\"";
                }

                string seldays = "";
                string selweeks = "";
                string selmonths = "";

                if (GetInteger("Ecom:Order.Recurring.IntervalUnit") == 0)
                {
                    seldays = "selected=\"selected\"";
                }

                if (GetInteger("Ecom:Order.Recurring.IntervalUnit") == 1)
                {
                    selweeks = "selected=\"selected\"";
                }

                if (GetInteger("Ecom:Order.Recurring.IntervalUnit") == 2)
                {
                    selmonths = "selected=\"selected\"";
                }
            }

            @RenderHeader("calendar", Translate("Recurring", "Recurring"))

            <div class="form-body">
                <div class="input-group">
                    <div class="pull-left">
                        <label class="checkbox-field"><input type="hidden" name="EcomRecurringOrderCreate" /><input type="checkbox" onclick="showHideRecurring();" name="EcomRecurringOrderCreate" id="EcomRecurringOrderCreate" @RecurringEnabled /> @Translate("Create Recurring Order", "Create Recurring Order")</label>
                    </div>
                </div>
            </div>

            <div id="RecurringSettings" class="@recurringShow">
                <div class="form-body">
                    <div class="form-input">
                        <label for="EcomOrderRecurringInterval" class="control-label" style="display: block; text-align: left;">@Translate("I want my order every", "I want my order every")</label>
                        <select class="form-control form-control-inline" name="EcomOrderRecurringInterval" id="EcomOrderRecurringInterval" @Interval>
                            <option value="1" selected="selected">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                        </select>

                        <select class="form-control form-control-inline" name="EcomOrderRecurringIntervalUnit" id="EcomOrderRecurringIntervalUnit" value="0">
                            <option value="0" @seldays>
                                @Translate("Days", "Days")
                            </option>
                            <option value="1" @selweeks>
                                @Translate("Weeks", "Weeks")
                            </option>
                            <option value="2" @selmonths>
                                @Translate("Months", "Months")
                            </option>
                        </select>
                    </div>
                </div>

                <div id="startdateselector" class="input-group date">
                    <label class="control-label" style="display: block; text-align: left;">@Translate("Start date", "Start date")</label>
                    <div class="input-group date">
                        <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
                        <input type="hidden" id="EcomOrderRecurringStartDate" name="EcomOrderRecurringStartDate" value="12/31/2999">
                        <input type="text" class="form-control" id="startdateinput" placeholder="@Translate("Never", "Never")">
                    </div>
                </div>

                <div id="enddateselector" class="input-group date">
                    <label class="control-label" style="display: block; text-align: left;">@Translate("And it should end on", "And it should end on")</label>
                    <div class="input-group date">
                        <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
                        <input type="hidden" id="EcomOrderRecurringEndDate" name="EcomOrderRecurringEndDate" value="12/31/2999">
                        <input type="text" class="form-control" id="enddateinput" placeholder="@Translate("Never", "Never")">
                    </div>
                </div>

                @*
                    <div class="form-body">
                        <div class="form-input">
                            <label class="control-label" style="display: block; text-align: left;">@Translate("And it should end on", "And it should end on")</label>
                            @GetString("Ecom:Order.Recurring.EndDate").Replace("<select ", "<select class=\"form-control form-control-inline\" ").Replace("<img ", "<img style=\"display: none\"")
                        </div>
                    </div>
                *@
            </div>
        </div>
                }
}

@helper RenderComment()
{
    <div class="wp-block">
        <div class="form-body">
            <div class="input-group" style="width:100%">
                <textarea rows="3" class="form-control" placeholder="@Translate("Enter comment", "Enter comment")" name="EcomOrderCustomerComment" id="EcomOrderCustomerComment" value="@GetString("Ecom:Order.Customer.Comment")">@GetString("Ecom:Order.Customer.Comment")</textarea>
            </div>
        </div>
        <br />
    </div>
}

@helper RenderVoucher()
{
    <div class="wp-block">

        @RenderHeader("money", Translate("Voucher", "Voucher"))

        <div class="form-body">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="@Translate("Enter voucher code", "Enter voucher code")" name="EcomOrderVoucherCode" id="EcomOrderVoucherCode" value="@GetString("Ecom:Order.Customer.VoucherCode")">
                <span class="input-group-btn">
                    <button class="btn btn-dw-primary" type="submit" onclick="updateCart();">@Translate("Apply", "Apply")</button>
                </span>
            </div>
        </div>
    </div>
}

@helper RenderGiftcard()
{
    <div class="wp-block">

        @RenderHeader("gift", Translate("Gift card", "Gift card"))

        <div class="form-body">
            <div class="input-group">
                <input type="text" class="form-control" name="EcomOrderGiftCardCode" id="EcomOrderGiftCardCode" value="@GetString("Ecom:Order.GifTCardCode")" placeholder="@Translate("Enter gift card code", "Enter gift card code")" />
                <span class="input-group-btn">
                    <button class="btn btn-dw-primary" type="submit" onclick="updateCart();">@Translate("Apply", "Apply")</button>
                </span>
            </div>
        </div>
    </div>
}

@helper RenderOrder()
{
    <div class="wp-block">

        @RenderHeader("check", Translate("Review Order", "Review Order"))
        @{
            var productcatalog = (new System.Text.RegularExpressions.Regex(@"\d+")).Match(Pageview.Area.Item["ProductsPageId"].ToString()).Value;
        }

        <table class="table table-cart table-responsive" id="orderlist">
            <tbody id="orderlistcontent">
                @foreach (LoopItem orderline in GetLoop("OrderLines"))
                {
                    var n = orderline.GetString("OrderLines.LoopCounter");
                    var productId = orderline.GetString("Ecom:Order:OrderLine.ProductID");
                    string image = "";
                    string productlink = orderline.GetString("Ecom:Order:OrderLine.ProductLink.Fixed");

                    if (orderline.GetString("Ecom:Product.ImageLarge.Clean") != "")
                    {
                        image = "/Admin/Public/Getimage.ashx?width=200&amp;height=200&amp;compression=85&amp;Crop=7&amp;image=" + orderline.GetString("Ecom:Product.ImageLarge.Clean");
                    }

                    if (orderline.GetBoolean("Ecom:Order:OrderLine.IsProduct"))
                    {
                        <tr>
                            <td colspan="3" class="dw-table-title orderline-head">
                                <div class="row">
                                    <div class="col-md-3 orderline-image-col">
                                        @if (@productlink != "" & @image != "")
                                        {
                                            <a href="@Regex.Replace(productlink, @"\?ID=\d*\&", "?ID=" + productcatalog + "&")">
                                                <img src="@image" alt="@orderline.GetString("Ecom:Order:OrderLine.ProductName")" />
                                            </a>
                                        }
                                    </div>
                                    <div class="col-md-9">
                                        @if (@productlink != "")
                                        {
                                            <a href="@Regex.Replace(productlink, @"\?ID=\d*\&", "?ID=" + productcatalog + "&")" class="orderline-name">
                                                @orderline.GetString("Ecom:Order:OrderLine.ProductName")
                                            </a>
                                        } else {
                                            <div class="orderline-name">@orderline.GetString("Ecom:Order:OrderLine.ProductName")</div>
                                        }
                                        @if (!string.IsNullOrWhiteSpace(orderline.GetString("Ecom:Order:OrderLine.ProductVariantText")))
                                        {
                                            <div class="orderline-variant">@orderline.GetString("Ecom:Order:OrderLine.ProductVariantText")</div>
                                        }
                                        <div class="orderline-delivery">@orderline.GetString("Ecom:Product:Stock.DeliveryText")&nbsp;@orderline.GetString("Ecom:Product:Stock.DeliveryUnit")</div>

                                        @if (orderline.GetInteger("Ecom:Order:OrderLine.Points") > 0)
                                        {
                                            <div class="orderline-price">
                                                @orderline.GetDouble("Ecom:Order:OrderLine.Points")
                                                @Translate("points", "points")
                                            </div>
                                        } else {
                                            <div class="orderline-price">
                                                @orderline.GetString("Ecom:Order:OrderLine.TotalPrice")
                                            </div>
                                        }
                                        <input type="hidden" name="@("ProductLoopCounter" + @n)" value="@n" />
                                        <input type="hidden" name="@("ProductID" + @n)" value="@productId" />
                                        <input id="@("Quantity" + @n)" type="number" min="1" onchange="updateCart()" name='QuantityOrderLine@(orderline.GetValue("Ecom:Order:OrderLine.Id"))' value="@orderline.GetString("Ecom:Order:OrderLine.Quantity")" class="orderline-quantity">
                                        <a href="@orderline.GetString("Ecom:Order:OrderLine.DeleteLink")" onclick="updateCart();" class="orderline-remove" title="@Translate("Remove", "Remove")"><i class="fa fa-remove"></i></a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    }
                    else
                    {
                        <tr>
                            <td class="text-left" colspan="2" style="border-right: 0">
                                @if (orderline.GetString("Ecom:Order:OrderLine.Type") == "4")
                                {
                                    <i class="fa fa-money" style="margin-right: 5px;"></i>
                                }
                                else
                                {
                                    <i class="fa fa-tags" style="margin-right: 5px;"></i>
                                }
                                @orderline.GetString("Ecom:Order:OrderLine.ProductName")
                            </td>
                            <td class="text-right">@orderline.GetString("Ecom:Order:OrderLine.TotalPrice")</td>
                        </tr>
                    }

                    foreach (LoopItem bomitem in orderline.GetLoop("BOMItems"))
                    {
                        <tr>
                            <td class="text-left" colspan="2">
                                <small>@bomitem.GetString("Ecom:Order:OrderLine.Quantity")</small>
                                &nbsp;
                                <small><a href="@bomitem.GetString("Ecom:Order:OrderLine.ProductLink")">@bomitem.GetString("Ecom:Order:OrderLine.ProductName")</a></small>
                            </td>
                            <td class="text-right"><small>@bomitem.GetString("Ecom:Order:OrderLine.TotalPrice")</small></td>
                        </tr>
                    }
                }
                <tr>
                    <td class="text-left" colspan="2">
                        <i class="fa fa-credit-card"></i>
                        &nbsp;
                        @GetString("Ecom:Order.PaymentMethod")
                    </td>
                    <td class="text-right">@GetString("Ecom:Order.PaymentFee")</td>
                </tr>
                <tr>
                    <td class="text-left" colspan="2">
                        <i class="fa fa-truck"></i>
                        &nbsp;
                        @GetString("Ecom:Order.ShippingMethod")
                    </td>
                    <td class="text-right">@GetString("Ecom:Order.ShippingFee")</td>
                </tr>
                @if (Dynamicweb.Security.UserManagement.License.IsModuleInstalled("LoyaltyPoints"))
                {
                    <tr>
                        <td colspan="2">@Translate("You used", "You used")</td>
                        <td class="text-right">@GetString("Ecom:Order.TotalPoints") points</td>
                    </tr>
                    <tr>
                        <td colspan="2">@Translate("You earn", "You earn")</td>
                        <td class="text-right">@GetString("Ecom:Order.RewardTotalPoints") points </td>
                    </tr>
                    <tr>
                        <td colspan="2"><strong>@Translate("Total point balance", "Total point balance") </strong></td>
                        <td class="text-right"><strong>@{ var totalpointsafter = GetDouble("UserManagement:User.PointBalance") - @GetDouble("Ecom:Order.TotalPoints") + @GetDouble("Ecom:Order.RewardTotalPoints");}@totalpointsafter points</strong></td>
                    </tr>
                            }
                <tr>
                    <td colspan="2" style="border-right: 0"><strong>@Translate("Total", "Total")</strong></td>
                    <td class="text-right"><strong>@GetString("Ecom:Order.OrderLines.Total.PriceWithVAT")</strong></td>
                </tr>
            </tbody>

        </table>
    </div>
}

@helper RenderSubmitOrder() {
    <div class="wp-block">
        <div class="form-group">
            <input type="checkbox" id="EcomOrderCustomerAccepted" name="EcomOrderCustomerAccepted" value="1" />
            <label class="checkbox-field" for="EcomOrderCustomerAccepted">
                @Translate("I accept the terms and conditions of this website.", "I accept the terms and conditions of this website.")
            </label>
            <div id="terms-error">Please accept the terms and conditions</div>
        </div>
    </div>

    <div class="wp-block">
        <p>
            @{
                string curpage = GetGlobalValue("Global:Page.ID");
                string quotes = (new Regex(@"\d+")).Match(Pageview.Area.Item["QuotesCartPageId"].ToString()).Value;
            }
            @if (curpage != quotes && !string.IsNullOrWhiteSpace(GetGlobalValue("Global:Extranet.UserName")))
            {
                <a class="orange-link" href="Default.aspx?ID=@quotes">@Translate("Save cart as quote", "Save cart as quote")</a>
            }
            <button class="btn btn-dw-primary pull-right" type="submit" name="@GetString("CartV2.NextStepButtonName")" id="@GetString("CartV2.NextStepButtonName")">@Translate("Place order", "Place order")</button>
        </p>
    </div>
}


@SnippetStart("JavaScriptBottom")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        var lst = document.getElementById('AddressList_main');
        if (lst) {
            FillAddress(lst);
        }

        //Show alternate address
        if (document.getElementById('EcomOrderDeliveryAddress').value != "") {
            document.getElementById('deliveryInformation').className = "wp-block show";
            document.getElementById('enableDelivery').checked = true;
        } else {
            document.getElementById('deliveryInformation').className = "wp-block hidden";
            document.getElementById('enableDelivery').checked = false;
        }

        $("#startdateinput").datepicker({
            endDate: "+1y",
            startDate: "today"
        }).on('changeDate', function (e) {
            $('#EcomOrderRecurringStartDate').val(e.date.getDate() + '/' + (parseInt(e.date.getMonth()) + 1) + '/' + e.date.getFullYear());
        });

        $("#enddateinput").datepicker({
            endDate: "+1y",
            startDate: "today"
        }).on('changeDate', function (e) {
            $('#EcomOrderRecurringEndDate').val(e.date.getDate() + '/' + (parseInt(e.date.getMonth()) + 1) + '/' + e.date.getFullYear());
        });

        $(document.getElementById('@GetString("CartV2.NextStepButtonName")')).click(function () {
            if (document.getElementById('EcomOrderCustomerAccepted').checked == false) {
                document.getElementById('EcomOrderCustomerAccepted').focus();
                $('#terms-error').show();
                return false;
            }
        });

        $("#EcomOrderCustomerAccepted").change(function () {
            $('#terms-error').hide();
        });
    });

    function updateCart() {
        var form = document.getElementById('ordersubmit');
        form.submit();

        //Spinner
        var opts = {
            lines: 9, // The number of lines to draw
            length: 0, // The length of each line
            width: 10, // The line thickness
            radius: 18, // The radius of the inner circle
            corners: 1, // Corner roundness (0..1)
            rotate: 0, // The rotation offset
            direction: 1, // 1: clockwise, -1: counterclockwise
            color: '#000', // #rgb or #rrggbb or array of colors
            speed: 1, // Rounds per second
            trail: 35, // Afterglow percentage
            shadow: false, // Whether to render a shadow
            hwaccel: false, // Whether to use hardware acceleration
            className: 'spinner', // The CSS class to assign to the spinner
            zIndex: 2e9, // The z-index (defaults to 2000000000)
            top: '50%', // Top position relative to parent
            left: '50%' // Left position relative to parent
        };

        var target = document.getElementById('orderlist');
        var spinner = new Spinner(opts).spin(target);

        document.getElementById('orderlistcontent').style.visibility = "hidden";
    }

    function showHideDelivery() {
        var div = document.getElementById("deliveryInformation");

        if (document.getElementById("enableDelivery").checked) {
            div.className = "show";
            var lst2 = document.getElementById('AddressList_delivery');
            if (lst2) {
                FillAddressTwo(lst2);
            }
        } else {
            div.className = "hidden";
        }
    }

    function showHideRecurring() {
        var div = document.getElementById("RecurringSettings");

        if (document.getElementById("EcomRecurringOrderCreate").checked) {
            div.className = "show";
        } else {
            div.className = "hidden";
        }
    }

    function onCreateSavedCardClick(chkCreate) {
        var txtName = document.getElementById('EcomOrderSavedCardName');
        if (chkCreate && txtName) {
            txtName.disabled = !chkCreate.checked;
            var hdnCreate = document.getElementById('EcomOrderSavedCardCreate');
            if (hdnCreate)
                hdnCreate.value = chkCreate.checked;
        }
    }

    function clearRadioGroup(name) {
        var group = document.getElementsByName(name);
        for (var i = 0; i < group.length; i++) {
            group[i].checked = false;
        }
        updateCart();
    }

    function showBillingAddress() {
        document.getElementById('BillingAddressBlock').className = "wp-block show";
    }

    function FillAddress(list)
    {
        var addressId = list.options[list.selectedIndex].value;
        var self = this;

        var xmlhttp = new XMLHttpRequest();
        var addressInfoUrl = "Admin/Module/Usermanagement/UserAddresses.ashx?cmd=GetAddress&token=@GetString("Ecom:Cart.UserAddressToken")&uID=@GetString("Global:Extranet.UserID")&AddressID=" + addressId;
        xmlhttp.open('POST', addressInfoUrl, true);
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    var obj = JSON.parse(xmlhttp.response);
                    document.getElementById('EcomOrderCustomerAddress').value = obj.Address;
                    document.getElementById('EcomOrderCustomerZip').value = obj.Zip;
                    document.getElementById('EcomOrderCustomerCity').value = obj.City;

                    var CustomerCountry = document.getElementById('EcomOrderCustomerCountry');
                    for (i = 0; i < CustomerCountry.length; i++) {
                        if (CustomerCountry.options[i].text == obj.Country) {
                            CustomerCountry.selectedIndex = i;
                            return;
                        }
                    }
                }
            }
        };
        xmlhttp.send(null);
    };

    function FillAddressTwo(list)
    {
        var addressId = list.options[list.selectedIndex].value;
        var self = this;

        var xmlhttp = new XMLHttpRequest();
        var addressInfoUrl = "Admin/Module/Usermanagement/UserAddresses.ashx?cmd=GetAddress&token=@GetString("Ecom:Cart.UserAddressToken")&uID=@GetString("Global:Extranet.UserID")&AddressID=" + addressId;
        xmlhttp.open('POST', addressInfoUrl, true);
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    var obj = JSON.parse(xmlhttp.response);
                    document.getElementById('EcomOrderDeliveryAddress').value = obj.Address;
                    document.getElementById('EcomOrderDeliveryZip').value = obj.Zip;
                    document.getElementById('EcomOrderDeliveryCity').value = obj.City;

                    var CustomerCountry = document.getElementById('EcomOrderDeliveryCountry');
                    for (i = 0; i < CustomerCountry.length; i++) {
                        if (CustomerCountry.options[i].text == obj.Country) {
                            CustomerCountry.selectedIndex = i;
                            return;
                        }
                    }
                }
            }
        };
        xmlhttp.send(null);
    };

    function getOptionIndexByText(listid, text) {
        var list = document.getElementById(listid);
        for (j = 0; j < list.options.length; j++) {
            if (list.options[j].text == text) {
                return j;
            }
        }
        return -1;
    }
</script>
@SnippetEnd("JavaScriptBottom")