@model GASArabianERP.Models.ProjectMonitorDetailVM
@{
    ViewBag.Title = "EmployeeAvailablity";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    .ajax-load {
        background: url('../../Image/loading.gif')no-repeat center center;
        /*-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;*/
        height: 260px;
        width: 260px;
        margin: auto;
    }

    .my_class {
        display: none;
    }
</style>

<section class="content-header"></section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <!-- Horizontal Form -->
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">Employee Availablity Details</h3>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <div class="form-horizontal">
                    <div class="box-body">
                        <div class="form-group">

                            <div class="col-sm-2">
                                <label for="inputEmail3" class="control-label">Start Date</label>
                                @Html.TextBoxFor(m => m.Project_StartDate, "{0:MM/dd/yyyy}", new { @type = "text", @class = "form-control  form-control-inline input-medium" })
                            </div>
                            <div class="col-sm-2">
                                <label for="inputEmail3" class="control-label">End Date</label>
                                @Html.TextBoxFor(m => m.Project_EndDate, "{0:MM/dd/yyyy}", new { @type = "text", @class = "form-control  form-control-inline input-medium" })
                            </div>
                            <div class="col-sm-3">
                                <label for="inputEmail3" class="control-label">Employee Category</label>
                                @Html.DropDownListFor(m => m.Category,
                                                  new SelectList(ViewBag.CategoryList, "CategoryID", "CategoryName"),
                                                  "Select Employee Category",
                                                  new { @class = "form-control select2" })
                            </div>
                            <div class="col-sm-3">
                                <label for="inputEmail3" class="control-label">Select Project</label>
                                @Html.DropDownList("ProjectMonitorID", null, htmlAttributes: new { @class = "form-control select2" })
                            </div>
                            <div class="col-sm-2">
                                <br />
                                <button type="submit" id="btnSearch" class="btn btn-primary">
                                    <i class="ace-icon fa fa-search"></i> Search
                                </button>
                                @*<input type="checkbox" checked class="switch" data-toggle="toggle" data-on-text="Yes" data-off-text="No"  data-onstyle="success" data-offstyle="danger">*@
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <fieldset>
                                    <div id="divEmployeeDetails">

                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

<script>
    $('#Project_StartDate').datepicker({
        autoclose: true
    });
    $('#Project_EndDate').datepicker({
        autoclose: true
    });
</script>
<script>

    $("#btnSearch").click(function () {
        //alert("test");
        $('#table_survey').prop('hidden', true);
        if ($.fn.DataTable.isDataTable("#tbl")) {
            $('#tbl').DataTable().clear().destroy();
        }
        var Category = $("#Category").val();
        var Project_StartDate = $("#Project_StartDate").val();
        var Project_EndDate = $("#Project_EndDate").val();
        var ProjectMonitorID = $("#ProjectMonitorID").val();
        //alert(SDate);
        $('#loadingmessage').show();
        $.ajax({
            url: '/EmployeeMobilization/EmployeeAvailablity',
            type: "POST",
            data: { Project_StartDate: Project_StartDate, Project_EndDate: Project_EndDate, Category: Category, ProjectMonitorID: ProjectMonitorID },
            success: function (data) {
                $("#divEmployeeDetails").html(data);
            },
            error: function () {
                $("#divEmployeeDetails").html("Page Not Loading..!");
            }

        });
    });

</script>
@section scripts {
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>

}