@extends('Admin/layout')
@section('title','Commission Calculation')
@section('content')
@if(has_permission('Report','Brokerage Calculation'))
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                <h4 class="card-title mb-0 flex-grow-1">Commission Calculation </h4>
          
                <form action="{{route('visitportal.CommissionCalculation')}}" class="g-3" method="post" >
                        {{csrf_field()}}
                        <div class="row" >
                            <div class="col-md-2" >
                                <label for="validationDefault01" class="form-label">Month Name</label>
                                <select class="single-select form-control" id="monthname" name="monthname">
                                        <option value="" >Select Month Name</option>
                                        @if(!empty($month_names))
                                            @foreach($month_names as $key => $value)
                                                <option value="{{$value}}" {{$monthname == $value ? 'selected' : ''}} >{{$value}}</option>
                                            @endforeach
                                        @endif
                                        
                                </select>
                            </div>
                            <div class="col-md-2" >
                                <label for="validationDefault01" class="form-label">Year</label>
                                <select class="single-select form-control" id="year" name="year">
                                        <option value="" >Select Year</option>
                                        @if($start_year != "")
                                            @for($i = date("Y"); $i >= $start_year ; $i--)
                                                <option value="{{$i}}" {{$year == $i ? 'selected' : ''}}  >{{$i}}</option>
                                            @endfor
                                        @endif
                                        
                                </select>
                            </div>


                            <div class="col-md-1">
                                <div class="form-group" style="margin-top: 6px;">
                                    <input id="btnsearch" type="submit" name="submitbtn" class="form-control btn btn-primary"  style="margin-top: 20px;width:100%" value="View">
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="form-group" style="margin-top: 6px;">
                                    <input id="btnsearch" type="submit" name="submitbtn" class="form-control  btn btn-success"  style="margin-top: 20px;width:100%" value="Export">
                                </div>
                            </div>
                            <div class="col-md-4"></div>
                            <div class="col-md-2" style="    text-align: right;">
                                <div class="form-group" style="margin-top: 6px;">
                                    <button id="btnsearch" type="button" name="submitbtn1" class="form-control  btn btn-danger"  data-bs-toggle="modal" data-bs-target=".bs-example-modal-center" style="margin-top: 20px;">Calculate</button>
                                     <input id="btnsearchcalculate" style="display:none;" type="submit" name="submitbtn" class="form-control btn btn-primary"  style="margin-top: 20px;width:100%" value="Calculate">
                                </div>
                            </div>
                        </div>
                        </form>
                </div>
            </div>
        </div>
        <div class="col-xl-12">
            <div class="card">
              

                <div class="card-body">
                    <div class="live-preview">
                        <h5>Double click on particular row to view summary details</h5>
                        <div class="table-responsive table-card mb-1 p-3" style="width:100%;">
                            <table class="table table-md table-striped align-middle table-nowrap mb-0" id="yourDataTableId" style="width:100%;">
                                <thead class="table-dark">
                                    <tr>
                                        <th scope="col">S.No</th>
                                        <th scope="col">Associate Name</th>
                                        <th scope="col">Gk code</th>
                                        <th scope="col">Rera no</th>
                                        <th scope="col">Level</th>
                                        <th scope="col">Team Name</th>
                                        <th scope="col">Slab</th>
                                        <th scope="col">Extra Slab</th>
                                        <th scope="col">Dr Comm</th>
                                        <th scope="col">Dr Oth Comm</th>
                                        <th scope="col">Dr Ex Comm</th>
                                        <th scope="col">Totat Dr Comm</th>
                                        <th scope="col">InDr Comm</th>
                                        <th scope="col">InDr Oth Comm</th>
                                        <th scope="col">InDr Ex Comm</th>
                                        <th scope="col">Total InDr Comm</th>
                                        <th scope="col">Total OverAll Comm</th>
                                        <th scope="col">Month PersonalSale</th>
                                        <th scope="col">Month TeamSale</th>
                                        <th scope="col">Month Total Sale</th>
                                        <th scope="col">Total Personal Sale</th>
                                        <th scope="col">Total TeamSale</th>
                                        <th scope="col">OverAll TotalSale</th>
                                        <th scope="col">Consolidated Ratio</th>
                                        <th scope="col">CurrentDtRange Ratio</th>
                                        
                                        
                                    </tr>
                                </thead>
                              
                                <tbody>
                                    @if($GetAdminCommissionSummaryReport)
                                        @foreach($GetAdminCommissionSummaryReport as $key => $value)
                                            <tr ondblclick="getSummaryDetails('{{$value->AssociateId}}','Both','{{$endDate}}')" style="cursor:pointer;">
                                                <td>{{$key + 1}}</td>
                                                <td>{{$value->AssociateName}}</td>
                                                <td>{{$value->gk_code}}</td>
                                                <td>{{$value->rera_no}}</td>
                                                <td>{{$value->Level}}</td>
                                                <td>{{$value->TeamName}}</td>
                                                <td>{{$value->Slab}}</td>
                                                <td>{{$value->ExtraSlab}}</td>
                                                <td>{{$value->Dr_Comm}}</td>
                                                <td>{{$value->Dr_Oth_Comm}}</td>
                                                <td>{{$value->Dr_Ex_Comm}}</td>
                                                <td>{{$value->Total_Dr_Comm}}</td>
                                                <td>{{$value->InDr_Comm}}</td>
                                                <td>{{$value->InDr_Oth_Comm}}</td>
                                                <td>{{$value->InDr_Ex_Comm}}</td>
                                                <td>{{$value->Total_InDr_Comm}}</td>
                                                <td>{{$value->Total_OverAll_Comm}}</td>
                                                <td>{{$value->m_PersonalSale}}</td>
                                                <td>{{$value->m_TeamSale}}</td>
                                                <td>{{$value->m_TotalSale}}</td>
                                                <td>{{$value->TotalPersonalSale}}</td>
                                                <td>{{$value->TotalTeamSale}}</td>
                                                <td>{{$value->OverAll_TotalSale}}</td>
                                                <td>{{$value->Consolidated_Ratio}}</td>
                                                <td>{{$value->CurrentDtRange_Ratio}}</td>
                                            </tr>
                                        @endforeach
                                    @endif
                            
                                    
                                </tbody>
                                <tfoot>
                               
                                <tr>
                                    <th style="text-align:right">Total:</th>
                                   
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                    <th></th> 
                                </tr>
                            </tfoot>

                                
                            </table>
                            <!-- end table -->
                        </div>
                        <!-- end table responsive -->
                    </div>
                    
                </div><!-- end card-body -->
            </div><!-- end card -->
        </div><!-- end col -->
    </div>
</div>
<div class="modal fade bs-example-modal-center" tabindex="-1" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-5">
                
                <div class="mt-4">
                    <h4 class="mb-3">Are you sure want to calculate commission ?</h4>
                    <p class="text-muted mb-4"> If You calculate previous month commission. then calculate all monthc commssion again till current month. </p>
                    <div class="hstack gap-2 justify-content-center">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <a id="yescalculate" onclick="yescalculate()" class="btn btn-danger">Calculate</a>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<div class="modal fade bs-example-modal-xl" tabindex="-1" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true" >
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myExtraLargeModalLabel">Summary Details: Double click to view plot wise details</h5>&nbsp;&nbsp;
                <input id="export" type="button" name="submitbtnbutton" class="form-control  btn btn-success"  style="width:200px" value="Export Details Report">&nbsp;&nbsp;&nbsp;&nbsp;
                  <input id="copyBtn" type="button" name="copyBtn" class="form-control  btn btn-primary"  style="width:200px" value="Copy Details Report">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="height:400px;">
                 <div id="summarydetails">
                       <div class="row">
                        <div class="col-lg-4">
                            <div class="mt-4 mt-lg-0">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="saletype" id="inlineRadio1" value="Direct">
                                    <label class="form-check-label" for="inlineRadio1">Direct</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="saletype" id="inlineRadio2" value="InDirect">
                                    <label class="form-check-label" for="inlineRadio2">InDirect</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="saletype" id="inlineRadio3" value="Both" checked>
                                    <label class="form-check-label" for="inlineRadio3">Both</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label>
                            <input type="checkbox" id="toggleEmail" checked>
                            Show Remarks Column
                            </label>
                        </div>
                       </div>
                        <input type="hidden" id="child_associate_id"/>
                        <input type="hidden" id="child_sale_type"/>
                        <input type="hidden" id="child_date"/>
                        <div class="live-preview">
                                        <div class="">
                                            <table class="table align-middle table-nowrap mb-0" id="yourDataTableIdsummary" style="width:100%;height:400px;">
                                                <thead >
                                                   <tr>
                                                    <th>FromAssociateName</th>
                                                    <th>gk_code</th>
                                                    <th>rera_no</th>
                                                     <th>SchemeName</th>
                                                    <th>plot_name</th>
                                                    <th>brokergeable_size</th>
                                                    <th>BookingDate</th>
                                                    <th>AllotmentDate</th>
                                                    <th>dayDiff</th>
                                                    <th>Commi_Slab</th>
                                                    <th>ExCommi_Slab</th>
                                                    <th>SlabDiff</th>
                                                    <th>ExtraSlabDiff</th>
                                                    <th>Extra commission percent</th>
                                                    <th>Commission</th>
                                                    <th>ExComm</th>
                                                    <th>OthComm</th>
                                                    <th>TotalComm</th>
                                                    <th>QtyGiven</th>
                                                    <th>SaleType</th>
                                                    <th>CompanyName</th>
                                                   
                                                    <th>GiveExtraCommission</th>
                                                    <th>EligibleForComission</th>
                                                    <th>allowDayDiffCommission</th>
                                                     <th class="email-col">CalculationRemark</th>
                                                    
                                                   </tr>
                                                </thead>
                                                <tbody class="summarydetailsbody">
                                                    
                                                </tbody>
                                                   <tfoot class="summarydetailsbodyfoot">
                                                    
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                    <input type="hidden" id="associate_id" />
                                     <input type="hidden" id="enddate" />
                 </div>
             
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0);" class="btn btn-link link-success shadow-none fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
                <!-- <button type="button" class="btn btn-primary ">Save changes</button> -->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<div class="modal fade bs-example-modal-xlsummary" tabindex="-1" aria-labelledby="myExtraLargeModalLabelsummary" aria-hidden="true" >
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header" style="background: cornsilk;">
                <h5 class="modal-title" id="myExtraLargeModalLabelsummary">Plot Wise Details</h5>&nbsp;&nbsp;
                <input id="exportsummary" type="button" name="submitbtnbuttonsummary" class="form-control  btn btn-success"  style="width:200px" value="Export Details Report">&nbsp;&nbsp;&nbsp;&nbsp;
                  <input id="copyBtnsummary" type="button" name="copyBtnsummary" class="form-control  btn btn-primary"  style="width:200px" value="Copy Details Report">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="height:400px;">
                 <div id="summarydetailssummary">
                       <div class="row">
                        <!-- <div class="col-lg-4">
                            <div class="mt-4 mt-lg-0">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="saletype1" id="inlineRadio1" value="Direct">
                                    <label class="form-check-label" for="inlineRadio1">Direct</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="saletype1" id="inlineRadio2" value="InDirect">
                                    <label class="form-check-label" for="inlineRadio2">InDirect</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="saletype1" id="inlineRadio3" value="Both" checked>
                                    <label class="form-check-label" for="inlineRadio3">Both</label>
                                </div>
                            </div>
                        </div> -->
                        <div class="col-md-4">
                            <label>
                            <input type="checkbox" id="toggleEmail1" checked>
                            Show Remarks Column
                            </label>
                        </div>
                       </div>
                        <input type="hidden" id="child_plot_id"/>
                        <input type="hidden" id="child_date1"/>
                        <div class="live-preview">
                                 <table class="table align-middle table-nowrap mb-0" id="yourDataTableIdsummarysummaryheader" style="width:100%;background: #dbebe6;border: 2px solid;">
                                                <thead >
                                                   <tr>
                                                    <th>FromAssociateName</th>
                                                    <th>gk_code</th>
                                                    <th>rera_no</th>
                                                     <th>SchemeName</th>
                                                    <th>plot_name</th>
                                                    <th>brokergeable_size</th>
                                                    <th>BookingDate</th>
                                                    <th>AllotmentDate</th>
                                                    <th>dayDiff</th>
                                                    
                                                   </tr>
                                                </thead>
                                                <tbody class="summarydetailsbodysummaryhead">
                                                    
                                                </tbody>
                                            </table>
                                        <div class="mt-5">
                                            <table class="table align-middle table-nowrap mb-0" id="yourDataTableIdsummarysummary" style="width:100%;height:400px;">
                                                <thead >
                                                   <tr>
                                                    <th>To AssociateName</th>
                                                    <th>To gk_code</th>
                                                    <th>To rera_no</th>
                                                     <!-- <th>SchemeName</th>
                                                    <th>plot_name</th>
                                                    <th>brokergeable_size</th>
                                                    <th>BookingDate</th>
                                                    <th>AllotmentDate</th>
                                                    <th>dayDiff</th> -->
                                                    <th>Commi_Slab</th>
                                                    <th>ExCommi_Slab</th>
                                                    <th>SlabDiff</th>
                                                    <th>ExtraSlabDiff</th>
                                                    <th>Extra commission percent</th>
                                                    <th>Commission</th>
                                                    <th>ExComm</th>
                                                    <th>OthComm</th>
                                                    <th>TotalComm</th>
                                                    <th>QtyGiven</th>
                                                    <th>SaleType</th>
                                                    <th>CompanyName</th>
                                                   
                                                    <th>GiveExtraCommission</th>
                                                    <th>EligibleForComission</th>
                                                    <th>allowDayDiffCommission</th>
                                                     <th class="email-col1">CalculationRemark</th>
                                                    
                                                   </tr>
                                                </thead>
                                                <tbody class="summarydetailsbodysummary">
                                                    
                                                </tbody>
                                                   <tfoot class="summarydetailsbodyfootsummary">
                                                    
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                    <input type="hidden" id="associate_id" />
                                     <input type="hidden" id="enddate" />
                 </div>
             
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0);" class="btn btn-link link-success shadow-none fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</a>
                <!-- <button type="button" class="btn btn-primary ">Save changes</button> -->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
<style>
    .table-striped>tbody>tr:nth-of-type(odd)>* {
    --vz-table-color-type: #212529;
    --vz-table-bg-type: #bbd5eeff;
    }
#yourDataTableIdsummary tbody tr:nth-child(odd) {
    background-color: #FFE699;
}

#yourDataTableIdsummary tbody tr:nth-child(even) {
    background-color: #FFF2CC;
}

#yourDataTableIdsummarysummary tbody tr:nth-child(odd) {
    background-color: #E2EFDA;
}

#yourDataTableIdsummarysummary tbody tr:nth-child(even) {
    background-color: #E2E9F9;
}

</style>

<link href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" />
<script src="{{ URL::asset('assets/js/jquery.min.js') }}"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>

<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>

<script>
function yescalculate(){
    $(".bs-example-modal-center").modal('hide');
    $("#btnsearchcalculate").click();
}
$(document).ready(function() {
    $('#yourDataTableIdsummary1').DataTable({
        // scrollX: true,
        // paging: true,
        // order: [],
        // footerCallback: function (row, data, start, end, display) {
        //     var api = this.api();
            
        //     var intVal = function (i) {
        //         return typeof i === 'string' ?
        //             i.replace(/[\$,]/g, '')*1 :
        //             typeof i === 'number' ? i : 0;
        //     };

        //     var colsToSum = [6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22];

        //     colsToSum.forEach(function(colIdx) {
        //         var total = api.column(colIdx, {page:'current'}).data()
        //             .reduce(function(a,b){ return intVal(a)+intVal(b); },0);
        //         $(api.column(colIdx).footer()).html(total.toFixed(2));
        //     });
        // }
    });
});

$(document).ready(function() {
    $('#yourDataTableId').DataTable({
        scrollX: true,
        paging: true,
        order: [],
        footerCallback: function (row, data, start, end, display) {
            var api = this.api();

            var intVal = function (i) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '').replace(/,/g,'')*1 :
                    typeof i === 'number' ? i : 0;
            };

            var formatNumber = function(num) {
                return num.toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2});
            };

            var colsToSum = [8,9,10,11,12,13,14,15,16,17,20];


            colsToSum.forEach(function(colIdx) {
                var pageTotal = api.column(colIdx, { page: 'current' }).data()
                    .reduce(function(a,b){ return intVal(a) + intVal(b); },0);

                var overallTotal = api.column(colIdx).data()
                    .reduce(function(a,b){ return intVal(a) + intVal(b); },0);

                $(api.column(colIdx).footer()).html(
                    formatNumber(pageTotal) + ' (' + formatNumber(overallTotal) + ')'
                );
            });
        }
    });
});
 $("input[name=saletype][value='Both']").prop("checked", true);
function getSummaryDetails(associate_id,sale_type,enddate){

    $("#child_associate_id").val(associate_id);
    $("#child_sale_type").val(sale_type);
    $("#child_date").val(enddate);
      var table = document.getElementById("yourDataTableIdsummary");
  var checkbox = document.getElementById("toggleEmail");
  var columnIndex = 24; // Email column (0-based index)
    //$('#yourDataTableIdsummary').DataTable().columns.adjust();
    $(".summarydetailsbody").html("");
    $(".summarydetailshead").html("");
      $(".summarydetailsbodyfoot").html("");
    $("#associate_id").val(associate_id);
    $("#enddate").val(enddate);
    var thead = '';
    var bodydatahtml = ''; var bodydatahtmlfoot = '';
     var TotalCommission = 0;
     var TotalExComm = 0;
     var TotalOthComm = 0;
     var TotalTotalComm = 0;
     var TotalQtyGiven = 0;
    var datastring = {
    "_token": "{{ csrf_token() }}",
        associate_id : associate_id,
        sale_type : sale_type,
        enddate : enddate
    };
    $.ajax({
        type:'POST',
        cache: false,
        url:"{{route('visitportal.CommissionCalculationDetails')}}",
        dataType: "json",
        data:datastring,
        success:function(data) {
         
        if(data.data.length > 0){
                
                    for (let index = 0; index < data.data.length; index++) {
                        // if(index == 0){
                        //      var columkeys = Object.keys(data.data[index]);
                        //     if(columkeys.length > 0){
                        //         thead += '<tr>';
                        //         var theadth = '';
                        //         for (let index1 = 0; index1 < columkeys.length; index1++) {
                        //             theadth += '<th>'+(columkeys[index1])+'</th>';
                        //         }
                        //         thead += theadth+'</tr>';
                        //     }
                        //     $(".summarydetailshead").append(thead);
                        // }
                           var bodydata = data.data[index];
                         bodydatahtml += '<tr ondblclick="getSummaryInterDetails(\''+bodydata.PlotId+'\',\''+enddate+'\')" style="cursor:pointer;">';
                      
                         
                         bodydatahtml += '<td>'+bodydata.FromAssociateName+'</td><td>'+bodydata.gk_code+'</td><td>'+bodydata.rera_no+'</td><td>'+bodydata.SchemeName+'</td><td>'+bodydata.plot_name+'</td><td>'+bodydata.brokergeable_size+'</td><td>'+bodydata.BookingDate+'</td><td>'+bodydata.AllotmentDate+'</td><td>'+bodydata.dayDiff+'</td><td>'+bodydata.Commi_Slab+'</td><td>'+(bodydata.ExCommi_Slab ? bodydata.ExCommi_Slab : '')+'</td><td>'+bodydata.SlabDiff+'</td><td>'+bodydata.ExtraSlabDiff+'</td><td>'+bodydata.extra_commission_percent+'</td><td>'+bodydata.Commission+'</td><td>'+bodydata.ExComm+'</td><td>'+bodydata.OthComm+'</td><td>'+bodydata.TotalComm+'</td><td>'+bodydata.QtyGiven+'</td><td>'+bodydata.SaleType+'</td><td>'+bodydata.CompanyName+'</td><td>'+bodydata.GiveExtraCommission+'</td><td>'+bodydata.EligibleForComission+'</td><td>'+bodydata.allowDayDiffCommission+'</td><td class="email-col">'+(bodydata.CalculationRemark ? bodydata.CalculationRemark : '')+'</td>';
                                
                         bodydatahtml += '</tr>';
                         TotalCommission = TotalCommission + parseFloat(bodydata.Commission);
                          TotalExComm = TotalExComm + parseFloat(bodydata.ExComm);
                          TotalOthComm = TotalOthComm + parseFloat(bodydata.OthComm);
                           TotalTotalComm = TotalTotalComm + parseFloat(bodydata.TotalComm);
                           TotalQtyGiven = TotalQtyGiven + parseFloat(bodydata.QtyGiven);
                       
                       
                        
                    }

                    bodydatahtmlfoot += '<tr>';

                    

                    bodydatahtmlfoot += '<td>Total</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>'+TotalCommission+'</td><td>'+TotalExComm+'</td><td>'+TotalOthComm+'</td><td>'+TotalTotalComm+'</td><td>'+TotalQtyGiven+'</td><td></td><td></td><td></td><td></td><td></td>';

                    bodydatahtmlfoot += '</tr>';
                   
                    $(".summarydetailsbody").append(bodydatahtml);
                    $(".summarydetailsbodyfoot").append(bodydatahtmlfoot);
                    debugger
                   
                    $('.bs-example-modal-xl').modal('show');
                    $(document).ready(function() {
                    // Hide a div with id 'div1' after a 4-second delay
                    setTimeout(function() {
                        applyColumnVisibility(); // important
                        applyTooltipFirstCol(); // apply tooltips after table populated
                    }, 1000);
                    });
                     
                }
        }
    });
    
}


function applyTooltipFirstCol() {

    $("#yourDataTableIdsummary tbody tr").each(function () {

        var $row = $(this);
        var $targetCol = $row.find("td").eq(11);
        var $lastCol = $row.find("td:visible").last();

        if ($targetCol.length && $lastCol.length) {

            var tooltipValue = $lastCol.text().trim();
            debugger
            // Remove starting & ending quotes only
            tooltipValue = tooltipValue.replace(/^"(.*)"$/, '$1');

            var originalText = $targetCol.text().trim();

            // Remove old icon if already exists (important for redraw)
            $targetCol.find(".fa-circle-info").remove();

            // Create icon properly
            var $icon = $("<i>", {
                class: "fa-solid fa-circle-info ms-1",
                "data-bs-toggle": "tooltip",
                "data-bs-placement": "top"
            });

            // 🔥 SET TITLE USING .attr() (Safe Way)
            $icon.attr("title", tooltipValue);

            // Append icon
            $targetCol.html(originalText).append(" ").append($icon);

            // Initialize tooltip
            if (typeof bootstrap !== "undefined") {
                new bootstrap.Tooltip($icon[0]);
            }
        }
    });
}

function applyColumnVisibility() {
     var table = document.getElementById("yourDataTableIdsummary");
    const rows = table.querySelectorAll("tr");
    var columnIndex = 24;
    rows.forEach(row => {
      if (row.children[columnIndex]) {
        row.children[columnIndex].style.display =
          checkbox.checked ? "" : "none";
      }
    });
  }

$(document).ready(function() {
    // Select all radio buttons within the form and bind the 'change' event
    $("input[name='saletype']").on("change", function() {
        // 'this' refers to the specific radio button that was just checked
        var selectedValue = $(this).val();
        var associate_id =  $("#associate_id").val();
        var enddate = $("#enddate").val();
        getSummaryDetails(associate_id,selectedValue,enddate);
        
       
    });
});

function exportchilddata(){
    var associate_id = $("#child_associate_id").val();
    var sale_type = $("#child_sale_type").val();
    var enddate = $("#child_date").val();
     var datastring = {
        "_token": "{{ csrf_token() }}",
            associate_id : associate_id,
            sale_type : sale_type,
            enddate : enddate,
            type: 'Export'
        };
    $.ajax({
       url:"{{route('visitportal.CommissionCalculationDetails')}}",
        type: 'POST',
         data:datastring,
        xhrFields: {
            responseType: 'blob' // Required to handle binary data
        },
        success: function (response, status, xhr) {
            // Create a URL for the blob data
            var blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
            var downloadUrl = URL.createObjectURL(blob);
            
            // Create a temporary anchor element to trigger the download
            var a = document.createElement("a");
            a.href = downloadUrl;
            a.download = "users.xlsx"; // Desired file name
            document.body.appendChild(a);
            a.click();
            
            // Clean up
            URL.revokeObjectURL(downloadUrl);
            $(a).remove();
        },
        error: function () {
            alert('Download failed. Please try again.');
        }
    });
}

</script>
<script>
    $("#export").click(function () {
        let csv = [];
        $("#yourDataTableIdsummary tr").each(function () {
            let row = [];
            // $(this).find("th, td").each(function () {
            $(this).find("th:visible, td:visible").each(function () {
                row.push($(this).text());
            });
            csv.push(row.join(","));
        });

        let csvString = csv.join("\n");
        let blob = new Blob([csvString], { type: "text/csv" });
        let url = window.URL.createObjectURL(blob);

        let a = document.createElement("a");
        a.href = url;
        a.download = "CommissionCalculation-details-data.csv";
        a.click();
    });

    $("#exportsummary").click(function () {
        let csv = [];
        $("#yourDataTableIdsummarysummary tr").each(function () {
            let row = [];
            // $(this).find("th, td").each(function () {
            $(this).find("th:visible, td:visible").each(function () {
                row.push($(this).text());
            });
            csv.push(row.join(","));
        });

        let csvString = csv.join("\n");
        let blob = new Blob([csvString], { type: "text/csv" });
        let url = window.URL.createObjectURL(blob);

        let a = document.createElement("a");
        a.href = url;
        a.download = "CommissionCalculation-details-summary-data.csv";
        a.click();
    });

$("#copyBtn").click(function () {

    let textData = "";

    $("#yourDataTableIdsummary tr").each(function () {

        let row = [];

        // 🔥 Sirf visible columns
        $(this).find("th:visible, td:visible").each(function () {
            row.push($(this).text().trim());
        });

        textData += row.join("\t") + "\n";   // tab separated
    });

    // Clipboard me copy
    navigator.clipboard.writeText(textData).then(function () {
        alert("Table copied successfully!");
    });

});
$("#copyBtnsummary").click(function () {

    let textData = "";

    $("#yourDataTableIdsummarysummary tr").each(function () {

        let row = [];

        // 🔥 Sirf visible columns
        $(this).find("th:visible, td:visible").each(function () {
            row.push($(this).text().trim());
        });

        textData += row.join("\t") + "\n";   // tab separated
    });

    // Clipboard me copy
    navigator.clipboard.writeText(textData).then(function () {
        alert("Table copied successfully!");
    });

});

</script>
<script>
  const checkbox = document.getElementById("toggleEmail");
  const emailColumns = document.querySelectorAll(".email-col");

  checkbox.addEventListener("change", function () {
    
    applyColumnVisibility();
    // emailColumns.forEach(col => {
    //   col.style.display = this.checked ? "" : "none";
    // });
  });

const checkbox1 = document.getElementById("toggleEmail1");
  const emailColumns1 = document.querySelectorAll(".email-col1");

  checkbox1.addEventListener("change", function () {
    
    applyColumnVisibilitysummary();
    // emailColumns.forEach(col => {
    //   col.style.display = this.checked ? "" : "none";
    // });
  });

  function getSummaryInterDetails(plot_id,enddate){

    $("#child_plot_id").val(plot_id);
    $("#child_date1").val(enddate);
    var table = document.getElementById("yourDataTableIdsummarysummary");
    var checkbox1 = document.getElementById("toggleEmail1");
    var columnIndex = 19; // Email column (0-based index)
    //$('#yourDataTableIdsummary').DataTable().columns.adjust();
    $(".summarydetailsbodysummaryhead").html("");
    $(".summarydetailsbodysummary").html("");
    $(".summarydetailsheadsummary").html("");
      $(".summarydetailsbodyfootsummary").html("");
    $("#associate_id").val(associate_id);
    $("#enddate").val(enddate);
    var thead1 = '';
    var bodydatahtml1 = ''; var bodydatahtmlfoot1 = '';var bodydatahtml1head = ''; 
     var TotalCommission1 = 0;
     var TotalExComm1 = 0;
     var TotalOthComm1 = 0;
     var TotalTotalComm1 = 0;
     var TotalQtyGiven1 = 0;
    var datastring = {
    "_token": "{{ csrf_token() }}",
        plot_id : plot_id,
        enddate : enddate
    };
    $.ajax({
        type:'POST',
        cache: false,
        url:"{{route('visitportal.CommissionCalculationDetailsSummary')}}",
        dataType: "json",
        data:datastring,
        success:function(data) {
         
        if(data.data.length > 0){
                
                    for (let index = 0; index < data.data.length; index++) {
                        // if(index == 0){
                        //      var columkeys = Object.keys(data.data[index]);
                        //     if(columkeys.length > 0){
                        //         thead += '<tr>';
                        //         var theadth = '';
                        //         for (let index1 = 0; index1 < columkeys.length; index1++) {
                        //             theadth += '<th>'+(columkeys[index1])+'</th>';
                        //         }
                        //         thead += theadth+'</tr>';
                        //     }
                        //     $(".summarydetailshead").append(thead);
                        // }
                           var bodydata1 = data.data[index];
                           debugger
                           if(index == 0){
                                bodydatahtml1head += '<tr style="cursor:pointer;">';
                      
                         
                                bodydatahtml1head += '<td>'+bodydata1.FromAssociateName+'</td><td>'+bodydata1.FromGkCode+'</td><td>'+bodydata1.FromReraNo+'</td><td>'+bodydata1.SchemeName+'</td><td>'+bodydata1.plot_name+'</td><td>'+bodydata1.brokergeable_size+'</td><td>'+bodydata1.BookingDate+'</td><td>'+bodydata1.AllotmentDate+'</td><td>'+bodydata1.dayDiff+'</td>';
                                        
                                bodydatahtml1head += '</tr>';
                           }
                         

                         bodydatahtml1 += '<tr style="cursor:pointer;">';
                      
                         
                         bodydatahtml1 += '<td>'+bodydata1.ToAssociateName+'</td><td>'+bodydata1.ToGkCode+'</td><td>'+bodydata1.ToReraNo+'</td><td>'+bodydata1.Commi_Slab+'</td><td>'+(bodydata1.ExCommi_Slab ? bodydata.ExCommi_Slab : '')+'</td><td>'+bodydata1.SlabDiff+'</td><td>'+bodydata1.ExtraSlabDiff+'</td><td>'+bodydata1.extra_commission_percent+'</td><td>'+bodydata1.Commission+'</td><td>'+bodydata1.ExComm+'</td><td>'+bodydata1.OthComm+'</td><td>'+bodydata1.TotalComm+'</td><td>'+bodydata1.QtyGiven+'</td><td>'+bodydata1.SaleType+'</td><td>'+bodydata1.CompanyName+'</td><td>'+bodydata1.GiveExtraCommission+'</td><td>'+bodydata1.EligibleForComission+'</td><td>'+bodydata1.allowDayDiffCommission+'</td><td class="email-col1">'+(bodydata1.CalculationRemark ? bodydata1.CalculationRemark : '')+'</td>';
                                
                         bodydatahtml1 += '</tr>';
                         TotalCommission1 = TotalCommission1 + parseFloat(bodydata1.Commission);
                          TotalExComm1 = TotalExComm1 + parseFloat(bodydata1.ExComm);
                          TotalOthComm1 = TotalOthComm1 + parseFloat(bodydata1.OthComm);
                           TotalTotalComm1 = TotalTotalComm1 + parseFloat(bodydata1.TotalComm);
                           TotalQtyGiven1 = TotalQtyGiven1 + parseFloat(bodydata1.QtyGiven);
                       
                       
                        
                    }

                    bodydatahtmlfoot1 += '<tr>';

                    

                    bodydatahtmlfoot1 += '<td>Total</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>'+TotalCommission1+'</td><td>'+TotalExComm1+'</td><td>'+TotalOthComm1+'</td><td>'+TotalTotalComm1+'</td><td>'+TotalQtyGiven1+'</td><td></td><td></td><td></td><td></td><td></td>';

                    bodydatahtmlfoot1 += '</tr>';
                   
                    $(".summarydetailsbodysummary").append(bodydatahtml1);
                    $(".summarydetailsbodysummaryhead").append(bodydatahtml1head);
                    $(".summarydetailsbodyfootsummary").append(bodydatahtmlfoot1);
                   
                    $('.bs-example-modal-xlsummary').modal('show');
                     setTimeout(function() {
                         applyColumnVisibilitysummary(); // important
                     applyTooltipFirstColsummary(); // apply tooltips after table populated
                    }, 1000);
                }
        }
    });
    
}

function applyColumnVisibilitysummary() {
     var table = document.getElementById("yourDataTableIdsummarysummary");
    const rows = table.querySelectorAll("tr");
    var columnIndex = 19;
    rows.forEach(row => {
      if (row.children[columnIndex]) {
        row.children[columnIndex].style.display =
          checkbox1.checked ? "" : "none";
      }
    });
  }

  function applyTooltipFirstColsummary() {

    $("#yourDataTableIdsummarysummary tbody tr").each(function () {

        var $row1 = $(this);
        var $targetCol1 = $row1.find("td").eq(3);
        var $lastCol1 = $row1.find("td:visible").last();

        if ($targetCol1.length && $lastCol1.length) {

            var tooltipValue1 = $lastCol1.text().trim();

            // Remove starting & ending quotes only
            tooltipValue1 = tooltipValue1.replace(/^"(.*)"$/, '$1');

            var originalText1 = $targetCol1.text().trim();

            // Remove old icon if already exists (important for redraw)
            $targetCol1.find(".fa-circle-info").remove();

            // Create icon properly
            var $icon1 = $("<i>", {
                class: "fa-solid fa-circle-info ms-1",
                "data-bs-toggle": "tooltip",
                "data-bs-placement": "top"
            });

            // 🔥 SET TITLE USING .attr() (Safe Way)
            $icon1.attr("title", tooltipValue1);

            // Append icon
            $targetCol1.html(originalText1).append(" ").append($icon1);

            // Initialize tooltip
            if (typeof bootstrap !== "undefined") {
                new bootstrap.Tooltip($icon1[0]);
            }
        }
    });
}

</script>
@endif

@endsection