<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Client/ClientMaster.master" CodeBehind="EditServiceItem.aspx.vb" Inherits="Web.EditServiceItem" %>
<%@ MasterType VirtualPath="ClientMaster.Master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="phContent" runat="server">

    <div class="container">
        <h1><%= If(itemId, "Edit Service Item", "Add Service Item") %></h1>

        <div class="form-group">
            <asp:Label runat="server" AssociatedControlID="ddlVehicle" Text="Vehicle" />
            <asp:DropDownList ID="ddlVehicle" runat="server" AutoPostBack="true" CssClass="form-control" />
        </div>
        
        <div class="form-group">
            <asp:Label runat="server" AssociatedControlID="txtMechanic" Text="Vendor/Mechanic" />
            <asp:TextBox ID="txtMechanic" runat="server" MaxLength="100" CssClass="form-control" />
        </div>
        <div class="form-group">
            <asp:Label runat="server" AssociatedControlID="ddlServiceType" Text="Service Type" />
            <asp:DropDownList ID="ddlServiceType" runat="server" CssClass="form-control" />
            <asp:CustomValidator ID="valServiceType" runat="server"
                ClientValidationFunction="ddlServiceType_ClientValidate" ValidateEmptyText="true"
                Text="required" Display="Dynamic" CssClass="text-danger" />
            <script>
                function ddlServiceType_ClientValidate(s, e) {
                    var ddlServiceType = $('#<%= ddlServiceType.ClientID %>');
                    e.IsValid = (ddlServiceType.val() != 0);
                }
            </script>
        </div>
        
        <div class="form-group">
            <asp:RequiredFieldValidator runat="server" ControlToValidate="dtService"
                Text="required" CssClass="required" Display="Dynamic" />
            <asp:Label runat="server" AssociatedControlID="dtService" Text="Service Date" />
            <asp:TextBox ID="dtService" runat="server" TextMode="Date" CssClass="form-control" />
        </div>
        <div class="form-group">
            <asp:Label runat="server" AssociatedControlID="dtNextService" Text="Next Service Date" />
            <asp:TextBox ID="dtNextService" runat="server" TextMode="Date" CssClass="form-control" />
        </div>
        <script>
            (function () {
                var daySchedules = [0, <asp:Literal ID="litDaySchedules" runat="server" />];
                var ddlServiceType = $('#<%= ddlServiceType.ClientID %>');
                var dtService = $('#<%= dtService.ClientID %>');
                var dtNextService = $('#<%= dtNextService.ClientID %>');
                ddlServiceType.change(function() {
                    var index = ddlServiceType[0].selectedIndex;
                    var daySchedule = daySchedules[index];
                    var serviceDate = new Date(dtService.val());
                    var nextServiceDate = new Date();
                    nextServiceDate.setDate(serviceDate.getDate() + daySchedule);
                    dtNextService.val(nextServiceDate.toISOString().substr(0, 10));
                });
            })();
        </script>
        
        <div class="form-group">
            <asp:Label runat="server" AssociatedControlID="txtDescription" Text="Description" />
            <asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine" data-maxlength="1000" CssClass="form-control" />
        </div>
        
        <div class="form-group">
            <asp:Label runat="server" AssociatedControlID="txtOdometer" Text="Odometer" />
            <asp:TextBox ID="txtOdometer" runat="server" TextMode="Number" CssClass="form-control" />
        </div>
        <div class="form-group">
            <asp:Label runat="server" AssociatedControlID="txtCost" Text="Cost" />
            <asp:TextBox ID="txtCost" runat="server" TextMode="Number" step="0.01" CssClass="form-control" />
        </div>

        <div class="row">
            <div class="col">
                <asp:Button ID="btnCancel" runat="server" CssClass="btn btn-secondary" Text="Cancel" CausesValidation="false" />
            </div>
            <div class="col text-right">
                <asp:Button ID="btnSave" runat="server" CssClass="btn btn-primary" Text="Save" />
            </div>
        </div>

    </div>

</asp:Content>
