@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <!-- Custom Tabs -->
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab_1" data-toggle="tab">Upload Employee Accommdation</a></li>
                    <li><a href="#tab_2" data-toggle="tab">Accommdation Information</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_1">
                        <div class="form-horizontal">
                            <div class="box-body">
                                <div class="form-group">
                                    <div class="col-sm-1"></div>
                                    @*<div class="col-sm-3">
                                        <b>Select Project</b>
                                        @Html.DropDownList("BuildingID", null, htmlAttributes: new { @class = "form-control select2" })
                                    </div>*@
                                    <div class="col-sm-4">
                                        <b>Upload Employee Accommdation</b>
                                        <input type="file" id="fileToUpload" name="postedFile" class="form-control" required />
                                    </div>
                                    <div class="col-sm-4">
                                        <br />
                                        <button type="button" id="btnView" class="btn btn-primary"><i class="ace-icon fa fa-eye"></i> View</button>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12">
                                            <div id="divUploadAccommodationData">

                                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab_2">
                        <div class="form-horizontal">
                            <div class="box-body">
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <div class="col-sm-3">
                                            <b>Select Building</b>
                                            @Html.DropDownList("BuildingID", null, htmlAttributes: new { @class = "form-control select" })
                                        </div>
                                        <div class="col-sm-3">
                                            <b>Select Room</b>
                                            @Html.DropDownList("RoomID", null, htmlAttributes: new { @class = "form-control select",@onchange = "GetDetail();" })
                                        </div>
                                    </div>
                                </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <div id="divAccommodationData">

                                            </div>
                                        </div>
                                    </div>

                                </div>
                        </div>
                    </div>
                    <!-- /.tab-pane -->

                </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 () {
        $("#btnView").on('click', function () {
            var fileUpload = $("#fileToUpload").get(0);
            var files = fileUpload.files;
            // Create  a FormData object
            var fileData = new FormData();
            // if there are multiple files , loop through each files
            for (var i = 0; i < files.length; i++) {
                fileData.append(files[i].name, files[i]);
            }
            $.ajax({
                url: '/EmployeeAccommdation/UploadExcelFile',
                type: 'post',
                datatype: 'json',
                contentType: false,
                processData: false,
                async: false,
                data: fileData,
                success: function (data) {
                    $("#divUploadAccommodationData").html(data);
                },
                error: function () {
                    $("#divUploadAccommodationData").html("Page Not Loading..!");
                }
            });

        });
    });
</script>
<script>
    function GetDetail() {
        var BuildingID = $("#BuildingID").val();
        var RoomID = $("#RoomID").val();
        $.ajax({
            url: '/EmployeeAccommdation/ViewEmployeeAccomdation',
            type: 'post',
            data: { BuildingID: BuildingID, RoomID: RoomID },
            success: function (data) {
                $("#divAccommodationData").html(data);
            },
            error: function () {
                $("#divAccommodationData").html("Page Not Loading..!");
            }
        });
    }
</script>

@section Scripts {

}