<?php include('database_connection.php');
if(isset($_POST['submit']))
{
   // print_r($_POST);
        //$_SESSION['userid']=
        $COAID=$_POST['dealer'];
        $userid=1;//$_SESSION['userid'];
        $visitdate=$_POST['visitdate'];
        $newappoint=$_POST['appointarrange'];
        $appointdate=$_POST['appointdate'];
        $additional_info=$_POST['additional_info'];
        $ContactPerson=$_POST['ContactPerson'];
       // $ContactType=$_POST['ContactType'];
        $contactTypeId=$_POST['contactTypeId'];
        $TypeContactId=$_POST['TypeContactId'];
        $customerCategoryId=$_POST['customerCategoryId'];
        $discuss=$_POST['discuss'];
        $feedback=$_POST['feedback'];
        $notes=$_POST['notes'];
        $managernotes=$_POST['managernotes'];  
       $sql= "select max(id) from VisitMaster";
                $result=odbc_exec($connection,$sql);
                $id=odbc_num_rows($result);
                $id=$id+1;

     $sql="insert into VisitMaster (id,COAID,salesrepid,visitdate,appointdate,newappoint,additional_info,contact_person,contactTypeId,TypeContactId,customerCategoryId,discuss,feedback,notes,managernotes) values('$id','$COAID','$userid','$visitdate','$appointdate','$newappoint','$additional_info','$ContactPerson','$contactTypeId','$TypeContactId','$customerCategoryId','$discuss','$feedback','$notes','$managernotes')";
    odbc_exec($connection,$sql);
    echo "<script>alert('Visit Saved Sucessfully');</script>";
}

?>
<!DOCTYPE html>
<!-- saved from url=(0131)http://server2.cbspakistan.com/aq/pages/customer_account.html?refresh=0.41338505495168154&sidebarname=CUSTOMER%20SETUP&sidebarid=21 -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="ITS Circle LLC">
    <link rel="icon" href="http://server2.cbspakistan.com/aq/assets/images/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="http://server2.cbspakistan.com/aq/assets/images/favicon.png" type="image/x-icon">
    <title>Sub-Page</title>

    <!--JSGrid css-->
    <link rel="stylesheet" type="text/css" href="assets/css/datatables.css">

    <!--Google font-->
    <link href="assets/css/css(1)" rel="stylesheet">
    <link href="assets/css/css" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" type="text/css" href="assets/css/fontawesome.css">

    <!-- ico-font -->
    <link rel="stylesheet" type="text/css" href="assets/css/icofont.css">

    <!-- Themify icon -->
    <link rel="stylesheet" type="text/css" href="assets/css/themify.css">

    <!-- Flag icon -->
    <link rel="stylesheet" type="text/css" href="assets/css/flag-icon.css">

    <!-- prism css -->
    <link rel="stylesheet" type="text/css" href="assets/css/prism.css">

    <!-- Tour css -->
    <link rel="stylesheet" type="text/css" href="assets/css/tour.css">

    <!-- Owl css -->
    <link rel="stylesheet" type="text/css" href="assets/css/owlcarousel.css">

    <!-- Bootstrap css -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">

    <!-- App css -->
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">

    <!-- Chartist -->
    <link rel="stylesheet" type="text/css" href="assets/css/chartist.css">

    <!-- Responsive css -->
    <link rel="stylesheet" type="text/css" href="assets/css/responsive.css">

    <!-- DatePicker css -->
    <link rel="stylesheet" type="text/css" href="assets/css/date-picker.css">

    <!--Select2 css-->
    <link rel="stylesheet" type="text/css" href="assets/css/select2.css">

    <!-- Animate icon -->
    <link rel="stylesheet" href="assets/css/animate.css">

    <style>
        table#invoice {
            table-layout: fixed;
        }

        table#invoice {
            font-size: small;
        }

        .tabbed-card .col-1,
        .col-2,
        .col-3,
        .col-4,
        .col-5,
        .col-6,
        .col-7,
        .col-8,
        .col-9,
        .col-10,
        .col-11,
        .col-12,
        .col,
        .col-auto,
        .col-sm-1,
        .col-sm-2,
        .col-sm-3,
        .col-sm-4,
        .col-sm-5,
        .col-sm-6,
        .col-sm-7,
        .col-sm-8,
        .col-sm-9,
        .col-sm-10,
        .col-sm-11,
        .col-sm-12,
        .col-sm,
        .col-sm-auto,
        .col-md-1,
        .col-md-2,
        .col-md-3,
        .col-md-4,
        .col-md-5,
        .col-md-6,
        .col-md-7,
        .col-md-8,
        .col-md-9,
        .col-md-10,
        .col-md-11,
        .col-md-12,
        .col-md,
        .col-md-auto,
        .col-lg-1,
        .col-lg-2,
        .col-lg-3,
        .col-lg-4,
        .col-lg-5,
        .col-lg-6,
        .col-lg-7,
        .col-lg-8,
        .col-lg-9,
        .col-lg-10,
        .col-lg-11,
        .col-lg-12,
        .col-lg,
        .col-lg-auto,
        .col-xl-1,
        .col-xl-2,
        .col-xl-3,
        .col-xl-4,
        .col-xl-5,
        .col-xl-6,
        .col-xl-7,
        .col-xl-8,
        .col-xl-9,
        .col-xl-10,
        .col-xl-11,
        .col-xl-12,
        .col-xl,
        .col-xl-auto {
            padding-left: 4px !important;
            padding-right: 4px !important;

        }

        #select2-cheque_cboVendor-container {
            font-size: smaller;
        }

        .card.full-card {
            top: 0px !important;
            left: 0px !important;
            right: 0px !important;
            height: 100% !important;
            width: 100% !important;
        }

        .lbl_edit {
            color: blue;
            text-align: center;
        }
        select{
color: #444;
    line-height: 28px;

    display: block;
    padding-left: 8px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
    </style>


<style type="text/css">.jqstooltip { position: absolute;left: 0px;top: 0px;visibility: hidden;background: rgb(0, 0, 0) transparent;background-color: rgba(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";color: white;font: 10px arial, san serif;text-align: left;white-space: nowrap;padding: 5px;border: 1px solid white;z-index: 10000;}.jqsfield { color: white;font: 10px arial, san serif;text-align: left;}</style></head>

<body>

    <!-- Loader starts -->
    
    <!-- Loader ends -->

    <!--page-wrapper Start-->
    <div class="page-wrapper">

        <!--Page Body Start-->
        <div class="page-body-wrapper">

            <!--Page Body Start-->
            <div class="page-body" style="margin-top:0!important">

                <!-- Container-fluid starts -->
                <div class="container-fluid">

                    <div class="row">
                        <div class="col-sm-12 col-xl-12 xl-100">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Visit Infomration Form</h5>
                                    <span>Use this form to define Dealers Visit.</span>
                                    <div class="card-header-right">
                                        <i class="icofont icofont-maximize full-card"></i>
                                        <i class="icofont icofont-minus minimize-card"></i>
                                    </div>
                                </div>

                                <div class="card-body">
                                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link" id="supplier-tabs" data-toggle="tab" href="http://localhost/design2/viewvists.php?sidebarid=21#supplier" role="tab" aria-controls="supplier" aria-selected="false">Search</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link active show" id="basic-tab" data-toggle="tab" href="http://server2.cbspakistan.com/aq/pages/customer_account.html?refresh=0.41338505495168154&amp;sidebarname=CUSTOMER%20SETUP&amp;sidebarid=21#basic" role="tab" aria-controls="basic" aria-selected="true">Basic</a>
                                        </li>

                                    </ul>
                                    <div class="tab-content" id="myTabContent">
                                         <div class="tab-pane fade show" id="supplier" role="tabpanel" aria-labelledby="supplier-tab">
                                            Customer Tab
                                         </div>
                                        <div class="tab-pane fade active show" id="basic" role="tabpanel" aria-labelledby="basic-tab">
                                                <!-- onsubmit="return false;"-->
                                            <form id="InvoiceForm" method="post">
                                                <div class="row m-20 form-group">
                                                    <h5>
                                                        <span class="lbl_edit" id="RetreiveKeyField"></span>
                                                    </h5>
                                                </div>
    <div class="row m-20 form-group">
                                             <label class="col-sm-12 col-md-12 col-form-label" style="background-color:#ab8ce4;text-align: center;">Report Date Information</label>
 
                                                </div>


                                                <div class="row m-20 form-group">
                                                    <label class="col-sm-3 col-form-label">Select Dealer</label>
                                                    <div class="col-12 col-md-4 col-sm-6">
                                                       <select class="col-12 col-md-12 col-sm-6 form-control" name="dealer"  tabindex="-1" aria-hidden="true">
                                                                    <option value="" data-select2-id="2">--Select Customer </option>
                                                                <?php 
                                                $result=odbc_exec($connection,'select COAID,COAName from accounts where under=54 and natureid=14');
  while ($row = odbc_fetch_array($result)) {
   echo "<option value='".$row['COAID']."'>".$row['COAName']."</option>";
  }
                                                                ?>

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

                                                <!-- <div class="row m-20 form-group">
                                                    <label class="col-sm-3 col-form-label">Opening Balance</label>
                                                    <div class="col-12 col-md-4 col-sm-6">   
                                                    <input type="number" name="Attr1" class="form-control" placeholder="Opening Balance" id="attr1">
                                                    </div>
                                                </div> -->

                                                <div class="row m-20 form-group">
                                                    <label for="inputEmail3" class="col-sm-3 col-form-label">Contact Date
                                                        </label>
                                                    <div class="col-12 col-md-4 col-sm-6">
                                                        <div class="select2-drpdwn">
                                                            <div class="mb-2">
                                                                <input type="date" name="visitdate" id="visitdate" class="form-control">
                                                                <!-- <span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="1" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-cboAttr2-container"><span class="select2-selection__rendered" id="select2-cboAttr2-container" role="textbox" aria-readonly="true"><span class="select2-selection__placeholder">--Select Customer Type--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span> -->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>



                                                <div class="row m-20 form-group">
                                                    <label for="inputEmail3" class="col-sm-3 col-form-label">New Appointment Arrange</label>
                                                    <div class="col-2 col-md-2 col-sm-6">
                                                        <div class="select2-drpdwn">
                                                            <div class="mb-2">
                                                                <input type="radio" name="appointarrange" class="form-group" value="1">Yes 
                                                                <input type="radio" name="appointarrange" class="form-group" value="0">No 
                                                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row m-20 form-group">
                                                    <label for="inputEmail3" class="col-sm-3 col-form-label">New Appointment 
                                                        Date</label>
                                                    <div class="col-12 col-md-4 col-sm-6">
                                                        <div class="select2-drpdwn">
                                                            <div class="mb-2">
                                                                        <input type="date" name="appointdate" id="appointdate" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row m-20 form-group">
                                                    <label class="col-sm-3 col-form-label">Addition info Appointment</label>
                                                    <div class="col-12 col-md-4 col-sm-6">
                                                        <input type="text" name="additional_info" class="form-control" placeholder="Additional Infomration" id="attr6">
                                                    </div>
                                                </div>
                                                <div class="row m-20 form-group">
                                             <label class="col-sm-12 col-md-12 col-form-label" style="background-color:#ab8ce4;text-align: center;">Contact Information</label>
 
                                                </div>
                                                <div class="row m-20 form-group">
                                                    <label class="col-sm-3 col-form-label">Contact Person 1</label>
                                                    <div class="col-12 col-md-4 col-sm-6">
                                                        <input type="text" name="ContactPerson" class="form-control" placeholder="Contact Person 1" id="contactperson1">
                                                    </div>
                                                </div>
                                                                                                <div class="row m-20 form-group">
                                                    <label class="col-sm-3 col-form-label">Contact Type</label>
                                                    <div class="col-12 col-md-4 col-sm-6">
                                                           <select class="col-12 col-md-12 col-sm-6 form-control" name="contactTypeId"  tabindex="-1" aria-hidden="true">
                                                                    <option value="" data-select2-id="2">--Select Contact  Type--</option>
                                                                <option value="9" data-mastervalueid="9" data-mastervalue="CORPORATE">Telephone</option><option value="10" data-mastervalueid="10" data-mastervalue="INDIVIDUALS">Physical</option></select>
                                                    </div>
                                                </div>
                                                <div class="row m-20 form-group">
                                                    <label class="col-sm-3 col-form-label">Type of Contact</label>
                                                    <div class="col-12 col-md-4 col-sm-6">
                                                           <select class="col-12 col-md-12 col-sm-6 form-control" name="TypeContactId"  tabindex="-1" aria-hidden="true">
                                                            <option value="" data-select2-id="2">--Select Type of Contact  --</option>
                                                 <?php 
                                                $result=odbc_exec($connection,'select id,title from TypeContact');
  while ($row = odbc_fetch_array($result)) {
   echo "<option value='".$row['id']."'>".$row['title']."</option>";
  }
                                                                ?>

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

                                                     <div class="row m-20 form-group">
                                                    <label class="col-sm-3 col-form-label">Customer Category</label>
                                                    <div class="col-12 col-md-4 col-sm-6">
                                                           <select class="col-12 col-md-12 col-sm-6 form-control" name="customerCategoryId"  tabindex="-1" aria-hidden="true">
                                                                    <option value="" data-select2-id="2">--Select Customer Category</option>
                                                                                              <?php 
                                                $result=odbc_exec($connection,'select id,title from CustomerCategory');
  while ($row = odbc_fetch_array($result)) {
   echo "<option value='".$row['id']."'>".$row['title']."</option>";
  }
                                                                ?>

                                                                     </select>
                                                    </div>

                                                </div>
                                                <div class="row m-20 form-group">
                                                    <label class="col-sm-3 col-form-label">What has been Discuss</label>
                                                    <div class="col-12 col-md-4 col-sm-6">
                                                        <textarea name="discuss" class="form-control" placeholder="Discuss" id="attr4"></textarea>
                                                    </div>
                                                </div>

                                                <div class="row m-20 form-group">
                                                    <label class="col-sm-3 col-form-label">Feedback</label>
                                                    <div class="col-12 col-md-4 col-sm-6">
                                                        <textarea  name="feedback" class="form-control" placeholder="Feedback" id="attr9"></textarea>
                                                    </div>
                                                </div>
      <div class="row m-20 form-group">
                                             <label class="col-sm-12 col-md-12 col-form-label" style="background-color:#ab8ce4;text-align: center;">Notes</label>
 
                                                </div>
                                                <div class="row m-20 form-group">
                                                    <label class="col-sm-3 col-form-label">Sales Rep Note</label>
                                                    <div class="col-12 col-md-4 col-sm-6">
                                                        <textarea name="notes" class="form-control" placeholder="Sales Rep Note" id="notes"></textarea>
                                                    </div>
                                                </div>


                                                <div class="row m-20 form-group">
                                                    <label class="col-sm-3 col-form-label">Sales Manager Notes</label>
                                                    <div class="col-12 col-md-4 col-sm-6">
                                                        <textarea name="managernotes" class="form-control" placeholder="Sales Manager Notes" id="attr11">
                                                            </textarea>
                                                    </div>
                                                </div>

                                                <div class="row m-20 form-group" style="display: none;">
                                                    <label class="col-sm-3 col-form-label">Contact Person1 Info</label>
                                                    <div class="col-12 col-md-4 col-sm-6">
                                                        <textarea name="Attr12" class="form-control" placeholder="Contact Person Info" id="attr12" cols="30" rows="3"></textarea>
                                                    </div>
                                                </div>



                                                <div class="row m-20 form-group">
                                                    <label class="col-sm-3 col-form-label">Visit Card Picture</label>
                                                    <div class="col-12 col-md-4 col-sm-6">
                                                        <input type="file" name="ContactDesignation1" class="form-control" placeholder="Contact Designation 1" id="contactdesignation1">
                                                    </div>
                                                </div>



                                                <!--Opening Balance End-->

                                                <div class="card-footer">
                                                    <!-- onclick="javascript:void(0);submitInvoice(this)"-->
                                                    <button class="btn btn-primary" name="submit" type="submit" >Submit</button>
                                                    <button class="btn btn-secondary" onclick="javascript:void(0);resetInvoice(this)">Clear</button>
                                                    <button class="btn btn-danger" onclick="javascript:void(0);ClearForm(true)">Cancel</button>
                                                </div>
                                            </form>

                                        </div>

                                        <div class="tab-pane fade" id="supplier" role="tabpanel" aria-labelledby="supplier-tab">

                                            <!-- <form id="searchForm" onsubmit="return false;">
                                                <div class="row m-20 form-group">
                                                    <label class="col-sm-1 col-12 col-md-1  col-form-label">Account Name</label>
                                                    <div class="col-12 col-md-2 col-sm-2 m-b-20">                                           
                                                        <input type="text"  class="form-control" aria-describedby="basic-addon2" placeholder="Search" id="Search_Account" name="COAName">
                                                    </div>
                                                
                                                    <label class="col-sm-1 col-12 col-md-1  col-form-label">Trade License #</label>
                                                    <div class="col-12 col-md-2 col-sm-2 m-b-20">                                           
                                                        <input type="text"  class="form-control" aria-describedby="basic-addon2" placeholder="Search" id="Search_Attr4" name="Attr4">
                                                    </div>
                                                
                                                    <label class="col-sm-1 col-12 col-md-1  col-form-label">Category</label>
                                                    <div class="col-12 col-md-2 col-sm-2 m-b-20">                                           
                                                        <input type="text"  class="form-control" aria-describedby="basic-addon2" placeholder="Search" id="Search_Category" name="Category">
                                                    </div>
                                                
                                                    <label class="col-sm-1 col-12 col-md-1  col-form-label">Mob</label>
                                                    <div class="col-12 col-md-2 col-sm-2 m-b-20">                                            
                                                        <input type="text"  class="form-control" aria-describedby="basic-addon2" placeholder="Search" id="Search_Attr10" name="Attr10">
                                                    </div>
                                                
                                                    <label class="col-sm-1 col-12 col-md-1  col-form-label">VAT #</label>
                                                    <div class="col-12 col-md-2 col-sm-2 m-b-20">                                            
                                                        <input type="text"  class="form-control" aria-describedby="basic-addon2" placeholder="Search" id="Search_Attr15" name="Attr15">
                                                    </div>

                                                    <button class="btn btn-primary m-b-20"   onclick="javascript:void(0);doPost(this)">Search</button>
                                                </div>
                                            </form> -->
                                            <form id="searchForm" onsubmit="return false;">
                                                <div class="row m-2 m-l-0 form-group">

                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <!-- <label for="Search_Group" class="col-form-label-xsm">Customer Name</label> -->
                                                        <input type="text" class="form-control form-control-sm" placeholder="Customer Name" id="Search_Account" name="COAName">
                                                    </div>

                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <!-- <label for="Search_Description" class="col-form-label-xsm">Trade Lic #</label> -->
                                                        <input type="text" class="form-control form-control-sm" placeholder="Trade License #" id="Search_Attr4" name="Attr4">
                                                    </div>

                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <!-- <label for="Search_Category" class="col-form-label-xsm">Category</label> -->
                                                        <input type="text" class="form-control form-control-sm" placeholder="Category" id="Search_Category" name="Category">
                                                    </div>
                                                    <!-- <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <input type="text" class="form-control form-control-sm"  placeholder="Level3" id="Search_L3" name="L3"/>
                                                    </div>
                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <input type="text" class="form-control form-control-sm"  placeholder="Level2" id="Search_L2" name="L2"/>
                                                    </div>
                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <input type="text" class="form-control form-control-sm"  placeholder="Level1" id="Search_L1" name="L1"/>
                                                    </div> -->

                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <!-- <label for="Search_Code" class="col-form-label-xsm">Mobile</label> -->
                                                        <input type="text" class="form-control form-control-sm" placeholder="Mobile" id="Search_Attr10" name="Attr10">
                                                    </div>
                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <!-- <label for="Search_Level" class="col-form-label-xsm">VAT REG #</label> -->
                                                        <input type="text" class="form-control form-control-sm" placeholder="TRN #" id="Search_Attr15" name="Attr15">
                                                    </div>

                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <!-- <label for="Search_Level" class="col-form-label-xsm"></label> -->
                                                        <button class="btn-primary form-control form-control-sm" onclick="javascript:void(0);doPost(this)">Search</button>
                                                    </div>

                                                </div>
                                            </form>

                                            <div class="table-responsive mt-2">

                                                <div id="invoice_wrapper" class="dataTables_wrapper no-footer"><div class="top"><div class="dataTables_length" id="invoice_length"><label>Show <select name="invoice_length" aria-controls="invoice" class=""><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="500000">All</option></select> entries</label></div><div class="dataTables_paginate paging_simple_numbers" id="invoice_paginate"><a class="paginate_button previous disabled" aria-controls="invoice" data-dt-idx="0" tabindex="0" id="invoice_previous">Previous</a><span><a class="paginate_button current" aria-controls="invoice" data-dt-idx="1" tabindex="0">1</a><a class="paginate_button " aria-controls="invoice" data-dt-idx="2" tabindex="0">2</a></span><a class="paginate_button next" aria-controls="invoice" data-dt-idx="3" tabindex="0" id="invoice_next">Next</a></div></div><div id="invoice_processing" class="dataTables_processing" style="display: none;">Processing...</div><table class="table table-bordered table-hover table-striped table-condensed dataTable no-footer" id="invoice" role="grid" aria-describedby="invoice_info">
                                                    <thead class="thead-light">
                                                        <tr role="row"><th scope="col" style="width: 5%;" class="dt-center sorting_disabled" rowspan="1" colspan="1" aria-label="#">#</th><th scope="col" style="width: 25%;" class="sorting_asc" tabindex="0" aria-controls="invoice" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Account Name: activate to sort column descending">Account Name</th><th scope="col" style="width: 20%;" class="sorting" tabindex="0" aria-controls="invoice" rowspan="1" colspan="1" aria-label="Trade License #: activate to sort column ascending">Trade License #</th><th scope="col" style="width: 23%;" class="sorting" tabindex="0" aria-controls="invoice" rowspan="1" colspan="1" aria-label="Category: activate to sort column ascending">Category</th><th scope="col" style="width: 10%;" class="sorting" tabindex="0" aria-controls="invoice" rowspan="1" colspan="1" aria-label="Mobile #: activate to sort column ascending">Mobile #</th><th scope="col" style="width: 10%;" class="sorting" tabindex="0" aria-controls="invoice" rowspan="1" colspan="1" aria-label="TRN #: activate to sort column ascending">TRN #</th><th scope="col" style="width: 10%;" class="dt-center sorting_disabled" rowspan="1" colspan="1" aria-label=""><i class="fa fa-reorder"></i></th></tr>
                                                    </thead>
                                                    <tbody>
                                                        <!-- <tr id="invoice-no-data">
                                                                <td colspan="7" style="text-align:center"> 
                                                                    There's no data 
                                                                </td>
                                                            </tr> -->
                                                    <tr role="row" class="odd"><td class=" dt-center">1</td><td class="sorting_1">AL EMAD CAR RENTAL LLC</td><td>675336</td><td>RENT A CAR CUSTOMERS<br><small>CURRENT ASSETS</small><i class="fa fa-angle-double-right txt-primary m-r-5 m-l-5"></i><small>ACCOUNTS RECEIVABLE</small></td><td>+971 558849710</td><td>100002506200003</td><td class=" dt-center"><i class="fa fa-pencil fa-lg" style="text-align: left;color: blue;cursor:pointer;" onclick="javascript:editRow(this);"></i>
<i class="fa fa-trash-o fa-lg" style="text-align: right;color: red;cursor:pointer;" onclick="javascript:deleteRow(this);"></i>
</td></tr><tr role="row" class="even"><td class=" dt-center">2</td><td class="sorting_1">AL MONSEF RENT A CAR LLC</td><td>240954</td><td>RENT A CAR CUSTOMERS<br><small>CURRENT ASSETS</small><i class="fa fa-angle-double-right txt-primary m-r-5 m-l-5"></i><small>ACCOUNTS RECEIVABLE</small></td><td>+971 504815261</td><td>100391250600003</td><td class=" dt-center"><i class="fa fa-pencil fa-lg" style="text-align: left;color: blue;cursor:pointer;" onclick="javascript:editRow(this);"></i>
<i class="fa fa-trash-o fa-lg" style="text-align: right;color: red;cursor:pointer;" onclick="javascript:deleteRow(this);"></i>
</td></tr><tr role="row" class="odd"><td class=" dt-center">3</td><td class="sorting_1">ALBA MOTORS LLC</td><td>791541</td><td>RENT A CAR CUSTOMERS<br><small>CURRENT ASSETS</small><i class="fa fa-angle-double-right txt-primary m-r-5 m-l-5"></i><small>ACCOUNTS RECEIVABLE</small></td><td>+971 504242900</td><td>100227752100003</td><td class=" dt-center"><i class="fa fa-pencil fa-lg" style="text-align: left;color: blue;cursor:pointer;" onclick="javascript:editRow(this);"></i>
<i class="fa fa-trash-o fa-lg" style="text-align: right;color: red;cursor:pointer;" onclick="javascript:deleteRow(this);"></i>
</td></tr><tr role="row" class="even"><td class=" dt-center">4</td><td class="sorting_1">Anas Kunnathiyil</td><td></td><td>STAFF RECEIVABLES&nbsp;<br><small>CURRENT ASSETS</small><i class="fa fa-angle-double-right txt-primary m-r-5 m-l-5"></i><small>ACCOUNTS RECEIVABLE</small></td><td>0561944331</td><td></td><td class=" dt-center"><i class="fa fa-pencil fa-lg" style="text-align: left;color: blue;cursor:pointer;" onclick="javascript:editRow(this);"></i>
<i class="fa fa-trash-o fa-lg" style="text-align: right;color: red;cursor:pointer;" onclick="javascript:deleteRow(this);"></i>
</td></tr><tr role="row" class="odd"><td class=" dt-center">5</td><td class="sorting_1">AUTORENT CAR RENTAL LLC</td><td>218697</td><td>RENT A CAR CUSTOMERS<br><small>CURRENT ASSETS</small><i class="fa fa-angle-double-right txt-primary m-r-5 m-l-5"></i><small>ACCOUNTS RECEIVABLE</small></td><td>+971 566343490</td><td>100330596600003</td><td class=" dt-center"><i class="fa fa-pencil fa-lg" style="text-align: left;color: blue;cursor:pointer;" onclick="javascript:editRow(this);"></i>
<i class="fa fa-trash-o fa-lg" style="text-align: right;color: red;cursor:pointer;" onclick="javascript:deleteRow(this);"></i>
</td></tr><tr role="row" class="even"><td class=" dt-center">6</td><td class="sorting_1">AVIS RENT A CAR CO LLC</td><td>216352</td><td>RENT A CAR CUSTOMERS<br><small>CURRENT ASSETS</small><i class="fa fa-angle-double-right txt-primary m-r-5 m-l-5"></i><small>ACCOUNTS RECEIVABLE</small></td><td>+971 5557474322</td><td>100024297200003</td><td class=" dt-center"><i class="fa fa-pencil fa-lg" style="text-align: left;color: blue;cursor:pointer;" onclick="javascript:editRow(this);"></i>
<i class="fa fa-trash-o fa-lg" style="text-align: right;color: red;cursor:pointer;" onclick="javascript:deleteRow(this);"></i>
</td></tr><tr role="row" class="odd"><td class=" dt-center">7</td><td class="sorting_1">CAR VAULT NEW AND LUXURY VEHICLES TRADING LLC</td><td>781350</td><td>RENT A CAR CUSTOMERS<br><small>CURRENT ASSETS</small><i class="fa fa-angle-double-right txt-primary m-r-5 m-l-5"></i><small>ACCOUNTS RECEIVABLE</small></td><td>+971 527444555</td><td>100383284500003</td><td class=" dt-center"><i class="fa fa-pencil fa-lg" style="text-align: left;color: blue;cursor:pointer;" onclick="javascript:editRow(this);"></i>
<i class="fa fa-trash-o fa-lg" style="text-align: right;color: red;cursor:pointer;" onclick="javascript:deleteRow(this);"></i>
</td></tr><tr role="row" class="even"><td class=" dt-center">8</td><td class="sorting_1">CARD CUSTOMERS</td><td></td><td>CASH CUSTOMERS<br><small>CURRENT ASSETS</small><i class="fa fa-angle-double-right txt-primary m-r-5 m-l-5"></i><small>ACCOUNTS RECEIVABLE</small></td><td></td><td></td><td class=" dt-center"><i class="fa fa-pencil fa-lg" style="text-align: left;color: blue;cursor:pointer;" onclick="javascript:editRow(this);"></i>
<i class="fa fa-trash-o fa-lg" style="text-align: right;color: red;cursor:pointer;" onclick="javascript:deleteRow(this);"></i>
</td></tr><tr role="row" class="odd"><td class=" dt-center">9</td><td class="sorting_1">CASH CUSTOMERS</td><td></td><td>CASH CUSTOMERS<br><small>CURRENT ASSETS</small><i class="fa fa-angle-double-right txt-primary m-r-5 m-l-5"></i><small>ACCOUNTS RECEIVABLE</small></td><td></td><td></td><td class=" dt-center"><i class="fa fa-pencil fa-lg" style="text-align: left;color: blue;cursor:pointer;" onclick="javascript:editRow(this);"></i>
<i class="fa fa-trash-o fa-lg" style="text-align: right;color: red;cursor:pointer;" onclick="javascript:deleteRow(this);"></i>
</td></tr><tr role="row" class="even"><td class=" dt-center">10</td><td class="sorting_1">CLASS WORLDWIDE CAR RENTALS LLC</td><td>674694</td><td>RENT A CAR CUSTOMERS<br><small>CURRENT ASSETS</small><i class="fa fa-angle-double-right txt-primary m-r-5 m-l-5"></i><small>ACCOUNTS RECEIVABLE</small></td><td>+971 561184075</td><td>100266402500003</td><td class=" dt-center"><i class="fa fa-pencil fa-lg" style="text-align: left;color: blue;cursor:pointer;" onclick="javascript:editRow(this);"></i>
<i class="fa fa-trash-o fa-lg" style="text-align: right;color: red;cursor:pointer;" onclick="javascript:deleteRow(this);"></i>
</td></tr></tbody>
                                                </table><div class="bottom"><div class="dataTables_info" id="invoice_info" role="status" aria-live="polite">Showing 1 to 10 of 15 entries (filtered from 177 total entries)</div></div><div class="clear"></div></div>

                                            </div>

                                        </div>

                                    </div>
                                </div>

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

                </div>

                <!-- Container-fluid Ends -->
            </div>
            <!--Page Body Ends-->

        </div>
    </div>

    <!-- latest jquery-->
    <script src="assets/js/jquery-3.2.1.min.js"></script>

    <!-- Bootstrap js-->
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/bootstrap/bootstrap.js"></script>

    <!-- Counter js-->
    <script src="assets/js/jquery.waypoints.min.js"></script>
    <script src="assets/js/jquery.counterup.min.js"></script>
    <!-- <script src="../assets/js/counter/counter-custom.js"></script> -->

    <!-- owlcarousel js-->
    <script src="assets/js/owl.carousel.js"></script>

    <!-- prism js -->
    <script src="assets/js/prism/prism.min.js"></script>

    <!-- clipboard js -->
    <script src="assets/js/clipboard.min.js"></script>

    <!-- custom card js  -->
    <script src="assets/js/card/custom-card.js"></script>

    <!--Height Equal Js-->
    <script src="./height-equal.js"></script>

    <!-- Sidebar jquery-->
    <script src="assets/js/sidebar-menu.js"></script>
    <script src="assets/js/compact-small-button.js"></script>

    <!-- Theme js-->
    <script src="assets/js/script.js"></script>

    <!-- tour js -->
    <script src="assets/js/intro.js"></script>
    <script src="assets/js/intro-init.js"></script>

    <!-- Chartist  -->
    <script src="assets/js/chartist.js"></script>

    <!--Sparkline  Chart JS-->
    <script src="assets/js/sparkline.js"></script>

    <!--Dashboard business js-->
    <!-- <script  src="../assets/js/dashboard-business.js"></script> -->
    <script src="assets/js/datepicker.js"></script>
    <script src="assets/js/datepicker.en.js"></script>

    <script src="assets/js/bootbox.min.js"></script>

    <!-- bootstrap notify js -->
    <script src="assets/js/bootstrap-notify.min.js"></script>

    <!-- Select2 js -->
    <script type="text/javascript" src="assets/js/select2.full.min.js"></script>


    <script src="assets/js/jquery.dataTables.min.js"></script>
    <script src="assets/js/datatable.custom.js"></script>

    <script>


        function getUrlParams(url) {
            var lastURL1 = "";
            var urlParams = {} // return value
            var queryString = getQueryString()

            if (queryString) {
                var keyValuePairs = queryString.split('&')
                for (var i = 0; i < keyValuePairs.length; i++) {
                    var keyValuePair = keyValuePairs[i].split('=')
                    var paramName = keyValuePair[0]
                    var paramValue = keyValuePair[1] || ''
                    urlParams[paramName] = decodeURIComponent(paramValue.replace(/\+/g, ' '))
                }
            }
            return urlParams // functions below
            function getQueryString() {
                var reducedUrl = lastURL1 || url || window.location.search

                reducedUrl = reducedUrl.split('#')[0] // Discard fragment identifier.
                var queryString = reducedUrl.split('?')[1]
                if (!queryString) {
                    if (reducedUrl.search('=') !== false) { // URL is a query string.
                        queryString = reducedUrl
                    }
                }
                return queryString
            } // getQueryString
        } // getUrlParams

        var SideBarID = getUrlParams()["sidebarid"];

        //Opening Balance Start
        var openingTable;
        var openingTableBody;
        //Opening Balance End

        var currentEditRow;
        var txtAccountName;
        var cboAttr2;
        var cboAttr3;
        var cboAttr5;
        var cboCategory;
        var txtAttr4;
        var txtAttr6;
        var txtAttr7;
        var txtAttr8;
        var txtAttr9;
        var txtAttr10;
        var txtAttr11;
        var txtAttr12;
        var txtAttr13;
        var txtAttr14;
        var txtAttr15;
        var txtAttr16;
        var txtAttr17;
        var txtAttr18;
        var txtAttr19;
        var txtAttr20;
        var txtCOAID;
        var txtContactPerson1;
        var txtContactDesignation1;
        var txtContactPerson2;
        var txtContactDesignation2;
        var txtContactPerson3;
        var txtContactDesignation3;

        var table;
        var tableBody;


        var searchForm;
        var Search_Account = $('#Search_Account');
        var Search_Attr4 = $('#Search_Attr4');
        var Search_Category = $('#Search_Category');
        var Search_Attr10 = $('#Search_Attr10');
        var Search_Attr15 = $('#Search_Attr15');


        //var globalWebServiceInventoryPath="http://localhost:3321";
        var globalWebServiceInventoryPath = "../";

        var alertTypeCritical = {
            type: 'danger',
            timer: 1000,
            placement: { from: 'top', align: 'right' },
            offset: { x: 30, y: 90 },
            delay: 500,
            z_index: 10000,
            animate: { enter: 'animated bounce', exit: 'animated fadeOut' }
        };
        var alertTypeInfo = {
            type: 'primary',
            timer: 1000,
            placement: { from: 'top', align: 'right' },
            offset: { x: 30, y: 90 },
            delay: 500,
            z_index: 10000,
            animate: { enter: 'animated fadeIn', exit: 'animated fadeOut' }
        };
        var alertTypeSuccess = {
            type: 'success',
            timer: 1000,
            placement: { from: 'top', align: 'right' },
            offset: { x: 30, y: 90 },
            delay: 500,
            z_index: 10000,
            animate: { enter: 'animated fadeIn', exit: 'animated fadeOut' }
        };



        $(document).ready(function () {



            searchForm = $('#searchForm');
            form = $('#InvoiceForm');
            txtAccountName = $('#accountname');
            cboAttr2 = $('#cboAttr2');
            cboAttr3 = $('#cboAttr3');
            cboAttr5 = $('#cboAttr5');
            cboCategory = $('#cboCategory');
            txtAttr4 = $('#attr4');
            txtAttr6 = $('#attr6');
            txtAttr7 = $('#attr7');
            txtAttr8 = $('#attr8');
            txtAttr9 = $('#attr9');
            txtAttr10 = $('#attr10');
            txtAttr11 = $('#attr11');
            txtAttr12 = $('#attr12');
            txtAttr13 = $('#attr13');
            txtAttr14 = $('#attr14');
            txtAttr15 = $('#attr15');
            txtContactPerson1 = $('#contactperson1');
            txtContactDesignation1 = $('#contactdesignation1');
            txtContactPerson2 = $('#contactperson2');
            txtContactDesignation2 = $('#contactdesignation2');
            txtContactPerson3 = $('#contactperson3');
            txtContactDesignation3 = $('#contactdesignation3');




            $('#chkVATRegistered').change(function () {
                if ($('#chkVATRegistered:checked') && $('#chkVATRegistered:checked').length > 0) {
                    txtAttr15.prop('disabled', null)
                    txtAttr18.prop('disabled', null)

                }
                else {
                    txtAttr15.prop('disabled', "disabled")
                    txtAttr18.prop('disabled', "disabled")

                    txtAttr15.val('')
                    txtAttr18.val('')

                }
            });

            txtAttr16 = $('#attr16');
            txtAttr17 = $('#attr17');
            txtAttr18 = $('#attr18');
            // txtAttr19= $('#attr19'); 
            // txtAttr20= $('#attr20'); 
            table = $('#invoice');
            tableBody = $('tbody', table);

            //Opening Balance Start
            openingTable = $('#opening_balance');
            openingTableBody = $('tbody', openingTable);

            $(document).on('input', '.openingDebit', function () {//do something})
                event.preventDefault();
                var txtdebit = $(this);
                var row = $(this).parents('tr');
                var txtcredit = $(row.find('.openingCredit'));

                txtdebit.val(Number(txtdebit.val()));

                if (txtdebit.val()) {
                    txtcredit.val('');
                    row.attr('data-Balance', Number(txtdebit.val()));
                }
                else {
                    row.attr('data-Balance', (-1 * Number(txtcredit.val())));
                }

                calculateOpeningBalance();

            });
            $(document).on('input', '.openingCredit', function () {//do something})
                event.preventDefault();
                var txtcredit = $(this);
                var row = $(this).parents('tr');
                var txtdebit = $(row.find('.openingDebit'));

                txtcredit.val(Number(txtcredit.val()));
                if (txtcredit.val()) {
                    txtdebit.val('');
                    row.attr('data-Balance', (-1 * Number(txtcredit.val())));
                }
                else {
                    row.attr('data-Balance', Number(txtdebit.val()));
                }
                calculateOpeningBalance();

            });

            updateOpeningBalance();
            //Opening Balance End

            cboAttr2.select2({
                placeholder: "--Select Customer Type--",
                width: "100%",
                dropdownAutoWidth: true,
                templateResult: function (data) {
                    var i = $(data.element);
                    var $template;
                    if (i.attr('data-MasterValue'))
                        $template = '<small><mark>' + i.attr('data-MasterValue') + '</mark></small>'
                    else
                        $template = "<span>--Select Customer Type--</span>";
                    return $($template);
                }
            });

            var $request_attr2 = $.ajax({
                url: globalWebServiceInventoryPath + '/webservice_Inventroid.asmx/GetMasterValues?TextBoxName=CustomerType',
                dataType: "json"

            });


            $request_attr2.then(function (data) {
                for (var d = 0; d < data.Database.Table.length; d++) {
                    var attr2 = data.Database.Table[d];
                    var option = new Option(attr2.MasterValue, attr2.MasterValueID);

                    $(option).attr('data-MasterValueID', attr2.MasterValueID + "")
                    $(option).attr('data-MasterValue', attr2.MasterValue + "")
                    cboAttr2.append(option);
                }
                cboAttr2.trigger('change');
            });





            cboAttr3.select2({
                placeholder: "--Select Status--",
                width: "100%",
                dropdownAutoWidth: true,
                templateResult: function (data) {
                    var i = $(data.element);
                    var $template;
                    if (i.attr('data-MasterValue'))
                        $template = '<small><mark>' + i.attr('data-MasterValue') + '</mark></small>'
                    else
                        $template = "<span>--Select Status--</span>";
                    return $($template);
                }
            });

            var $request_attr3 = $.ajax({
                url: globalWebServiceInventoryPath + '/webservice_Inventroid.asmx/GetMasterValues?TextBoxName=Status',
                dataType: "json"

            });


            $request_attr3.then(function (data) {
                for (var d = 0; d < data.Database.Table.length; d++) {
                    var attr3 = data.Database.Table[d];
                    var option = new Option(attr3.MasterValue, attr3.MasterValueID);

                    $(option).attr('data-MasterValueID', attr3.MasterValueID + "")
                    $(option).attr('data-MasterValue', attr3.MasterValue + "")
                    cboAttr3.append(option);
                }
                cboAttr3.trigger('change');
            });





            cboAttr5.select2({
                placeholder: "--Select Field Of Business--",
                width: "100%",
                dropdownAutoWidth: true,
                templateResult: function (data) {
                    var i = $(data.element);
                    var $template;
                    if (i.attr('data-MasterValue'))
                        $template = '<small><mark>' + i.attr('data-MasterValue') + '</mark></small>'
                    else
                        $template = "<span>--Select Field Of Business--</span>";
                    return $($template);
                }
            });

            var $request_attr5 = $.ajax({
                url: globalWebServiceInventoryPath + '/webservice_Inventroid.asmx/GetMasterValues?TextBoxName=FieldOfBusiness',
                dataType: "json"

            });


            $request_attr5.then(function (data) {
                for (var d = 0; d < data.Database.Table.length; d++) {
                    var attr5 = data.Database.Table[d];
                    var option = new Option(attr5.MasterValue, attr5.MasterValueID);

                    $(option).attr('data-MasterValueID', attr5.MasterValueID + "")
                    $(option).attr('data-MasterValue', attr5.MasterValue + "")
                    cboAttr5.append(option);
                }
                cboAttr5.trigger('change');
            });



            cboCategory.select2({
                placeholder: "--Select Category--",
                width: "100%",
                dropdownAutoWidth: true,
                templateResult: function (data) {
                    var i = $(data.element);
                    var $template;
                    if (i.attr('data-COAName'))
                        $template = "<span><strong><mark>" + i.attr('data-COAName') + '</mark></strong><br/><small>' + i.attr('data-L3') + '<i class="fa fa-angle-double-right txt-primary m-r-5 m-l-5"></i>' + i.attr('data-L2') + '</small></span>';
                    else
                        $template = "<span>--Select Category--</span>";

                    return $($template);
                }
            });


            FillCombo();

            $(table).dataTable({
                "bSortCellsTop": true,
                "processing": true,
                "sDom": '<"top"flp>rt<"bottom"i><"clear">',
                "responsive": false,
                "paging": true,
                "lengthMenu": [[10, 20, 30, 40, 500000], [10, 20, 30, 40, "All"]],
                "pageLength": 10,
                "searching": false,
                "serverSide": true,
                "sAjaxDataProp": "Database.Table",
                "order": [[1, "asc"]],
                "bAutoWidth": false,


                "ajax": {

                    //"url": globalWebServiceInventoryPath + '/webservice_Inventroid.asmx/GetAccounts?SideBarID='+SideBarID, 
                    url: globalWebServiceInventoryPath + '/webservice_Inventroid.asmx/GetAccountsMasterForm?NatureID=14&SideBarID=' + SideBarID,
                    "data": function (d) {
                        var Data = new Object();
                        $.each(d.order, function (key, value) {
                            this.column = d.columns[this.column].data;
                        });
                        if (d.order)
                            Data.sorting = JSON.stringify(d.order);
                        try { Data.current_page = (d.start / d.length) + 1; } catch (e) { Data.current_page = 1; }
                        Data.records_to_return = d.length;


                        if ((Search_Account).val()) $(Data).attr(Search_Account.attr("name"), Search_Account.val())
                        if ((Search_Attr4).val()) $(Data).attr(Search_Attr4.attr("name"), Search_Attr4.val())
                        if ((Search_Category).val()) $(Data).attr(Search_Category.attr("name"), Search_Category.val())
                        if ((Search_Attr10).val()) $(Data).attr(Search_Attr10.attr("name"), Search_Attr10.val())
                        if ((Search_Attr15).val()) $(Data).attr(Search_Attr15.attr("name"), Search_Attr15.val())
                        if ($('#Search_L3').val()) $(Data).attr("L3", $('#Search_L3').val())
                        if ($('#Search_L2').val()) $(Data).attr("L2", $('#Search_L2').val())
                        if ($('#Search_L1').val()) $(Data).attr("L1", $('#Search_L1').val())
                        Data.draw = d.draw;

                        return Data;

                    }
                },
                "columns": [
                    { "data": "row_num", sWidth: "5%" },//S#
                    { "data": "COAName", sWidth: "25%" },//Ledger
                    { "data": "Attr4", sWidth: "20%" },//Trade License
                    //{ "data": "COAHead" ,sWidth:"20%" },//Category
                    { "data": function (x) { return x.COAHead + "<br/><small>" + x.L2 + '</small><i class="fa fa-angle-double-right txt-primary m-r-5 m-l-5"></i><small>' + x.L3 + "</small>" }, sWidth: "23%" },//Category
                    //{ "data": function(x){return x.COAHead + "<br/><small>" + x.L3 + '</small>'} ,sWidth:"23%" },//Category

                    { "data": "Attr10", sWidth: "10%" },//Mobile
                    { "data": "Attr15", sWidth: "10%" },//VAT
                    { "data": "col_Action", sWidth: "10%" },//Action
                ],


                "columnDefs": [
                    {
                        "targets": [0, 6],
                        "sortable": false,
                        "className": "dt-center",

                    },
                ],

            });


        })//Ready

        function Get_GLCode() {
            if (!cboCategory.select2('data')[0])
                return;

            var category = cboCategory.select2('data')[0].element;

            if ($(category).attr('data-L3'))
                $('#CategoryDescription').html('<small>' + $(category).attr('data-L3') + '<i class="fa fa-angle-double-right txt-primary m-r-5 m-l-5"></i>' + $(category).attr('data-L2') + '</small>');
            else
                $('#CategoryDescription').html('');


            if (txtCOAID) //Retieve mode then do not generate new code in case of retrieve mode
            {
                return;
            }

            var Under = $(category).attr('data-COAID');

            if (!Under)
                return;

            var $request_glcode = $.ajax({
                //url: 'http://localhost:3321/webservice_Inventroid.asmx/GetGlCode?Under='+ Under,
                url: globalWebServiceInventoryPath + '/webservice_Inventroid.asmx/GetGlCode?Under=' + Under,
                dataType: "json"
            });

            $request_glcode.then(function (data) {

                if (txtGlCode)
                    txtGlCode.val(data.description);
            });
        }


        //Opening Balance Start
        function calculateOpeningBalance() {
            $('#total_opening_debit').html('')
            $('#total_opening_credit').html('')

            var total_opening_debit = 0, total_opening_credit = 0;

            $('tr', openingTableBody).each(function () {
                var txtDebit = $(this).find('.openingDebit').val();
                var txtCredit = $(this).find('.openingCredit').val();

                txtDebit = (Number(txtDebit) ? Number(txtDebit) : 0);
                txtCredit = (Number(txtCredit) ? Number(txtCredit) : 0);

                total_opening_debit += txtDebit;
                total_opening_credit += txtCredit;
            })
            $('#total_opening_debit').html(total_opening_debit)
            $('#total_opening_credit').html(total_opening_credit)

        }

        function updateOpeningBalance() {
            openingTableBody.children('tr:not(#opening-no-data)').remove();
            $('#invoice-no-data').fadeIn('fast');

            var Query = globalWebServiceInventoryPath + '/webservice_Inventroid.asmx/GetOpeningBalance';
            if (txtCOAID)
                Query += '?COAID=' + txtCOAID;

            var $request_DebitCost = $.ajax({

                url: Query,
                dataType: "json"
            });


            $request_DebitCost.then(function (data) {
                $('#opening-no-data').fadeOut('slow');

                for (var d = 0; d < data.Database.Table.length; d++) {
                    var location = data.Database.Table[d];
                    var dr = (Number(location.Debit) ? Number(location.Debit) : 0);
                    var cr = (Number(location.Credit) ? Number(location.Credit) : 0);
                    var bal = dr - cr;

                    $('<tr  data-Balance="' + bal + '" data-guid="' + location.GUID + '" data-godownid="' + location.GodownID + '" data-Row="' + JSON.stringify(location) + '">\r\n' +
                        '    <td name="col_CostCenter">' + location.GodownName + '</td>\r\n' +
                        '    <td name="col_Debit"><input type="number" min="0" class="openingDebit" placeholder="Debit" value="' + dr + '"/></td>\r\n' +
                        '    <td name="col_Credit"><input type="number" min="0" class="openingCredit" placeholder="Credit" value="' + cr + '"/></td>\r\n' +
                        '</tr>\r\n').hide().appendTo(openingTableBody).fadeIn("slow");
                }
                calculateOpeningBalance();
            });

        }
        //Opening Balance End

        function FillCombo() {

            //$(cboCategory).select2('data', null).trigger('change');
            $(cboCategory).empty();
            var option = new Option("--Select Category--", null, true, false);
            cboCategory.append(option);

            var $request_category = $.ajax({
                url: globalWebServiceInventoryPath + '/webservice_Inventroid.asmx/GetAccounts_Category?GLStartsWith=1.1.2',
                dataType: "json"
            });


            $request_category.then(function (data) {
                for (var d = 0; d < data.Database.Table.length; d++) {
                    var category = data.Database.Table[d];
                    var option = new Option(category.COAName, category.COAID, false, false);
                    $(option).attr('data-COAID', category.COAID + "")
                    $(option).attr('data-COAName', category.COAName + "")
                    $(option).attr('data-Degree', category.Degree + "")
                    $(option).attr('data-L3', category.L3 + "")//Added
                    $(option).attr('data-L2', category.L2 + "")//Added
                    $(option).attr('data-L1', category.L1 + "")//Added 
                    cboCategory.append(option);
                }
                cboCategory.trigger('change');
            });
        }
        function refreshTable()//Added for DataTable
        {
            $(table).DataTable().ajax.reload();//Added for DataTable
        }//Added for DataTable

        function doPost() {
            refreshTable();

            return;//Added for DataTable

            tableBody.find('tr:not(#invoice-no-data)').remove();
            $('#invoice-no-data').fadeIn('fast');

            //console.log( $(searchForm).serialize() );




            var $request_accounts = $.ajax({
                url: globalWebServiceInventoryPath + '/webservice_Inventroid.asmx/GetAccountsMasterForm?NatureID=14&SideBarID=' + SideBarID,
                dataType: "json",
                data: $(searchForm).serialize(),
            });

            $request_accounts.then(function (data) {
                if (data.Database.Table.length)
                    $('#invoice-no-data').fadeOut('fast');

                for (var i = 0; i < data.Database.Table.length; i++) {


                    var o = new Object();
                    o.RowNum = data.Database.Table[i].row_num ? data.Database.Table[i].row_num : "";
                    o.Ledger = data.Database.Table[i].COAName ? data.Database.Table[i].COAName : "";
                    o.Category = data.Database.Table[i].COAHead ? data.Database.Table[i].COAHead : "";
                    o.Under = data.Database.Table[i].Under;
                    o.COAID = data.Database.Table[i].COAID;
                    o.Attr2 = data.Database.Table[i].Attr2 ? data.Database.Table[i].Attr2 : "";
                    o.Attr3 = data.Database.Table[i].Attr3 ? data.Database.Table[i].Attr3 : "";
                    o.Attr4 = data.Database.Table[i].Attr4 ? data.Database.Table[i].Attr4 : "";
                    o.Attr5 = data.Database.Table[i].Attr5 ? data.Database.Table[i].Attr5 : "";
                    o.Attr6 = data.Database.Table[i].Attr6 ? data.Database.Table[i].Attr6 : "";
                    o.Attr7 = data.Database.Table[i].Attr7 ? data.Database.Table[i].Attr7 : "";
                    o.Attr8 = data.Database.Table[i].Attr8 ? data.Database.Table[i].Attr8 : "";
                    o.Attr9 = data.Database.Table[i].Attr9 ? data.Database.Table[i].Attr9 : "";
                    o.Attr10 = data.Database.Table[i].Attr10 ? data.Database.Table[i].Attr10 : "";
                    o.Attr11 = data.Database.Table[i].Attr11 ? data.Database.Table[i].Attr11 : "";
                    o.Attr12 = data.Database.Table[i].Attr12 ? data.Database.Table[i].Attr12 : "";
                    o.Attr13 = data.Database.Table[i].Attr13 ? data.Database.Table[i].Attr13 : "";
                    o.Attr14 = data.Database.Table[i].Attr14 ? data.Database.Table[i].Attr14 : "";
                    o.Attr15 = data.Database.Table[i].Attr15 ? data.Database.Table[i].Attr15 : "";
                    o.Attr16 = data.Database.Table[i].Attr16 ? data.Database.Table[i].Attr16 : "";
                    o.Attr17 = data.Database.Table[i].Attr17 ? data.Database.Table[i].Attr17 : "";

                    currentEditRow = $('<tr>\r\n' +
                        '    <td name="col_SNo"></td>\r\n' +
                        '    <td name="col_Ledger"></td>\r\n' +
                        '    <td name="col_Attr4"></td>\r\n' +
                        '    <td name="col_Category"></td>\r\n' +
                        '    <td name="col_Attr10"></td>\r\n' +
                        '    <td name="col_Attr15"></td>\r\n' +
                        '    <td name="col_Action" style="width: 80px;text-align: center;vertical-align: middle">\r\n' +
                        '\r\n' +
                        '        <i class="fa fa-pencil fa-lg" style="text-align: left;color: blue;cursor:pointer;" onclick="javascript:editRow(this);"></i><br/>\r\n' +
                        '        <i class="fa fa-trash-o fa-lg" style="text-align: right;color: red;cursor:pointer;" onclick="javascript:deleteRow(this);"></i>\r\n' +
                        '    \r\n' +
                        '    </td>\r\n' +
                        '\r\n' +
                        '</tr>\r\n')



                    currentEditRow.attr('data-Flag', 'R');
                    currentEditRow.children("td[name='col_SNo']").html(o.RowNum + '<br/>');
                    currentEditRow.children("td[name='col_Ledger']").html('<mark>' + o.Ledger + '</mark>');
                    currentEditRow.children("td[name='col_Attr4']").html('<mark>' + o.Attr4 + '</mark>');
                    currentEditRow.children("td[name='col_Category']").html('' + o.Category + '<br/>');
                    currentEditRow.children("td[name='col_Attr10']").html('<mark>' + o.Attr10 + '</mark>');
                    currentEditRow.children("td[name='col_Attr15']").html('<mark>' + o.Attr15 + '</mark>');

                    currentEditRow.attr("data-Row", JSON.stringify(o));

                    $(currentEditRow).hide()
                        .prependTo(tableBody)
                        .fadeIn("slow");

                    currentEditRow = null;

                }

            });

        }


        function ClearForm(IsCancel) {

            $('#chkVATRegistered').prop('checked', false).trigger('change');
            txtAttr18.val('');

            txtCOAID = "";

            cboCategory.val(null).trigger('change');
            $(cboCategory).prop("disabled", false);

            cboAttr2.val(null).trigger('change');
            $(cboAttr2).prop("disabled", false);

            cboAttr3.val(null).trigger('change');
            $(cboAttr3).prop("disabled", false);

            cboAttr5.val(null).trigger('change');
            $(cboAttr5).prop("disabled", false);


            txtAccountName.val('');
            txtAttr4.val('');
            txtAttr6.val('');
            txtAttr7.val('');
            txtAttr8.val('');
            txtAttr9.val('');
            txtAttr10.val('');
            txtAttr11.val('');
            txtAttr12.val('');
            txtAttr13.val('');
            txtAttr14.val('');
            txtAttr15.val('');
            txtAttr16.val('');
            txtAttr17.val('');
            txtContactPerson1.val('');
            txtContactDesignation1.val('');
            txtContactPerson2.val('');
            txtContactDesignation2.val('');
            txtContactPerson3.val('');
            txtContactDesignation3.val('');
            $("#RetreiveKeyField").text('');
            txtAccountName.focus();

            tableBody.find('tr:not(#invoice-no-data)').remove();
            updateOpeningBalance();
            FillCombo();
            doPost();
            if (IsCancel == true) {
                $('#supplier-tabs').click();
            }
        }

        function deleteRow(sender) {
            bootbox.confirm({
                title: "Delete Item",
                message: "Do you want to delete this row?",
                buttons: {
                    cancel: {
                        label: '<i class="fa fa-times"></i> Cancel'
                    },
                    confirm: {
                        label: '<i class="fa fa-check"></i> Confirm'
                    }
                },
                callback: function (result) {
                    if (result) {
                        currentEditRow = $(sender).parents('tr');
                        var row = $(table).DataTable().row(currentEditRow);//Added for DataTable
                        var data = row.data();//Added for DataTable
                        //var data =JSON.parse(currentEditRow.attr("data-Row"));//Removed for DataTable

                        txtCOAID = (data.COAID);

                        $.ajax({

                            url: globalWebServiceInventoryPath + '/webservice_Inventroid.asmx/DeleteAccounts?SideBarID=' + SideBarID + '&COAID=' + txtCOAID,

                            type: 'post',
                            dataType: 'json',
                            //timeout: 2000,
                            // data: JSON.stringify(Data),
                            beforeSend: function () {
                                (form).find(":submit").prop("disabled", "disabled");
                            },
                            success: function (data) {
                                if (data.status == "ok") {

                                    $.notify({ message: data.description }, alertTypeSuccess);

                                    $(currentEditRow).remove();

                                    var visibleCount = tableBody.children('tr:visible').length;
                                    if (visibleCount == 0) {
                                        $('#invoice-no-data').fadeIn('fast');
                                    }
                                    ClearForm();


                                }
                                else {

                                    $.notify({ message: data.description }, alertTypeCritical);
                                }

                            }, error: function (jqXHR, textStatus) {
                                $.notify({ message: "Error, please check your internet connection status!" }, alertTypeCritical);
                            }, complete: function () {
                                $(form).find(":submit").prop("disabled", null);
                            }
                        });

                        // $.notify({message:'Row deleted'},alertTypeInfo);
                    }
                }
            });
        }

        function editRow(sender) {
            currentEditRow = $(sender).parents('tr');

            var row = $(table).DataTable().row(currentEditRow);//Added for DataTable
            var data = row.data();//Added for DataTable
            //var data =JSON.parse(currentEditRow.attr("data-Row"));//Removed for DataTable

            // $(cboCategory).prop("disabled", true);
            cboCategory.val(data.Under).trigger('change')
            cboAttr2.val(data.Attr2).trigger('change')
            cboAttr3.val(data.Attr3).trigger('change')
            cboAttr5.val(data.Attr5).trigger('change')
            txtAccountName.val(data.COAName);
            txtCOAID = (data.COAID);

            txtAttr4.val(data.Attr4);
            txtAttr6.val(data.Attr6);
            txtAttr7.val(data.Attr7);
            txtAttr8.val(data.Attr8);
            txtAttr9.val(data.Attr9);
            txtAttr10.val(data.Attr10);
            txtAttr11.val(data.Attr11);
            txtAttr12.val(data.Attr12);
            txtAttr13.val(data.Attr13);
            txtAttr14.val(data.Attr14);
            txtAttr15.val(data.Attr15);
            txtAttr16.val(data.Attr16);
            txtAttr17.val(data.Attr17);
            txtContactPerson1.val(data.ContactPerson1);
            txtContactDesignation1.val(data.ContactDesignation1);
            txtContactPerson2.val(data.ContactPerson2);
            txtContactDesignation2.val(data.ContactDesignation2);
            txtContactPerson3.val(data.ContactPerson3);
            txtContactDesignation3.val(data.ContactDesignation3);

            $("#RetreiveKeyField").text('(EDIT MODE) ' + data.GLCode);

            txtAttr18.val(data.Attr18);
            if (data.Attr20 && ((data.Attr20 + "").toLowerCase()) == "true") {
                $('#chkVATRegistered').prop('checked', true).trigger('change');
            }
            else {
                $('#chkVATRegistered').prop('checked', false).trigger('change');
            }

            updateOpeningBalance();
            $('#basic-tab').click();
        }

        function submitInvoice(sender) {
            event.preventDefault();
            bootbox.confirm({
                title: "Submit",
                message: "Do you want to Submit ths document?",
                buttons: {
                    cancel: {
                        label: '<i class="fa fa-times"></i> Cancel'
                    },
                    confirm: {
                        label: '<i class="fa fa-check"></i> Confirm'
                    }
                },
                callback: function (result) {
                    if (result) {


                        //Validation checks

                        var category;
                        var attr2;
                        var attr3;
                        var attr5;
                        if (cboCategory.select2('data')[0])
                            category = cboCategory.select2('data')[0].element;

                        if (cboAttr2.select2('data')[0])
                            attr2 = cboAttr2.select2('data')[0].element;

                        if (cboAttr3.select2('data')[0])
                            attr3 = cboAttr3.select2('data')[0].element;

                        if (cboAttr5.select2('data')[0])
                            attr5 = cboAttr5.select2('data')[0].element;


                        if (!txtAccountName.val()) {
                            $.notify({ message: 'Please Enter Bank Account Name' }, alertTypeCritical);
                            return;
                        }

                        var Data = new Object();

                        Data.Under = (category) ? $(category).attr('data-COAID') : null;
                        Data.Attr2 = (attr2) ? $(attr2).attr('data-MasterValueID') : null;
                        Data.Attr3 = (attr3) ? $(attr3).attr('data-MasterValueID') : null;
                        Data.Attr5 = (attr5) ? $(attr5).attr('data-MasterValueID') : null;


                        Data.AccountTitle = txtAccountName.val();
                        Data.Degree = $(category).attr('data-Degree');
                        Data.COAID = txtCOAID;

                        Data.Attr4 = txtAttr4.val();
                        Data.Attr6 = txtAttr6.val();
                        Data.Attr7 = txtAttr7.val();
                        Data.Attr8 = txtAttr8.val();
                        Data.Attr9 = txtAttr9.val();
                        Data.Attr10 = txtAttr10.val();
                        Data.Attr11 = txtAttr11.val();
                        Data.Attr12 = txtAttr12.val();
                        Data.Attr13 = txtAttr13.val();
                        Data.Attr14 = txtAttr14.val();
                        Data.Attr15 = txtAttr15.val();
                        Data.Attr16 = txtAttr16.val();
                        Data.Attr17 = txtAttr17.val();
                        Data.ContactPerson1 = txtContactPerson1.val();
                        Data.ContactDesignation1 = txtContactDesignation1.val();
                        Data.ContactPerson2 = txtContactPerson2.val();
                        Data.ContactDesignation2 = txtContactDesignation2.val();
                        Data.ContactPerson3 = txtContactPerson3.val();
                        Data.ContactDesignation3 = txtContactDesignation3.val();
                        Data.NatureID = 14;
                        Data.Attr18 = txtAttr18.val();
                        if ($('#chkVATRegistered:checked') && $('#chkVATRegistered:checked').length > 0) {
                            Data.Attr20 = true;
                        }
                        else {
                            Data.Attr20 = false;
                        }


                        //Opening Balance Start
                        var detail = [];
                        Data.detail = detail;

                        openingTableBody.children('tr').each(function () {
                            if ($(this).attr('data-Row')) {
                                var d = new Object()
                                d.GUID = $(this).attr('data-guid');
                                d.CostCenterID = $(this).attr('data-godownid');
                                d.Balance = $(this).attr('data-Balance');

                                detail.push(d);
                            }
                        });

                        //console.log(Data); return;
                        //Opening Balance End

                        Data.SideBarID = SideBarID;
                        ///console.log(Data);

                        $.ajax({

                            url: globalWebServiceInventoryPath + '/webservice_Inventroid.asmx/InsertAccounts',

                            type: 'post',
                            dataType: 'json',
                            //timeout: 2000,
                            data: JSON.stringify(Data),
                            beforeSend: function () {
                                (form).find(":submit").prop("disabled", "disabled");
                            },
                            success: function (data) {

                                if (data.status == "ok") {

                                    $.notify({ message: data.description }, alertTypeSuccess);
                                    $(form).trigger('reset');

                                    ClearForm();


                                } else {

                                    $.notify({ message: data.description }, alertTypeCritical);

                                }
                            }, error: function (jqXHR, textStatus) {
                                $.notify({ message: "Error, please check your internet connection status!" }, alertTypeCritical);
                            }, complete: function () {
                                $(form).find(":submit").prop("disabled", null);
                            }
                        });
                    }

                }

            });


        }

        function resetInvoice(sender) {
            event.preventDefault();

            bootbox.confirm({
                title: "Reset Invoice",
                message: "Do you want to Reset ths document?",
                buttons: {
                    cancel: {
                        label: '<i class="fa fa-times"></i> Cancel'
                    },
                    confirm: {
                        label: '<i class="fa fa-check"></i> Confirm'
                    }
                },
                callback: function (result) {
                    if (result) {
                        ClearForm();

                        $.notify({ message: 'Form cleared' }, alertTypeInfo);
                    }
                }
            });

        }
    </script>


<div class="datepickers-container" id="datepickers-container"><div class="datepicker -bottom-left- -from-bottom-"><i class="datepicker--pointer"></i><nav class="datepicker--nav"><div class="datepicker--nav-action" data-action="prev"><svg><path d="M 17,12 l -5,5 l 5,5"></path></svg></div><div class="datepicker--nav-title">February, <i>2020</i></div><div class="datepicker--nav-action" data-action="next"><svg><path d="M 14,12 l 5,5 l -5,5"></path></svg></div></nav><div class="datepicker--content"><div class="datepicker--days datepicker--body active"><div class="datepicker--days-names"><div class="datepicker--day-name -weekend-">Su</div><div class="datepicker--day-name">Mo</div><div class="datepicker--day-name">Tu</div><div class="datepicker--day-name">We</div><div class="datepicker--day-name">Th</div><div class="datepicker--day-name">Fr</div><div class="datepicker--day-name -weekend-">Sa</div></div><div class="datepicker--cells datepicker--cells-days"><div class="datepicker--cell datepicker--cell-day -weekend- -other-month-" data-date="26" data-month="0" data-year="2020">26</div><div class="datepicker--cell datepicker--cell-day -other-month-" data-date="27" data-month="0" data-year="2020">27</div><div class="datepicker--cell datepicker--cell-day -other-month-" data-date="28" data-month="0" data-year="2020">28</div><div class="datepicker--cell datepicker--cell-day -other-month-" data-date="29" data-month="0" data-year="2020">29</div><div class="datepicker--cell datepicker--cell-day -other-month-" data-date="30" data-month="0" data-year="2020">30</div><div class="datepicker--cell datepicker--cell-day -other-month-" data-date="31" data-month="0" data-year="2020">31</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="1" data-month="1" data-year="2020">1</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="2" data-month="1" data-year="2020">2</div><div class="datepicker--cell datepicker--cell-day" data-date="3" data-month="1" data-year="2020">3</div><div class="datepicker--cell datepicker--cell-day" data-date="4" data-month="1" data-year="2020">4</div><div class="datepicker--cell datepicker--cell-day" data-date="5" data-month="1" data-year="2020">5</div><div class="datepicker--cell datepicker--cell-day" data-date="6" data-month="1" data-year="2020">6</div><div class="datepicker--cell datepicker--cell-day" data-date="7" data-month="1" data-year="2020">7</div><div class="datepicker--cell datepicker--cell-day -weekend- -current-" data-date="8" data-month="1" data-year="2020">8</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="9" data-month="1" data-year="2020">9</div><div class="datepicker--cell datepicker--cell-day" data-date="10" data-month="1" data-year="2020">10</div><div class="datepicker--cell datepicker--cell-day" data-date="11" data-month="1" data-year="2020">11</div><div class="datepicker--cell datepicker--cell-day" data-date="12" data-month="1" data-year="2020">12</div><div class="datepicker--cell datepicker--cell-day" data-date="13" data-month="1" data-year="2020">13</div><div class="datepicker--cell datepicker--cell-day" data-date="14" data-month="1" data-year="2020">14</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="15" data-month="1" data-year="2020">15</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="16" data-month="1" data-year="2020">16</div><div class="datepicker--cell datepicker--cell-day" data-date="17" data-month="1" data-year="2020">17</div><div class="datepicker--cell datepicker--cell-day" data-date="18" data-month="1" data-year="2020">18</div><div class="datepicker--cell datepicker--cell-day" data-date="19" data-month="1" data-year="2020">19</div><div class="datepicker--cell datepicker--cell-day" data-date="20" data-month="1" data-year="2020">20</div><div class="datepicker--cell datepicker--cell-day" data-date="21" data-month="1" data-year="2020">21</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="22" data-month="1" data-year="2020">22</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="23" data-month="1" data-year="2020">23</div><div class="datepicker--cell datepicker--cell-day" data-date="24" data-month="1" data-year="2020">24</div><div class="datepicker--cell datepicker--cell-day" data-date="25" data-month="1" data-year="2020">25</div><div class="datepicker--cell datepicker--cell-day" data-date="26" data-month="1" data-year="2020">26</div><div class="datepicker--cell datepicker--cell-day" data-date="27" data-month="1" data-year="2020">27</div><div class="datepicker--cell datepicker--cell-day" data-date="28" data-month="1" data-year="2020">28</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="29" data-month="1" data-year="2020">29</div></div></div></div></div><div class="datepicker -bottom-left- -from-bottom-"><i class="datepicker--pointer"></i><nav class="datepicker--nav"><div class="datepicker--nav-action" data-action="prev"><svg><path d="M 17,12 l -5,5 l 5,5"></path></svg></div><div class="datepicker--nav-title">February, <i>2020</i></div><div class="datepicker--nav-action" data-action="next"><svg><path d="M 14,12 l 5,5 l -5,5"></path></svg></div></nav><div class="datepicker--content"><div class="datepicker--days datepicker--body active"><div class="datepicker--days-names"><div class="datepicker--day-name -weekend-">Su</div><div class="datepicker--day-name">Mo</div><div class="datepicker--day-name">Tu</div><div class="datepicker--day-name">We</div><div class="datepicker--day-name">Th</div><div class="datepicker--day-name">Fr</div><div class="datepicker--day-name -weekend-">Sa</div></div><div class="datepicker--cells datepicker--cells-days"><div class="datepicker--cell datepicker--cell-day -weekend- -other-month-" data-date="26" data-month="0" data-year="2020">26</div><div class="datepicker--cell datepicker--cell-day -other-month-" data-date="27" data-month="0" data-year="2020">27</div><div class="datepicker--cell datepicker--cell-day -other-month-" data-date="28" data-month="0" data-year="2020">28</div><div class="datepicker--cell datepicker--cell-day -other-month-" data-date="29" data-month="0" data-year="2020">29</div><div class="datepicker--cell datepicker--cell-day -other-month-" data-date="30" data-month="0" data-year="2020">30</div><div class="datepicker--cell datepicker--cell-day -other-month-" data-date="31" data-month="0" data-year="2020">31</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="1" data-month="1" data-year="2020">1</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="2" data-month="1" data-year="2020">2</div><div class="datepicker--cell datepicker--cell-day" data-date="3" data-month="1" data-year="2020">3</div><div class="datepicker--cell datepicker--cell-day" data-date="4" data-month="1" data-year="2020">4</div><div class="datepicker--cell datepicker--cell-day" data-date="5" data-month="1" data-year="2020">5</div><div class="datepicker--cell datepicker--cell-day" data-date="6" data-month="1" data-year="2020">6</div><div class="datepicker--cell datepicker--cell-day" data-date="7" data-month="1" data-year="2020">7</div><div class="datepicker--cell datepicker--cell-day -weekend- -current-" data-date="8" data-month="1" data-year="2020">8</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="9" data-month="1" data-year="2020">9</div><div class="datepicker--cell datepicker--cell-day" data-date="10" data-month="1" data-year="2020">10</div><div class="datepicker--cell datepicker--cell-day" data-date="11" data-month="1" data-year="2020">11</div><div class="datepicker--cell datepicker--cell-day" data-date="12" data-month="1" data-year="2020">12</div><div class="datepicker--cell datepicker--cell-day" data-date="13" data-month="1" data-year="2020">13</div><div class="datepicker--cell datepicker--cell-day" data-date="14" data-month="1" data-year="2020">14</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="15" data-month="1" data-year="2020">15</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="16" data-month="1" data-year="2020">16</div><div class="datepicker--cell datepicker--cell-day" data-date="17" data-month="1" data-year="2020">17</div><div class="datepicker--cell datepicker--cell-day" data-date="18" data-month="1" data-year="2020">18</div><div class="datepicker--cell datepicker--cell-day" data-date="19" data-month="1" data-year="2020">19</div><div class="datepicker--cell datepicker--cell-day" data-date="20" data-month="1" data-year="2020">20</div><div class="datepicker--cell datepicker--cell-day" data-date="21" data-month="1" data-year="2020">21</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="22" data-month="1" data-year="2020">22</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="23" data-month="1" data-year="2020">23</div><div class="datepicker--cell datepicker--cell-day" data-date="24" data-month="1" data-year="2020">24</div><div class="datepicker--cell datepicker--cell-day" data-date="25" data-month="1" data-year="2020">25</div><div class="datepicker--cell datepicker--cell-day" data-date="26" data-month="1" data-year="2020">26</div><div class="datepicker--cell datepicker--cell-day" data-date="27" data-month="1" data-year="2020">27</div><div class="datepicker--cell datepicker--cell-day" data-date="28" data-month="1" data-year="2020">28</div><div class="datepicker--cell datepicker--cell-day -weekend-" data-date="29" data-month="1" data-year="2020">29</div></div></div></div></div></div></body></html>
<script type="text/javascript">
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
  alert(event.latLng);
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>