@model GASArabianERP.Models.TransportationRequestVM
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">Create Transportation Request</h3>
                    <button id="btn_save" type="submit" class="btn btn-success btn-fit-height pull-right"><i class="ace-icon fa fa-check"></i>  Save</button>
                    <button type="submit" class="btn btn-danger pull-right" style="margin-right: 5px;"><i class="ace-icon fa fa-times"></i> Cancel</button>
                </div>
                <div class="nav-tabs-custom panel-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <div class="col-sm-3">
                                <b>Transportation Request</b>
                                @*@Html.DropDownList("CustomerID", Model.CustomerGroupDDL, new { @class = "form-control" })*@
                                @Html.DropDownListFor(m => m.TransportationRequestID,
                                        new SelectList(ViewBag.TransportationRequestID, "CODE_REF", "DESCRIPTION"),
                                        "Select Transportation Request",
                                        new { @class = "form-control select" })
                                @Html.ValidationMessageFor(m => m.TransportationRequestID, "", new { @class = "text-danger" })
                            </div>
                            <div class="col-sm-3">
                                <b>Request Date</b> @Html.EditorFor(model => model.RequestDate, new { htmlAttributes = new { @class = "form-control", @placeholder = "" } })
                            </div>
                            <div class="col-sm-3">
                                <b>From Location</b> @Html.EditorFor(model => model.FromLocation, new { htmlAttributes = new { @class = "form-control", @placeholder = "" } })
                            </div>
                            <div class="col-sm-3">
                                <b>To Location</b> @Html.EditorFor(model => model.ToLocation, new { htmlAttributes = new { @class = "form-control", @placeholder = "" } })
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <b>Request By</b>
                                @Html.DropDownList("RequestBy", null, htmlAttributes: new { @class = "form-control select2" })
                                @Html.ValidationMessageFor(m => m.RequestBy, "", new { @class = "text-danger" })
                            </div>
                            <div class="col-sm-3">
                                <b>Reason</b> @Html.EditorFor(model => model.Reason, new { htmlAttributes = new { @class = "form-control", @placeholder = "" } })
                            </div>
                            <div class="col-sm-3">
                                <b>Select Project</b>
                                @Html.DropDownList("ProjectMonitorID", null, htmlAttributes: new { @class = "form-control select2", @onchange = "GetDetail();" })
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div id="divEmployeeDetails">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="Stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>
    function GetDetail() {
        var ProjectMonitorID = $("#ProjectMonitorID").val();
        $.ajax({
            url: '/TransportationRequest/EmployeeDetails',
            type: 'post',
            data: { Search: ProjectMonitorID },
            success: function (data) {
                $("#divEmployeeDetails").html(data);
            },
            error: function () {
                $("#divEmployeeDetails").html("Page Not Loading..!");
            }
        });
    }
</script>
@section Scripts {
    <script type="text/javascript">
        $('#RequestDate').datepicker({
            autoclose: true
        });

    </script>
}
@*@section scripts {
        <section class="scripts"></section>
    }

    <script type="text/javascript">
        $(document).ready(function () {
            $("#RequestBy").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/TransportationRequest/AutoComplete/',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return item;
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("#RequestBy").val(i.item.val);
                    /*                GetCustomerDetails(i.item.val);*/
                },
                minLength: 1


            });
        });
    </script>*@