EOS/Views/Ticket_CustomerInventory/CreateNewCustomerForExistingVehicle.cshtml

@model GODATA.Models.Ticket.CustomerModel

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>


<table class="themeTable" cellpadding="5" cellspacing="0" width="100%" style="border: 1px #ccc solid;">
    <tr>
        <td style="text-align: center; border-top: 0px; border-right: 1px #ccc solid;">
            <input type="radio" value="11" name="radioAddCustomer" id="radio_customer" checked="checked" style="width: 13px; margin-top: -2px;" onchange="onSelectionChanged(id);" /><span class="darktxt"><label style="font-size: 14px;">Edit Customer Details</label></span></td>
        <td style="text-align: center; border-top: 0px; border-right: 1px #ccc solid;">
            <input type="radio" value="11" name="radioAddCustomer" id="radio_chassis" onchange="onSelectionChanged(id);" style="width: 13px; margin-top: -2px;" /><span class="darktxt"><label style="font-size: 14px;">Edit Chassis No.</label></span></td>
        <td style="text-align: center; border-top: 0px;">
            <input type="radio" value="11" name="radioAddCustomer" id="radio_both" onchange="onSelectionChanged(id);" style="width: 13px; margin-top: -2px;" /><span class="darktxt"><label style="font-size: 14px;">Edit Both</label></span></td>
    </tr>
</table>





@using (Ajax.BeginForm("CreateNewCustomerForExistingVehicle", "Ticket_CustomerInventory", new AjaxOptions { HttpMethod = "POST", OnBegin = "onBegin", OnSuccess = "onSuccessAddCustomerForExistingVehicle" }))
{
 @Html.ValidationSummary(true)
 @Html.HiddenFor(model => model.CustomerStateName, new { id = "customerStateName" })
 @Html.HiddenFor(model => model.CustomerOwnerStateName, new { id = "customerOwnerStateName" })
 @Html.HiddenFor(model => model.selection, new { id = "selection" })
 @Html.Hidden("hdnVehicleChassis")

    <div id="divaddExistingCustomer">
        <div>
            <div style="margin: 10px 0 2px 0;">
                <span>
                    <p>Vehicle Details</p>
                </span>
            </div>
            <div>
                <table class="themeTable" cellpadding="5" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.VehicleRegistrationNumber)</span>
                            </td>
                            <td class="tableCellinfo">
                                <input type="text" id="VehicleRegistrationNumber" name="VehicleRegistrationNumber" class="disable_btn " readonly />
                                @Html.ValidationMessageFor(model => model.VehicleRegistrationNumber)
                            </td>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.VehicleNumberPlate)</span>
                            </td>
                            <td class="tableCellinfo">
                                @*<input type="text" id="VehicleNumberPlate" name="VehicleNumberPlate" class="disable_btn " />*@
                                @Html.EditorFor(model => model.VehicleNumberPlate)
                                @Html.ValidationMessageFor(model => model.VehicleNumberPlate)
                            </td>
                        </tr>
                        <tr>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.VehicleModelNumber)</span>
                            </td>
                            <td class="tableCellinfo">
                                <input type="text" id="VehicleModelNumber" name="VehicleModelNumber" class="disable_btn " readonly />
                                @Html.ValidationMessageFor(model => model.VehicleModelNumber)
                            </td>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.CustomerVehicleModelTagging)</span>
                            </td>
                            <td class="tableCellinfo">
                                <input type="text" id="CustomerVehicleModelTagging" name="CustomerVehicleModelTagging" class="disable_btn " readonly />
                                @Html.ValidationMessageFor(model => model.CustomerVehicleModelTagging)
                            </td>
                        </tr>
                        <tr>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.VehicleType)</span>
                            </td>
                            <td class="tableCellinfo">
                                <input type="text" id="VehicleType" name="VehicleType" class="disable_btn " readonly />
                                @Html.ValidationMessageFor(model => model.VehicleType)
                            </td>

                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.InstallationDate)</span>
                            </td>
                            <td class="tableCellinfo SelectDD">
                                <input type="text" id="VehicleInstallationDate" name="VehicleInstallationDate" class="disable_btn " readonly />
                                @Html.ValidationMessageFor(model => model.InstallationDate)
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div>
            <div style="margin: 10px 0 2px 0;">
                <span>
                    <p>Owner/Fleet Details</p>
                </span>
            </div>
            <div>
                <table class="themeTable" cellpadding="5" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.CustomerOwnerMobileNo1)</span>
                            </td>
                            <td class="tableCellinfo">
                                <input type="text" id="customerOwnerMobileNo1" name="CustomerOwnerMobileNo1" class="disable_btn " readonly />
                                @Html.ValidationMessageFor(model => model.CustomerOwnerMobileNo1)
                            </td>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.CustomerOwnerName)</span>
                            </td>
                            <td class="tableCellinfo">
                                <input type="text" id="CustomerOwnerName" name="CustomerOwnerName" class="disable_btn " readonly />
                                @Html.ValidationMessageFor(model => model.CustomerOwnerName)
                            </td>
                        </tr>
                        <tr>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.CustomerOwnerEmailId)</span>
                            </td>
                            <td class="tableCellinfo">
                                <input type="text" id="CustomerOwnerEmailId" name="CustomerOwnerEmailId" class="disable_btn " readonly />
                                @Html.ValidationMessageFor(model => model.CustomerOwnerEmailId)
                            </td>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.CustomerOwnerAddress)</span>
                            </td>
                            <td class="tableCellinfo">
                                <input type="text" id="CustomerOwnerAddress" name="CustomerOwnerAddress" class="disable_btn " readonly />

                            </td>
                        </tr>
                        <tr>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.CustomerOwnerState)</span>
                            </td>
                            <td class="tableCellinfo">
                                <input type="text" id="ddOwnerState" name="CustomerOwnerState" class="disable_btn " readonly />
                                @Html.ValidationMessageFor(model => model.CustomerOwnerState)
                            </td>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.CustomerOwnerCity)</span>
                            </td>
                            <td class="tableCellinfo">
                                <input type="text" id="ddOwnerCity" name="CustomerOwnerCity" class="disable_btn " readonly />
                                <span id="spanOwnerCity" class="error" style="display: none; color: red">*</span>
                                @Html.ValidationMessageFor(model => model.CustomerOwnerCity)
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div>
            <div style="margin: 10px 0 2px 0;">
                <span>
                    @*<p>Customer Details</p>*@
                    <p>Customer Details</p>
                </span>
            </div>
            <div>
                <table class="themeTable" cellpadding="5" cellspacing="0" width="100%" id="tableCustomer">
                    <tbody>
                        <tr>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.CustomerMobileNumber1)</span><span class="error" style="color: red"> * </span>
                            </td>
                            <td class="tableCellinfo">
                                @Html.EditorFor(model => model.CustomerMobileNumber1)
                                @Html.ValidationMessageFor(model => model.CustomerMobileNumber1)
                            </td>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.CustomerCustomerName)</span><span class="error" style="color: red"> * </span>
                            </td>
                            <td class="tableCellinfo">
                                @Html.EditorFor(model => model.CustomerCustomerName)
                                @Html.ValidationMessageFor(model => model.CustomerCustomerName)
                            </td>
                        </tr>
                        <tr>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.CustomerEmailId)</span>
                            </td>
                            <td class="tableCellinfo">
                                @Html.EditorFor(model => model.CustomerEmailId)
                                @Html.ValidationMessageFor(model => model.CustomerEmailId)
                            </td>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.CustomerAddress)</span>
                            </td>
                            <td class="tableCellinfo">
                                @Html.EditorFor(model => model.CustomerAddress)

                            </td>
                        </tr>
                        <tr>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.CustomerState)</span>
                            </td>
                            <td class="tableCellinfo">
                                @Html.DropDownListFor(model => model.CustomerState, (IEnumerable<SelectListItem>)ViewBag.StateList, "-Select-", new { @id = "ddCustomerState", @onchange = "LoadCityList(id)" })

                            </td>
                            <td class="tableCelllabel">
                                <span class="darktxt">
                                    @Html.LabelFor(model => model.CustomerCity)</span>
                            </td>
                            <td class="tableCellinfo">
                                <select id="ddCustomerCity" name="CustomerCity">
                                    <option value="-Select-">-Select-</option>
                                </select>

                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <br />
        <div class="Create_Wrp" style="background: #f5f5f5; border-top: 1px solid #dedede; padding: 6px 0 6px 10px; margin-left: -8px; margin-bottom: -7px; width: 100.6%; margin-top: 5px;">
            <input type="submit" value="Create" class="button_blue" style="margin: 0px; height: 13px; width: auto;" />
            <input type="button" value="Cancel" class="button_blue" style="background: #ee2e22 !important; margin: 0px; height: 13px; width: auto;" onclick="btnCancelAddCustomer('#divAddCustomerForExistingVehicle');" />
        </div>
        <input type="hidden" id="hiddenModelNo" />
    </div>
}
<script>
    var selection = $('input[name=radioAddCustomer]:checked')[0].id;
    onSelectionChanged(selection);
    //on begin
    function onBegin() {
        alert('sss');
        $("#spanCustomerCity").hide();
        $("#spanOwnerCity").hide();
        //$("#customerStateName").val('');

        selection = "";
        selection = $('input[name=radioAddCustomer]:checked')[0].id;

        if (selection == "radio_customer" || selection == "radio_both") {

            //if ($('#ddCustomerCity').find('option:selected').text() == "-Select-") {
            //    $("#spanCustomerCity").show();
            //    return false;
            //} else

            if ($('#ddOwnerCity').find('option:selected').text() == "-Select-") {
                $("#spanOwnerCity").show();
                return false;
            }
            //else if (($('#ddCustomerCity').find('option:selected').text() == "-Select-") && ($('#ddOwnerCity').find('option:selected').text() == "-Select-")) {
            //$("#spanCustomerCity").show();
            //$("#spanOwnerCity").show();
            //return false;
            //}
        }
        return true;
    }

    function onSelectionChanged(radioId) {

        $("#selection").val(radioId);
        $('input[name=radioAddCustomer]').parent().css('background', 'none');
        $("#" + radioId).parent().css('background', '#f7f7f7');

        $('#CustomerMobileNumber1').rules('add', 'required');
        $('#CustomerCustomerName').rules('add', 'required');

        //$('#VehicleNumberPlate').rules('add', 'required');

        if (radioId == "radio_both") {
            $("#tableCustomer input").attr("readonly", false).prop("disabled", false).removeClass('disable_btn');
            $("#tableCustomer select").prop("disabled", false).prop("disabled", false).removeClass('disable_btn');
            $("#VehicleNumberPlate").attr("readonly", false).prop("disabled", false).removeClass('disable_btn');

            //$('#VehicleNumberPlate').val($("#hdnVehicleChassis").val());

        } else if (radioId == "radio_chassis") {
            $('#CustomerMobileNumber1').rules('remove', 'required');
            $('#CustomerCustomerName').rules('remove', 'required');
            //$('#CustomerAddress').rules('remove', 'required');

            $("#tableCustomer input").attr("readonly", true).prop("disabled", true).addClass('disable_btn');
            $("#tableCustomer select").prop("disabled", true).prop("disabled", true).addClass('disable_btn');
            $("#VehicleNumberPlate").attr("readonly", false).prop("disabled", false).removeClass('disable_btn');

            $("#tableCustomer input").val('');
            $("#tableCustomer select").val('');

        } else if (radioId == "radio_customer") {
            //$('#VehicleNumberPlate').rules('remove', 'required');

            $("#tableCustomer input").attr("readonly", false).prop("disabled", false).removeClass('disable_btn');
            $("#tableCustomer select").prop("disabled", false).prop("disabled", false).removeClass('disable_btn');
            $("#VehicleNumberPlate").attr("readonly", true).prop("disabled", true).addClass('disable_btn');

            $('#VehicleNumberPlate').val($("#hdnVehicleChassis").val());
        }
    }

</script>
<style type="text/css">
    .SelectDD select {
        width: 169px;
        padding: 6px 0px;
    }

    .themeTable tbody td {
        width: 24% !important;
    }

    #divaddExistingCustomer {
        height: 500px !important;
    }

    div.k-window {
        box-shadow: 20px 20px 30px #555 !important;
        border-radius: 0;
        padding-top: 0 !important;
    }

    .k-window-titlebar {
        border-radius: 0px !important;
    }

    .k-i-close {
        background-color: #fff;
        border-radius: 2px;
        width: inherit !important;
    }

    .k-window-titlebar.k-header {
        background: url("/content/css/images/infowindow_head-bg.png") repeat-x left top;
        height: 18px !important;
        background-color: transparent !important;
        line-height: 16px;
    }

    .tableCellinfo .text-box {
        width: 164px;
    }
</style>