@*<script src="~/Scripts/maskedInput.js"></script>*@@{
    var EPSType = Request.QueryString["type"];
    var showEngineRow = !string.IsNullOrEmpty(EPSType);
}

<div id="searchForm" style="margin-top: 10px; margin-right: 2px;">

    <table class="NewTbl" cellpadding="5" cellspacing="0" width="100%">
        <tbody>
            <tr>
                <td class="">
                    <input type="radio" value="11" name="radioHistory" checked="checked" id="radio_registration" onchange="onRadioButtonCheckChange(id);" />
                    <span class="darktxt">
                        <label for="radio_registration">Registration No.</label>
                    </span>
                </td>
                <td class="Ticket_RegisterPanel">
                    @Html.Partial("../Inventory/RegistrationNo", new ViewDataDictionary { { "RegNo", "" }, { "id", "RegistrationNo" }, { "name", "RegistrationNo" } })


                </td>
            </tr>

            <tr id="engineRow" style="@(showEngineRow ? "" : "display:none;")">
                <td class="">
                    <input type="radio" value="11" name="radioHistory" id="radio_engine" onchange="onRadioButtonCheckChange(id);" />
                    <span class="darktxt">
                        <label for="radio_engine">Engine No.</label>
                    </span>
                </td>
                <td class="">
                    <input id="EngineNo" type="text" onblur="IsEngineFormat()" @*ondrop="return false;"*@ disabled /><br />

                    <span id="error" style="color: #ee1d23; display: none">Please insert correct engine number!!</span>
                </td>
            </tr>
            <tr>
                <td class="">
                    <input type="radio" value="11" name="radioHistory" id="radio_complaint" onchange="onRadioButtonCheckChange(id);" />
                    <span class="darktxt">
                        <label for="radio_complaint">Complaint No.</label>
                    </span>
                </td>
                <td class="">
                    <input id="ComplaintNo" type="text" onblur="IsTicketFormat()" @*ondrop="return false;"*@ disabled /><br />

                    <span id="error" style="color: #ee1d23; display: none">Please insert correct ticket format!!</span>
                </td>
            </tr>


        </tbody>
    </table>
    @*<div class="k-button k-button-icontext Inventory_curdBtn" onclick="getTicketHistory()"><span class="k-icon k-icon-small"></span>Search</div>*@
    <div class="fright">
        @*<button id="button_search" class="button_blue" onclick="getdetailsbyDBM()">Search</button>*@

        <button id="button_search" class="button_blue" onclick="getTicketHistoryNew()">Search</button>
    </div>
    <div class="clear"></div>
    @*<input type="submit" value="Search" onclick="getTicketHistory()" />*@
</div>



@*@Html.Hidden("VRegistrationNo", (object)@ViewBag.VRegistrationNo)
    @Html.Hidden("VMobileNo", (object)@ViewBag.mobileNo)
    @Html.Hidden("VComplaintNo", (object)@ViewBag.ComplaintNo*@

<script>
    setFocus();
    $("#spanRegistrationToolTip").addClass('toolTipMozila');
    function setFocus() {
        document.getElementById("RegistrationNo").focus();
    }

    //submit form on key press of enter
    (function () {
        var buttonSearch = document.getElementById('searchForm');


        buttonSearch.addEventListener('keypress', function (event) {
            if (event.keyCode == 13) {
                if ($("#RegistrationNo").val() != "") {
                    if (IsRegistrationNoFormat()) {
                        document.getElementById('button_search').click();
                    } else {
                        jAlert("Please insert correct Registration No.!!", "Warning");
                    }
                }
                else if ($("#ComplaintNo").val() != "") {
                    if (IsTicketFormat()) {
                        document.getElementById('button_search').click();
                    } else {
                        jAlert($("#error").text(), "Warning");
                    }
                } else {
                    jAlert("Please fill atleast one field for search", "Warning");
                }

            }
        });
    }());

    /**
    * function call on change of radio button
    */
    function onRadioButtonCheckChange($this) {
        var inputId = $this;
        if (inputId == "radio_registration") {
            $("#RegistrationNo, #MobileNo, #ComplaintNo,#chassisNo,#EngineNo").val('');
            $("#error").hide();
            $("#RegistrationNo").attr("disabled", false).focus();
            $("#MobileNo, #ComplaintNo,#chassisNo,#EngineNo").attr("disabled", true);
        } else if (inputId == "radio_mobile") {
            $("#MobileNo,#ComplaintNo,#chassisNo,#EngineNo").val('');
            $("#error").hide();
            $("#MobileNo").attr("disabled", false).focus();
            $("#RegistrationNo, #ComplaintNo,#chassisNo,#EngineNo").attr("disabled", true);

        } else if (inputId == "radio_chassis_no") {
            $("#MobileNo,#ComplaintNo,#chassisNo,#EngineNo").val('');
            $("#error").hide();
            $("#chassisNo").attr("disabled", false).focus();
            $("#RegistrationNo, #ComplaintNo,#EngineNo").attr("disabled", true);
        }
        //This is new condition for engine search
        else if (inputId == "radio_engine") {
            $("#MobileNo,#ComplaintNo,#chassisNo,#RegistrationNo").val('');
            $("#error").hide();
            $("#EngineNo").attr("disabled", false).focus();
            $("#RegistrationNo, #ComplaintNo").attr("disabled", true);
        }
        //end
        else {
            $("#RegistrationNo, #MobileNo, #ComplaintNo,#chassisNo,#EngineNo").val('');
            $("#error").hide();
            $("#RegistrationNo, #MobileNo,#chassisNo,#EngineNo").attr("disabled", true);
            $("#ComplaintNo").attr("disabled", false).focus();
        }

    }
    $("#Tracker_form").scroll(function () {
        $(document.body).find("[data-role=popup]")
            .kendoPopup("close");
    });

</script>
<style type="text/css">
    .SelectDD {
        padding: 6px 11px;
    }

        .SelectDD select {
            width: 171px;
            padding: 6px 0px;
            font-family: 'HermesFB Regular';
            font-family: Arial;
            text-indent: 3px;
        }

    .themeTable th {
        border-top: 1px solid #dedede;
        background: url("/Content/css/images/infowindow_head-bg.png") repeat-x left top !important;
        padding: 0;
        padding-left: 5px;
        line-height: 13px;
        color: #fff;
        height: 29px;
    }

    .k-button {
        background-color: #dedede !important;
        border-radius: 32px !important;
        padding-top: 0px;
        padding-bottom: 0;
        margin-top: -4px; /*margin-left: 3px;*/
    }

    .OpenTicketTbl th {
        line-height: normal;
    }

    .TicketListTbl {
        border-left: 1px solid #dedede;
    }

        .TicketListTbl td {
            border-bottom: 1px solid #dedede;
            border-right: 1px solid #dedede;
            padding-left: 10px;
        }

            .TicketListTbl td input, .TicketListTbl td textarea, .TicketListTbl td select {
                width: 75%;
                margin: 5px 3px;
                font-size: 13px;
            }

            .TicketListTbl td input {
                width: 74%;
            }

            .TicketListTbl td textarea {
                width: 67%;
                text-indent: 0;
                padding-left: 7px;
            }

    .CityComboBox .k-combobox {
        width: 64%;
    }

    .TicketListTbl td:first-child {
        background: #f7f7f7;
        width: 135px;
        vertical-align: middle;
    }

    select {
        text-indent: 4px !important;
    }

    .visible {
        height: 3em;
        width: 10em;
        cursor: pointer;
        background: yellow;
    }
</style>

<style type="text/css">
    .NewTbl {
        border-top: 1px solid #dedede;
        border-left: 1px solid #dedede;
    }

    #img_help {
        margin-top: 10PX;
    }

    div.tooltip span {
        margin-left: 112px;
        margin-top: 2px;
    }

    .NewTbl td {
        border-right: 1px solid #dedede;
        border-bottom: 1px solid #dedede;
        padding-left: 10px;
        padding-right: 10px;
    }

        .NewTbl td:first-child {
            background: #f7f7f7;
        }

        .NewTbl td input {
            width: 97%;
        }

    input[type="radio"] {
        height: auto;
        width: auto !important;
        vertical-align: top;
        margin-top: -0.5px;
    }

    .visible {
        height: 3em;
        width: 10em;
        cursor: pointer;
        background: yellow;
    }
</style>