<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CreateWorkOrder.aspx.cs" Inherits="TruxWebPortal.CreateWorkOrder" %>

<%@ Register TagPrefix="ucHeader" TagName="truxHeader" Src="header.ascx" %>
<%@ Register TagPrefix="ucFooter" TagName="truxFooter" Src="footer.ascx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="HeadServices" runat="server">

    <title>Create Work Order</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" />
    <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 type="text/javascript">

        function Validate() {

            var isValid = Page_ClientValidate();

            
            return isValid;
        }

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

        $(document).ready(function () {

            var noserviceDates = <%= _noServiceDates %>;

            $('#txtDate').datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "DD, MM dd, yy",
                minDate: 0,
                maxDate: "+1y",
                beforeShowDay: function (date) {
                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    return [noserviceDates.indexOf(string) === -1];
                }
            }).attr('readonly', 'readonly');;
        });

    </script>
    </head>
        <body>
    <ucHeader:truxHeader ID="Hdr1" runat="server"></ucHeader:truxHeader>
    <div id="main_area">
        <div id="work_area">
            <form id="form1" runat="server" autocomplete="off">
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <div class="dashboardSection" style="overflow: auto;">
                    <h1>Create a New Work Order</h1>
                    <hr />
                    <table style="border-spacing: 5px;">
                        <tr style="vertical-align: top">
                            <td style="width: 1px; vertical-align: top">Customer:</td>
                            <td>
                                <asp:Label ID="lblCustomerNumber" runat="server" Text=""></asp:Label>
                            </td>
                            <td>
                                <asp:Label ID="lblCustomerName" runat="server" Text=""></asp:Label>
                            </td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr style="vertical-align: top" runat="server" id="siteRow">
                            <td style="vertical-align: top">Site:</td>
                            <td>
                                <asp:Label ID="lblSiteNumber" runat="server" Text=""></asp:Label></td>
                            <td style="word-break: break-all; width: 50%">
                                <asp:Label ID="lblSiteName" runat="server" Text=""></asp:Label><br />
                            </td>
                            <td colspan="2">Add:
                                <asp:Label ID="lblSiteAddress" runat="server" Text=""></asp:Label>
                            </td>
                        </tr>
                        <tr style="vertical-align: top" runat="server" id="serviceRow">
                            <td>Service:</td>
                            <td>
                                <asp:Label ID="lblServiceNumber" runat="server" Text=""></asp:Label></td>
                            <td style="word-break: break-all">
                                <span>Type: </span>
                                <asp:Label ID="lblServiceType" runat="server" Text=""></asp:Label><br />
                            </td>
                            <td>Qty:
                                <asp:Label ID="lblServiceQty" runat="server" Text=""></asp:Label>
                            </td>
                            <td>Size:
                                <asp:Label ID="lblServiceSize" runat="server" Text=""></asp:Label>
                            </td>
                        </tr>
                    </table>
                </div>
                <hr />
                <div class="dashboardSection" style="overflow: auto;">
                    <table class="tableForm" style="width: 100%;">
                        <tr>
                            <td style="text-align: right; vertical-align: top; white-space: nowrap; width:1px "><label style="width:100%">
                                <asp:RequiredFieldValidator ForeColor="Red" ControlToValidate="txtDate" ID="rfvServiceDate" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>Service Date:</label></td>
                            <td style="padding-right:5px">
                                <asp:TextBox ID="txtDate" placeholder="Select Your Date" runat="server" Style="box-sizing: border-box; width: 100%;" MaxLength="40" class="textfield" AutoPostBack="True" OnTextChanged="txtDate_TextChanged"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right;vertical-align: top">
                                <label style="width:100%"><asp:RequiredFieldValidator ForeColor="Red" ID="rfdReference" ControlToValidate="txtReference" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>Reference:</label></td>
                            <td  style="padding-right:5px">
                                <asp:TextBox ID="txtReference" runat="server" MaxLength="200" Style="box-sizing: border-box; width: 100%;" class="textfield"></asp:TextBox>
                            </td>
                            <td style="text-align: right;vertical-align: top"><label style="width:100%">Message:</label></td>
                            <td rowspan="3" style="width: 40%; height: 100%;vertical-align: top">
                                <asp:TextBox Style="display: block; height: 100%; min-height: 84px" TextMode="MultiLine" ID="txtWorkOrderText" runat="server" Width="100%" Rows="1" Columns="1"></asp:TextBox>
                            </td>
                            
                        </tr>
                        <tr>
                            <td style="text-align: right;vertical-align: top">
                                <label style="width:100%"><asp:RequiredFieldValidator ForeColor="Red" ID="RequiredFieldValidator2" ControlToValidate="ddlActivity" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>Activity:</label></td>
                            <td  style="padding-right:5px">
                                <asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Inline">
                                    <ContentTemplate>
                                        <asp:DropDownList AutoPostBack="True" ID="ddlActivity" runat="server" Style="width: 100%" OnSelectedIndexChanged="ddlActivity_SelectedIndexChanged"></asp:DropDownList>
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="txtDate" EventName="TextChanged" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right;vertical-align: top">
                               <label style="width:100%"><asp:RangeValidator ID="rvLifts" ForeColor="Red" runat="server" ErrorMessage="*"  ControlToValidate="txtLifts" MinimumValue="0.00" MaximumValue="99999.99" ></asp:RangeValidator> <asp:RequiredFieldValidator ForeColor="Red" ID="RequiredFieldValidator1" ControlToValidate="txtLifts" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>Lifts:</label></td>
                            <td>
                                <asp:TextBox ID="txtLifts" type="number" min="0.00" max="99999.99" step="0.01" runat="server" style="width: auto" Text="1" class="textfield"></asp:TextBox>
                                <span><label style="padding-left: 10px; text-align: left; float: none;display: inline-block">Rate:</label></span>
                                <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
                                    <ContentTemplate>
                                        <asp:Label ID="lblRate"  Style="padding: 4px 2px;" runat="server" Text=""></asp:Label>
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="ddlActivity" EventName="SelectedIndexChanged" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </td>
                        </tr>
                        <tr>
                            <td id="cashOnDemand" runat="server" colspan="4">
                                
                            <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: 70%">
                                <tr>
                                    <td style="width: 1px">
                                        <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>
       
                        
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center" colspan="4">
                                <asp:Button CausesValidation="True" ID="btnSave" CssClass="default_button" runat="server" Style="display: inline; margin-left: auto" Text="Save" OnClick="btnSave_Click" OnClientClick="return Validate()"  />
                            </td>
                        </tr>
                    </table>
                </div>
            </form>
        </div>
    </div>

    <ucFooter:truxFooter ID="Ftr1" runat="server"></ucFooter:truxFooter>
</body>
</html>
