@{
    ViewBag.Title = "Building";
}

<script type="text/javascript" src="../Projectscript/Common.js"></script>
<script src="~/Scripts/Autocomplete/jquery-ui.js"></script>
<style>
      
    .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: lightseagreen;
}
</style>

<div class="myData" data-x="M270" />  

<div id="Entry" style="width:70%;margin-left:15%">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header" style="border-bottom:1px solid #e6e6e6">
                    <h4 class="card-title mb-0">BUILDING MANAGEMENT</h4>
                </div>
                <div class="card-body">
                    <div class="px-3">
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <form action="#">
                                    <div class="form-body">
                                        <div style="height:15px;"></div>
                                       
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="row">
                                                    <label class="col-md-3 label-control">Building Id</label>
                                                    <div class="col-md-8">
                                                        <input type="text" id="buildingid" class="form-control" onkeyup="changetoupper(this.id)" autocomplete="off" />
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="row">
                                                    <label class="col-md-3 ">Building Name</label>
                                                    <div class="col-md-8 input-group" style="">
                                                        <input type="text" id="nameofbuilding" onkeyup="changetoupper(this.id)" class="form-control" autocomplete="off">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="row">
                                                    <label class="col-md-3 label-control">Plot No</label>
                                                    <div class="col-md-8">
                                                        <input type="text" id="plotno" class="form-control" autocomplete="off">
                                                    </div>
                                                </div>
                                            </div>
                                           
                                            <div class="col-md-6">
                                                <div class="row">
                                                    <label class="col-md-3 ">City</label>
                                                      <div class="col-md-8 input-group" style="">
                                                        <select id="city" class="form-control "></select>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="row">
                                                    <label class="col-md-3 label-control">Land Lord</label>
                                                    <div class="col-md-8">
                                                        <input type="text" id="lanlord" class="form-control" autocomplete="off">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="row">
                                                    <label class="col-md-3 ">Type Of Building</label>
                                                    <div class="col-md-8 input-group" style="">
                                                        <select id="typeofbuilding" class="form-control">
                                                            <option value="1">
                                                                Residential
                                                            </option>
                                                            <option value="2">
                                                                Commercial
                                                            </option>
                                                            <option value="3">
                                                                Other
                                                            </option>
                                                        </select>

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

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="row">
                                                    <label class="col-md-3 label-control">Features</label>
                                                    <div class="col-md-8">
                                                        <div class="card-block" style="height:150px;overflow:auto;">
                                                            <ul class="list-group" id="features"></ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="row">
                                                    <label class="col-md-3 ">Remarks</label>
                                                    <div class="col-md-8 input-group" style="">
                                                        <textarea id="txtremarks" class="form-control" style="height:100px;" name="remarks"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>                                                                        
                                    </div>

                                    <div class="form-actions">
                                        <div class="text-right">
                                            <button type="button" style="width:100px" id="btnsubmit" class="btn btn-primary btn-min-width mr-1 mb-1">
                                                <u>S</u>ave
                                                <i class="fa fa-check-square-o"></i>
                                            </button>
                                            <button type="button" style="width:100px" id="btnlist" onclick="GetRows(0)" class="btn btn-primary btn-min-width mr-1 mb-1">List <i class="ft-align-justify"></i></button>
                                            <button type="button" style="width:100px" id="btnnew" onclick="formrefresh()" class="btn btn-primary btn-min-width mr-1 mb-1">Clear <i class="ft-refresh-cw position-right"></i></button>
                                            <button style="display:none" type="button" id="btndelete" class="btn btn-primary btn-min-width mr-1 mb-1">Delete <i class="fa fa-times"></i></button>
                                        </div>
                                    </div>

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





<div style="display:none;width:75%;margin-left:12.5%" id="listing">
    <section>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <table width="100%">
                            <tr>
                                <td><h4 class="card-title">BUILDING MANAGEMENT</h4></td>
                                <td align="right">
                                    <div class="heading-elements">
                                        <div class="btn-group">
                                            <button type="button" onclick="closetable(1)" class="btn btn-outline-primary"><i class="ft-edit"></i> Add New</button>
                                            <button type="button" class="btn btn-outline-primary"><i class="ft-edit"></i> Export</button>
                                            <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown"
                                                    aria-haspopup="true" aria-expanded="false">
                                                <span class="sr-only">Toggle Dropdown</span>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Excel</a>
                                                <a class="dropdown-item" href="#">PDF</a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Print</a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>


                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body card-dashboard" style="overflow:auto">
                            <table id="tblBuildingManagement" class="table table-striped table-bordered base-style dataTable"></table>
                            <br />

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div style="display:none"><input type="text" value="0" id="BuildingManagementId" /><input type="hidden" id="Lan_Id" /></div>



<script>
    $(document).ready(function () {
        //Defaultfocus();
         //Getflat(0);
        GetArea(0);
        Getfeatures(0);
        Getbuild(0);
        $("#btnsubmit").click(function (e) {
                SaveAndUpdate(1);
        });
    });


    function Getfeatures() {
        var data = {};
        data.FeaturesModelId = 0;
        $.ajax({
            type: "POST",
            url: "../Realestate/FeaturesGetandGets",
            data: data,
            success: function (result) {
                FeaturesLoad(result.oList);
            }
        });

    }

    function FeaturesLoad(result) {
        $('.remvrow').remove();
        for (var i = 0; i < result.length; i++) {
            $("#features").append("<fieldset class=remvrow><div class='custom-control custom-checkbox' style='float:left;margin-left:-20px'><input type='checkbox' class='custom-control-input chkdivi' id='chkdivision_" + (i + 1) + "' checked=''><label class='custom-control-label' for='chkdivision_" + (i + 1) + "'>" + result[i].Facilities + "</label><input type='hidden' id='featuretxt" + (i + 1) + "' value=" + result[i].FeaturesModelId + "></div></fieldset>");
        }
    }
    function getfeaturetext() {
        var Features = '';
        for (var k = 1; k <= $('.remvrow').length; k++) {
            if ($('#chkdivision_' + k).prop('checked') == true) {
                if (Features == '')
                { Features = $('#featuretxt' + k).val(); }
                else
                { Features = Features + ',' + $('#featuretxt' + k).val(); }
            }
        }
        return Features;
    }
   
    function GetArea(id) {
        var data = {};
        data.AreaGrpId = 0;
        
        $.ajax({
            type: "POST",
            url: "../Master/AreaGetandGets",
            data: data,
            success: function (result) {
                cityLoad(result.oList, id);
            }
        });

    }

    function cityLoad(result, a) {
        $("#city").empty();
        $("#city").append("<option value='0'>Select City</option>");
        for (var i = 0; i < result.length; i++) {
            $("#city").append("<option value='" + result[i].AreaId + "'>" + result[i].AreaName + "</option>");
        }
    }
    function Getbuild(id) {
        var data = {};
        data.Id = 0;

        $.ajax({
            type: "POST",
            url: "../Realestate/BuildGetandGets",
            data: data,
            success: function (result) {
                buildLoad(result.oList, id);
            }
        });

    }

    function buildLoad(result) {
        $("#typeofbuilding").empty();
        $("#typeofbuilding").append("<option value='0'>Select Building</option>");
        for (var i = 0; i < result.length; i++) {
            $("#typeofbuilding").append("<option value='" + result[i].Id + "'>" + result[i].BuildingFeature + "</option>");
        }
    }
   

    $("#lanlord").autocomplete({
        delay: 0,
        minLength: 0,
        source: function (request, response) {
            $('#Lan_Id').val('');
            var data = {};
            data.LandName = $("#lanlord").val();
            $.ajax({
                url: '../Realestate/LandLordsearch',
                type: "POST",
                data: data,
                dataType: "json",
                success: function (data) {
                    response($.map(data, function (item) {
                        console.log('item')
                        console.log(item)
                        return ({
                            ColCount: '-2ph',
                            label: item.LandName,
                            label1: item.Email,
                            label2: item.Mobno,
                            LanId: item.Lan_Id,
                            headers: ["Name", "Email", "Mob"]
                        })
                    }));
                }

            })

        },
        autoFocus: true,
        select: function (event, ui) {
            $('#Lan_Id').val(ui.item.LanId); 
        },
    });

    function SaveAndUpdate(Flag) {

        var Fetur = getfeaturetext();

        if (($('#buildingid').val() || 0) == 0) {
            warningshow('Please Enter Id', 'buildingid');
        }
        else if ($.trim($('#nameofbuilding').val()) == "") { 
            warningshow('Please Enter the Name', 'nameofbuilding');
        }
        else if (($('#Lan_Id').val()||0) ==0) {
            warningshow('Please select landlord', 'lanlord'); 
        }
        else
        {
            var data = {};   //array     
            data.BuildingId = $('#buildingid').val();
            data.BuildingManagementId = $('#BuildingManagementId').val();
            data.NameofBuilding = $('#nameofbuilding').val();
            data.PlotNo = $('#plotno').val();
            data.City = $('#city').val();
            data.LandLord = $('#Lan_Id').val();
            data.TypeofBuilding = $('#typeofbuilding').val();
            data.Remarks = $('#txtremarks').val();
            data.Features = Fetur; 
            data.DelFlag = Flag;
            $.ajax({
                type: "POST",
                url: "../Realestate/BuildingManagementInsertandUpdate",
                data: data,
                success: function (result) {
                        var status = result.oList[0].Status;
                        var a = parseInt(status);
                        Showalerts(a);
                }
            });
        }
    }



  
    function formrefresh() {
        $('#buildingid,#BuildingManagementId').val('');
        $('#nameofbuilding').val('');
        $('#plotno').val('');
        $('#city').val('0');
        $('#lanlord,#Lan_Id').val('');
        $('#typeofbuilding').val('1');
        $('#txtremarks').val('');
        $('#features').val('');
        $('#btndelete').hide();
        $('#buildingid').focus();

        Getfeatures();

    }
    function closetable(value) {
        $('#Entry').show();
        $('#listing').hide();
        if (value == 1)
            formrefresh();
    }

    function ShowBuildinglist(result) {
        disable_datatable('tblBuildingManagement');
        $('#Entry').hide();
        $('#listing').show();
        var responseText = "<thead><tr><th width=15px>Slno</th><th >Building Id</th><th>NameofBuilding</th><th>PlotNo</th><th>LandLord</th><th>Remarks</th><th width=15px>Edit</th></tr></thead><tbody>";
        for (var i = 0; i < result.length; i++) {
            var slno = parseInt(i + 1);
            responseText += '<tr><td>' + slno + '</td><td>' + result[i].BuildingId + '</td><td>' + result[i].NameofBuilding + '</td><td>' + result[i].PlotNo + '</td><td>' + result[i].FlatName + '</td><td>' + result[i].Remarks + '</td><td align=center><a onclick="GetRows(' + result[i].BuildingManagementId + ')">' + Editbutton + '</a></td></tr>';
        }
        $('#tblBuildingManagement').html(responseText + '</tbody><tfoot><tr><th>Slno</th><th>Building Id</th><th>NameofBuilding</th><th>PlotNo</th><th>LandLord</th><th>Remarks</th><th>Edit</th></tr></tfoot>');
        datatableWithsearch('tblBuildingManagement');
    }
    
    function ShowBuildingGet(result) {
        for (var i = 0; i < result.length; i++) {                
            $('#buildingid').val(result[i].BuildingId)
            $('#BuildingManagementId').val(result[i].BuildingManagementId)
            $('#nameofbuilding').val(result[i].NameofBuilding);
            $('#plotno').val(result[i].PlotNo);
            $('#city').val(result[i].City);
            $('#lanlord').val(result[i].FlatName);
            $('#Lan_Id').val(result[i].LandLord); 
            $('#typeofbuilding').val(result[i].TypeofBuilding); 
            $('#txtremarks').val(result[i].Remarks);

            $('.chkdivi').prop('checked', false)
            var Features = (result[0].Features).split(','); 
            for (var k = 1; k <= $('.remvrow').length; k++) {
                if (Features.indexOf($('#featuretxt' + k).val()) != -1) {
                    $('#chkdivision_' + k).prop('checked', true)
                }
            }
        }
        $('#buildingid').focus();
            $('#Entry').show();
            $('#listing').hide();
            $('#btndelete').show();      
    }

    function GetRows(BuildingManagementId) {
        $('#BuildingManagementId').val(BuildingManagementId)
        var data = {};
        data.BuildingManagementId = BuildingManagementId;
        $.ajax({
            type: "POST",
            url: "../Realestate/BuildingManagementGetandGets",
            data: data,
            success: function (result) {
                if (BuildingManagementId == 0)
                    ShowBuildinglist(result.oList);
                else
                    ShowBuildingGet(result.oList);

            }
        });
    }

    $('#buildingid').focus();
</script>