@{
    ViewBag.Title = "Tenant";
}

<style>
    #CELL1 {
        border-right: 1px solid #cccccc;
        border-left: 1px solid #ffffff;
        width: 40%;
    }

    #CELL2 {
        /*padding-left:50px;*/
        border-right: 1px solid #cccccc;
        width: 40%;
    }

    #CELL3 {
        /*padding-left:50px;*/
        border-right: 1px solid #ffffff;
        width: 20%;
    }
</style>

<script type="text/javascript" src="../Projectscript/Common.js"></script>
<script type="text/javascript" src="../Projectscript/TenantMaster.js"></script>

<div class="myData" data-x="M138" />
<div id="Entry" style="width:90%;margin-left:5%">
 
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header" style="border-bottom:1px solid #e6e6e6">
                    <table style="margin-top:0px;" width="100%">
                        <tr>
                            <td><h4 class="card-title mb-0">Tenant</h4></td>
                            <td align="right">
                                <div class="col-md-6">

                                    <fieldset>
                                        <div class="custom-control custom-checkbox" style="float:right">
                                            <input type="checkbox" class="custom-control-input" id="select_status" checked="">
                                            <label class="custom-control-label" for="select_status">IsActive</label>
                                        </div>
                                    </fieldset>

                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="card-body">
                    <div class="px-3">
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <div style="height:15px;"></div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="card" style="margin-top:-10px">
                                            <table id="">
                                                <tr>
                                                    <td id="CELL1" valign="top">
                                                        <table width="95%">
                                                            @*<tr><td height="20px"></td></tr>*@
                                                            <tr>
                                                                <td>
                                                                    <div class="card-content collapse show">
                                                                        <div class="card-body">
                                                                            <form class="form">
                                                                                <div class="form-body">
                                                                                    <div class="row">
                                                                                        <div class="col-md-12">

                                                                                            <div class="form-group row">
                                                                                                <label class="col-md-3 label-control" for="userinput1">Acc Type<span class="danger">*</span></label>
                                                                                                <div class="col-md-9">
                                                                                                    <select id="select_acnt" name="acnt" class="form-control"></select>
                                                                                                </div>
                                                                                            </div>





                                                                                            <div class="form-group row">
                                                                                                <label class="col-md-3 label-control" for="userinput2">Reg No<span class="danger">*</span></label>
                                                                                                <div class="col-md-9">
                                                                                                    <table width="100%">
                                                                                                        <tr>
                                                                                                            <td width="20%">
                                                                                                                <input type="text" id="txtacnt1" maxlength="4" class="form-control" style="border-right:none;background:white;border-top-right-radius:0px;border-bottom-right-radius:0px;text-align:right" disabled>
                                                                                                            </td>
                                                                                                            <td>
                                                                                                                <input type="text" id="txtacnt" maxlength="4" class="form-control" name="acnt1" onkeypress="return isNumberInt(event, this)" autocomplete="off" style="border-top-left-radius:0px;border-bottom-left-radius:0px;border-left:none">
                                                                                                            </td>
                                                                                                        </tr>
                                                                                                    </table>
                                                                                                </div>
                                                                                            </div>


                                                                                            <div class="form-group row" style="margin-top:-8px;">
                                                                                                <label class="col-md-3 label-control" for="userinput2"> Name<span class="danger">*</span></label>
                                                                                                <div class="col-md-9">
                                                                                                    <input type="text" id="txtname1" class="form-control" name="Name" autocomplete="off">
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="form-group row" style="margin-top:-8px;">
                                                                                                <label class="col-md-3 label-control" for="userinput2">Terms<span class="danger">*</span></label>
                                                                                                <div class="col-md-9">
                                                                                                    <select id="select_terms" name="priority" class="form-control" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-original-title="" title=""></select>
                                                                                                </div>

                                                                                            </div>
                                                                                            @*<div class="form-group row" style="margin-top:-8px;">
                                                                                                    <label class="col-md-3 label-control">Department<span class="danger">*</span></label>
                                                                                                    <div class="col-md-9">
                                                                                                        <select id="DepartmentId" class="form-control"></select>
                                                                                                    </div>
                                                                                                </div>*@
                                                                                            @*<div class="form-group row" style="margin-top:-8px;">
                                                                                                    <label class="col-md-3 label-control" for="userinput2">Account<span class="danger">*</span></label>
                                                                                                    <div class="col-md-9">
                                                                                                        <input type="text" id="txtaccont" class="form-control" name="Name" autocomplete="off">
                                                                                                    </div>
                                                                                                </div>*@



                                                                                            <div class="form-group row" style="border-bottom:1px solid #e6e6e6">
                                                                                                <h6 class="card-title mb-0" style="margin-left:15px;">Address Details</h6>
                                                                                            </div>

                                                                                            <div class="form-group row" style="margin-top:10px;">
                                                                                                <label class="col-md-3 label-control" for="userinput2">Address1</label>
                                                                                                <div class="col-md-9">
                                                                                                    <input type="text" id="txtadr1" class="form-control" name="Address1" onkeyup="checkauto()" autocomplete="off">
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="form-group row" style="margin-top:-10px;">
                                                                                                <label class="col-md-3 label-control" for="userinput2">Address2</label>
                                                                                                <div class="col-md-9">
                                                                                                    <input type="text" id="txtadr2" class="form-control" name="Address3" onkeyup="checkauto()" autocomplete="off">
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="form-group row" style="margin-top:-10px;">
                                                                                                <label class="col-md-3 label-control" for="userinput1">Address3</label>
                                                                                                <div class="col-md-9">
                                                                                                    <input type="text" id="txtadr3" class="form-control" name="Address3" onkeyup="checkauto()" autocomplete="off">
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="form-group row" style="margin-top:-10px;">
                                                                                                <label class="col-md-3 label-control" for="userinput2">POBox</label>
                                                                                                <div class="col-md-9">
                                                                                                    <input class="form-control" type="text" id="txtpin" onkeyup="checkauto()" onkeypress="return isNumberInt(event, this)" autocomplete="off">
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="form-group row" style="margin-top:-10px;">
                                                                                                <label class="col-md-3 label-control">Area<span class="danger">*</span> </label>
                                                                                                <div class="col-md-9 input-group">
                                                                                                    <select id="select_place" class="form-control"></select>
                                                                                                    <div class="input-group-append">
                                                                                                        <button class="btn btn-outline-primary" onclick="Addpopupwindow(2)" id="btnsply" type="button">+</button>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="form-group row" style="margin-top:-25px;">
                                                                                                <label class="col-md-3 label-control" for="userinput2">Country<span class="danger">*</span></label>

                                                                                                <div class="col-md-9">
                                                                                                    <select id="Nationality" class="form-control"></select>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="form-group row" style="margin-top:-10px;">
                                                                                                <label class="col-md-3 label-control" for="userinput2">Phone</label>
                                                                                                <div class="col-md-9">
                                                                                                    <input class="form-control" type="text" id="txtphone" onkeyup="checkauto()" onkeypress="return isNumberInt(event, this)" autocomplete="off">
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="form-group row" style="margin-top:-10px;">
                                                                                                <label class="col-md-3 label-control" for="userinput2">Email</label>
                                                                                                <div class="col-md-9">
                                                                                                    <input class="form-control" type="text" id="txttemail">
                                                                                                </div>
                                                                                            </div>




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

                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </td>

                                                    <td id="CELL2" valign="top" style="height:600px;">
                                                        <table width="95%">
                                                            <tr>
                                                                <td>

                                                                    <div class="row">
                                                                        <div class="col-md-12">
                                                                            <div class="card-content collapse show">
                                                                                <div class="card-body">
                                                                                    <ul class="nav nav-tabs nav-topline">
                                                                                        @*<li class="nav-item">
                                                                                                <a class="nav-link active" id="tab1" data-toggle="tab" aria-controls="div1" href="#div1" aria-expanded="true">&nbsp;Address Info</a>
                                                                                            </li>*@
                                                                                        <li class="nav-item">
                                                                                            <a class="nav-link active" id="tab2" data-toggle="tab" aria-controls="div2" href="#div2" aria-expanded="true">&nbsp;Contact person Info</a>
                                                                                        </li>

                                                                                        <li class="nav-item">
                                                                                            <a class="nav-link" id="tab3" data-toggle="tab" aria-controls="div3" href="#div3" aria-expanded="false">&nbsp;Documents </a>
                                                                                        </li>
                                                                                        @*<li class="nav-item">
                                                                                            <a class="nav-link" id="tab4" data-toggle="tab" aria-controls="div4" href="#div4" aria-expanded="false"></a>
                                                                                        </li>
                                                                                        <li class="nav-item">
                                                                                            <a class="nav-link" id="tab5"><span style="width:70px">&#160;</span></a>
                                                                                        </li>*@
                                                                                    </ul>
                                                                                    <div class="tab-content px-1 pt-1  border-lighten-2 border-0-top">
                                                                                        @*<div role="tabpanel" class="tab-pane active" id="div1" aria-expanded="true" aria-labelledby="tab1">
                                                                                                <div class="repeater-default">
                                                                                                    <div data-repeater-list="car">
                                                                                                        <div data-repeater-item="">
                                                                                                            <form class="form" style="margin-left:10px">
                                                                                                                @*<div class="form-group row">&#160;&#160;&#160;<u>Billing Address</u></div>
                                                                                                                <div class="form-group row" style="margin-top:10px;">
                                                                                                                    <label class="col-md-3 label-control" for="userinput2">Adress1</label>
                                                                                                                    <div class="col-md-9">
                                                                                                                        <input type="text" id="txtadr1" class="form-control" name="Address1" onkeyup="checkauto()" autocomplete="off">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-group row" style="margin-top:-10px;">
                                                                                                                    <label class="col-md-3 label-control" for="userinput2">Adress2</label>
                                                                                                                    <div class="col-md-9">
                                                                                                                        <input type="text" id="txtadr3" class="form-control" name="Address3" onkeyup="checkauto()" autocomplete="off">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-group row" style="margin-top:-10px;">
                                                                                                                    <label class="col-md-3 label-control" for="userinput1">Adress3</label>
                                                                                                                    <div class="col-md-9">
                                                                                                                        <input type="text" id="txtstate" class="form-control" name="Address3" onkeyup="checkauto()" autocomplete="off">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-group row" style="margin-top:-10px;">
                                                                                                                    <label class="col-md-3 label-control" for="userinput2">POBox</label>
                                                                                                                    <div class="col-md-9">
                                                                                                                        <input class="form-control" type="email" id="txtpin" onkeyup="checkauto()" onkeypress="return isNumberInt(event, this)" autocomplete="off">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-group row" style="margin-top:-10px;">
                                                                                                                    <label class="col-md-3 label-control" for="userinput2">Area</label>

                                                                                                                    <div class="col-md-9">
                                                                                                                        <select id="select_place" class="form-control"></select>
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-group row" style="margin-top:-10px;">
                                                                                                                    <label class="col-md-3 label-control" for="userinput2">Country</label>

                                                                                                                    <div class="col-md-9">
                                                                                                                        <select id="select_place" class="form-control"></select>
                                                                                                                    </div>
                                                                                                                </div>









                                                                                                            </form>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>*@
                                                                                        <div role="tabpanel" class="tab-pane active" id="div2" aria-expanded="true" aria-labelledby="tab2">
                                                                                            <div class="repeater-default">
                                                                                                <div data-repeater-list="car">
                                                                                                    <div data-repeater-item="">
                                                                                                        <form class="form" style="margin-left:20px">
                                                                                                            <div class="form-body">
                                                                                                                <div class="form-group row">

                                                                                                                </div>


                                                                                                                <div class="form-group row">
                                                                                                                    <label class="col-md-4 label-control" for="userinput1">Contact Person 1</label>
                                                                                                                    <div class="col-md-8">

                                                                                                                        <input type="text" class="form-control" id="txtcn1" autocomplete="off">

                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-group row" style="margin-top:0px">
                                                                                                                    <label class="col-md-4 label-control" for="userinput1">Contact Number </label>
                                                                                                                    <div class="col-md-8">
                                                                                                                        <input type="tel" placeholder="" class="form-control" id="txtcno1" onkeypress="return isNumberInt(event, this)" autocomplete="off">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-group row" style="margin-top:0px">
                                                                                                                    <label class="col-md-4 label-control" for="userinput1">Email </label>
                                                                                                                    <div class="col-md-8">
                                                                                                                        <input type="text" id="txtemail" class="form-control" autocomplete="off">

                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-group row" style="margin-top:0px">
                                                                                                                    <label class="col-md-4 label-control" for="userinput1">Contact Person 2</label>
                                                                                                                    <div class="col-md-8">
                                                                                                                        <input type="text" placeholder="" class="form-control" id="txtcn2" autocomplete="off">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-group row" style="margin-top:0px">
                                                                                                                    <label class="col-md-4 label-control" for="userinput1">Contact Number</label>
                                                                                                                    <div class="col-md-8">
                                                                                                                        <input type="tel" class="form-control" id="txtcno2" onkeypress="return isNumberInt(event, this)" autocomplete="off">
                                                                                                                    </div>
                                                                                                                </div>



                                                                                                                <div class="form-group row" style="margin-top:0px">
                                                                                                                    <label class="col-md-4 label-control" for="userinput1">Contact Person 3</label>
                                                                                                                    <div class="col-md-8">
                                                                                                                        <input type="text" placeholder="" class="form-control" id="txtcn3" autocomplete="off">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-group row" style="margin-top:0px">
                                                                                                                    <label class="col-md-4 label-control" for="userinput1">Contact Number</label>
                                                                                                                    <div class="col-md-8">
                                                                                                                        <input type="tel" placeholder="" class="form-control" id="txtcno3" onkeypress="return isNumberInt(event, this)" autocomplete="off">
                                                                                                                    </div>

                                                                                                                </div>


                                                                                                                <div class="form-group row" style="margin-top:0px">
                                                                                                                    <label class="col-md-4 label-control" for="userinput1">Notes</label>
                                                                                                                    <div class="col-md-8">
                                                                                                                        <textarea id="txtnotes" rows="10" class="form-control" autocomplete="off" name="notes" style="height:100px;"></textarea>
                                                                                                                    </div>

                                                                                                                </div>





                                                                                                            </div>
                                                                                                        </form>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="tab-pane" id="div3" aria-labelledby="tab3">
                                                                                            <div class="repeater-default">
                                                                                                <div data-repeater-list="car">
                                                                                                    <div data-repeater-item="">
                                                                                                        <form class="form" style="margin-left:20px">
                                                                                                            <div class="form-body">
                                                                                                                <div class="form-group row">

                                                                                                                </div>

                                                                                                                <div class="form-group row">
                                                                                                                    <label class="col-md-4 label-control" for="userinput1">Passport No</label>
                                                                                                                    <div class="col-md-8">

                                                                                                                        <input type="text" class="form-control" id="txtpass" onkeypress="return isNumberInt(event, this)" autocomplete="off">

                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-group row" style="margin-top:0px">
                                                                                                                    <label class="col-md-4 label-control" for="userinput1">Emirates ID </label>
                                                                                                                    <div class="col-md-8">
                                                                                                                        <input type="tel" placeholder="" class="form-control" id="txtemi" onkeypress="return isNumberInt(event, this)" autocomplete="off">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-group row" style="margin-top:0px">
                                                                                                                    <label class="col-md-4 label-control" for="userinput1">Bank AcNo </label>
                                                                                                                    <div class="col-md-8">
                                                                                                                        <input type="tel" placeholder="" class="form-control" id="txtbank" onkeypress="return isNumberInt(event, this)" autocomplete="off">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-group row" style="margin-top:0px">
                                                                                                                    <label class="col-md-4 label-control" for="userinput1">Visa No </label>
                                                                                                                    <div class="col-md-8">
                                                                                                                        <input type="tel" placeholder="" class="form-control" id="txtvisa" onkeypress="return isNumberInt(event, this)" autocomplete="off">
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-group row" style="margin-top:0px">
                                                                                                                    <label class="col-md-4 label-control" for="userinput1">Expiry On</label>
                                                                                                                    <div class="col-md-8">
                                                                                                                        <input type="text" id="expon" class="form-control" />
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                                <div class="form-group row" style="margin-top:0px">
                                                                                                                    <label class="col-md-4 label-control" for="userinput1">Comments</label>
                                                                                                                    <div class="col-md-8">
                                                                                                                        <textarea id="txtcoment" rows="10" class="form-control" autocomplete="off" name="notes" style="height:100px;"></textarea>
                                                                                                                    </div>
                                                                                                                </div>

                                                                                                                <div class="form-group row text-center" style="margin-top:0px">
                                                                                                                   
                                                                                                                   
                                                                                                                        <h4 class="col-md-12 text-bold-400">Document Upload</h4>

                                                                                                                        <div class="px-3 col-md-12">
                                                                                                                            <input type="file" id="selectedImage1" name="files1[]" accept="image/*,application/pdf,application/vnd.ms-excel" style="width:50%" class="btn btn-lg gradient-back-to-earth font-small-2 white p-2 mr-2">
                                                                                                                          
                                                                                                                        </div>
                                                                                                             
                                                                                                                   
                                                                                                                   
                                                                                                                </div>

                                                                                                                







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


                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </table>

                                                    </td>
                                                    <td id="CELL3" valign="top">

                                                        <div class="col-12 col-md-9 col-lg-9">
                                                            <div class="card">
                                                                <div class="card-header text-center" style="margin-left:90px">

                                                                    <img id="myImg" src="../app-assets/img/portrait/small/avatar-s-12.png" alt="Gini" width="150" class="rounded-circle gradient-back-to-earth" onerror="this.onerror=null; this.src='../app-assets/img/portrait/small/avatar-s-12.png';">

                                                                </div>
                                                                <div class="card-body">
                                                                    <div class="card-block text-center">
                                                                        <h4 class="card-title">Document</h4>
                                                                        <input type="file" id="selectedImage" name="files[]"  accept="image/*" class="btn btn-lg gradient-back-to-earth font-small-2 white p-2 mr-2">



                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div><hr />
                                                    </td>
                                                </tr>
                                            </table>
                                            <div class="card-body" style="border-top:1px solid #e3e8e8;">
                                                <br />

                                                <div class="form-body" style="margin-top:-1%">
                                                    <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>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="display:none;width:90%;margin-left: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">Tenant List</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="tblcustomer" class="table table-striped table-bordered base-style dataTable"></table>
                            <br />

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div id="popupdiv" class="modal fade text-left show" tabindex="-1" role="dialog" aria-labelledby="myheader" style="padding-right: 17px; background:rgba(0,0,0,0.5); display: block; display:none">
    <div class="modal-dialog" role="document" style="top:10%">
        <div class="modal-content">
            <div class="modal-header bg-primary white">
                <h3 class="modal-title" id="myheader"></h3>
                <button type="button" class="close" onclick="popuprefresh()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <form id="areadiv" style="display:none">
                <div class="modal-body" style="overflow:auto;height:250px;">
                    <fieldset class="form-group floating-label-form-group">
                        <label for="groupcode">Area Code<span class="danger">*</span></label>
                        <input type="text" onkeyup="changetoupper(this.id),$('#txtname').val($('#txtcode').val())" id="txtcode" class="form-control" autocomplete="off">
                    </fieldset>
                    <br>
                    <fieldset class="form-group floating-label-form-group">
                        <label for="groupname">Area Name<span class="danger">*</span></label>
                        <input type="text" id="txtname" class="form-control" autocomplete="off">
                    </fieldset>
                    <br>
                    <fieldset class="form-group floating-label-form-group">
                        <label for="groupdesc">Group</label>
                        <div class="input-group">

                            <select id="select_areagroup" class="form-control"></select>
                            <div class="input-group-append">
                                <button class="btn btn-outline-primary" type="button" onclick="areagroupadd(1)">+</button>
                            </div>
                        </div>

                    </fieldset>


                    <br>
                    <fieldset class="form-group floating-label-form-group">
                        <label for="groupdesc">Description</label>
                        <input type="text" id="txtdescription" class="form-control" autocomplete="off">
                    </fieldset>
                </div>
                <div class="modal-footer">
                    <input type="reset" class="btn btn-outline-secondary" onclick="popuprefresh()" data-dismiss="modal" value="close">
                    <input type="button" class="btn btn-outline-primary" value="Save" id="btnareasave" onclick="SavePlace(1)">
                </div>
            </form>
        </div>
    </div>
</div>
<div id="areapopupdiv" class="modal fade text-left show" tabindex="-1" role="dialog" aria-labelledby="armyheader" style="padding-right: 17px; background:rgba(0,0,0,0.5); display: block; display:none">
    <div class="modal-dialog" role="document" style="top:10%">
        <div class="modal-content">
            <div class="modal-header bg-primary white">
                <h3 class="modal-title" id="armyheader"></h3>
                <button type="button" class="close" onclick="areagroupadd(2)" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <form id="areagroupdiv" style="display:none">
                <div class="modal-body" style="overflow:auto;height:250px;">
                    <fieldset class="form-group floating-label-form-group">
                        <label for="groupcode">Area Code<span class="danger">*</span></label>
                        <input type="text" onkeyup="changetoupper(this.id),$('#artxtname').val($('#artxtcode').val())" id="artxtcode" class="form-control" autocomplete="off">
                    </fieldset>
                    <br>
                    <fieldset class="form-group floating-label-form-group">
                        <label for="groupname">Area Name<span class="danger">*</span></label>
                        <input type="text" id="artxtname" class="form-control" autocomplete="off">
                    </fieldset>
                    <br>
                    <fieldset class="form-group floating-label-form-group">
                        <label for="groupdesc">Description</label>
                        <input type="text" id="artxtdescription" class="form-control" autocomplete="off">
                    </fieldset>
                </div>
                <div class="modal-footer">
                    <input type="reset" class="btn btn-outline-secondary" onclick="areagroupadd(2)" data-dismiss="modal" value="close">
                    <input type="button" class="btn btn-outline-primary" value="Save" id="btnareasave" onclick="SaveAreagrp(1)">
                </div>
            </form>

        </div>
    </div>
</div>
<script type="text/javascript">

        $(document).ready(function () {
            $("#txtacnt").focus(function () {
                $("#txtacnt1").css("background-color", "#e6ffff");
            });
            $("#txtacnt").focusout(function () {
                $("#txtacnt1").css("background-color", "white");
            });


        });
        function Addpopupwindow(Id) {
            $("#popupdiv").css("margin-top", '0px');
            $('#currencydiv').hide(); $('#areadiv').hide();
            $('#locationdiv').hide(); $('#salesmandiv').hide();
            $('#termsdiv').hide();

            $('#popupdiv').show();
            if (Id == 2) {
                $('#myheader').text('Area');
                $('#areadiv').show();
                $('#txtcode').focus();
            }
        }
        function changetoupper(Id) {
            $('#' + Id).val($('#' + Id).val().toUpperCase())
        }

        function SavePlace(Flag) {
            if ($('#txtcode').val() == "") {
                warningshow('Please Enter Code', 'txtcode');
            }
            else if ($('#txtname').val() == "") {
                warningshow('Please Enter Name', 'txtname');
            }
            else if ($('#select_areagroup').val() == "0") {
                warningshow('Please Select Group', 'select_areagroup');
            }
            else {
                var data = {};   //array
                data.AreaId = $('#AreaId').val();;
                data.AreaName = $('#txtname').val();
                data.AreaGrpId = $('#select_areagroup').val();
                data.AreaCode = $('#txtcode').val();
                data.Description = $('#txtdescription').val();
                data.DelFlag = Flag;
                $.ajax({
                    type: "POST",
                    url: "../Master/AreaInsertandUpdate",
                    data: data,
                    success: function (result) {
                        for (var i = 0; i <= result.oList.length; i++) {
                            var status = result.oList[i].Status;
                            var id = result.oList[i].AreaId;
                            popupShowalerts(status, 1);

                            placeload(id);

                            popuprefresh();

                        }
                    }
                });

            }


        }
        function placeload(id) {
            var data = {};
            data.AreaId = 0;
            $.ajax({
                type: "POST",
                url: "../Master/AreaGetandGets",
                data: data,
                success: function (result) {
                    AreaLoad1(result.oList, id);
                }
            });
        }
        var DefaultArea = 0;
        function AreaLoad1(result, a) {
            // var DefaultArea = 0;
            $("#select_place").empty();
            $("#select_place").append("<option value='0'>--Select Area--</option>");
            for (var i = 0; i < result.length; i++) {
                if (result[i].DefaultArea != 0) {
                    DefaultArea = result[i].DefaultArea
                }
                $("#select_place").append("<option value='" + result[i].AreaId + "'>" + result[i].AreaName + "</option>");
            }
            if (a == 0) {
                $('#select_place').val(DefaultArea);
            }
            else {
                $('#select_place').val(a);
            }
        }


        function popupShowalerts(Status, id) {
            if (Status == 1) {
                swal('Data Saved Successfully', "", "success");
                $('.swal-button swal-button--confirm').focus();
            }
            else if (Status == 2) {
                swal('Data Updated Successfully', "", "success");
                $('.swal-button swal-button--confirm').focus();

            }
            else if (Status == 3) {
                swal('Data Deleted', "", "error");
                $('.swal-button swal-button--confirm').focus();
            }
            else {
                swal('Data Already Exists', "", "warning");
                $('.swal-button swal-button--confirm').focus();
            }
            if (id == 1) {
                $('#popupdiv').hide();
            }
        }
        function AreaGroupLoad(result, AreaGrpId) {
            $("#select_areagroup").empty();
            $("#select_areagroup").append("<option value='0'>Select Group</option>");
            for (var i = 0; i < result.length; i++) {
                $("#select_areagroup").append("<option value='" + result[i].AreaGrpId + "'>" + result[i].AreaName + "</option>");
            }
            if (AreaGrpId == 0) {
                $('#select_areagroup').val(0);
            }
            else {
                $('#select_areagroup').val(AreaGrpId);
            }
        }
        function GetAreaGroupselect(AreaGrpId) {
            var data = {};
            data.AreaGrpId = 0;
            $.ajax({
                type: "POST",
                url: "../Master/AreaGroupGetandGets",
                data: data,
                success: function (result) {
                    AreaGroupLoad(result.oList, AreaGrpId);
                }
            });

        }
        function SaveAreagrp(Flag) {
            if ($('#artxtcode').val() == "") {
                warningshow('Please Enter Code', 'artxtcode');
            }
            else if ($('#artxtname').val() == "") {
                warningshow('Please Enter Name', 'artxtname');
            }
            else {
                var data = {};   //array
                data.AreaGrpId = 0;
                data.GroupName = $('#artxtname').val();
                data.AreaCode = $('#artxtcode').val();
                data.Description = $('#artxtdescription').val();
                data.DelFlag = Flag;
                $.ajax({
                    type: "POST",
                    url: "../Master/AreaGroupInsertandUpdate",
                    data: data,
                    success: function (result) {
                        for (var i = 0; i <= result.oList.length; i++) {
                            var status = result.oList[i].Status;
                            var id = result.oList[i].AreaGrpId;
                            popupShowalerts(status, 0);
                            GetAreaGroupselect(id);
                            areagroupadd(2);
                        }
                    }
                });

            }
        }






        function addnew() {
            var no = $('#slno').val();
            $('#' + no).show("fast");
            $('#slno').val(+no + 1)
            if(no==3)
            {
                $('#aaaaa').hide();
            }
        }
        $(function () {


            $('#expon').daterangepicker({
                minDate: minDate,
                maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
                singleDatePicker: true,
                showDropdowns: true,
                locale: {
                    format: 'DD/MM/YYYY'
                }

            });

        });



        function isNumberInt(evt, selectedvalue) {
            var charCode = (evt.which) ? evt.which : event.keyCode
            $(selectedvalue).val($(selectedvalue).val().replace(/[^0-9\.]/g, ''));
            if (charCode != 8 && charCode != 13 && (charCode < 48 || charCode > 57)) {
                evt.preventDefault();
                warningshow('Digits Only')
                return false;
            }
            return true;

        }
        function isNumber(evt, selectedvalue) {
            var charCode = (evt.which) ? evt.which : event.keyCode
            $(selectedvalue).val($(selectedvalue).val().replace(/[^0-9\.]/g, ''));
            if (charCode != 8 && (charCode != 46 || $(selectedvalue).val().indexOf('.') != -1) && charCode != 13 && (charCode < 48 || charCode > 57)) {
                evt.preventDefault();
                warningshow('Digits Only')
                return false;
            }
            return true;

        }
        function popuprefresh() {
            $('#popupdiv').hide();
            $('#txtname').val('');
            $('#select_areagroup').val('0');
            $('#txtcode').val('');
            $('#txtdescription').val('');
            $('#AreaId').val(0);
        }

        function areagroupadd(Id) {
            if (Id == 1) {
                $('#areapopupdiv').show();
                $('#armyheader').text('Area Group');
                $('#areagroupdiv').show();
                $('#artxtcode').focus();
            }
            else if (Id == 2) {

                $('#areapopupdiv').hide();
                $('#areagroupdiv').hide();
                $('#artxtname').val('');
                $('#artxtname').val('');
                $('#artxtdescription').val('');

            }
        }

        $('.form-control').attr('autocomplete', 'off');
</script>


<div style="display:none">
    <input type="text" value="0" id="TenantId" />
    <input type="text" value="0" id="MapId" />
</div>