<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="CheckOut.aspx.cs" Inherits="TruxWebPortal.OnlineBin.CheckOut" %>
<%@ Import Namespace="TruxWebPortal.Common" %>

<%@ Register TagPrefix="ucHeader" TagName="truxHeader" Src="../header.ascx" %>
<%@ Register TagPrefix="ucHeader2" TagName="truxHeader2" Src="../header2.ascx" %>
<%@ Register TagPrefix="ucFooter" TagName="truxFooter" Src="../footer.ascx" %>
<%@ PreviousPageType TypeName="TruxWebPortal.TruxBasePage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="HeadLogin" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Check out</title>
    <link rel="stylesheet" type="text/css" href="../_style/stylesheet.css" title="TRUX7" />
    <link rel="Stylesheet" href="../_style/css/jquery-ui-1.8.24.custom.css" />
    <link href="../_style/inputmask.css" rel="stylesheet" />
    <script src="../Services.js" type="text/javascript"></script>
    <script src="../js/jquery/jquery-1.11.2.min.js" type="text/javascript"> </script>
    <script src="../js/jqueryUI/jquery-ui.min.js" type="text/javascript"> </script>
    <script src="../js/inputMask/inputmask.min.js"></script>
    <script src="../js/inputMask/inputmask.extensions.min.js"></script>
    <script src="../js/inputMask/inputmask.numeric.extensions.min.js"></script>
    <script src="../js/inputMask/inputmask.date.extensions.min.js"></script>
    <script src="../js/inputMask/jquery.inputmask.min.js"></script>
    <script src="../js/inputMask/inputmask.binding.min.js"></script>

    <script src="http://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyABicUfM9NSYptS_ODoyUkXq54PgsfJyLw&libraries=geometry,drawing"></script>
    <script type="text/javascript">
        var map;     
        var addressLocation = { lat: <%= _latitude %> , lng: <%= _longitude %> };
        var marker;

        function ToggleDraggable()
        {
            if($('#chkGoogleMap').prop('checked'))
            {
                marker.setDraggable(true);
                marker.setLabel('D');
            }
            else
            {
                marker.setDraggable(false);
                marker.setPosition(addressLocation);
                marker.setLabel('');
            }
            
            
        }

        function handleEvent(event) {
            $('#hfLatitude').val(event.latLng.lat());
            $('#hfLongitude').val(event.latLng.lng());
        }

        function initMap() {
            if (document.getElementById('map') != null) {
                map = new google.maps.Map(document.getElementById('map'), {
                    center: addressLocation,
                    zoom: 17,
                    disableDefaultUI: true,
                    zoomControl: true,
                    scaleControl: true,
                    mapTypeId: 'satellite'
                });
                marker = new google.maps.Marker({position: addressLocation, map: map, draggable: false});
                marker.addListener('dragend', handleEvent);
            }
            
        }

        function ToggleValidators(group, value)
        {
            $.each(Page_Validators, function (index, validator){
                if (validator.validationGroup == group){
                    validator.enabled = value;
                }
            });
        }

        function Agreement_ClientValidate(sender, e)
        {
            e.IsValid = $("#chkAgree").prop('checked');
        }

        
        function CardholderName_ClientValidate(sender, e)
        {
            e.IsValid = $("#txtPaymentFirstName").val().length > 0 && $("#txtPaymentLastName").val().length > 0;
        }
        

        function Validate() {

            var isValid = Page_ClientValidate();
            if(isValid)
            {
                isValid = Page_ClientValidate('mailingAddress');
            }
            
            return isValid;
        }

        $(document).ready(function () {

            $('#txtPhoneNumber').inputmask({'mask': '(999) 999-9999'});

            $('#chkMailingAddress').change(function() {
                if(!$('#chkMailingAddress').prop('checked'))
                {
                    $('#mailingAddress').show();
                    ToggleValidators('mailingAddress', true);
                    
                }
                else{
                    $('#mailingAddress').hide();
                    ToggleValidators('mailingAddress', false);
                }

            });

            ToggleValidators('mailingAddress', false);

            initMap();
            
        });

    </script>
    
    
    <script type="text/javascript">

        function DisableButton() {
            document.getElementById("<%= btnCheckout.ClientID %>").disabled = true;
        }

        window.onbeforeunload = DisableButton;
    </script>


</head>
<body>
    <form id="frmLogin" runat="server" autocomplete="off">
        <asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
        <% 
        if (!string.IsNullOrWhiteSpace(sCompanyCode))
        {
        %>
            <ucHeader:truxHeader ID="Hdr1" runat="server" />
        <%
        }
        else
        { 
        %>
            <ucHeader2:truxHeader2 ID="Hdr2" runat="server" />
        <%
        }
        %>

    <div id="main_area">
   
            <div id="work_area" style="background-color: #ececec">
            <div style="width: 100%; position: relative;height:25px">
                <asp:Label ID="lblAddress" CssClass="headerLabel topRight" runat="server"></asp:Label>
            </div>
            <div style="flex-direction: row; display: flex">
                <div style="width: 65%">
                <p class="description" style="margin-bottom: 20px">
                    <span id="Span19">
                        <asp:Label ID="lblDesc" runat="server"></asp:Label>
                    </span>
                </p>
                    <div id="siteInformation" runat="server">
                        <div style="margin: 10px; padding: 10px; background-color: white">
                            <h2>Contact Information</h2>
                        </div>
                        <div style="margin: 10px; padding: 10px; background-color: white">

                            <p>Contact Information</p>
                            <table id="ContactInformation" class="tableForm">
                                <tr>
                                    <td>
                             
                                        <label class="label" for="txtEmailAddress">
                                                       
                                        <asp:RegularExpressionValidator Display="Dynamic" ID="reEmail" runat="server"
                                            ControlToValidate="txtEmailAddress" ForeColor="Red" EnableClientScript="true" Text="*" ErrorMessage="Invalid Email Address" Style="display: inline"
                                            ValidationExpression="^([\w-\.+_#$%&*~]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]+|[0-9]{1,3})(\]?)$">
                                        </asp:RegularExpressionValidator>
                                            <asp:RequiredFieldValidator Display="Dynamic" ForeColor="Red" ID="rfvEmail" ControlToValidate="txtEmailAddress" runat="server" ErrorMessage="">*</asp:RequiredFieldValidator>
                                            Email Address:</label></td>
                                    <td colspan="3">
                                        <asp:TextBox ID="txtEmailAddress" runat="server" CssClass="textfield" Style="width: 100%" MaxLength="80"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="label" for="txtFirstName"><asp:RequiredFieldValidator  ForeColor="Red" ID="rfvFirstName" ControlToValidate="txtFirstName" runat="server" ErrorMessage="">*</asp:RequiredFieldValidator>First Name:</label></td>
                                    <td>
                                        <asp:TextBox ID="txtFirstName" runat="server" CssClass="textfield" MaxLength="50"></asp:TextBox></td>
                                    <td>
                                        <label for="txtLastName"><asp:RequiredFieldValidator  ForeColor="Red" ID="rfvLastName" ControlToValidate="txtLastName" runat="server" ErrorMessage="">*</asp:RequiredFieldValidator>Last Name:</label></td>
                                    <td>
                                        <asp:TextBox ID="txtLastName" runat="server" CssClass="textfield" MaxLength="50"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>

                                        <label for="txtPhoneNumber">                                    <asp:RegularExpressionValidator  ForeColor="Red" ID="rePhoneNumber" runat="server"
                                            ControlToValidate="txtPhoneNumber" EnableClientScript="true" Text="*" ErrorMessage="Invalid Phone Number" Style="display: inline"
                                            ValidationExpression="^([(](?=[0-9]{3}[)]{1}))?[0-9]{3}(([)]?\s?)|([-]?))[0-9]{3}([-]?|\s?)[0-9]{4}$">
                                        </asp:RegularExpressionValidator>Phone Number:</label></td>
                                    <td colspan="3">
                                        <asp:TextBox ID="txtPhoneNumber" runat="server" CssClass="textfield" MaxLength="15"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="txtCompanyName">Company Name:</label></td>
                                    <td colspan="3">
                                        <asp:TextBox ID="txtCompanyName" runat="server" CssClass="textfield" MaxLength="40"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td colspan="4" style="text-align: center">
                                        <asp:CheckBox CssClass="checkboxlist" TextAlign="Right" ID="chkMailingAddress" runat="server" Text="Mailing address is same as service address" Checked="true" Style="float: none" /></td>
                                </tr>

                            </table>

                            <table id="mailingAddress" class="tableForm" style="display: none; width: 100%">
                                <tr>
                                    <td colspan="4">Mailing Address</td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="label" for="txtAddress1">
                                            <asp:RequiredFieldValidator  ForeColor="Red" ID="rfvAddress1" ValidationGroup="mailingAddress" ControlToValidate="txtAddress1" runat="server" ErrorMessage="">*</asp:RequiredFieldValidator>Address:</label>

                                    </td>
                                    <td colspan="3">
                                        <asp:TextBox MaxLength="40" ID="txtAddress1" CssClass="textfield" runat="server" Style="width: 100%" />
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td colspan="3">
                                        <asp:TextBox MaxLength="40" ID="txtAddress2" CssClass="textfield" runat="server" />
                                    </td>
                                </tr>
                                <tr>
                                    <td  style="width: 10px;">
                                        <label class="label" for="txtCity">
                                            <asp:RequiredFieldValidator  ForeColor="Red" ID="rfvCity" ValidationGroup="mailingAddress" ControlToValidate="txtCity" runat="server" ErrorMessage="">*</asp:RequiredFieldValidator>City:</label>
                                    </td>
                                    <td>
                                        <asp:TextBox  MaxLength="40" ID="txtCity" CssClass="textfield" Style="width: 100%" runat="server" />
                                    </td>
                                    <td>
                                        <label class="label" for="txtProvince">
                                            <asp:RequiredFieldValidator  ForeColor="Red" ID="rfvProvince" ValidationGroup="mailingAddress" ControlToValidate="ddlState" runat="server" Style="display: inline" ErrorMessage="">*</asp:RequiredFieldValidator>
                                            <asp:Label ID="lblState" runat="server" Text="Province:"></asp:Label>
                                        </label>
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddlState" runat="server" CssClass="textfield"></asp:DropDownList>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="label" for="txtZip">
                                            <asp:RegularExpressionValidator  ForeColor="Red" ID="revPostalCode" ValidationGroup="mailingAddress" runat="server"
                                                ControlToValidate="txtZip" EnableClientScript="true" ErrorMessage="" Style="display: inline-block"
                                                ValidationExpression="<%= CommonUtilities.PostalCodeRegex %>">*
                                            </asp:RegularExpressionValidator>
                                            <asp:RequiredFieldValidator  ForeColor="Red" ID="rfvPostalCode" ValidationGroup="mailingAddress" ControlToValidate="txtZip" runat="server" Style="display: inline-block" ErrorMessage="">*</asp:RequiredFieldValidator>

                                            <asp:Label ID="lblZipCode" runat="server" Text="Postal Code: "></asp:Label>
                                        </label>
                                    </td>
                                    <td colspan="3">
                                        <asp:TextBox ID="txtZip" runat="server" CssClass="textfield" MaxLength="10" placeholder="A1A 1A1" />
                                    </td>
                                </tr>


                            </table>

                        </div>
                    </div>
                    <div id="serviceLocation" runat="server" style="margin: 10px; padding: 10px; background-color: white">
                        <h2>Service Location</h2>
                    </div>
                    <div style="margin: 10px; padding: 10px; background-color: white">



                        <table style="width: 100%">
                            <tr>
                                <td style="width: 10px; white-space: nowrap; vertical-align: top">
                                    <label for="txtWorkOrderMessage">Driver Instruction:</label></td>
                                <td>
                                    <textarea runat="server" id="txtWorkOrderMessage" cols="20" name="S1" rows="2" style="width: 100%" maxlength="200"></textarea></td>
                            </tr>

                        </table>
                        <div id="mapContainer" runat="server">
                            <asp:CheckBox CssClass="checkboxlist" onclick="ToggleDraggable()" TextAlign="Right" ID="chkGoogleMap" runat="server" Text="Help us fine tune where the bin will be placed" Checked="false" Style="float: none" />
                            <div id="map" runat="server" style="display: block; height: 300px"></div>
                        </div>
                        <asp:HiddenField ID="hfLongitude" runat="server" />
                        <asp:HiddenField ID="hfLatitude" runat="server" />

                    </div>
                    <div id="payment" runat="server" style="margin: 10px; padding: 10px; background-color: white">
                        <h2>Payment</h2>
                    </div>
                    <div style="margin: 10px; padding: 10px; background-color: white">
                        <div id="cashOnDemand" runat="server">
                            <div style="height:25px">
                                <img style="height: 100%;width: auto" alt="Mastercard" src="../_images/mastercard.png" />
                                <img style="height: 100%;width: auto" alt="American Express" src="../_images/amex.png" />
                                <img style="height: 100%;width: auto" alt="VISA" src="../_images/visa.png" />
                            </div>
                            <table id="Payment" class="tableForm" style="width: 100%">
                                <tr>
                                    <td>
                                        <label class="label" for="ddlCardType"><asp:RequiredFieldValidator ValidationGroup="cashOnDemand"  ForeColor="Red" ID="rfvCardType" ControlToValidate="ddlCardType" runat="server" ErrorMessage="">*</asp:RequiredFieldValidator>Card Type:</label></td>
                                    <td colspan="3">
                                        <asp:DropDownList ID="ddlCardType" runat="server"></asp:DropDownList></td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="label" for="txtCardNumber"><asp:RequiredFieldValidator ValidationGroup="cashOnDemand"  ForeColor="Red" ID="rfvCardNumber" ControlToValidate="txtCardNumber" runat="server" ErrorMessage="">*</asp:RequiredFieldValidator>Card Number:</label></td>
                                    <td>
                                        <asp:TextBox ID="txtCardNumber" runat="server" CssClass="textfield"></asp:TextBox></td>
                                    <td>
                                        <label for="txtCVV2"><asp:RequiredFieldValidator ValidationGroup="cashOnDemand"  ForeColor="Red" ID="rfvCVV2" ControlToValidate="txtCVV2" runat="server" ErrorMessage="">*</asp:RequiredFieldValidator>CVV2:</label></td>
                                    <td>
                                        <asp:TextBox ID="txtCVV2" runat="server" CssClass="textfield" MaxLength="40" Width="40%"></asp:TextBox>
                                        <a class="cvv2_helplnk" href="../_help/my_account.aspx#cvv2help" target="_blank">what's this?</a></td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="ddlExpirationMonth"><asp:RequiredFieldValidator ValidationGroup="cashOnDemand"  ForeColor="Red" ID="rfvExpirationMonth" ControlToValidate="ddlExpirationMonth" runat="server" ErrorMessage="">*</asp:RequiredFieldValidator>Expiration:</label></td>
                                    <td colspan="3">
                                        <asp:DropDownList ID="ddlExpirationMonth" runat="server"></asp:DropDownList>
                                        <asp:DropDownList ID="ddlExpirationYear" runat="server"></asp:DropDownList>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="txtPaymentFirstName">
                                            <asp:CustomValidator ValidationGroup="cashOnDemand" EnableClientScript="true" ID="cvPaymentName"  ForeColor="Red" ClientValidationFunction="CardholderName_ClientValidate" runat="server" ErrorMessage="" OnServerValidate="cvPaymentName_ServerValidate">*</asp:CustomValidator>Cardholder Name:</label></td>
                                    <td colspan="3">
                                        <div style="display: flex; flex-direction: row">
                                            <div style="width: 50%; padding-right: 7px">
                                                <asp:TextBox MaxLength="50" ID="txtPaymentFirstName" runat="server" CssClass="textfield"></asp:TextBox>
                                            </div>
                                            <div style="width: 50%; padding-left: 7px">
                                                <asp:TextBox MaxLength="50" ID="txtPaymentLastName" runat="server" CssClass="textfield"></asp:TextBox>
                                            </div>
                                        </div>


                                    </td>

                                </tr>
             

                            </table>
                            <asp:ValidationSummary ForeColor="Red" ID="ValidationSummary1" runat="server" />
                        </div>
                        <asp:CustomValidator runat="server" ForeColor="Red" ID="rfvAgree" EnableClientScript="true" ClientValidationFunction="Agreement_ClientValidate" ErrorMessage="" OnServerValidate="rfvAgree_ServerValidate">*</asp:CustomValidator>
                        <asp:CheckBox CssClass="checkboxlist" TextAlign="Right" ID="chkAgree" runat="server" Checked="false" Style="float: none" Text="By checking this box I acknowledge that I have read and accept the <a href='Legal.aspx' target='_blank'>Terms Of Use &#x1f5d7;</a>" />
                        <asp:Button CssClass="default_button" ID="btnCheckout" OnClientClick="return Validate();" runat="server" Text="Complete Booking >" Style="margin-left: 0px" OnClick="btnCheckout_Click" />
                    </div>
                </div>
                <div style="width: 35%">
                    <div style="margin: 10px">
                        <h2>Address:</h2>
                        <div style="border: 1px solid black; padding: 20px">
                            <table style="width: 100%">


                                <tr>
                                    <td rowspan="3" style="vertical-align: top; width: 10px; white-space: nowrap"><b>Site Address:</b></td>
                                    <td><b>
                                        <asp:Label ID="lblAddress1" runat="server" Text=""></asp:Label></b></td>
                                </tr>
                                <asp:Repeater ID="rAddress" runat="server">
                                    <ItemTemplate>
                                        <tr>
                                            <td>
                                                <%# "<b>" + Container.DataItem + "</b>"  %>
                                            </td>
                                        </tr>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </table>
                        </div>
                    </div>
                    <div style="margin: 10px">
                        <h2>Job:</h2>
                        <div style="border: 1px solid black; padding: 20px">
                            <table class="tableForm" >


                                <tr id="materialRow" runat="server">
                                    <td><label>Material:</label></td>
                                    <td><b><asp:Label ID="lblMaterial" runat="server" Text="None"></asp:Label></b></td>
                                </tr>
                                <tr>
                                    <td><b><asp:Label AssociatedControlID="lblContainerSize" ID="lblContainerTypeDesc" runat="server" Text="">:</asp:Label></b></td>
                                    <td><b><asp:Label ID="lblContainerSize" runat="server" Text=""></asp:Label></b></td>
                                </tr>
                                <tr>
                                    <td><label>Qty:</label></td>
                                    <td><b><asp:Label ID="lblQuantity" runat="server" Text="1"></asp:Label></b></td>
                                </tr>
                                <tr>
                                    <td><label>Delivery Date:</label></td>
                                    <td><b><asp:Label ID="lblDeliveryDate" runat="server" Text=""></asp:Label></b></td>
                                </tr>
                                <tr>
                                    <td><label>Pickup Date:</label></td>
                                    <td><b><asp:Label ID="lblPickupDate" runat="server" Text=""></asp:Label></b></td>
                                </tr>
                               
                            </table>
                        </div>
                    </div>
                    <div style="margin: 10px">
                        <h2>Payment Summary:</h2>
                        <div style="border: 1px solid black; padding: 20px">
                            <asp:GridView Style="margin-left: auto; margin-right: 10px; min-width: 50%" ID="gvPaymentSummary" runat="server" AutoGenerateColumns="False" GridLines="None" ShowFooter="True" ShowHeader="False" OnRowDataBound="gvPaymentSummary_RowDataBound" OnDataBinding="gvPaymentSummary_DataBinding" OnDataBound="gvPaymentSummary_DataBound">
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <%# Eval("Desc") %>:
                                        </ItemTemplate>
                                        <FooterTemplate>
                                            Total:
                                        </FooterTemplate>
                                    </asp:TemplateField>

                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <%# string.Format("{0:C2}", Eval("AMOUNT")) %>
                                        </ItemTemplate>
                                        <FooterTemplate>
                                            <%#  string.Format("{0:C2}",_summaryTotal)  %>
                                        </FooterTemplate>
                                        <ItemStyle HorizontalAlign="Right" />
                                        <FooterStyle HorizontalAlign="Right" />
                                    </asp:TemplateField>

                                </Columns>

                                <FooterStyle CssClass="bottomBorder" />

                            </asp:GridView>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </form>
</body>
</html>
