@extends('layouts.app')
@section('title')Unified Income Dashboard @endsection
@section('content')

<style>
    .datepicker{
        z-index:99999!important;
    }
    
    div.dataTables_wrapper div.dataTables_processing {
        height: 59px !important;
        top: 10% !important;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        color: white !important;
        border: 1px solid #fff!important;
        background-color: #fff!important;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #fff))!important;
        background: -webkit-linear-gradient(top, #fff 0%, #fff 100%)!important;
        background: -moz-linear-gradient(top, #fff 0%, #fff 100%)!important;
        background: -ms-linear-gradient(top, #fff 0%, #fff 100%)!important;
        background: -o-linear-gradient(top, #fff 0%, #fff 100%)!important;
        background: linear-gradient(to bottom, #fff 0%, #fff 100%)!important;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button{
        padding: 0.5em 1mm !important;
    }
    
    .table-hover>tbody>tr:hover {
        background-color: #f5f5f5 !important;
    }
    
    .table-bordered {
        border: 1px solid #ddd !important;
    }
    
    thead {
        display: table-header-group !important;
        vertical-align: middle !important;
        border-color: inherit !important;
    }
    
    tr {
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
    }

    table {
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }
    
    .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
        border-bottom-width: 2px !important;
    }
    .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
        border: 1px solid #ddd !important;
    }
    .table>thead>tr>th {
        vertical-align: bottom !important;
        border-bottom: 2px solid #ddd !important;
    }
    
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
        padding: 8px;
        line-height: 1.42857143 !important;
        vertical-align: top !important;
        border-top: 1px solid #ddd !important;
    }

    * {
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        box-sizing: border-box !important;
    }
    .table * {
        font-size: 14px !important;
    }

    /* Tab Styling */
    .nav-tabs > li > a {
        border: 1px solid transparent;
        border-radius: 4px 4px 0 0;
        color: #495057;
        font-weight: 600;
        background-color: #f8f9fa;
        padding: 10px 20px;
        transition: background-color 0.3s, color 0.3s;
        margin-right: 5px;
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
        cursor: default;
    }

    .nav-tabs > li > a:hover {
        background-color: #0056b3;
        color: white;
        border-color: #0056b3;
    }

    .nav-tabs > li:not(.active) > a {
        background-color: #f8f9fa;
        color: #495057;
    }
    
    /* Ensure tabs are always clickable - never disabled */
    .nav-tabs > li > a {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    .nav-tabs > li.disabled > a {
        pointer-events: auto !important;
        cursor: pointer !important;
        opacity: 1 !important;
    }

    /* Form Input Styling */
    input[type=text],
    input[type=number],
    input[type=date],
    select.form-control {
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 14px;
        padding: 8px 12px;
    }

    input[type=text]:focus,
    input[type=number]:focus,
    input[type=date]:focus,
    select.form-control:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }

    /* Button Styling */
    .btn {
        border-radius: 5px;
        font-weight: 500;
        padding: 8px 16px;
    }

    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-success {
        background-color: #28a745;
        border-color: #28a745;
    }

    .btn-warning {
        background-color: #ffc107;
        border-color: #ffc107;
        color: #212529;
    }

    /* Loading Spinner */
    .loading-spinner {
        display: none;
        text-align: center;
        padding: 40px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.95);
        width: 100%;
        height: 100%;
        min-height: 150px;
    }
    
    .loading-spinner .spinner-border {
        margin: 20px auto;
        display: block;
    }
    
    .loading-spinner p {
        font-size: 16px;
        font-weight: 500;
        color: #007bff;
        margin-top: 15px;
    }
    
    .box-body {
        position: relative;
        min-height: 200px;
    }

    .spinner-border {
        width: 3rem;
        height: 3rem;
    }
    
    .dataTables_processing {
        z-index: 9999 !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        padding: 10px !important;
    }

    /* Tab Content */
    .tab-content {
        background: white;
        border: 1px solid #dee2e6;
        border-top: none;
        border-radius: 0 0 0.375rem 0.375rem;
        padding: 20px;
        min-height: 400px;
    }

    /* Summary Cards */
    .summary-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .summary-card h4 {
        margin: 0 0 10px 0;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .summary-card .amount {
        font-size: 1.5rem;
        font-weight: bold;
    }

    /* Filter Section */
    .filter-section {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 15px;
        margin-bottom: 20px;
    }

    .filter-section h5 {
        margin-bottom: 15px;
        color: #495057;
        font-weight: 600;
    }

    /* Data Table */
    .dataTables_wrapper {
        margin-top: 20px;
    }

    .dataTables_length,
    .dataTables_filter {
        margin-bottom: 15px;
    }

    .dataTables_info {
        margin-top: 15px;
    }

    .dataTables_paginate {
        margin-top: 15px;
    }

    /* Original styling from index.blade.php */
    .show_amount_detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 5px;
    }

    .sho_amount {
        font-size: 16px;
        font-weight: 500;
    }

    .input_wraper {
        margin-bottom: 15px;
    }

    .dt-ser--lab, .dt-ser-lab {
        display: block;
        margin-bottom: 5px;
        font-weight: 600;
        color: #495057;
    }

    .dt-ser {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .top-btn {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .ser-btn {
        padding: 8px 16px;
        font-size: 14px;
    }

    .table_con {
        overflow-x: auto;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<section class="content-header mb-10 pb-10">
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-center">Unified Income Dashboard</h1>
        </div>
    </div>
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            @include('layouts.flesh-message')
            
            <!-- Navigation Tabs -->
            <ul class="nav nav-tabs" id="incomeTabs" role="tablist">
                @if($data['user_role'] == 1 || $data['user_role'] == 2)
                <li class="{{ $data['active_tab'] == 'admin' ? 'active' : '' }}" role="presentation">
                    <a href="#admin" id="admin-tab" data-toggle="tab" role="tab" aria-controls="admin">
                        Admin Income
                    </a>
                </li>
                @endif
                
                @if($data['user_role'] == 1 || $data['user_role'] == 2 || $data['user_role'] == 3)
                <li class="{{ $data['active_tab'] == 'agent' ? 'active' : '' }}" role="presentation">
                    <a href="#agent" id="agent-tab" data-toggle="tab" role="tab" aria-controls="agent">
                        Agent Income
                    </a>
                </li>
                @endif
                
                @if($data['user_role'] == 1 || $data['user_role'] == 2 || $data['user_role'] == 4)
                <li class="{{ $data['active_tab'] == 'ar' ? 'active' : '' }}" role="presentation">
                    <a href="#ar" id="ar-tab" data-toggle="tab" role="tab" aria-controls="ar">
                        AR Income
                    </a>
                </li>
                @endif
                
                @if($data['user_role'] == 1 || $data['user_role'] == 2 || (Auth::user()->manage_manager == 1))
                <li class="{{ $data['active_tab'] == 'team' ? 'active' : '' }}" role="presentation">
                    <a href="#team" id="team-tab" data-toggle="tab" role="tab" aria-controls="team">
                        Team Income
                    </a>
                </li>
                @endif
                
                @if($data['user_role'] == 3 && Auth::user()->manage_manager == 1)
                <li class="{{ $data['active_tab'] == 'manager' ? 'active' : '' }}" role="presentation">
                    <a href="#manager" id="manager-tab" data-toggle="tab" role="tab" aria-controls="manager">
                        Manager Income
                    </a>
                </li>
                @endif
                
                @if($data['user_role'] == 1 || $data['user_role'] == 2 || (Auth::user()->manage_distributor == 1))
                <li class="{{ $data['active_tab'] == 'distributor' ? 'active' : '' }}" role="presentation">
                    <a href="#distributor" id="distributor-tab" data-toggle="tab" role="tab" aria-controls="distributor">
                        Distributor Income
                    </a>
                </li>
                @endif
            </ul>

            <!-- Tab Content -->
            <div class="tab-content" id="incomeTabsContent">
                
                <!-- Admin Income Tab -->
                @if($data['user_role'] == 1 || $data['user_role'] == 2)
                <div class="tab-pane {{ $data['active_tab'] == 'admin' ? 'active' : '' }}" 
                     id="admin" 
                     role="tabpanel" 
                     aria-labelledby="admin-tab">
                    
                    <!-- Summary Section -->
                    <div class="show_amount_detail">
                        <div class="sho_amount pr-10"> 
                            <strong>Outstanding Invoice Amt. = </strong>
                            <strong id="admin_outstanding">$ Loading...</strong>
                        </div>
                        <div class="sho_amount pl-10">
                            <strong>Gross Revenue = </strong>
                            <strong id="admin_gross_revenue">$ Loading...</strong>
                        </div>
                        <div class="sho_amount pl-10">
                            <strong>Company Income = </strong>
                            <strong id="admin_company_income">$ Loading...</strong>
                        </div>
                    </div>

                    <!-- Filter Section -->
                    <div class="box-header">
                        <form method="get" id="admin_filter_form">
                            <div class="row">
                                <!-- <div class="input_wraper col-md-3">
                                    <span class="dt-ser-lab">Year</span>
                                    <select id="admin_year_filter" name="admin_year_filter" class="form-control dt-ser">
                                        <option value="all">All</option>
                                        @for($year = date('Y'); $year >= 2015; $year--)
                                        <option value="{{ $year }}" {{ $year == date('Y') ? 'selected' : '' }}>{{ $year }}</option>
                                        @endfor
                                    </select>
                                </div> -->
                                <div class="input_wraper col-md-3">
                                    <span class="dt-ser-lab">From</span>
                                    <input type="text" id="admin_search_start_date" name="search_start_date" class="form-control dt-ser" placeholder="Select start date" autocomplete="off">
                                </div>
                                <div class="input_wraper col-md-3">
                                    <span class="dt-ser-lab">To</span>
                                    <input type="text" id="admin_search_end_date" name="search_end_date" class="form-control dt-ser" placeholder="Select end date" autocomplete="off">
                                </div>
                                <div class="col-md-3 text-right">
                                    <span class="pt-10 mt-10" style="display: inline-block;">
                                        <button type="button" onclick="searchAdminIncome()" class="top-btn btn btn-primary ser-btn">
                                            <i class="fa fa-search"></i> Search
                                        </button>
                                        <button type="button" onclick="resetAdminFilters()" class="top-btn btn btn-primary ser-btn" style="margin-left: 7px;">
                                            <i class="fa fa-refresh"></i> Reset
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- Action Buttons -->
                    <div class="box-header">
                        <a class="top-btn btn btn-primary ser-btn mb-10 ml-10" id="admin_print_preview" onclick="getAdminPDF()">
                            <i class="fa fa-print"></i> Preview/Print
                        </a>
                        <a class="top-btn btn btn-primary ser-btn mb-10 ml-10" id="admin_export_csv" onclick="downloadAdminIncome('csv')">
                            <i class="fa fa-download"></i> Export CSV
                        </a>
                        @if(Auth::user()->user_role == 2)
                        <a name="invoice_count" href="javascript:void(0);" class="op-btn btn btn-primary ser-btn mb-10 ml-10" id="admin_invoice_count">Invoice</a>
                        @if(Auth::user()->id == 36)
                        <a name="tax_report" href="javascript:void(0);" class="op-btn btn btn-primary ser-btn mb-10 ml-10" id="admin_tax_report">1099 Report</a>
                        @endif
                        @endif
                    </div>

                    <!-- Data Table -->
                    <div class="box-body">
                        <div class="loading-spinner" id="admin_loading">
                            <div style="text-align:center;">
                                <i class="fa fa-spinner fa-spin fa-3x fa-fw text-primary"></i>
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p style="margin-top: 10px;">Loading data...</p>
                        </div>
                        
                        <div class="table_con" style="display:none;">
                            <table id="admin_income_table" class="table table-bordered table-hover" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Client</th>
                                        <th>Client Name</th>
                                        <th>Res. commission($)</th>
                                        <th>Paid Amt. ($)</th>
                                        <th>Payment Date</th>
                                        <th>Status</th>
                                        <th>Deduction($)</th>
                                        <th>Agent Income($)</th>
                                        <th>Company Income($)</th>
                                        <th>Paid Out</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data will be loaded via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Agent Income Tab -->
                @if($data['user_role'] == 1 || $data['user_role'] == 2 || $data['user_role'] == 3)
                <div class="tab-pane {{ $data['active_tab'] == 'agent' ? 'active' : '' }}" 
                     id="agent" 
                     role="tabpanel" 
                     aria-labelledby="agent-tab">
                    
                    <!-- Agent Selection Dropdown (only for SUPERADMIN/ADMIN) -->
                    @if($data['show_agent_dropdown'] == 1)
                    <div class="row" style="margin-bottom: 15px;">
                        <div class="col-md-12">
                            <div class="input_container" style="float: right; min-width: 235px;">
                                <span style="padding-right: 10px;">Select Agent</span>
                                <select id="agent_income_agent_id" name="agent_income_agent_id" class="form-control select2" style="width: 235px">
                                    <option value="">Select Agent</option>
                                    @foreach($data['agent_income_agents'] as $agent)
                                    <option value="{{ $agent->id }}" {{ (session('aragentsearch') == $agent->id) ? 'selected' : '' }}>
                                        {{ $agent->name }} {{ $agent->last_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    <!-- Summary Section -->
                    <div class="show_amount_detail">
                        <div class="sho_amount pr-10"> 
                            <strong>Outstanding Invoice Amt. = </strong>
                            <strong id="agent_outstanding">$ Loading...</strong>
                        </div>
                        <div class="sho_amount pl-10">
                            <strong>Gross Revenue = </strong>
                            <strong id="agent_gross_revenue">$ Loading...</strong>
                        </div>
                        <div class="sho_amount pl-10">
                            <strong>Agent Income = </strong>
                            <strong id="agent_income">$ Loading...</strong>
                        </div>
                    </div>

                    <!-- Filter Section -->
                    <div class="box-header">
                        <form method="get" id="agent_filter_form">
                            <div class="row">
                                <div class="input_wraper col-md-4">
                                    <span class="dt-ser-lab">From</span>
                                    <input type="text" id="agent_search_start_date" name="search_start_date" class="form-control dt-ser" placeholder="Select start date" autocomplete="off">
                                </div>
                                <div class="input_wraper col-md-4">
                                    <span class="dt-ser-lab">To</span>
                                    <input type="text" id="agent_search_end_date" name="search_end_date" class="form-control dt-ser" placeholder="Select end date" autocomplete="off">
                                </div>
                                <div class="col-md-4 text-right">
                                    <span class="pt-10 mt-10" style="display: inline-block;">
                                        <button type="button" onclick="loadAgentIncome()" class="top-btn btn btn-primary ser-btn">
                                            <i class="fa fa-search"></i> Search
                                        </button>
                                        <button type="button" onclick="resetAgentFilters()" class="top-btn btn btn-primary ser-btn" style="margin-left: 7px;">
                                            <i class="fa fa-refresh"></i> Reset
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- Action Buttons -->
                    <div class="box-header">
                        <a class="top-btn btn btn-primary ser-btn mb-10 ml-10" id="agent_print_preview" onclick="getAgentPDF()">
                            <i class="fa fa-print"></i> Preview/Print
                        </a>
                        <a class="top-btn btn btn-primary ser-btn mb-10 ml-10" id="agent_export_csv" onclick="downloadAgentIncome('csv')">
                            <i class="fa fa-download"></i> Export CSV
                        </a>
                        @if(Auth::user()->user_role == 2 || Auth::user()->user_role == 4)
                        <a name="invoice_count" href="javascript:void(0);" class="op-btn btn btn-primary ser-btn mb-10 ml-10" id="agent_invoice_count" onclick="showInvoiceModal('agent')">Invoice</a>
                        @endif
                    </div>

                    <!-- Data Table -->
                    <div class="box-body">
                        <div class="loading-spinner" id="agent_loading">
                            <div style="text-align:center;">
                                <i class="fa fa-spinner fa-spin fa-3x fa-fw text-primary"></i>
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p style="margin-top: 10px;">Loading data...</p>
                        </div>
                        
                        <div class="table_con" style="display:none;">
                            <table id="agent_income_table" class="table table-bordered table-hover" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Client</th>
                                        <th>Client Name</th>
                                        <th>Res. commission($)</th>
                                        <th>Paid Amt. ($)</th>
                                        <th>Payment Date</th>
                                        <th>Status</th>
                                        <th>Deduction($)</th>
                                        <th>Agent Income($)</th>
                                        <th>Paid Out</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data will be loaded via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @endif

                <!-- AR Income Tab -->
                @if($data['user_role'] == 1 || $data['user_role'] == 2 || $data['user_role'] == 4)
                <div class="tab-pane {{ $data['active_tab'] == 'ar' ? 'active' : '' }}" 
                     id="ar" 
                     role="tabpanel" 
                     aria-labelledby="ar-tab">
                    
                    <!-- AR User Selection Dropdown (only for SUPERADMIN/ADMIN) -->
                    @if($data['show_ar_dropdown'] == 1)
                    <div class="row" style="margin-bottom: 15px;">
                        <div class="col-md-12">
                            <div class="input_container" style="float: right; min-width: 235px;">
                                <span style="padding-right: 10px;">Select AR User</span>
                                <select id="ar_income_user_id" name="ar_income_user_id" class="form-control select2" style="width: 235px">
                                    <option value="">Select AR User</option>
                                    @foreach($data['ar_income_users'] as $arUser)
                                    <option value="{{ $arUser->id }}" {{ (session('aragentsearch') == $arUser->id) ? 'selected' : '' }}>
                                        {{ $arUser->name }} {{ $arUser->last_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    <!-- Summary Section -->
                    <div class="show_amount_detail">
                        <div class="sho_amount pr-10"> 
                            <strong>Outstanding Invoice Amt. = </strong>
                            <strong id="ar_outstanding">$ Loading...</strong>
                        </div>
                        <div class="sho_amount pl-10">
                            <strong>Gross Revenue = </strong>
                            <strong id="ar_gross_revenue">$ Loading...</strong>
                        </div>
                        <div class="sho_amount pl-10">
                            <strong>AR Income = </strong>
                            <strong id="ar_income">$ Loading...</strong>
                        </div>
                    </div>

                    <!-- Filter Section -->
                    <div class="box-header">
                        <form method="get" id="ar_filter_form">
                            <div class="row">
                                <div class="input_wraper col-md-3">
                                    <span class="dt-ser-lab">Year</span>
                                    <select id="ar_year_filter" name="ar_year_filter" class="form-control dt-ser">
                                        <option value="all">All</option>
                                        @for($year = date('Y'); $year >= 2015; $year--)
                                        <option value="{{ $year }}" {{ $year == date('Y') ? 'selected' : '' }}>{{ $year }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="input_wraper col-md-3">
                                    <span class="dt-ser-lab">From</span>
                                    <input type="text" id="ar_search_start_date" name="search_start_date" class="form-control dt-ser" placeholder="Select start date" autocomplete="off">
                                </div>
                                <div class="input_wraper col-md-3">
                                    <span class="dt-ser-lab">To</span>
                                    <input type="text" id="ar_search_end_date" name="search_end_date" class="form-control dt-ser" placeholder="Select end date" autocomplete="off">
                                </div>
                                <div class="col-md-3 text-right">
                                    <span class="pt-10 mt-10" style="display: inline-block;">
                                        <button type="button" onclick="loadArIncome()" class="top-btn btn btn-primary ser-btn">
                                            <i class="fa fa-search"></i> Search
                                        </button>
                                        <button type="button" onclick="resetArFilters()" class="top-btn btn btn-primary ser-btn" style="margin-left: 7px;">
                                            <i class="fa fa-refresh"></i> Reset
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- Action Buttons -->
                    <div class="box-header">
                        <a class="top-btn btn btn-primary ser-btn mb-10 ml-10" id="ar_print_preview" onclick="getArPDF()">
                            <i class="fa fa-print"></i> Preview/Print
                        </a>
                        <a class="top-btn btn btn-primary ser-btn mb-10 ml-10" id="ar_export_csv" onclick="downloadArIncome('csv')">
                            <i class="fa fa-download"></i> Export CSV
                        </a>
                        @if(Auth::user()->user_role == 2 || Auth::user()->user_role == 4)
                        <a name="invoice_count" href="javascript:void(0);" class="op-btn btn btn-primary ser-btn mb-10 ml-10" id="ar_invoice_count">Invoice</a>
                        @endif
                    </div>

                    <!-- Data Table -->
                    <div class="box-body">
                        <div class="loading-spinner" id="ar_loading">
                            <div style="text-align:center;">
                                <i class="fa fa-spinner fa-spin fa-3x fa-fw text-primary"></i>
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p style="margin-top: 10px;">Loading data...</p>
                        </div>
                        
                        <div class="table_con" style="display:none;">
                            <table id="ar_income_table" class="table table-bordered table-hover" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Client</th>
                                        <th>Client Name</th>
                                        <th>Res. commission($)</th>
                                        <th>Paid Amt. ($)</th>
                                        <th>Payment Date</th>
                                        <th>Status</th>
                                        <th>Deduction($)</th>
                                        <th>Agent Income($)</th>
                                        <th>AR Income($)</th>
                                        <th>Paid Out</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data will be loaded via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Team Income Tab -->
                @if($data['user_role'] == 1 || $data['user_role'] == 2 || (Auth::user()->manage_manager == 1))
                <div class="tab-pane {{ $data['active_tab'] == 'team' ? 'active' : '' }}" 
                     id="team" 
                     role="tabpanel" 
                     aria-labelledby="team-tab">
                    
                    <!-- Manager Selection Dropdown (only for SUPERADMIN/ADMIN) - Above summary section on right side -->
                    @if($data['user_role'] == 1 || $data['user_role'] == 2)
                    <div class="row" style="margin-bottom: 15px;">
                        <div class="col-md-12">
                            <div class="input_container" style="float: right; min-width: 235px;">
                                <span style="padding-right: 10px;">Select Manager</span>
                                <select id="team_select_manager" name="select_manager" class="form-control select2" style="width: 235px">
                                    <option value="">Select Manager</option>
                                    @foreach($data['managers'] as $manager)
                                    <option value="{{ $manager->id }}" {{ (session('teamsearch') == $manager->id) ? 'selected' : '' }}>
                                        {{ $manager->name }} {{ $manager->last_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    <!-- Summary Section -->
                    <div class="show_amount_detail">
                        <div class="sho_amount pr-10"> 
                            <strong>Total Invoiced = </strong>
                            <strong id="team_total_invoiced">$ Loading...</strong>
                        </div>
                        <div class="sho_amount pl-10">
                            <strong>Total Payment = </strong>
                            <strong id="team_total_payment">$ Loading...</strong>
                        </div>
                        <div class="sho_amount pl-10">
                            <strong>Team Income = </strong>
                            <strong id="team_team_income">$ Loading...</strong>
                        </div>
                    </div>

                    <!-- Filter Section -->
                    <div class="box-header">
                        <form method="get" id="team_filter_form">
                            <div class="row">
                                <div class="input_wraper col-md-3">
                                    <span class="dt-ser-lab">From</span>
                                    <input type="text" id="team_search_start_date" name="search_start_date" class="form-control dt-ser" placeholder="Select start date" autocomplete="off">
                                </div>
                                <div class="input_wraper col-md-3">
                                    <span class="dt-ser-lab">To</span>
                                    <input type="text" id="team_search_end_date" name="search_end_date" class="form-control dt-ser" placeholder="Select end date" autocomplete="off">
                                </div>
                                <div class="col-md-6 text-right">
                                    <span class="pt-10 mt-10" style="display: inline-block;">
                                        <button type="button" onclick="loadTeamIncome()" class="top-btn btn btn-primary ser-btn">
                                            <i class="fa fa-search"></i> Search
                                        </button>
                                        <button type="button" onclick="resetTeamFilters()" class="top-btn btn btn-primary ser-btn" style="margin-left: 7px;">
                                            <i class="fa fa-refresh"></i> Reset
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- Action Buttons -->
                    <div class="box-header">
                        <a class="top-btn btn btn-primary ser-btn mb-10 ml-10" id="team_print_preview" onclick="getTeamPDF()">
                            <i class="fa fa-print"></i> Preview/Print
                        </a>
                        <a class="top-btn btn btn-primary ser-btn mb-10 ml-10" id="team_export_csv" onclick="downloadTeamIncome('csv')">
                            <i class="fa fa-download"></i> Export CSV
                        </a>
                    </div>

                    <!-- Data Table -->
                    <div class="box-body">
                        <div class="loading-spinner" id="team_loading">
                            <div style="text-align:center;">
                                <i class="fa fa-spinner fa-spin fa-3x fa-fw text-primary"></i>
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p style="margin-top: 10px;">Loading data...</p>
                        </div>
                        
                        <div class="table_con" style="display:none;">
                            <table id="team_income_table" class="table table-bordered table-hover" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Client</th>
                                        <th>Client Name</th>
                                        <th>Agent</th>
                                        <th>Paid Amt. ($)</th>
                                        <th>Payment Date</th>
                                        <th>Status</th>
                                        <th>Team Income($)</th>
                                        <th>Paid Out</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data will be loaded via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Manager Income Tab -->
                @if($data['user_role'] == 3 && Auth::user()->manage_manager == 1)
                <div class="tab-pane {{ $data['active_tab'] == 'manager' ? 'active' : '' }}" 
                     id="manager" 
                     role="tabpanel" 
                     aria-labelledby="manager-tab">
                    
                    <!-- Agent Selection Dropdown (for managers) -->
                    @if($data['show_manager_agent_dropdown'] == 1)
                    <div class="row" style="margin-bottom: 15px;">
                        <div class="col-md-12">
                            <div class="input_container" style="float: right; min-width: 235px;">
                                <span style="padding-right: 10px;">Select Agent</span>
                                <select id="manager_income_agent_id" name="manager_income_agent_id" class="form-control select2" style="width: 235px">
                                    <option value="">Select Agent</option>
                                    @foreach($data['manager_income_agents'] as $agent)
                                    <option value="{{ $agent->id }}" {{ (session('aragentsearch') == $agent->id) ? 'selected' : '' }}>
                                        {{ $agent->name }} {{ $agent->last_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    <!-- Summary Section -->
                    <div class="show_amount_detail">
                        <div class="sho_amount pr-10"> 
                            <strong>Outstanding Invoice Amt. = </strong>
                            <strong id="manager_outstanding">$ Loading...</strong>
                        </div>
                        <div class="sho_amount pl-10">
                            <strong>Gross Revenue = </strong>
                            <strong id="manager_gross_revenue">$ Loading...</strong>
                        </div>
                        <div class="sho_amount pl-10">
                            <strong>Agent Income = </strong>
                            <strong id="manager_agent_income">$ Loading...</strong>
                        </div>
                    </div>

                    <!-- Filter Section -->
                    <div class="box-header">
                        <form method="get" id="manager_filter_form">
                            <div class="row">
                                <div class="input_wraper col-md-4">
                                    <span class="dt-ser-lab">From</span>
                                    <input type="text" id="manager_search_start_date" name="search_start_date" class="form-control dt-ser" placeholder="Select start date" autocomplete="off">
                                </div>
                                <div class="input_wraper col-md-4">
                                    <span class="dt-ser-lab">To</span>
                                    <input type="text" id="manager_search_end_date" name="search_end_date" class="form-control dt-ser" placeholder="Select end date" autocomplete="off">
                                </div>
                                <div class="col-md-4 text-right">
                                    <span class="pt-10 mt-10" style="display: inline-block;">
                                        <button type="button" onclick="loadManagerIncome()" class="top-btn btn btn-primary ser-btn">
                                            <i class="fa fa-search"></i> Search
                                        </button>
                                        <button type="button" onclick="resetManagerFilters()" class="top-btn btn btn-primary ser-btn" style="margin-left: 7px;">
                                            <i class="fa fa-refresh"></i> Reset
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- Action Buttons -->
                    <div class="box-header">
                        <a class="top-btn btn btn-primary ser-btn mb-10 ml-10" id="manager_print_preview" onclick="getManagerPDF()">
                            <i class="fa fa-print"></i> Preview/Print
                        </a>
                        <a class="top-btn btn btn-primary ser-btn mb-10 ml-10" id="manager_export_csv" onclick="downloadManagerIncome('csv')">
                            <i class="fa fa-download"></i> Export CSV
                        </a>
                    </div>

                    <!-- Data Table -->
                    <div class="box-body">
                        <div class="loading-spinner" id="manager_loading">
                            <div style="text-align:center;">
                                <i class="fa fa-spinner fa-spin fa-3x fa-fw text-primary"></i>
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p style="margin-top: 10px;">Loading data...</p>
                        </div>
                        
                        <div class="table_con" style="display:none;">
                            <table id="manager_income_table" class="table table-bordered table-hover" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Client</th>
                                        <th>Client Name</th>
                                        <th>Res. commission($)</th>
                                        <th>Paid Amt. ($)</th>
                                        <th>Payment Date</th>
                                        <th>Status</th>
                                        <th>Deduction($)</th>
                                        <th>Agent Income($)</th>
                                        <th>Paid Out</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data will be loaded via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Distributor Income Tab -->
                @if($data['user_role'] == 1 || $data['user_role'] == 2 || (Auth::user()->manage_distributor == 1))
                <div class="tab-pane {{ $data['active_tab'] == 'distributor' ? 'active' : '' }}" 
                     id="distributor" 
                     role="tabpanel" 
                     aria-labelledby="distributor-tab">
                    
                    <!-- Distributor and Agent Selection Dropdowns - Above summary section on right side -->
                    @if($data['show_distributor_dropdown'] == 1 || $data['show_distributor_agent_dropdown'] == 1)
                    <div class="row" style="margin-bottom: 15px;">
                        <div class="col-md-12">
                            <!-- Agent dropdown (rightmost) -->
                            @if($data['show_distributor_agent_dropdown'] == 1)
                            <div class="input_container" style="float: right; min-width: 235px;">
                                <span style="padding-right: 10px;">Select Agent</span>
                                <select id="distributor_select_agent" name="agent_id" class="form-control select2" style="width: 235px">
                                    <option value="">Select Agent</option>
                                    @if($data['user_role'] == 3 && Auth::user()->manage_distributor == 1)
                                        <!-- For distributors, show agents directly -->
                                        @foreach($data['distributor_agents'] as $agent)
                                        <option value="{{ $agent->id }}" {{ (session('aragentsearch') == $agent->id) ? 'selected' : '' }}>
                                            {{ $agent->name }} {{ $agent->last_name }}
                                        </option>
                                        @endforeach
                                    @else
                                        <!-- Agents will be populated via AJAX when distributor is selected -->
                                    @endif
                                </select>
                            </div>
                            @endif
                            
                            <!-- Distributor dropdown (only for SUPERADMIN/ADMIN/ARUSER) -->
                            @if($data['show_distributor_dropdown'] == 1)
                            <div class="input_container" style="float: right; min-width: 235px; margin-right: 10px;">
                                <span style="padding-right: 10px;">Select Distributor</span>
                                <select id="distributor_select_distributor" name="distributor_id" class="form-control select2" style="width: 235px">
                                    <option value="">Select Distributor</option>
                                    @foreach($data['distributors'] as $distributor)
                                    <option value="{{ $distributor->id }}" {{ (session('disagentsearch') == $distributor->id) ? 'selected' : '' }}>
                                        {{ $distributor->name }} {{ $distributor->last_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                            @endif
                        </div>
                    </div>
                    @endif
                    
                    <!-- Summary Section -->
                    <div class="show_amount_detail">
                        <div class="sho_amount pr-10"> 
                            <strong>Outstanding Invoice Amt. = </strong>
                            <strong id="distributor_outstanding">$ Loading...</strong>
                        </div>
                        <div class="sho_amount pl-10">
                            <strong>Gross Revenue = </strong>
                            <strong id="distributor_gross_revenue">$ Loading...</strong>
                        </div>
                        <div class="sho_amount pl-10">
                            <strong>Distributor Income = </strong>
                            <strong id="distributor_income">$ Loading...</strong>
                        </div>
                    </div>

                    <!-- Filter Section -->
                    <div class="box-header">
                        <form method="get" id="distributor_filter_form">
                            <div class="row">
                                <div class="input_wraper col-md-3">
                                    <span class="dt-ser-lab">From</span>
                                    <input type="text" id="distributor_search_start_date" name="search_start_date" class="form-control dt-ser" placeholder="Select start date" autocomplete="off">
                                </div>
                                <div class="input_wraper col-md-3">
                                    <span class="dt-ser-lab">To</span>
                                    <input type="text" id="distributor_search_end_date" name="search_end_date" class="form-control dt-ser" placeholder="Select end date" autocomplete="off">
                                </div>
                                <div class="col-md-6 text-right">
                                    <span class="pt-10 mt-10" style="display: inline-block;">
                                        <button type="button" onclick="loadDistributorIncome()" class="top-btn btn btn-primary ser-btn">
                                            <i class="fa fa-search"></i> Search
                                        </button>
                                        <button type="button" onclick="resetDistributorFilters()" class="top-btn btn btn-primary ser-btn" style="margin-left: 7px;">
                                            <i class="fa fa-refresh"></i> Reset
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- Action Buttons -->
                    <div class="box-header">
                        <a class="top-btn btn btn-primary ser-btn mb-10 ml-10" id="distributor_print_preview" onclick="getDistributorPDF()">
                            <i class="fa fa-print"></i> Preview/Print
                        </a>
                        <a class="top-btn btn btn-primary ser-btn mb-10 ml-10" id="distributor_export_csv" onclick="downloadDistributorIncome('csv')">
                            <i class="fa fa-download"></i> Export CSV
                        </a>
                    </div>

                    <!-- Data Table -->
                    <div class="box-body">
                        <div class="loading-spinner" id="distributor_loading">
                            <div style="text-align:center;">
                                <i class="fa fa-spinner fa-spin fa-3x fa-fw text-primary"></i>
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p style="margin-top: 10px;">Loading data...</p>
                        </div>
                        
                        <div class="table_con" style="display:none;">
                            <table id="distributor_income_table" class="table table-bordered table-hover" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Client</th>
                                        <th>Client Name</th>
                                        <th id="distributor_agent_name_header" style="display:none;">Agent Name</th>
                                        <th>Res. commission($)</th>
                                        <th>Paid Amt.($)</th>
                                        <th>Paid Date</th>
                                        <th>Deduction($)</th>
                                        <th>Net Income($)</th>
                                        <th>Paid Out</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data will be loaded via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</section>

<!-- Deduction Modal (same as income_new.blade.php) -->
<div class="modal fade" id="showdeduct" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Deduction Details</h4>
      </div>
      <div class="modal-body">
        <div id="table_datass"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Invoice Count Modal (for Admin and AR Income) -->
<div class="modal fade" id="invoice_count_popup">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Get Invoices</h4>
      </div>
      <div class="modal-body" id="open_editform">
        <div class="row">
          <div class="col-md-6 col-sm-12 input_wraper">
            <span class="dt-ser-lab">From</span>
            <input type="text" id="invoice_start_date" name="invoice_start_date" class="form-control dt-ser" value="" placeholder="Invoice start date" autocomplete="off">
          </div>
          <div class="col-md-6 col-sm-12 input_wraper">
            <span class="dt-ser-lab">To</span>
            <input type="text" id="invoice_end_date" name="invoice_end_date" class="form-control dt-ser" value="" placeholder="Invoice end date" autocomplete="off">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" id="get_invoices_count" class="btn btn-primary">Get Invoices</button>
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- 1099 Report Modal (for Admin Income - user_role 2 and id 36) -->
<div class="modal fade" id="tax_report_popup">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Get 1099 Report</h4>
      </div>
      <form enctype="multipart/form-data" method="GET" action="{{ url('/get_tax_report') }}">
        <div class="modal-body" id="open_editform">
          <div class="row">
            <div class="col-md-6 col-sm-12 input_wraper">
              <span class="dt-ser-lab">From</span>
              <input type="text" id="report_start_date" name="report_start_date" class="form-control dt-ser" value="" placeholder="Report start date" autocomplete="off">
            </div>
            <div class="col-md-6 col-sm-12 input_wraper">
              <span class="dt-ser-lab">To</span>
              <input type="text" id="report_end_date" name="report_end_date" class="form-control dt-ser" value="" placeholder="Report end date" autocomplete="off">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" id="get_report" class="btn btn-primary">Get Report</button>
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Include necessary scripts - Note: jQuery and Bootstrap are already loaded in layout -->
<!-- Additional DataTables CSS/JS if needed -->

<script>
// Initialize DataTables variables in global scope
var adminTable = null;
var agentTable = null;
var arTable = null;
var teamTable = null;
var managerTable = null;
var distributorTable = null;

$(document).ready(function() {
    // Initialize date pickers
    $('.dt-ser').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight: true
    });

    // Initialize Select2 for agent dropdown if it exists
    if($('#agent_income_agent_id').length > 0) {
        $('#agent_income_agent_id').select2({
            placeholder: 'Select Agent',
            allowClear: true
        });
    }
    
    // Initialize Select2 for AR user dropdown if it exists
    if($('#ar_income_user_id').length > 0) {
        $('#ar_income_user_id').select2({
            placeholder: 'Select AR User',
            allowClear: true
        });
    }
    
    // Initialize Select2 for team manager dropdown if it exists
    if($('#team_select_manager').length > 0) {
        $('#team_select_manager').select2({
            placeholder: 'Select Manager',
            allowClear: true
        });
    }
    
    // Initialize Select2 for manager agent dropdown if it exists
    if($('#manager_income_agent_id').length > 0) {
        $('#manager_income_agent_id').select2({
            placeholder: 'Select Agent',
            allowClear: true
        });
    }
    
    // Initialize Select2 for distributor dropdown if it exists
    if($('#distributor_select_distributor').length > 0) {
        $('#distributor_select_distributor').select2({
            placeholder: 'Select Distributor',
            allowClear: true
        });
    }
    
    // Initialize Select2 for distributor agent dropdown if it exists
    if($('#distributor_select_agent').length > 0) {
        $('#distributor_select_agent').select2({
            placeholder: 'Select Agent',
            allowClear: true
        });
    }
    
    // Handle distributor agent dropdown change - use event delegation that works with Select2
    // This will work even after Select2 is re-initialized
    // Support both native change and Select2's change event
    $(document).on('change select2:select', '#distributor_select_agent', function(e) {
        // Make absolutely sure this is the distributor agent dropdown
        var $select = $(this);
        if($select.attr('id') === 'distributor_select_agent') {
            e.stopPropagation(); // Prevent event bubbling
            // Use setTimeout to ensure Select2 has finished updating
            setTimeout(function() {
                handleDistributorAgentChange.call($select[0]);
            }, 10);
        }
    });

    // Load data when tab is shown - tabs remain enabled during loading
    $('#incomeTabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var target = $(e.target).attr("href");
        
        // Don't disable other tabs - allow switching between tabs freely
        switch(target) {
            case '#admin':
                if (!adminTable) {
                    loadAdminIncome();
                }
                break;
            case '#agent':
                if (!agentTable) {
                    loadAgentIncome();
                }
                break;
            case '#ar':
                if (!arTable) {
                    loadArIncome();
                }
                break;
            case '#team':
                if (!teamTable) {
                    loadTeamIncome();
                }
                break;
            case '#manager':
                if (!managerTable) {
                    loadManagerIncome();
                }
                break;
            case '#distributor':
                if (!distributorTable) {
                    loadDistributorIncome();
                }
                break;
        }
    });
    
    // Ensure tabs are always enabled (not disabled during loading)
    $('#incomeTabs a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        // Allow tab switching even if data is loading
        // Don't prevent default - allow the tab to switch
    });

    // Load initial data for active tab automatically after a short delay
    // For SUPERADMIN (1) and ADMIN (2), don't auto-load agent, ar, team, distributor tabs
    // They need to select from dropdown first
    setTimeout(function() {
        @if($data['active_tab'] == 'admin')
            loadAdminIncome();
        @elseif($data['active_tab'] == 'agent')
            @if($data['user_role'] == 1 || $data['user_role'] == 2)
                // Don't auto-load for SUPERADMIN/ADMIN - wait for agent selection
            @else
            loadAgentIncome();
            @endif
        @elseif($data['active_tab'] == 'ar')
            @if($data['user_role'] == 1 || $data['user_role'] == 2)
                // Don't auto-load for SUPERADMIN/ADMIN - wait for AR selection
            @else
            loadArIncome();
            @endif
        @elseif($data['active_tab'] == 'team')
            @if($data['user_role'] == 1 || $data['user_role'] == 2)
                // Don't auto-load for SUPERADMIN/ADMIN - wait for manager selection
            @else
            loadTeamIncome();
            @endif
        @elseif($data['active_tab'] == 'manager')
            @if($data['user_role'] == 3 && Auth::user()->manage_manager == 1)
                // Don't auto-load - wait for agent selection
            @endif
        @elseif($data['active_tab'] == 'distributor')
            @if($data['user_role'] == 1 || $data['user_role'] == 2 || $data['user_role'] == 4)
                // Don't auto-load for SUPERADMIN/ADMIN/ARUSER - wait for distributor selection
            @elseif($data['user_role'] == 3 && Auth::user()->manage_distributor == 1)
                // For distributors, auto-load (distributor_id will be set to their own ID in backend)
                loadDistributorIncome();
            @endif
        @else
            // Default to admin if no active tab specified
            loadAdminIncome();
        @endif
    }, 500); // Small delay to ensure page is fully loaded
});

// Admin Income Functions
function loadAdminIncome() {
    // Don't disable other tabs - allow users to switch tabs freely
    if (adminTable) {
        adminTable.destroy();
    }
    
    // Hide table and show loading
    $('#admin_income_table').closest('.table_con').hide();
    showLoading('admin_loading');
    
    // Ensure all tabs remain enabled/clickable
    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
    
    // Load all data at once (client-side processing)
    $.ajax({
        url: '{{ route("unified-income-data") }}',
        type: 'GET',
        data: {
            tab: 'admin',
            admin_year_filter: $('#admin_year_filter').val(), // Pass year filter
            search_start_date: $('#admin_search_start_date').val(),
            search_end_date: $('#admin_search_end_date').val(),
            client_name: '',
            client_id: '',
            income: 'all',
            income_url: 'adminincome',
            reseturl: 'adminincome'
        },
        beforeSend: function() {
            showLoading('admin_loading');
            // Keep tabs enabled during loading
            $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
        },
        success: function(response) {
            hideLoading('admin_loading');
            
            // Update summary from total_data
            if(response.total_data) {
                updateAdminSummary(response.total_data);
            }
            
            // Initialize DataTables with all data (client-side processing)
            adminTable = $('#admin_income_table').DataTable({
                processing: false,
                serverSide: false, // Client-side processing
                data: response.data || [],
                columns: [
                    { data: 0, orderable: true }, // Client ID
                    { data: 1, orderable: true }, // Client Name
                    { data: 2, orderable: false }, // Res. commission
                    { data: 3, orderable: true }, // Paid Amt
                    { data: 4, orderable: false }, // Payment Date
                    { data: 5, orderable: true }, // Status
                    { data: 6, orderable: false }, // Deduction
                    { data: 7, orderable: false }, // Agent Income
                    { data: 8, orderable: false }, // Company Income
                    { data: 9, orderable: true } // Paid Out
                ],
                order: [[0, 'desc']],
                pageLength: 25,
                responsive: true,
                language: {
                    processing: '<div style="text-align:center;padding:20px;"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div><p>Processing...</p></div>'
                },
                drawCallback: function(settings) {
                    $('.table_con').show();
                    // Ensure tabs remain enabled after data loads
                    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
                },
                initComplete: function(settings, json) {
                    $('.table_con').show();
                    // Ensure tabs remain enabled after initialization
                    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
                }
            });
        },
        error: function(xhr, error, thrown) {
            hideLoading('admin_loading');
            // Re-enable tabs on error
            $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
            console.error('Error loading admin income:', error);
            alert('Error loading admin income data. Please try again.');
        }
    });
}

function updateAdminSummary(data) {
    // Update from total_data response structure (same as income_list)
    if(data.outstanding !== undefined) {
        $('#admin_outstanding').html(data.outstanding);
    }
    if(data.gross_revenue !== undefined) {
        $('#admin_gross_revenue').html(data.gross_revenue);
    }
    if(data.company_income !== undefined) {
        $('#admin_company_income').html(data.company_income);
    }
}

function searchAdminIncome() {
    // Reload all data with new filters
    if (adminTable) {
        adminTable.destroy();
        adminTable = null;
    }
    loadAdminIncome();
}

function resetAdminFilters() {
    $('#admin_year_filter').val('{{ date("Y") }}'); // Reset to current year
    $('#admin_search_start_date').val('');
    $('#admin_search_end_date').val('');
    // Reload all data
    if (adminTable) {
        adminTable.destroy();
        adminTable = null;
    }
    loadAdminIncome();
}

// Handle Admin year filter dropdown change
$(document).on('change', '#admin_year_filter', function() {
    // Reload Admin income data when year changes
    if (adminTable) {
        adminTable.destroy();
        adminTable = null;
    }
    loadAdminIncome();
});

// Agent Income Functions
function loadAgentIncome() {
    // Don't disable other tabs - allow users to switch tabs freely
    if (agentTable) {
        agentTable.destroy();
    }
    
    // Hide table and show loading
    $('#agent_income_table').closest('.table_con').hide();
    showLoading('agent_loading');
    
    // Ensure all tabs remain enabled/clickable
    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
    
    // Get selected agent ID if dropdown exists - IMPORTANT: This is agent_income_agent_id, NOT distributor_select_agent
    var selectedAgentId = $('#agent_income_agent_id').length > 0 ? $('#agent_income_agent_id').val() : '';
    
    // For SUPERADMIN/ADMIN, require agent selection
    @if($data['user_role'] == 1 || $data['user_role'] == 2)
        if(!selectedAgentId) {
            hideLoading('agent_loading');
            // alert('Please select an agent first');
            return;
        }
    @endif
    
    // No need to set session - agent_id will be sent in URL parameters
    
    // Load all data at once (client-side processing)
    $.ajax({
        url: '{{ route("unified-income-data") }}',
        type: 'GET',
        data: {
            tab: 'agent', // IMPORTANT: This is 'agent' for Agent Income tab
            agent_id: selectedAgentId, // Pass agent_id to controller
            search_start_date: $('#agent_search_start_date').val(),
            search_end_date: $('#agent_search_end_date').val(),
            client_name: '',
            client_id: '',
            income: 'agent',
            income_url: 'agentincome',
            reseturl: 'agentincome'
        },
        beforeSend: function() {
            showLoading('agent_loading');
            // Keep tabs enabled during loading
            $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
        },
        success: function(response) {
            hideLoading('agent_loading');
            
            // Update summary from total_data (same structure as income_list)
            if(response.total_data) {
                updateAgentSummary(response.total_data);
            }
            
            // Initialize DataTables with all data (client-side processing)
            agentTable = $('#agent_income_table').DataTable({
                processing: false,
                serverSide: false, // Client-side processing
                data: response.data || [],
                columns: [
                    { data: 0, orderable: true }, // Client ID
                    { data: 1, orderable: true }, // Client Name
                    { data: 2, orderable: false }, // Res. commission
                    { data: 3, orderable: true }, // Paid Amt
                    { data: 4, orderable: false }, // Payment Date
                    { data: 5, orderable: true }, // Status
                    { data: 6, orderable: false }, // Deduction
                    { data: 7, orderable: false }, // Agent Income
                    { data: 8, orderable: true } // Paid Out
                ],
                order: [[0, 'desc']],
                pageLength: 25,
                responsive: true,
                language: {
                    processing: '<div style="text-align:center;padding:20px;"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div><p>Processing...</p></div>'
                },
                drawCallback: function(settings) {
                    $('.table_con').show();
                    // Ensure tabs remain enabled after data loads
                    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
                },
                initComplete: function(settings, json) {
                    $('.table_con').show();
                    // Ensure tabs remain enabled after initialization
                    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
                }
            });
        },
        error: function(xhr, status, error) {
            hideLoading('agent_loading');
            // Re-enable tabs on error
            $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
            console.error('Error loading agent income:', error);
            alert('Error loading agent income data. Please try again.');
        }
    });
}

function updateAgentSummary(data) {
    // Update from total_data response structure (same as income_list)
    if(data.outstanding !== undefined) {
        $('#agent_outstanding').html(data.outstanding);
    }
    if(data.gross_revenue !== undefined) {
        $('#agent_gross_revenue').html(data.gross_revenue);
    }
    if(data.agent_income !== undefined) {
        $('#agent_income').html(data.agent_income);
    }
}

function resetAgentFilters() {
    $('#agent_search_start_date').val('');
    $('#agent_search_end_date').val('');
    // Reload all data
    if (agentTable) {
        agentTable.destroy();
        agentTable = null;
    }
    loadAgentIncome();
}

// Handle agent dropdown change (if exists) - for Agent Income tab only
$(document).on('change', '#agent_income_agent_id', function(e) {
    // Make absolutely sure this is the agent income dropdown, not distributor
    if($(this).attr('id') !== 'agent_income_agent_id') {
        return;
    }
    
    e.stopPropagation(); // Prevent event bubbling
    
    var agentId = $(this).val();
    // Reload agent income data directly - agent_id will be sent in URL parameters
    if (agentTable) {
        agentTable.destroy();
        agentTable = null;
    }
    loadAgentIncome(); // This will call getIncomeData with agent_id in URL
});

// AR Income Functions
function loadArIncome() {
    // Don't disable other tabs - allow users to switch tabs freely
    if (arTable) {
        try {
            arTable.destroy();
        } catch(e) {
            console.log('Error destroying AR table:', e);
        }
        arTable = null;
    }
    
    // Clear any existing DataTable instance
    if ($.fn.DataTable.isDataTable('#ar_income_table')) {
        try {
            $('#ar_income_table').DataTable().clear().destroy();
        } catch(e) {
            console.log('Error clearing AR DataTable:', e);
        }
    }
    
    // Hide table and show loading
    $('#ar_income_table').closest('.table_con').hide();
    showLoading('ar_loading');
    
    // Ensure all tabs remain enabled/clickable
    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
    
    // Get selected AR user ID if dropdown exists
    var selectedArUserId = $('#ar_income_user_id').length > 0 ? $('#ar_income_user_id').val() : '';
    
    // For SUPERADMIN/ADMIN, require AR user selection
    @if($data['user_role'] == 1 || $data['user_role'] == 2)
        if(!selectedArUserId) {
            hideLoading('ar_loading');
            // alert('Please select an AR user first');
            return;
        }
    @endif
    
    // No need to set session - ar_user_id will be sent in URL parameters
    
    // Load all data at once (client-side processing)
    $.ajax({
        url: '{{ route("unified-income-data") }}',
        type: 'GET',
        data: {
            tab: 'ar',
            ar_user_id: selectedArUserId, // Pass ar_user_id to controller
            ar_year_filter: $('#ar_year_filter').val(), // Pass year filter
            search_start_date: $('#ar_search_start_date').val(),
            search_end_date: $('#ar_search_end_date').val(),
            client_name: '',
            client_id: '',
            search_agent: 'submit'
        },
        beforeSend: function() {
            showLoading('ar_loading');
            // Keep tabs enabled during loading
            $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
        },
        success: function(response) {
            hideLoading('ar_loading');
            
            // Update summary from total_data (same structure as arincome)
            if(response.total_data) {
                updateArSummary(response.total_data);
            }
            
            // Make sure DataTable is not already initialized
            if ($.fn.DataTable.isDataTable('#ar_income_table')) {
                try {
                    $('#ar_income_table').DataTable().clear().destroy();
                } catch(e) {
                    console.log('Error clearing AR DataTable before init:', e);
                }
            }
            
            // Clear the table body before reinitializing
            $('#ar_income_table tbody').empty();
            
            // Initialize DataTables with all data (client-side processing)
            arTable = $('#ar_income_table').DataTable({
                processing: false,
                serverSide: false, // Client-side processing
                data: response.data || [],
                columns: [
                    { data: 0, orderable: true }, // Client ID
                    { data: 1, orderable: true }, // Client Name
                    { data: 2, orderable: false }, // Res. commission
                    { data: 3, orderable: true }, // Paid Amt
                    { data: 4, orderable: false }, // Payment Date
                    { data: 5, orderable: true }, // Status
                    { data: 6, orderable: false }, // Deduction
                    { data: 7, orderable: false }, // Agent Income
                    { data: 8, orderable: false }, // AR Income
                    { data: 9, orderable: true } // Paid Out
                ],
                order: [[0, 'desc']],
                pageLength: 25,
                responsive: true,
                language: {
                    processing: '<div style="text-align:center;padding:20px;"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div><p>Processing...</p></div>'
                },
                drawCallback: function(settings) {
                    $('.table_con').show();
                    // Ensure tabs remain enabled after data loads
                    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
                },
                initComplete: function(settings, json) {
                    $('.table_con').show();
                    // Ensure tabs remain enabled after initialization
                    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
                }
            });
        },
        error: function(xhr, status, error) {
            hideLoading('ar_loading');
            // Re-enable tabs on error
            $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
            console.error('Error loading AR income:', error);
            alert('Error loading AR income data. Please try again.');
        }
    });
}

function updateArSummary(data) {
    // Update from total_data response structure (same as arincome)
    if(data.outstanding !== undefined) {
        $('#ar_outstanding').html(data.outstanding);
    }
    if(data.gross_revenue !== undefined) {
        $('#ar_gross_revenue').html(data.gross_revenue);
    }
    if(data.ar_income !== undefined) {
        $('#ar_income').html(data.ar_income);
    }
}

function resetArFilters() {
    $('#ar_year_filter').val('{{ date("Y") }}'); // Reset to current year
    $('#ar_search_start_date').val('');
    $('#ar_search_end_date').val('');
    // Reload all data
    if (arTable) {
        arTable.destroy();
        arTable = null;
    }
    loadArIncome();
}

// Handle AR user dropdown change (if exists)
$(document).on('change', '#ar_income_user_id', function() {
    var arUserId = $(this).val();
    // Reload AR income data directly - ar_user_id will be sent in URL parameters
    if (arTable) {
        arTable.destroy();
        arTable = null;
    }
    loadArIncome(); // This will call getIncomeData with ar_user_id in URL
});

// Handle AR year filter dropdown change
$(document).on('change', '#ar_year_filter', function() {
    // Reload AR income data when year changes
    if (arTable) {
        arTable.destroy();
        arTable = null;
    }
    loadArIncome();
});

// Team Income Functions
function loadTeamIncome() {
    // Don't disable other tabs - allow users to switch tabs freely
    if (teamTable) {
        teamTable.destroy();
    }
    
    // Hide table and show loading
    $('#team_income_table').closest('.table_con').hide();
    showLoading('team_loading');
    
    // Ensure all tabs remain enabled/clickable
    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
    
    // Get selected manager ID
    var selectedManagerId = $('#team_select_manager').val();
    
    // For SUPERADMIN/ADMIN, require manager selection
    @if($data['user_role'] == 1 || $data['user_role'] == 2)
        if(!selectedManagerId) {
            hideLoading('team_loading');
            // alert('Please select a manager first');
            return;
        }
    @endif
    
    // Session will be set in controller when select_manager is passed
    
    // Load all data at once (client-side processing)
    $.ajax({
        url: '{{ route("unified-income-data") }}',
        type: 'GET',
        data: {
            tab: 'team',
            select_manager: selectedManagerId, // Pass manager ID to controller
            search_start_date: $('#team_search_start_date').val(),
            search_end_date: $('#team_search_end_date').val()
        },
        beforeSend: function() {
            showLoading('team_loading');
            // Keep tabs enabled during loading
            $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
        },
        success: function(response) {
            hideLoading('team_loading');
            
            // Update summary from total_data (same structure as teamIncome)
            if(response.total_data) {
                updateTeamSummary(response.total_data);
            }
            
            // Initialize DataTables with all data (client-side processing)
            teamTable = $('#team_income_table').DataTable({
                processing: false,
                serverSide: false, // Client-side processing
                data: response.data || [],
                columns: [
                    { data: 0, orderable: true }, // Client ID
                    { data: 1, orderable: true }, // Client Name
                    { data: 2, orderable: false }, // Agent
                    { data: 3, orderable: true }, // Paid Amt
                    { data: 4, orderable: false }, // Payment Date
                    { data: 5, orderable: true }, // Status
                    { data: 6, orderable: false }, // Team Income
                    { data: 7, orderable: true } // Paid Out
                ],
                order: [[0, 'desc']],
                pageLength: 25,
                responsive: true,
                language: {
                    processing: '<div style="text-align:center;padding:20px;"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div><p>Processing...</p></div>'
                },
                drawCallback: function(settings) {
                    $('.table_con').show();
                    // Ensure tabs remain enabled after data loads
                    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
                },
                initComplete: function(settings, json) {
                    $('.table_con').show();
                    // Ensure tabs remain enabled after initialization
                    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
                }
            });
        },
        error: function(xhr, status, error) {
            hideLoading('team_loading');
            // Re-enable tabs on error
            $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
            console.error('Error loading team income:', error);
            alert('Error loading team income data. Please try again.');
        }
    });
}

function updateTeamSummary(data) {
    // Update from total_data response structure (same as teamIncome)
    if(data.total_invoiced !== undefined) {
        $('#team_total_invoiced').html(data.total_invoiced);
    }
    if(data.total_payment !== undefined) {
        $('#team_total_payment').html(data.total_payment);
    }
    if(data.team_income !== undefined) {
        $('#team_team_income').html(data.team_income);
    }
}

function resetTeamFilters() {
    $('#team_search_start_date').val('');
    $('#team_search_end_date').val('');
    // Don't reset manager selection - keep it for SUPERADMIN/ADMIN
    @if($data['user_role'] != 1 && $data['user_role'] != 2)
    $('#team_select_manager').val('');
    @endif
    // Reload all data
    if (teamTable) {
        teamTable.destroy();
        teamTable = null;
    }
    loadTeamIncome();
}

// Handle team manager dropdown change (if exists)
$(document).on('change', '#team_select_manager', function() {
    var managerId = $(this).val();
    // Reload team income data directly - select_manager will be sent in URL parameters
    if (teamTable) {
        teamTable.destroy();
        teamTable = null;
    }
    loadTeamIncome(); // This will call getIncomeData with select_manager in URL
});

// Manager Income Functions
function loadManagerIncome() {
    // Don't disable other tabs - allow users to switch tabs freely
    if (managerTable) {
        managerTable.destroy();
    }
    
    // Hide table and show loading
    $('#manager_income_table').closest('.table_con').hide();
    showLoading('manager_loading');
    
    // Ensure all tabs remain enabled/clickable
    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
    
    // Get selected agent ID if dropdown exists
    var selectedAgentId = $('#manager_income_agent_id').length > 0 ? $('#manager_income_agent_id').val() : '';
    
    // For managers, require agent selection
    if(!selectedAgentId) {
        hideLoading('manager_loading');
        return;
    }
    
    // Load all data at once (client-side processing)
    $.ajax({
        url: '{{ route("unified-income-data") }}',
        type: 'GET',
        data: {
            tab: 'manager',
            agent_id: selectedAgentId, // Pass agent_id to controller
            search_start_date: $('#manager_search_start_date').val(),
            search_end_date: $('#manager_search_end_date').val(),
            client_name: '',
            client_id: '',
            search_agent: 'submit'
        },
        beforeSend: function() {
            showLoading('manager_loading');
            // Keep tabs enabled during loading
            $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
        },
        success: function(response) {
            hideLoading('manager_loading');
            
            // Update summary from total_data
            if(response.total_data) {
                updateManagerSummary(response.total_data);
            }
            
            // Initialize DataTables with all data (client-side processing)
            managerTable = $('#manager_income_table').DataTable({
                processing: false,
                serverSide: false, // Client-side processing
                data: response.data || [],
                columns: [
                    { data: 0, orderable: true }, // Client ID
                    { data: 1, orderable: true }, // Client Name
                    { data: 2, orderable: false }, // Res. commission
                    { data: 3, orderable: true }, // Paid Amt
                    { data: 4, orderable: false }, // Payment Date
                    { data: 5, orderable: true }, // Status
                    { data: 6, orderable: false }, // Deduction
                    { data: 7, orderable: false }, // Agent Income
                    { data: 8, orderable: true } // Paid Out
                ],
                order: [[0, 'desc']],
                pageLength: 25,
                responsive: true,
                language: {
                    processing: '<div style="text-align:center;padding:20px;"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div><p>Processing...</p></div>'
                },
                drawCallback: function(settings) {
                    $('.table_con').show();
                    // Ensure tabs remain enabled after data loads
                    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
                },
                initComplete: function(settings, json) {
                    $('.table_con').show();
                    // Ensure tabs remain enabled after initialization
                    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
                }
            });
        },
        error: function(xhr, status, error) {
            hideLoading('manager_loading');
            // Re-enable tabs on error
            $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
            console.error('Error loading manager income:', error);
            alert('Error loading manager income data. Please try again.');
        }
    });
}

function updateManagerSummary(data) {
    // Update from total_data response structure
    if(data.outstanding !== undefined) {
        $('#manager_outstanding').html(data.outstanding);
    }
    if(data.gross_revenue !== undefined) {
        $('#manager_gross_revenue').html(data.gross_revenue);
    }
    if(data.agent_income !== undefined) {
        $('#manager_agent_income').html(data.agent_income);
    }
}

function resetManagerFilters() {
    $('#manager_search_start_date').val('');
    $('#manager_search_end_date').val('');
    // Reload all data
    if (managerTable) {
        managerTable.destroy();
        managerTable = null;
    }
    loadManagerIncome();
}

// Handle manager agent dropdown change (if exists)
$(document).on('change', '#manager_income_agent_id', function() {
    var agentId = $(this).val();
    // Reload manager income data directly - agent_id will be sent in URL parameters
    if (managerTable) {
        managerTable.destroy();
        managerTable = null;
    }
    loadManagerIncome(); // This will call getIncomeData with agent_id in URL
});

// Distributor Income Functions
function loadDistributorIncome() {
    // Prevent multiple simultaneous requests
    if(distributorIncomeLoading) {
        return;
    }
    
    // Don't disable other tabs - allow users to switch tabs freely
    if (distributorTable) {
        distributorTable.destroy();
    }
    
    showLoading('distributor_loading');
    
    // Ensure all tabs remain enabled/clickable
    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
    
    // Get selected distributor and agent IDs
    var selectedDistributorId = $('#distributor_select_distributor').length > 0 ? $('#distributor_select_distributor').val() : '';
    var selectedAgentId = $('#distributor_select_agent').length > 0 ? $('#distributor_select_agent').val() : '';
    
    // For SUPERADMIN/ADMIN/ARUSER, require distributor selection
    // For distributors (manage_distributor=1), distributor_id will be auto-set to their own ID in backend
    @if($data['user_role'] == 1 || $data['user_role'] == 2 || $data['user_role'] == 4)
        if(!selectedDistributorId) {
            hideLoading('distributor_loading');
            // alert('Please select a distributor first');
            return;
        }
    @endif
    
    // Set loading flag
    distributorIncomeLoading = true;
    
    // Show loading in summary amounts
    $('#distributor_outstanding').html('$ Loading...');
    $('#distributor_gross_revenue').html('$ Loading...');
    $('#distributor_income').html('$ Loading...');
    
    // Hide table and show loading
    $('#distributor_income_table').closest('.table_con').hide();
    
    // No need to set sessions - distributor_id and agent_id will be sent in URL parameters
    
    // Load all data at once (client-side processing)
    // Always send both distributor_id and agent_id in URL parameters (not session)
    $.ajax({
        url: '{{ route("unified-income-data") }}',
        type: 'GET',
        data: {
            tab: 'distributor', // IMPORTANT: This must be 'distributor', not 'agent'
            distributor_id: selectedDistributorId || '', // Pass distributor ID to controller (required)
            agent_id: selectedAgentId || '', // Pass agent ID to controller (optional, empty if not selected)
            search_start_date: $('#distributor_search_start_date').val(),
            search_end_date: $('#distributor_search_end_date').val(),
            search_agent: 'submit' // Trigger search logic in backend
        },
        beforeSend: function() {
            showLoading('distributor_loading');
            // Show loading in summary amounts
            $('#distributor_outstanding').html('$ Loading...');
            $('#distributor_gross_revenue').html('$ Loading...');
            $('#distributor_income').html('$ Loading...');
            // Keep tabs enabled during loading
            $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
        },
        success: function(response) {
            hideLoading('distributor_loading');
            distributorIncomeLoading = false; // Reset loading flag
            
            // Update agent dropdown if agents are returned
            // Always update when agents are returned (distributor selection triggers this)
            var agentSelect = $('#distributor_select_agent');
            
            if(response.agents && response.agents.length > 0) {
                // Get the currently selected agent ID (if user had manually selected one)
                var currentAgentId = agentSelect.val();
                
                // Update dropdown with agents for the selected distributor
                agentSelect.empty();
                agentSelect.append('<option value="">Select Agent</option>');
                response.agents.forEach(function(agent) {
                    // Only preserve selection if user had manually selected this agent before
                    // Don't auto-select the first agent - let user choose
                    var selected = (currentAgentId && agent.id == currentAgentId) ? 'selected' : '';
                    agentSelect.append('<option value="' + agent.id + '" ' + selected + '>' + agent.name + ' ' + agent.last_name + '</option>');
                });
                // Re-initialize Select2 after updating options
                agentSelect.select2('destroy').select2({
                    placeholder: 'Select Agent',
                    allowClear: true
                });
            } else {
                // If no agents returned, clear the dropdown
                agentSelect.empty();
                agentSelect.append('<option value="">Select Agent</option>');
                agentSelect.select2('destroy').select2({
                    placeholder: 'Select Agent',
                    allowClear: true
                });
            }
            
            // Update summary from total_data (same structure as distributorIncome)
            if(response.total_data) {
                updateDistributorSummary(response.total_data);
            }
            
            // Show/hide Agent Name column based on whether agent is selected
            var selectedAgentId = $('#distributor_select_agent').length > 0 ? $('#distributor_select_agent').val() : '';
            var showAgentColumn = !selectedAgentId; // Show agent column only if no agent is selected
            
            // Show/hide the Agent Name header
            if(showAgentColumn) {
                $('#distributor_agent_name_header').show();
            } else {
                $('#distributor_agent_name_header').hide();
            }
            
            // Initialize DataTables with all data (client-side processing)
            // Column structure matches original view: Client, Client Name, Agent Name (conditional), Res. commission, Paid Amt, Paid Date, Deduction, Net Income, Paid Out
            distributorTable = $('#distributor_income_table').DataTable({
                processing: false,
                serverSide: false, // Client-side processing
                data: response.data || [],
                columns: [
                    { data: 0, orderable: true }, // Client ID
                    { data: 1, orderable: true }, // Client Name
                    { 
                        data: 2, 
                        orderable: false, 
                        visible: showAgentColumn // Agent Name - only visible if no agent selected
                    },
                    { data: 3, orderable: false }, // Res. commission
                    { data: 4, orderable: true }, // Paid Amt
                    { data: 5, orderable: false }, // Paid Date
                    { data: 6, orderable: false }, // Deduction
                    { data: 7, orderable: false }, // Net Income (Distributor Income)
                    { data: 8, orderable: true } // Paid Out
                ],
                order: [[0, 'desc']],
                pageLength: 25,
                responsive: true,
                language: {
                    processing: '<div style="text-align:center;padding:20px;"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div><p>Processing...</p></div>'
                },
                drawCallback: function(settings) {
                    $('.table_con').show();
                    // Ensure tabs remain enabled after data loads
                    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
                },
                initComplete: function(settings, json) {
                    $('.table_con').show();
                    // Ensure tabs remain enabled after initialization
                    $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
                }
            });
        },
        error: function(xhr, status, error) {
            hideLoading('distributor_loading');
            distributorIncomeLoading = false; // Reset loading flag on error
            // Re-enable tabs on error
            $('#incomeTabs a[data-toggle="tab"]').removeClass('disabled').css('pointer-events', 'auto');
            console.error('Error loading distributor income:', error);
            alert('Error loading distributor income data. Please try again.');
        }
    });
}

function updateDistributorSummary(data) {
    // Update from total_data response structure (same as distributorIncome)
    if(data.outstanding !== undefined) {
        $('#distributor_outstanding').html(data.outstanding);
    }
    if(data.gross_revenue !== undefined) {
        $('#distributor_gross_revenue').html(data.gross_revenue);
    }
    if(data.distributor_income !== undefined) {
        $('#distributor_income').html(data.distributor_income);
    }
}

function resetDistributorFilters() {
    $('#distributor_search_start_date').val('');
    $('#distributor_search_end_date').val('');
    // Don't reset distributor/agent selection - keep it for SUPERADMIN/ADMIN/ARUSER
    @if($data['user_role'] != 1 && $data['user_role'] != 2 && $data['user_role'] != 4)
        $('#distributor_select_distributor').val('');
        $('#distributor_select_agent').val('');
    @endif
    // Reload all data
    if (distributorTable) {
        distributorTable.destroy();
        distributorTable = null;
    }
    loadDistributorIncome();
}

// Flag to prevent multiple simultaneous requests
var distributorIncomeLoading = false;

// Handle distributor dropdown change (if exists)
// This matches the original distributorIncome view behavior: when distributor changes, get agents and reload
$(document).on('change', '#distributor_select_distributor', function() {
    var distributorId = $(this).val();
    
    // Prevent multiple requests
    if(distributorIncomeLoading) {
        return;
    }
    
    if(distributorId) {
        distributorIncomeLoading = true;
        
        // Show loading in summary amounts
        $('#distributor_outstanding').html('$ Loading...');
        $('#distributor_gross_revenue').html('$ Loading...');
        $('#distributor_income').html('$ Loading...');
        showLoading('distributor_loading');
        
        // Get agents for this distributor directly (no session needed)
        $.ajax({
            url: '{{ route("unified-income.get-distributor-agents") }}',
            type: 'GET',
            data: {
                distributor_id: distributorId
            },
            success: function(response) {
                if(response.status && response.agents) {
                    // Clear and populate agent dropdown
                    var agentSelect = $('#distributor_select_agent');
                    // Don't detach handlers - delegated handler on document will work
                    agentSelect.val('').empty().append('<option value="">Select Agent</option>');
                    
                    // Populate agents
                    response.agents.forEach(function(agent) {
                        agentSelect.append('<option value="' + agent.id + '">' + agent.name + ' ' + agent.last_name + '</option>');
                    });
                    
                    // Re-initialize Select2
                    agentSelect.select2('destroy').select2({
                        placeholder: 'Select Agent',
                        allowClear: true
                    });
                    
                    // The delegated handler on document will automatically work with the new Select2 instance
                    // No need to re-attach - event delegation handles this
                    
                    // Now load the income data (which will show data for all agents when no agent is selected)
                    // This will call getIncomeData with distributor_id in URL
                    if (distributorTable) {
                        distributorTable.destroy();
                        distributorTable = null;
                    }
                    loadDistributorIncome(); // Will send distributor_id and agent_id (if selected) in URL
    } else {
                    // No agents found, clear dropdown
                    var agentSelect = $('#distributor_select_agent');
                    // Don't detach handlers - delegated handler on document will work
                    agentSelect.val('').empty().append('<option value="">Select Agent</option>');
                    agentSelect.select2('destroy').select2({
                        placeholder: 'Select Agent',
                        allowClear: true
                    });
                    
                    // The delegated handler on document will automatically work with the new Select2 instance
                    distributorIncomeLoading = false;
                }
            },
            error: function() {
                distributorIncomeLoading = false;
                alert('Error loading agents for distributor');
            },
            complete: function() {
                distributorIncomeLoading = false;
            }
        });
    } else {
        // If distributor is cleared, destroy table and clear agent dropdown
        var agentSelect = $('#distributor_select_agent');
        // Don't detach handlers - delegated handler on document will work
        agentSelect.val('').empty().append('<option value="">Select Agent</option>');
        agentSelect.select2('destroy').select2({
            placeholder: 'Select Agent',
            allowClear: true
        });
        
        // The delegated handler on document will automatically work with the new Select2 instance
        if (distributorTable) {
            distributorTable.destroy();
            distributorTable = null;
        }
    }
});

// Separate function for distributor agent change handler to prevent recursive calls
function handleDistributorAgentChange() {
    // Make sure we're in the distributor income tab
    var agentSelect = $('#distributor_select_agent');
    if(agentSelect.length === 0) {
        return; // Not the distributor agent dropdown
    }
    
    // Prevent multiple requests
    if(distributorIncomeLoading) {
        return;
    }
    
    // Show loading in summary amounts
    $('#distributor_outstanding').html('$ Loading...');
    $('#distributor_gross_revenue').html('$ Loading...');
    $('#distributor_income').html('$ Loading...');
    
    // Reload distributor income data directly - distributor_id and agent_id will be sent in URL parameters
    if (distributorTable) {
        distributorTable.destroy();
        distributorTable = null;
    }
    loadDistributorIncome(); // This will call getIncomeData with distributor_id and agent_id in URL
}

// Note: The distributor agent dropdown change handler is attached in the main $(document).ready() block above
// This ensures it works even after Select2 re-initialization

// Utility Functions
function showLoading(elementId) {
    // Hide table container and show loading spinner
    var $boxBody = $('#' + elementId).closest('.box-body');
    $boxBody.find('.table_con').hide();
    $('#' + elementId).show();
}

function hideLoading(elementId) {
    $('#' + elementId).hide();
    // Table will be shown in DataTables callbacks
}

// Download Functions
function downloadAdminIncome(format) {
    var formData = {
        tab: 'admin',
        admin_year_filter: $('#admin_year_filter').val(),
        search_start_date: $('#admin_search_start_date').val(),
        search_end_date: $('#admin_search_end_date').val(),
        format: format
    };
    
    var url = '{{ route("unified-download") }}?' + $.param(formData);
    window.open(url, '_blank');
}

function downloadAgentIncome(format) {
    var formData = {
        tab: 'agent',
        search_start_date: $('#agent_search_start_date').val(),
        search_end_date: $('#agent_search_end_date').val(),
        format: format
    };
    
    var url = '{{ route("unified-download") }}?' + $.param(formData);
    window.open(url, '_blank');
}

function downloadArIncome(format) {
    var formData = {
        tab: 'ar',
        ar_year_filter: $('#ar_year_filter').val(),
        search_start_date: $('#ar_search_start_date').val(),
        search_end_date: $('#ar_search_end_date').val(),
        format: format
    };
    
    var url = '{{ route("unified-download") }}?' + $.param(formData);
    window.open(url, '_blank');
}

function downloadTeamIncome(format) {
    var formData = {
        tab: 'team',
        search_start_date: $('#team_search_start_date').val(),
        search_end_date: $('#team_search_end_date').val(),
        select_manager: $('#team_select_manager').val(),
        format: format
    };
    
    var url = '{{ route("unified-download") }}?' + $.param(formData);
    window.open(url, '_blank');
}

function downloadDistributorIncome(format) {
    var formData = {
        tab: 'distributor',
        search_start_date: $('#distributor_search_start_date').val(),
        search_end_date: $('#distributor_search_end_date').val(),
        distributor_id: $('#distributor_select_distributor').val(),
        format: format
    };
    
    var url = '{{ route("unified-download") }}?' + $.param(formData);
    window.open(url, '_blank');
}

// PDF Functions - Use same approach as existing income pages (direct route calls)
function getAdminPDF() {
    var start_date = $('#admin_search_start_date').val();
    var end_date = $('#admin_search_end_date').val();
    var client_name = '';
    var client_id = '';
    var income = 'all';
    var income_url = 'adminincome';
    
    // Use same route as existing admin income page (exact same as income_new.blade.php)
    var baseurl = '{{ url("/download_income_pdf") }}';
    var url = baseurl + '?start_date=' + encodeURIComponent(start_date) + '&end_date=' + encodeURIComponent(end_date) + '&client_id=' + encodeURIComponent(client_id) + '&client_name=' + encodeURIComponent(client_name) + '&income=' + encodeURIComponent(income) + '&income_url=' + encodeURIComponent(income_url);
    
    window.open(url, "_blank");
}

function getAgentPDF() {
    var start_date = $('#agent_search_start_date').val();
    var end_date = $('#agent_search_end_date').val();
    var client_name = '';
    var client_id = '';
    var income = 'all';
    var income_url = 'agentincome';
    
    // Get selected agent ID if dropdown exists (for SUPERADMIN/ADMIN)
    var agent_id = '';
    if ($('#agent_income_agent_id').length > 0) {
        agent_id = $('#agent_income_agent_id').val();
    }
    
    // Set session first if agent is selected (to match existing behavior)
    // Use callback to ensure session is set before opening PDF
    if (agent_id) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        
        // Set session via AJAX before opening PDF
        $.ajax({
            type: 'POST',
            url: '{{ url("/agentsetsession") }}',
            data: {agent_id: agent_id},
            success: function() {
                // Session is now set, proceed with PDF
                var baseurl = '{{ url("/download_income_pdf") }}';
                var url = baseurl + '?start_date=' + encodeURIComponent(start_date) + '&end_date=' + encodeURIComponent(end_date) + '&client_id=' + encodeURIComponent(client_id) + '&client_name=' + encodeURIComponent(client_name) + '&income=' + encodeURIComponent(income) + '&income_url=' + encodeURIComponent(income_url);
                window.open(url, "_blank");
            },
            error: function() {
                // Even if session set fails, try to open PDF (session might already be set)
                var baseurl = '{{ url("/download_income_pdf") }}';
                var url = baseurl + '?start_date=' + encodeURIComponent(start_date) + '&end_date=' + encodeURIComponent(end_date) + '&client_id=' + encodeURIComponent(client_id) + '&client_name=' + encodeURIComponent(client_name) + '&income=' + encodeURIComponent(income) + '&income_url=' + encodeURIComponent(income_url);
                window.open(url, "_blank");
            }
        });
    } else {
        // No agent selection needed, open PDF directly
        var baseurl = '{{ url("/download_income_pdf") }}';
        var url = baseurl + '?start_date=' + encodeURIComponent(start_date) + '&end_date=' + encodeURIComponent(end_date) + '&client_id=' + encodeURIComponent(client_id) + '&client_name=' + encodeURIComponent(client_name) + '&income=' + encodeURIComponent(income) + '&income_url=' + encodeURIComponent(income_url);
        window.open(url, "_blank");
    }
}

function getArPDF() {
    var start_date = $('#ar_search_start_date').val();
    var end_date = $('#ar_search_end_date').val();
    var client_name = '';
    var client_id = '';
    var income = 'all';
    var income_url = 'arincome';
    
    // Get selected AR user ID if dropdown exists (for SUPERADMIN/ADMIN)
    var ar_user_id = '';
    if ($('#ar_income_user_id').length > 0) {
        ar_user_id = $('#ar_income_user_id').val();
    }
    
    // Set session first if AR user is selected (to match existing behavior)
    // Use callback to ensure session is set before opening PDF
    if (ar_user_id) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        
        // Set session via AJAX before opening PDF
        $.ajax({
            type: 'POST',
            url: '{{ url("/agentsetsession") }}',
            data: {agent_id: ar_user_id}, // Uses same route, just different parameter name
            success: function() {
                // Session is now set, proceed with PDF
                var baseurl = '{{ url("/download_income_pdf") }}';
                var url = baseurl + '?start_date=' + encodeURIComponent(start_date) + '&end_date=' + encodeURIComponent(end_date) + '&client_id=' + encodeURIComponent(client_id) + '&client_name=' + encodeURIComponent(client_name) + '&income=' + encodeURIComponent(income) + '&income_url=' + encodeURIComponent(income_url);
                window.open(url, "_blank");
            },
            error: function() {
                // Even if session set fails, try to open PDF (session might already be set)
                var baseurl = '{{ url("/download_income_pdf") }}';
                var url = baseurl + '?start_date=' + encodeURIComponent(start_date) + '&end_date=' + encodeURIComponent(end_date) + '&client_id=' + encodeURIComponent(client_id) + '&client_name=' + encodeURIComponent(client_name) + '&income=' + encodeURIComponent(income) + '&income_url=' + encodeURIComponent(income_url);
                window.open(url, "_blank");
            }
        });
    } else {
        // No AR user selection needed, open PDF directly
        var baseurl = '{{ url("/download_income_pdf") }}';
        var url = baseurl + '?start_date=' + encodeURIComponent(start_date) + '&end_date=' + encodeURIComponent(end_date) + '&client_id=' + encodeURIComponent(client_id) + '&client_name=' + encodeURIComponent(client_name) + '&income=' + encodeURIComponent(income) + '&income_url=' + encodeURIComponent(income_url);
        window.open(url, "_blank");
    }
}

function getTeamPDF() {
    // For team income, use CSV for now or implement team-specific PDF route if available
    downloadTeamIncome('csv');
}

function getDistributorPDF() {
    // For distributor income, use CSV for now or implement distributor-specific PDF route if available
    downloadDistributorIncome('csv');
}

function getManagerPDF() {
    // For manager income, use CSV for now or implement manager-specific PDF route if available
    downloadManagerIncome('csv');
}

// Modal Functions
function showInvoiceModal() {
    $('#invoice_count_popup').modal('show');
}

function show1099Report() {
    $('#tax_report_popup').modal('show');
}

// Manager Income Download Functions
function downloadManagerIncome(format) {
    var formData = {
        tab: 'manager',
        search_start_date: $('#manager_search_start_date').val(),
        search_end_date: $('#manager_search_end_date').val(),
        agent_id: $('#manager_income_agent_id').val(),
        format: format
    };
    
    var url = '{{ route("unified-download") }}?' + $.param(formData);
    window.open(url, '_blank');
}

function getManagerPDF() {
    downloadManagerIncome('pdf');
}

// Deduction view functions (same as distributor_income.blade.php)
function view_deduct(str){
    // str is the HTML string containing the deduction details table
    if(str) {
        $('#table_datass').html('<table class="table table-bordered" >'+str+'</table>');
    }
}

function view_deduct1(id){
    var str = $('.ded1_'+id).attr('str');
    if(str) {
        $('#table_datass').html('<table class="table table-bordered" >'+str+'</table>');
    }
}

// Invoice and 1099 Report Event Handlers
$(document).ready(function() {
    // Initialize date pickers for modals
    $('#invoice_start_date, #invoice_end_date, #report_start_date, #report_end_date').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight: true
    });
    
    // Admin Invoice button click handler
    $(document).on('click', '#admin_invoice_count', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $('#invoice_count_popup').data('tab', 'admin');
        $('#invoice_count_popup').modal('show');
    });
    
    // Admin 1099 Report button click handler
    $(document).on('click', '#admin_tax_report', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $('#tax_report_popup').modal('show');
    });
    
    // AR Invoice button click handler
    $(document).on('click', '#ar_invoice_count', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $('#invoice_count_popup').data('tab', 'ar');
        $('#invoice_count_popup').modal('show');
    });
    
    // Agent Invoice button click handler
    $(document).on('click', '#agent_invoice_count', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $('#invoice_count_popup').data('tab', 'agent');
        $('#invoice_count_popup').modal('show');
    });
    
    // Get Invoices Count button handler (for Admin, AR, and Agent Income)
    $('#get_invoices_count').click(function() {
        var invoice_start_date = $('#invoice_start_date').val();
        var invoice_end_date = $('#invoice_end_date').val();
        var activeTab = $('#invoice_count_popup').data('tab') || 'admin'; // Default to admin if not set
        var income = 'all';
        var income_url = '';
        var tab = '';
        
        // Determine which tab we're working with
        if (activeTab === 'admin') {
            tab = 'admin';
            income_url = 'adminincome';
        } else if (activeTab === 'ar') {
            tab = 'ar';
            income_url = 'arincome';
        } else if (activeTab === 'agent') {
            tab = 'agent';
            income_url = 'agentincome';
        }
        
        // Reload the appropriate income table with invoice filter
        if (tab === 'admin') {
            if (adminTable) {
                try {
                    adminTable.destroy();
                } catch(e) {
                    console.log('Error destroying admin table:', e);
                }
                adminTable = null;
            }
            // Clear any existing DataTable instance
            if ($.fn.DataTable.isDataTable('#admin_income_table')) {
                $('#admin_income_table').DataTable().clear().destroy();
            }
            $('#admin_income_table').closest('.table_con').hide();
            showLoading('admin_loading');
        } else if (tab === 'ar') {
            if (arTable) {
                try {
                    arTable.destroy();
                } catch(e) {
                    console.log('Error destroying AR table:', e);
                }
                arTable = null;
            }
            // Clear any existing DataTable instance
            if ($.fn.DataTable.isDataTable('#ar_income_table')) {
                $('#ar_income_table').DataTable().clear().destroy();
            }
            $('#ar_income_table').closest('.table_con').hide();
            showLoading('ar_loading');
        } else if (tab === 'agent') {
            if (agentTable) {
                try {
                    agentTable.destroy();
                } catch(e) {
                    console.log('Error destroying agent table:', e);
                }
                agentTable = null;
            }
            // Clear any existing DataTable instance
            if ($.fn.DataTable.isDataTable('#agent_income_table')) {
                $('#agent_income_table').DataTable().clear().destroy();
            }
            $('#agent_income_table').closest('.table_con').hide();
            showLoading('agent_loading');
        }
        
        $.ajax({
            url: '{{ route("unified-income-data") }}',
            type: 'GET',
            data: {
                tab: tab,
                admin_year_filter: (tab === 'admin' ? $('#admin_year_filter').val() : ''),
                ar_year_filter: (tab === 'ar' ? $('#ar_year_filter').val() : ''),
                search_start_date: (tab === 'admin' ? $('#admin_search_start_date').val() : (tab === 'ar' ? $('#ar_search_start_date').val() : $('#agent_search_start_date').val())),
                search_end_date: (tab === 'admin' ? $('#admin_search_end_date').val() : (tab === 'ar' ? $('#ar_search_end_date').val() : $('#agent_search_end_date').val())),
                client_name: '',
                client_id: '',
                agent_id: (tab === 'agent' && $('#agent_income_agent_id').length > 0 ? $('#agent_income_agent_id').val() : ''),
                income: income,
                income_url: income_url,
                reseturl: income_url,
                get_invoices_count: 'getInvoiceCount',
                invoice_start_date: invoice_start_date,
                invoice_end_date: invoice_end_date
            },
            success: function(response) {
                if (tab === 'admin') {
                    hideLoading('admin_loading');
                    $('#admin_income_table').closest('.table_con').show();
                    
                    if(response.total_data) {
                        updateAdminSummary(response.total_data);
                    }
                    
                    adminTable = $('#admin_income_table').DataTable({
                        processing: false,
                        serverSide: false,
                        data: response.data || [],
                        columns: [
                            { data: 0, orderable: true },
                            { data: 1, orderable: true },
                            { data: 2, orderable: false },
                            { data: 3, orderable: true },
                            { data: 4, orderable: false },
                            { data: 5, orderable: true },
                            { data: 6, orderable: false },
                            { data: 7, orderable: false },
                            { data: 8, orderable: false },
                            { data: 9, orderable: true }
                        ],
                        order: [[0, 'desc']],
                        pageLength: 25,
                        responsive: true,
                        drawCallback: function(settings) {
                            $('.table_con').show();
                        }
                    });
                } else if (tab === 'ar') {
                    hideLoading('ar_loading');
                    $('#ar_income_table').closest('.table_con').show();
                    
                    if(response.total_data) {
                        updateArSummary(response.total_data);
                    }
                    
                    // Make sure DataTable is not already initialized
                    if ($.fn.DataTable.isDataTable('#ar_income_table')) {
                        $('#ar_income_table').DataTable().clear().destroy();
                    }
                    
                    // Clear the table body before reinitializing
                    $('#ar_income_table tbody').empty();
                    
                    arTable = $('#ar_income_table').DataTable({
                        processing: false,
                        serverSide: false,
                        data: response.data || [],
                        columns: [
                            { data: 0, orderable: true },
                            { data: 1, orderable: true },
                            { data: 2, orderable: false },
                            { data: 3, orderable: true },
                            { data: 4, orderable: false },
                            { data: 5, orderable: true },
                            { data: 6, orderable: false },
                            { data: 7, orderable: false },
                            { data: 8, orderable: true }
                        ],
                        order: [[0, 'desc']],
                        pageLength: 25,
                        responsive: true,
                        drawCallback: function(settings) {
                            $('.table_con').show();
                        }
                    });
                } else if (tab === 'agent') {
                    hideLoading('agent_loading');
                    $('#agent_income_table').closest('.table_con').show();
                    
                    if(response.total_data) {
                        updateAgentSummary(response.total_data);
                    }
                    
                    agentTable = $('#agent_income_table').DataTable({
                        processing: false,
                        serverSide: false,
                        data: response.data || [],
                        columns: [
                            { data: 0, orderable: true },
                            { data: 1, orderable: true },
                            { data: 2, orderable: false },
                            { data: 3, orderable: true },
                            { data: 4, orderable: false },
                            { data: 5, orderable: true },
                            { data: 6, orderable: false },
                            { data: 7, orderable: false },
                            { data: 8, orderable: true }
                        ],
                        order: [[0, 'desc']],
                        pageLength: 25,
                        responsive: true,
                        drawCallback: function(settings) {
                            $('.table_con').show();
                        }
                    });
                }
                
                $('#invoice_count_popup').modal('hide');
            },
            error: function(xhr, error, thrown) {
                if (tab === 'admin') {
                    hideLoading('admin_loading');
                    $('#admin_income_table').closest('.table_con').show();
                } else if (tab === 'ar') {
                    hideLoading('ar_loading');
                    $('#ar_income_table').closest('.table_con').show();
                } else if (tab === 'agent') {
                    hideLoading('agent_loading');
                    $('#agent_income_table').closest('.table_con').show();
                }
                console.error('Error loading invoice count:', error);
                alert('Error loading invoice data. Please try again.');
            }
        });
    });
    
    // Get 1099 Report button handler
    $('#get_report').click(function() {
        var start_date = $('#report_start_date').val();
        var end_date = $('#report_end_date').val();
        
        if(start_date && end_date) {
            var url = '{{ url("/get_tax_report") }}?report_start_date=' + start_date + '&report_end_date=' + end_date;
            window.open(url, "_blank");
            $('#tax_report_popup').modal('hide');
        } else {
            alert('Please select both start and end dates.');
        }
    });
});
</script>

@endsection