
<div id="screen[index]" style="width: 100%;height:100%">
    <div class="card card-custom card-stretch">
        <div class="card-body" style="padding:0.75rem">
            <ul class="nav nav-tabs nav-tabs-line nav-tabs-line-brand" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="general-tab" data-toggle="tab" style="padding-top:0" href="#general">
                       <i class="flaticon-suitcase"></i> General
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="project-tab" data-toggle="tab" style="padding-top:0" href="#project" aria-controls="project">
                       <i class="flaticon-time-2"></i> Project
                    </a>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade active show" id="general" role="tabpanel" aria-labelledby="general-tab">
                    <div class="row">
                        <div class="col-lg-12">
                            <!--begin::Form-->
                            <form class="form">
                                <div class="card-body row">
                                    <div class="col-lg-4">
                                        <div class="form-group row" style="display: none;">
                                            <label class="col-lg-3 col-form-label">Customer ID:</label>
                                            <div class="col-lg-3">
                                               <input type="text" class="form-control" id="txtCustomerID">
                                                <span class="form-text text-muted"></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label">Customer Code:</label>
                                            <div class="col-lg-4">
                                               <input type="text" class="form-control" id="txtCustomerCode">
                                                <span class="form-text text-muted"></span>
                                            </div>
                                            <div class="col-lg-4" style="align-self: center;">
                                            <label class="checkbox">
                                                <input type="checkbox" id="chkCustomerActive" checked="checked"> Active
                                            </label>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label">Address:</label>
                                            <div class="col-lg-8">
                                               <input type="text" class="form-control" id="txtCustomerAddress1">
                                                <span class="form-text text-muted"></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label"></label>
                                            <div class="col-lg-8">
                                               <input type="text" class="form-control" id="txtCustomerAddress2">
                                                <span class="form-text text-muted"></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label"></label>
                                            <div class="col-lg-8">
                                               <input type="email" class="form-control" id="txtCustomerAddress3">
                                                <span class="form-text text-muted"></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label"></label>
                                            <div class="col-lg-8">
                                               <input type="text" class="form-control" id="txtCustomerAddress4">
                                                <span class="form-text text-muted"></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label"></label>
                                            <div class="col-lg-8">
                                               <input type="text" class="form-control" id="txtCustomerAddress5">
                                                <span class="form-text text-muted"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label">Customer Name:</label>
                                            <div class="col-lg-8">
                                               <input type="text" class="form-control" id="txtCustomerName">
                                                <span class="form-text text-muted"></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label">Telephone:</label>
                                            <div class="col-lg-5">
                                               <input type="text" class="form-control" id="txtCustomerTelephone">
                                                <span class="form-text text-muted"></span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label">Software Information:</label>
                                            <div class="col-lg-8">
                                                <textarea class="form-control" rows="7" id="txtCustomerSoftwareInfo"></textarea>
                                                <span class="form-text text-muted"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label">Billing Cycle:</label>
                                            <div class="col-lg-8">
                                                <input type="text" class="form-control" id="txtCustomerBillingCycle">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label">Remarks:</label>
                                            <div class="col-lg-8">
                                                <textarea class="form-control" rows="5" id="txtCustomerRemarks"></textarea>
                                                <span class="form-text text-muted"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <!--end::Form-->
                        </div>
                        <div class="col-lg-12 kt-separator kt-separator--dashed"></div>
                        <div class="col-lg-12">
                            <!--begin: Datatable -->
                            <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded" style="">
                                <table class="kt-datatable__table" id="contact_table_data">
                                    <thead class="kt-datatable__head" style="background-color: #E0E0E0">
                                        <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                        <th data-field="contactid" class="kt-datatable__cell" id="col_contactid" name="contact_sort_column" onclick="sortColumn(this,'col_contactid','asc');" style="display: none;">
                                            ID<span><i class="fa"></i></span>
                                        </th>
                                        <th data-field="contactname" class="kt-datatable__cell" style="width: 15%;" id="col_contactname" name="contact_sort_column" onclick="sortColumn(this,'col_contactname','desc');">
                                            Contact Name<span><i class="fa fa-sort-up"></i></span>
                                        </th>
                                        <th data-field="contactdept" class="kt-datatable__cell" style="width: 10%;" id="col_contactdept" name="contact_sort_column" onclick="sortColumn(this,'col_contactdept','asc');">
                                            Department<span><i class="fa"></i></span>
                                        </th>
                                        <th data-field="contactposition" class="kt-datatable__cell" style="width: 15%;" id="col_contactposition" name="contact_sort_column" onclick="sortColumn(this,'col_contactposition','asc');">
                                            Designation<span><i class="fa"></i></span>
                                        </th>
                                        <th data-field="contactemail" class="kt-datatable__cell" style="width: 15%;" id="col_contactemail" name="contact_sort_column" onclick="sortColumn(this,'col_contactemail','asc');">
                                            Email<span><i class="fa"></i></span>
                                        </th>
                                        <th data-field="contactphone" class="kt-datatable__cell" style="width: 10%;" id="col_contactphone" name="contact_sort_column" onclick="sortColumn(this,'col_contactphone','asc');">
                                            Telephone<span><i class="fa"></i></span>
                                        </th>
                                        <th data-field="contactmobile" class="kt-datatable__cell" style="width: 10%;" id="col_contactmobile" name="contact_sort_column" onclick="sortColumn(this,'col_contactmobile','asc');">
                                            Mobile<span><i class="fa"></i></span>
                                        </th>
                                        <th data-field="contactreportto" class="kt-datatable__cell" style="width: 15%;" id="col_contactreportto" name="contact_sort_column" onclick="sortColumn(this,'col_contactreportto','asc');">
                                            Report To<span><i class="fa"></i></span>
                                        </th>
                                        <th data-field="contactstatus" class="kt-datatable__cell" style="width: 10%;" id="col_contactstatus" name="contact_sort_column" onclick="sortColumn(this,'col_contactstatus','asc');">
                                            Status<span><i class="fa"></i></span>
                                        </th>
                                        <th data-field="filter" class="kt-datatable__cell" style="width: 2%;" id="col_filter">
                                            <button type="button" class="btn btn-default btn-sm btn-icon btn-icon-md" id="btnFilterContact" onclick="filterRow('contact-row-filter',this,true);"><i class="fa fa-filter"></i></button>
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody class="kt-datatable__body" style="" id="contact-list-table">
                                        <tr data-row="contact-rows-0" class="dnd-moved kt-datatable__row" style="left: 0px;" id="contact-row-filter">
                                            <td data-field="contactid" class="kt-datatable__cell" id="col_contactid" style="display: none;">&nbsp;</td>
                                            <td data-field="contactname" class="kt-datatable__cell" id="col_contactname">
                                               <input type="text" class="form-control" name="contact_input_filter" id="txtcolcontactname" onkeyup="filterData(this,1);" />
                                            </td>
                                            <td data-field="contactdept" class="kt-datatable__cell" id="col_contactdept">
                                               <input type="text" class="form-control" name="contact_input_filter" id="txtcolcontactdept" onkeyup="filterData(this,2);" />
                                            </td>
                                            <td data-field="contactposition" class="kt-datatable__cell" id="col_contactposition">
                                               <input type="text" class="form-control" name="contact_input_filter" id="txtcolcontactposition" onkeyup="filterData(this,3);" />
                                            </td>
                                            <td data-field="contactemail" class="kt-datatable__cell" id="col_contactemail">
                                               <input type="text" class="form-control" name="contact_input_filter" id="txtcolcontactemail" onkeyup="filterData(this,4);" />
                                            </td>
                                            <td data-field="contactphone" class="kt-datatable__cell" id="col_contactphone">
                                               <input type="text" class="form-control" name="contact_input_filter" id="txtcolcontactphone" onkeyup="filterData(this,5);" />
                                            </td>
                                            <td data-field="contactmobile" class="kt-datatable__cell" id="col_contactmobile">
                                               <input type="text" class="form-control" name="contact_input_filter" id="txtcolcontactmobile" onkeyup="filterData(this,6);" />
                                            </td>
                                            <td data-field="contactreportto" class="kt-datatable__cell" id="col_contactreportto">
                                               <input type="text" class="form-control" name="contact_input_filter" id="txtcolcontactreportto" onkeyup="filterData(this,7);" />
                                            </td>
                                            <td data-field="contactstatus" class="kt-datatable__cell" id="col_contactstatus">
                                               <input type="text" class="form-control" name="contact_input_filter" id="txtcolcontactstatus" onkeyup="filterData(this,8);" />
                                            </td>
                                            <td data-field="filter" class="kt-datatable__cell" id="col_filter">&nbsp;</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <br>
                                <div class="col-lg-12 text-right">
                                <button type="button" class="btn btn-success btn-sm btn-icon btn-icon-md" id="btnNewContact" onclick="newContact();"><i class="fa fa-plus"></i></button>
                                </div>
                            </div>                        
                            <div class="col-lg-12 text-right">
                                <button type="reset" class="btn btn-secondary" id="btnCancelCustomer" onclick="prevscreen();">Cancel</button>
                                <button type="reset" class="btn btn-primary" id="btnSaveCustomer" onclick="addCustomer();">Save</button>
                            </div>
                            <!--end: Datatable -->
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="project" role="tabpanel" aria-labelledby="project-tab">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card-body row">
                                <div class="col-lg-4">
                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label">Customer Code:</label>
                                        <div class="col-lg-6">
                                           <input type="text" class="form-control" id="txtCustCode" disabled="disabled">
                                            <span class="form-text text-muted"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label">Customer Name:</label>
                                        <div class="col-lg-8">
                                           <input type="text" class="form-control" id="txtCustName" disabled="disabled">
                                            <span class="form-text text-muted"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 kt-separator kt-separator--dashed"></div>
                        <div class="col-lg-12">
                            <!--begin: Datatable -->
                            <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded" style="">
                                <table class="kt-datatable__table" style="min-height: 600px;" id="project_table_data">
                                    <thead class="kt-datatable__head">
                                        <tr class="dnd-moved kt-datatable__row" style="left: 0px;">
                                            <th data-field="projid" class="kt-datatable__cell" id="col_projid" name="project_sort_column" onclick="sortColumn(this,'col_projid','asc');" style="display: none;">
                                                ID<span><i class="fa"></i></span>
                                            </th>
                                            <th data-field="projcode" class="kt-datatable__cell" style="width: 10%;" id="col_projcode" name="project_sort_column" onclick="sortColumn(this,'col_projcode','desc');">
                                                Job Plan No.<span><i class="fa fa-sort-up"></i></span>
                                            </th>
                                            <th data-field="projname" class="kt-datatable__cell" style="width: 20%;" id="col_projname" name="project_sort_column" onclick="sortColumn(this,'col_projname','asc');">
                                                Job Title<span><i class="fa"></i></span>
                                            </th>
                                            <th data-field="projquotno" class="kt-datatable__cell" style="width: 10%;" id="col_projquotno" name="project_sort_column" onclick="sortColumn(this,'col_projquotno','asc');">
                                                Quotation Number<span><i class="fa"></i></span>
                                            </th>
                                            <th data-field="projstart" class="kt-datatable__cell" style="width: 10%;" id="col_projstart" name="project_sort_column" onclick="sortColumn(this,'col_projstart','asc');">
                                                Project Start Date<span><i class="fa"></i></span>
                                            </th>
                                            <th data-field="projend" class="kt-datatable__cell" style="width: 10%;" id="col_projend" name="project_sort_column" onclick="sortColumn(this,'col_projend','asc');">
                                                Project End Date<span><i class="fa"></i></span>
                                            </th>
                                            <th data-field="projcustrep" class="kt-datatable__cell" style="width: 15%;" id="col_projcustrep" name="project_sort_column" onclick="sortColumn(this,'col_projcustrep','asc');">
                                                Customer PM Name<span><i class="fa"></i></span>
                                            </th>
                                            <th data-field="projstatus" class="kt-datatable__cell" style="width: 8%;" id="col_projstatus" name="project_sort_column" onclick="sortColumn(this,'col_projstatus','asc');">
                                                Status<span><i class="fa"></i></span>
                                            </th>
                                            <th data-field="filter" class="kt-datatable__cell" id="col_filter">
                                                <button type="button" class="btn btn-default btn-sm btn-icon btn-icon-md" id="btnFilterProject" onclick="filterRow('project-row-filter',this,true);"><i class="fa fa-filter"></i></button>
                                            </th>
                                            <th data-field="blank" class="kt-datatable__cell" id="col_blank">&nbsp;</th>
                                        </tr>
                                    </thead>
                                    <tbody class="kt-datatable__body" style="" id="project-list-table">
                                        <tr data-row="project-rows-0" class="dnd-moved kt-datatable__row" style="left: 0px;" id="project-row-filter">
                                            <td data-field="projid" class="kt-datatable__cell" id="col_projid" style="display: none;">&nbsp;</td>
                                            <td data-field="projcode" class="kt-datatable__cell" id="col_projcode">
                                               <input type="text" class="form-control" name="project_input_filter" id="txtcolprojcode" onkeyup="filterData(this,1);" />
                                            </td>
                                            <td data-field="projname" class="kt-datatable__cell" id="col_projname">
                                               <input type="text" class="form-control" name="project_input_filter" id="txtcolprojname" onkeyup="filterData(this,2);" />
                                            </td>
                                            <td data-field="quotno" class="kt-datatable__cell" id="col_quotno">
                                               <input type="text" class="form-control" name="project_input_filter" id="txtcolquotno" onkeyup="filterData(this,3);" />
                                            </td>
                                            <td data-field="projstart" class="kt-datatable__cell" id="col_projstart">
                                               <input type="text" class="form-control" name="project_input_filter" id="txtcolstart" onkeyup="filterData(this,4);" />
                                            </td>
                                            <td data-field="projend" class="kt-datatable__cell" id="col_projend">
                                               <input type="text" class="form-control" name="project_input_filter" id="txtcolend" onkeyup="filterData(this,5);" />
                                            </td>
                                            <td data-field="custrep" class="kt-datatable__cell" id="col_custrep">
                                               <input type="text" class="form-control" name="project_input_filter" id="txtcolcustrep" onkeyup="filterData(this,6);" />
                                            </td>
                                            <td data-field="projstatus" class="kt-datatable__cell" id="col_projstatus">
                                               <input type="text" class="form-control" name="project_input_filter" id="txtcolprojstatus" onkeyup="filterData(this,7);" />
                                            </td>
                                            <td data-field="filter" class="kt-datatable__cell" id="col_filter">&nbsp;</td>
                                            <td data-field="blank" class="kt-datatable__cell" id="col_blank">&nbsp;</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!--end: Datatable -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- button to trigger the things -->
        <button id="activatebuttonscreen[index]" onclick='reactivatescreen[index]();' style="display: none;">activate screen button</button>
    </div>
</div>
<div id="screen[index]a" style="width: 100%;height:100%"> 

</div>
<script>
    // $('.table').dragableColumns();
    $(document).ready(function () {
        filterRow("contact-row-filter",this,false);
        filterRow("project-row-filter",this,false);
    });
</script>
<script type="text/javascript">
    function reactivatescreen[index]() {
        swal2("activation screen [index]");
    }
</script>