@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">Sales Report</h4>
        <a href="{{ route('reseller.sales-report.all-invoices-customers') }}" class="btn btn-primary">
            <i class="fas fa-file-invoice-dollar me-2"></i>All Invoices & Customers Report
        </a>
    </div>

    <!-- Hidden Date Fields for JavaScript -->
    <input type="hidden" name="from_date" id="from_date" value="{{ date('Y-m-01') }}">
    <input type="hidden" name="to_date" id="to_date" value="{{ date('Y-m-d') }}">

    <!-- Tabs -->
    <div class="card">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" id="salesReportTabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="customer-tab" data-toggle="tab" href="#customer" role="tab" aria-controls="customer" aria-selected="true">
                        Sales by Customer
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="monthly-statement-tab" data-toggle="tab" href="#monthly-statement" role="tab" aria-controls="monthly-statement" aria-selected="false">
                        Monthly Statement
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="total-summary-tab" data-toggle="tab" href="#total-summary" role="tab" aria-controls="total-summary" aria-selected="false">
                        Total Summary
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="item-tab" data-toggle="tab" href="#item" role="tab" aria-controls="item" aria-selected="false">
                        Sales by Item
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="salesperson-tab" data-toggle="tab" href="#salesperson" role="tab" aria-controls="salesperson" aria-selected="false">
                        Report by Tag
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="summary-tab" data-toggle="tab" href="#summary" role="tab" aria-controls="summary" aria-selected="false">
                        Sales Summary
                    </a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content" id="salesReportTabContent">
                <!-- Sales by Customer Tab -->
                <div class="tab-pane fade show active" id="customer" role="tabpanel" aria-labelledby="customer-tab">
                    <div id="customerReportContent">
                        <div class="text-center text-muted py-5">
                            <div class="spinner-border text-primary mb-3" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p>Loading Sales by Customer report...</p>
                        </div>
                    </div>
                </div>

                <!-- Monthly Statement Tab -->
                <div class="tab-pane fade" id="monthly-statement" role="tabpanel" aria-labelledby="monthly-statement-tab">
                    <div id="monthlyStatementReportContent">
                        <div class="text-center text-muted py-5">
                            <div class="spinner-border text-primary mb-3" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p>Loading Monthly Statement report...</p>
                        </div>
                    </div>
                </div>

                <!-- Total Summary Tab -->
                <div class="tab-pane fade" id="total-summary" role="tabpanel" aria-labelledby="total-summary-tab">
                    <div id="totalSummaryReportContent">
                        <div class="text-center text-muted py-5">
                            <div class="spinner-border text-primary mb-3" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p>Loading Total Summary report...</p>
                        </div>
                    </div>
                </div>

                <!-- Sales by Item Tab -->
                <div class="tab-pane fade" id="item" role="tabpanel" aria-labelledby="item-tab">
                    <div id="itemReportContent">
                        <div class="text-center text-muted py-5">
                            <div class="spinner-border text-primary mb-3" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p>Loading Sales by Item report...</p>
                        </div>
                    </div>
                </div>

                <!-- Sales by Sales Person Tab -->
                <div class="tab-pane fade" id="salesperson" role="tabpanel" aria-labelledby="salesperson-tab">
                    <!-- Search Section (Persistent) -->
                    <div id="subTagSearchSection" style="display: none;">
                        <div class="mb-4">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div>
                                    <h5><i class="fas fa-tags"></i> Sub Tag Statistics</h5>
                                    <small id="searchActiveIndicator" class="text-info" style="display: none;">
                                        <i class="fas fa-filter"></i> Search Active: <span id="searchDateRange"></span>
                                    </small>
                                </div>
                                <div>
                                    <button class="btn btn-sm btn-outline-primary" onclick="toggleSubTagSearch()">
                                        <i class="fas fa-search"></i> Search
                                    </button>
                                    <button id="resetSearchBtn" class="btn btn-sm btn-outline-danger ml-2" onclick="resetSearch()" style="display: none;">
                                        <i class="fas fa-times"></i> Reset Search
                                    </button>
                                </div>
                            </div>
                            
                            <!-- Search Filters -->
                            <div id="subTagSearchFilters" class="card mb-3" style="display: none;">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-md-2">
                                            <label for="subTagFromDate">From Date</label>
                                            <input type="date" id="subTagFromDate" class="form-control" value="{{ date('Y-m-01') }}">
                                        </div>
                                        <div class="col-md-2">
                                            <label for="subTagToDate">To Date</label>
                                            <input type="date" id="subTagToDate" class="form-control" value="{{ date('Y-m-d') }}">
                                        </div>
                                        <div class="col-md-3">
                                            <label for="parentTagSearch">Parent Tag</label>
                                            <select id="parentTagSearch" class="form-control">
                                                <option value="">All Parent Tags</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="subTagSearch">Sub Tag</label>
                                            <select id="subTagSearch" class="form-control">
                                                <option value="">All Sub Tags</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label>&nbsp;</label>
                                            <div class="btn-group btn-group-sm w-100" role="group">
                                                <button type="button" class="btn btn-primary" onclick="runSubTagReport()">
                                                    Run Report
                                                </button>
                                                <button type="button" class="btn btn-secondary" onclick="clearSubTagFilters()">
                                                    Clear
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Results Section (Dynamic) -->
                    <div id="salespersonReportContent">
                        <div class="text-center text-muted py-5">
                            <i class="fas fa-user-tie fa-3x mb-3"></i>
                            <p>Click "Generate Report" to view Sales by Sales Person</p>
                        </div>
                    </div>
                </div>

                <!-- Sales Summary Tab -->
                <div class="tab-pane fade" id="summary" role="tabpanel" aria-labelledby="summary-tab">
                    <div id="summaryReportContent">
                        <div class="text-center text-muted py-5">
                            <div class="spinner-border text-primary mb-3" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p>Loading Sales Summary report...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body text-center py-4">
                <div class="spinner-border text-primary mb-3" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
                <p class="mb-0">Generating report...</p>
            </div>
        </div>
    </div>
</div>

@endsection

@section('styles')
<style>
/* Sub Tag Search Styling */
#subTagSearchFilters {
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#subTagSearchFilters .card-body {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
}

#subTagSearchFilters .form-control {
    border-radius: 10px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

#subTagSearchFilters .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#subTagSearchFilters .btn {
    border-radius: 10px;
    transition: all 0.3s ease;
}

#subTagSearchFilters .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#subTagStatsTable {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#subTagStatsTable th {
    background: #343a40;
    color: white;
    border: none;
    font-weight: 600;
}

#subTagStatsTable td {
    border: none;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

#subTagStatsTable tbody tr:hover {
    background-color: #f8f9fa;
    transition: background-color 0.3s ease;
}

/* Search button styling */
.btn-outline-primary {
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.25);
}

/* No results styling */
#noResultsRow {
    background-color: #f8f9fa;
}

#noResultsRow i {
    color: #6c757d;
}

#noResultsRow p {
    margin: 0;
    font-weight: 500;
}

/* Sub Tag Search Filter Styles */
#subTagFromDate, #subTagToDate {
    font-size: 14px;
    height: 38px;
}
</style>
@endsection

@section('scripts')
<script>
let currentTab = 'customer';

$(document).ready(function() {
    // Check for saved tab state on page load
    const savedTab = localStorage.getItem('salesReportActiveTab');
    if (savedTab && ['customer', 'item', 'salesperson', 'summary', 'monthly-statement', 'total-summary'].includes(savedTab)) {
        currentTab = savedTab;
        // Activate the saved tab
        $(`#${savedTab}-tab`).tab('show');
    }
    
    // Use Bootstrap's shown.bs.tab event so activation is reliable
    $('#salesReportTabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        const targetId = $(e.target).attr('aria-controls');
        currentTab = targetId;
        
        // Save the active tab to localStorage
        localStorage.setItem('salesReportActiveTab', currentTab);
        
        if (currentTab === 'item') {
            loadItemReport();
        } else if (currentTab === 'customer') {
            loadCustomerReport();
        } else if (currentTab === 'salesperson') {
            loadSalespersonReport();
        } else if (currentTab === 'summary') {
            loadSummaryReport();
        } else if (currentTab === 'monthly-statement') {
            loadMonthlyStatementReport();
        }
    });
    
    // Auto-load report on page load for the active tab
    setTimeout(() => {
        // Find which tab is currently active
        const activeTab = $('.nav-link.active').attr('aria-controls');
        if (activeTab) {
            currentTab = activeTab;
            
            // Load the appropriate report based on active tab
            switch(activeTab) {
                case 'item':
                    loadItemReport();
                    break;
                case 'customer':
                    loadCustomerReport();
                    break;
                case 'summary':
                    loadSummaryReport();
                    break;
                case 'salesperson':
                    loadSalespersonReport();
                    break;
                case 'monthly-statement':
                    loadMonthlyStatementReport();
                    break;
                case 'total-summary':
                    loadTotalSummaryReport();
                    break;
            }
        }
    }, 500);
});

function loadReport() {
    const fromDate = $('#from_date').val();
    const toDate = $('#to_date').val();
    
    console.log('Loading report for tab:', currentTab);
    console.log('Date range:', fromDate, 'to', toDate);
    
    if (!fromDate || !toDate) {
        alert('Please select both from and to dates.');
        return;
    }
    
    $('#loadingModal').modal('show');
    
    const url = getReportUrl(currentTab);
    console.log('Report URL:', url);
    
    const params = new URLSearchParams({
        from_date: fromDate,
        to_date: toDate
    });
    
    console.log('Request params:', params.toString());
    
    fetch(`${url}?${params}`)
        .then(response => {
            console.log('Response status:', response.status);
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            $('#loadingModal').modal('hide');
            if (data.success) {
                displayReport(currentTab, data);
            } else {
                alert('Error loading report: ' + (data.message || 'Unknown error'));
            }
        })
        .catch(error => {
            console.error('Fetch error:', error);
            $('#loadingModal').modal('hide');
            alert('Error loading report. Please check console for details.');
        });
}

function getReportUrl(tab) {
    const baseUrl = '{{ url("/reseller/sales-report") }}';
    switch(tab) {
        case 'customer': return `${baseUrl}/customer`;
        case 'item': return `${baseUrl}/item`;
        case 'salesperson': return `${baseUrl}/salesperson`;
        case 'summary': return `${baseUrl}/summary`;
        case 'monthly-statement': return `${baseUrl}/monthly-statement`;
        case 'total-summary': return `${baseUrl}/total-summary`;
        default: return `${baseUrl}/customer`;
    }
}

function loadCustomerReport() {
    const fromDate = $('#from_date').val();
    const toDate = $('#to_date').val();
    
    if (!fromDate || !toDate) {
        console.log('Date range not set, using default');
        return;
    }
    
    const url = '{{ url("/reseller/sales-report/customer") }}';
    const params = new URLSearchParams({
        from_date: fromDate,
        to_date: toDate
    });
    
    fetch(`${url}?${params}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayCustomerReport(data);
            } else {
                console.error('Error loading customer report:', data.message);
                $('#customerReportContent').html(`
                    <div class="text-center text-danger py-5">
                        <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                        <p>Error loading report: ${data.message || 'Unknown error'}</p>
                        <button type="button" class="btn btn-primary mt-3" onclick="loadCustomerReport()">Retry</button>
                    </div>
                `);
            }
        })
        .catch(error => {
            console.error('Fetch error:', error);
            $('#customerReportContent').html(`
                <div class="text-center text-danger py-5">
                    <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                    <p>Error loading report. Please try again.</p>
                    <button type="button" class="btn btn-primary mt-3" onclick="loadCustomerReport()">Retry</button>
                </div>
            `);
        });
}

function loadSalespersonReport() {
    const fromDate = $('#from_date').val();
    const toDate = $('#to_date').val();
    
    if (!fromDate || !toDate) {
        console.log('Date range not set, using default');
        return;
    }
    
    const url = '{{ url("/reseller/sales-report/salesperson") }}';
    const params = new URLSearchParams({
        from_date: fromDate,
        to_date: toDate
    });
    
    console.log('Loading salesperson report from:', `${url}?${params}`);
    
    return fetch(`${url}?${params}`)
        .then(response => {
            console.log('Response status:', response.status);
            console.log('Response headers:', response.headers);
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            return response.text().then(text => {
                console.log('Response text:', text.substring(0, 500));
                try {
                    return JSON.parse(text);
                } catch (e) {
                    console.error('JSON parse error:', e);
                    throw new Error('Invalid JSON response');
                }
            });
        })
        .then(data => {
            console.log('Parsed data:', data);
            
            if (data.success) {
                displaySalespersonReport(data);
                return data;
            } else {
                console.error('Error loading salesperson report:', data.message);
                $('#salespersonReportContent').html(`
                    <div class="text-center text-danger py-5">
                        <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                        <p>Error loading report: ${data.message || 'Unknown error'}</p>
                        <button type="button" class="btn btn-primary mt-3" onclick="loadSalespersonReport()">Retry</button>
                    </div>
                `);
                throw new Error(data.message || 'Unknown error');
            }
        })
        .catch(error => {
            console.error('Fetch error details:', error);
            $('#salespersonReportContent').html(`
                <div class="text-center text-danger py-5">
                    <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                    <p>Error loading report: ${error.message}</p>
                    <p class="small text-muted">Check browser console (F12) for details</p>
                    <button type="button" class="btn btn-primary mt-3" onclick="loadSalespersonReport()">Retry</button>
                </div>
            `);
            throw error;
        });
}

function loadItemReport() {
    const fromDate = $('#from_date').val();
    const toDate = $('#to_date').val();
    
    if (!fromDate || !toDate) {
        console.log('Date range not set, using default');
        return;
    }
    
    const url = '{{ url("/reseller/sales-report/item") }}';
    const params = new URLSearchParams({
        from_date: fromDate,
        to_date: toDate
    });
    
    fetch(`${url}?${params}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayItemReport(data);
            } else {
                console.error('Error loading item report:', data.message);
                $('#itemReportContent').html(`
                    <div class="text-center text-danger py-5">
                        <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                        <p>Error loading report: ${data.message || 'Unknown error'}</p>
                        <button type="button" class="btn btn-primary mt-3" onclick="loadItemReport()">Retry</button>
                    </div>
                `);
            }
        })
        .catch(error => {
            console.error('Fetch error:', error);
            $('#itemReportContent').html(`
                <div class="text-center text-danger py-5">
                    <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                    <p>Error loading report. Please try again.</p>
                    <button type="button" class="btn btn-primary mt-3" onclick="loadItemReport()">Retry</button>
                </div>
            `);
        });
}

function loadSummaryReport() {
    const fromDate = $('#from_date').val();
    const toDate = $('#to_date').val();
    
    if (!fromDate || !toDate) {
        console.log('Date range not set, using default');
        return;
    }
    
    const url = '{{ url("/reseller/sales-report/summary") }}';
    const params = new URLSearchParams({
        from_date: fromDate,
        to_date: toDate
    });
    
    fetch(`${url}?${params}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displaySummaryReport(data);
            } else {
                console.error('Error loading summary report:', data.message);
                $('#summaryReportContent').html(`
                    <div class="text-center text-danger py-5">
                        <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                        <p>Error loading report: ${data.message || 'Unknown error'}</p>
                        <button type="button" class="btn btn-primary mt-3" onclick="loadSummaryReport()">Retry</button>
                    </div>
                `);
            }
        })
        .catch(error => {
            console.error('Fetch error:', error);
            $('#summaryReportContent').html(`
                <div class="text-center text-danger py-5">
                    <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                    <p>Error loading report. Please try again.</p>
                    <button type="button" class="btn btn-primary mt-3" onclick="loadSummaryReport()">Retry</button>
                </div>
            `);
        });
}

function loadMonthlyStatementReport() {
    const fromDate = $('#from_date').val();
    const toDate = $('#to_date').val();
    
    if (!fromDate || !toDate) {
        console.log('Date range not set, using default');
        return;
    }
    
    const url = '{{ url("/reseller/sales-report/monthly-statement") }}';
    const params = new URLSearchParams({
        from_date: fromDate,
        to_date: toDate
    });
    
    fetch(`${url}?${params}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayMonthlyStatementReport(data);
            } else {
                console.error('Error loading monthly statement report:', data.message);
                $('#monthlyStatementReportContent').html(`
                    <div class="text-center text-danger py-5">
                        <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                        <p>Error loading report: ${data.message || 'Unknown error'}</p>
                        <button type="button" class="btn btn-primary mt-3" onclick="loadMonthlyStatementReport()">Retry</button>
                    </div>
                `);
            }
        })
        .catch(error => {
            console.error('Fetch error:', error);
            $('#monthlyStatementReportContent').html(`
                <div class="text-center text-danger py-5">
                    <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                    <p>Error loading report. Please try again.</p>
                    <button type="button" class="btn btn-primary mt-3" onclick="loadMonthlyStatementReport()">Retry</button>
                </div>
            `);
        });
}

function displayReport(tab, data) {
    switch(tab) {
        case 'customer':
            displayCustomerReport(data);
            break;
        case 'item':
            displayItemReport(data);
            break;
        case 'salesperson':
            displaySalespersonReport(data);
            break;
        case 'summary':
            displaySummaryReport(data);
            break;
        case 'monthly-statement':
            displayMonthlyStatementReport(data);
            break;
        case 'total-summary':
            displayTotalSummaryReport(data);
            break;
    }
}

function displayCustomerReport(data) {
    const fromDate = $('#from_date').val();
    const toDate = $('#to_date').val();
    
    let html = `
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="mb-0"><i class="fas fa-users"></i> Sales by Customer Report</h5>
            <div>
                <button onclick="exportSalesByCustomer('excel')" class="btn btn-success btn-sm">
                    <i class="fas fa-file-excel"></i> Export to Excel
                </button>
                <button onclick="exportSalesByCustomer('pdf')" class="btn btn-danger btn-sm">
                    <i class="fas fa-file-pdf"></i> Export to PDF
                </button>
            </div>
        </div>
        
        <!-- Date Filter Section -->
        <div class="card mb-3">
            <div class="card-body">
                <div class="row align-items-end">
                    <div class="col-md-3">
                        <label for="customer_from_date" class="form-label">From Date</label>
                        <input type="date" class="form-control" id="customer_from_date" value="${fromDate}">
                    </div>
                    <div class="col-md-3">
                        <label for="customer_to_date" class="form-label">To Date</label>
                        <input type="date" class="form-control" id="customer_to_date" value="${toDate}">
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn btn-primary" onclick="generateCustomerReport()">
                            <i class="fas fa-chart-line"></i> Generate Report
                        </button>
                        <button type="button" class="btn btn-secondary" onclick="resetCustomerFilters()">
                            <i class="fas fa-redo"></i> Reset
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Summary Cards -->
        <div class="row mb-2">
            <div class="col-md-4">
                <div class="card bg-primary text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Total Customers</h6>
                        <h4 class="mb-0">${data.summary.total_customers}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-success text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Total Invoices</h6>
                        <h4 class="mb-0">${data.summary.total_invoices}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-info text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Total Amount</h6>
                        <h4 class="mb-0">BDT ${Number(data.summary.total_amount).toLocaleString()}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-md-4">
                <div class="card bg-warning text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Total Paid</h6>
                        <h4 class="mb-0">BDT ${Number(data.summary.total_paid).toLocaleString()}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-white" style="background-color: #6f42c1 !important;">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Advance Payment</h6>
                        <h4 class="mb-0">BDT ${Number(data.summary.total_advance_payment || 0).toLocaleString()}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-danger text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Total Due</h6>
                        <h4 class="mb-0">BDT ${Number(data.summary.total_due || 0).toLocaleString()}</h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Customer Name</th>
                        <th>Email</th>
                        <th>Invoices</th>
                        <th class="text-right">Total Amount</th>
                        <th class="text-right">Total Paid</th>
                        <th class="text-right">Advance Payment</th>
                        <th class="text-right">Total Due</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
    `;
    
    data.data.forEach(customer => {
        html += `
            <tr>
                <td>${customer.customer_name}</td>
                <td>${customer.customer_email}</td>
                <td>${customer.invoice_count}</td>
                <td class="text-right">BDT ${Number(customer.total_amount).toLocaleString()}</td>
                <td class="text-right">BDT ${Number(customer.total_paid).toLocaleString()}</td>
                <td class="text-right">BDT ${Number(customer.advance_payment || 0).toLocaleString()}</td>
                <td class="text-right">BDT ${Number(customer.total_due).toLocaleString()}</td>
                <td>
                    <a href="{{ url('/reseller/sales-report/customer') }}/${customer.customer_id}?from_date=${fromDate}&to_date=${toDate}" class="btn btn-sm btn-outline-info">
                        <i class="fas fa-eye"></i> View Details
                    </a>
                </td>
            </tr>
        `;
    });
    
    html += `
                </tbody>
            </table>
        </div>
    `;
    
    $('#customerReportContent').html(html);
}

function displayItemReport(data) {
    const fromDate = $('#from_date').val();
    const toDate = $('#to_date').val();
    
    let html = `
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="mb-0"><i class="fas fa-box"></i> Sales by Item Report</h5>
        </div>
        
        <!-- Date Filter Section -->
        <div class="card mb-3">
            <div class="card-body">
                <div class="row align-items-end">
                    <div class="col-md-3">
                        <label for="item_from_date" class="form-label">From Date</label>
                        <input type="date" class="form-control" id="item_from_date" value="${fromDate}">
                    </div>
                    <div class="col-md-3">
                        <label for="item_to_date" class="form-label">To Date</label>
                        <input type="date" class="form-control" id="item_to_date" value="${toDate}">
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn btn-primary" onclick="generateItemReport()">
                            <i class="fas fa-chart-line"></i> Generate Report
                        </button>
                        <button type="button" class="btn btn-secondary" onclick="resetItemFilters()">
                            <i class="fas fa-redo"></i> Reset
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Summary Cards -->
        <div class="row mb-3">
            <div class="col-md-4">
                <div class="card bg-primary text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Total Items</h6>
                        <h4 class="mb-0">${data.summary.total_items}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-success text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Total Quantity</h6>
                        <h4 class="mb-0">${data.summary.total_quantity}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-info text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Total Amount</h6>
                        <h4 class="mb-0">BDT ${Number(data.summary.total_amount).toLocaleString()}</h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Item Name</th>
                        <th>Description</th>
                        <th>Unit</th>
                        <th class="text-right">Total Quantity</th>
                        <th class="text-right">Total Amount</th>
                        <th class="text-right">Average Price</th>
                        <th>Invoices</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
    `;
    
    data.data.forEach(item => {
        // Use item_id if available, otherwise use item_name as identifier
        const itemIdentifier = item.item_id || encodeURIComponent(item.item_name);
        
        html += `
            <tr>
                <td>${item.item_name}</td>
                <td>${item.item_description || 'N/A'}</td>
                <td>${item.unit}</td>
                <td class="text-right">${item.total_quantity}</td>
                <td class="text-right">BDT ${Number(item.total_amount).toLocaleString()}</td>
                <td class="text-right">BDT ${Number(item.average_price).toFixed(2)}</td>
                <td>${item.invoice_count}</td>
                <td>
                    <a href="{{ url('/reseller/sales-report/item') }}/${itemIdentifier}?from_date=${fromDate}&to_date=${toDate}" class="btn btn-sm btn-outline-info">
                        <i class="fas fa-eye"></i> View Details
                    </a>
                </td>
            </tr>
        `;
    });
    
    html += `
                </tbody>
            </table>
        </div>
    `;
    
    $('#itemReportContent').html(html);
}

function displaySalespersonReport(data) {
    // Store data globally for use in modals
    window.currentSalespersonData = data;
    
    // Debug: Log complete response data
    console.log('===========================================');
    console.log('📊 SALES PERSON REPORT DATA');
    console.log('===========================================');
    console.log('Total Sales Persons:', data.data ? data.data.length : 0);
    console.log('Sample Data:', data.data && data.data.length > 0 ? data.data[0] : 'No data');
    console.log('Summary:', data.summary);
    console.log('Overall Summary:', data.overall_summary);
    console.log('===========================================');
    
    // Show search section if data has sub_tag_stats
    if (data.sub_tag_stats && data.sub_tag_stats.length > 0) {
        $('#subTagSearchSection').show();
        console.log('✓ Search section made visible');
    }
    
    // Log calculation info
    if (data.calculation_info) {
        console.log('===========================================');
        console.log('📊 SUB TAG STATISTICS CALCULATION INFO');
        console.log('===========================================');
        console.log('Source Tables:', data.calculation_info.source_tables);
        console.log('Calculation Methods:', data.calculation_info.calculation_method);
        console.log('Date Filter:', data.calculation_info.date_filter);
        console.log('===========================================');
    }
    
    // Store original data for filtering
    storeOriginalSubTagData(data);
    
    // Load tags data for the search dropdowns (will be lazy-loaded when search is opened)
    
    // Get overall summary (all invoices in date range) from backend
    const overall = data.overall_summary || {};
    const totalParentTags = overall.total_parent_tags || 0;
    const totalSubTags = overall.total_sub_tags || 0;
    const totalResellers = overall.total_resellers_with_invoices || 0;
    const totalInvoices = overall.total_invoices || 0;
    const totalAmount = overall.total_amount || 0;
    const totalPaid = overall.total_paid || 0;
    const totalAdvanceAmount = overall.total_advance_amount || 0;
    const totalDue = overall.total_due || 0;
    
    console.log('Summary Calculations:', {
        total_parent_tags: totalParentTags,
        parent_tags_source: 'FROM tags table WHERE status=active',
        total_sub_tags: totalSubTags,
        sub_tags_source: 'FROM sub_tags table WHERE status=active',
        total_resellers: totalResellers,
        resellers_source: 'FROM users table WHERE role=reseller AND has invoices in date range',
        total_invoices: totalInvoices,
        invoices_source: 'FROM sales_invoices table WHERE invoice_date in date range',
        total_amount: totalAmount,
        amount_source: 'FROM sales_invoices table SUM(invoice_amount) WHERE invoice_date in date range',
        total_paid: totalPaid,
        paid_source: 'FROM sales_invoice_transections table WHERE sales_invoice_id IN (invoices in date range) AND transaction_type=payment',
        total_advance_amount: totalAdvanceAmount,
        advance_source: 'FROM advance_payments table SUM(amount) WHERE payment_date in date range',
        total_due: totalDue,
        due_calculation: 'total_amount - total_paid'
    });
    
    let html = `
        <div class="row mb-2">
            <div class="col">
                <div class="card bg-primary text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Parent Tags</h6>
                        <h4 class="mb-0">${totalParentTags}</h4>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card bg-info text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Sub Tags</h6>
                        <h4 class="mb-0">${totalSubTags}</h4>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card bg-success text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Resellers</h6>
                        <h4 class="mb-0">${totalResellers}</h4>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card bg-secondary text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Invoices</h6>
                        <h4 class="mb-0">${totalInvoices}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col">
                <div class="card bg-warning text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Total Amount</h6>
                        <h4 class="mb-0">৳ ${Number(totalAmount).toLocaleString()}</h4>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card bg-dark text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Total Paid</h6>
                        <h4 class="mb-0">৳ ${Number(totalPaid).toLocaleString()}</h4>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card text-white" style="background-color: #6f42c1 !important;">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Advance Amount</h6>
                        <h4 class="mb-0">৳ ${Number(totalAdvanceAmount).toLocaleString()}</h4>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card bg-danger text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Total Due</h6>
                        <h4 class="mb-0">৳ ${Number(totalDue).toLocaleString()}</h4>
                    </div>
                </div>
            </div>
        </div>
    `;

    // Add sub-tag statistics table
    if (data.sub_tag_stats && data.sub_tag_stats.length > 0) {
        // Check if all values are 0 (no data)
        const hasData = data.sub_tag_stats.some(subTag => 
            subTag.reseller_count > 0 || subTag.invoice_count > 0 || subTag.total_amount > 0
        );
        
        if (!hasData) {
            html += `
                <div class="alert alert-danger mb-4">
                    <h6><i class="fas fa-exclamation-triangle"></i> Sub Tag Statistics - No Data Found</h6>
                    <p class="mb-2"><strong>All sub-tags are showing 0 values.</strong> This indicates a data configuration issue:</p>
                    <ul class="mb-2">
                        <li><strong>❌ No resellers assigned to sub-tags</strong> - User tag assignments missing</li>
                        <li><strong>❌ No sales invoices created by assigned resellers</strong> - Invoice data missing</li>
                        <li><strong>❌ Sales invoices missing "created_by" field</strong> - Database structure issue</li>
                        <li><strong>❌ Date range doesn't include any invoices</strong> - Date filtering issue</li>
                    </ul>
                    <div class="mt-3 p-3 bg-light rounded">
                        <strong>🔧 Required Actions (Admin Only):</strong>
                        <ol class="mb-0 mt-2">
                            <li><strong>Check Database:</strong> Run debug script to identify exact issue</li>
                            <li><strong>Assign Resellers:</strong> Assign resellers to sub-tags in admin panel</li>
                            <li><strong>Create Test Data:</strong> Create sample sales invoices with created_by field</li>
                            <li><strong>Verify Date Range:</strong> Ensure invoices exist in selected date range</li>
                        </ol>
                    </div>
                    <div class="mt-3">
                        <strong>📋 Quick Checks:</strong>
                        <ul class="mb-0">
                            <li>Try different date ranges (last 3 months, last year)</li>
                            <li>Check if any sales invoices exist in the system</li>
                            <li>Verify user tag assignments in admin panel</li>
                            <li>Contact system administrator with debug logs</li>
                        </ul>
                    </div>
                    <small class="text-muted mt-2 d-block">
                        <strong>Note:</strong> Sub-tags are displayed to show the available structure. This is a data configuration issue, not a display bug.
                    </small>
                </div>
            `;
        }
        
        html += `
            <div class="mb-4">
                <div class="table-responsive">
                    <table class="table table-striped table-hover" id="subTagStatsTable">
                        <thead class="thead-dark">
                            <tr>
                                <th>Parent Tag</th>
                                <th>Sub Tag</th>
                                <th>Resellers</th>
                                <th>Invoices</th>
                                <th class="text-right">Total Amount</th>
                                <th class="text-right">Total Paid</th>
                                <th class="text-right">Total Due</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="subTagStatsTableBody">
        `;
        
        data.sub_tag_stats.forEach(subTag => {
            const hasSubTagData = subTag.reseller_count > 0 || subTag.invoice_count > 0 || subTag.total_amount > 0;
            const rowClass = hasSubTagData ? '' : 'text-muted';
            
            html += `
                <tr data-sub-tag-id="${subTag.sub_tag_id}" data-parent-tag-id="${subTag.tag_id}" class="${rowClass}">
                    <td>
                        <span class="badge badge-secondary">${subTag.tag_name}</span>
                    </td>
                    <td>
                        <span class="badge badge-info">${subTag.sub_tag_name}</span>
                    </td>
                    <td>
                        <a href="javascript:void(0)" 
                           class="text-primary font-weight-bold" 
                           onclick="showSubTagResellers('${subTag.sub_tag_id}', '${subTag.sub_tag_name}', '${subTag.tag_name}', ${subTag.reseller_count})"
                           title="Click to view reseller details">
                            <strong>${subTag.reseller_count}</strong> reseller${subTag.reseller_count !== 1 ? 's' : ''}
                        </a>
                    </td>
                    <td>${subTag.invoice_count}</td>
                    <td class="text-right">
                        <a href="/reseller/sales-report/subtag/${subTag.sub_tag_id}/invoices?from_date=${$('#from_date').val()}&to_date=${$('#to_date').val()}" 
                           class="text-primary font-weight-bold" 
                           style="text-decoration: none;"
                           title="Click to view all invoices for ${subTag.sub_tag_name} sub-tag">
                            <strong>BDT ${Number(subTag.total_amount).toLocaleString()}</strong>
                            <i class="fas fa-external-link-alt ml-1" style="font-size: 0.8em;"></i>
                        </a>
                    </td>
                    <td class="text-right">BDT ${Number(subTag.total_paid).toLocaleString()}</td>
                    <td class="text-right">BDT ${Number(subTag.total_due).toLocaleString()}</td>
                    <td>
                        <button class="btn btn-sm btn-outline-info" 
                                onclick="showSubTagResellers('${subTag.sub_tag_id}', '${subTag.sub_tag_name}', '${subTag.tag_name}', ${subTag.reseller_count})"
                                title="View Reseller Details">
                            <i class="fas fa-users"></i>
                        </button>
                    </td>
                </tr>
            `;
        });
        
        html += `
                        </tbody>
                    </table>
                </div>
            </div>
        `;
    }
    
    $('#salespersonReportContent').html(html);
    console.log('✓ Report content updated (search section unchanged)');
}

function displaySummaryReport(data) {
    const fromDate = $('#from_date').val();
    const toDate = $('#to_date').val();
    
    let html = `
        <!-- Date Filter Section -->
        <div class="card mb-3">
            <div class="card-body">
                <div class="row align-items-end">
                    <div class="col-md-3">
                        <label for="summary_from_date" class="form-label">From Date</label>
                        <input type="date" class="form-control" id="summary_from_date" value="${fromDate}">
                    </div>
                    <div class="col-md-3">
                        <label for="summary_to_date" class="form-label">To Date</label>
                        <input type="date" class="form-control" id="summary_to_date" value="${toDate}">
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn btn-primary" onclick="generateSummaryReport()">
                            <i class="fas fa-chart-line"></i> Generate Report
                        </button>
                        <button type="button" class="btn btn-secondary" onclick="resetSummaryFilters()">
                            <i class="fas fa-redo"></i> Reset
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Summary Cards -->
        <div class="row mb-2">
            <div class="col-md-2">
                <div class="card bg-primary text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Invoices</h6>
                        <h4 class="mb-0">${data.data.overview.total_invoices}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card bg-success text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Customers</h6>
                        <h4 class="mb-0">${data.data.overview.total_customers}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card bg-info text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Total Amount</h6>
                        <h4 class="mb-0">BDT ${Number(data.data.overview.total_amount).toLocaleString()}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card bg-warning text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Total Paid</h6>
                        <h4 class="mb-0">BDT ${Number(data.data.overview.total_paid).toLocaleString()}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card bg-danger text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Total Due</h6>
                        <h4 class="mb-0">BDT ${Number(data.data.overview.total_due).toLocaleString()}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card bg-secondary text-white">
                    <div class="card-body py-2">
                        <h6 class="card-title mb-1">Avg Invoice</h6>
                        <h4 class="mb-0">BDT ${Number(data.data.overview.average_invoice_amount).toFixed(0)}</h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>Monthly Breakdown</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Month</th>
                                        <th class="text-right">Invoices</th>
                                        <th class="text-right">Amount</th>
                                        <th class="text-right">Paid</th>
                                        <th class="text-right">Due</th>
                                    </tr>
                                </thead>
                                <tbody>
    `;
    
    data.data.monthly_breakdown.forEach(month => {
        html += `
            <tr>
                <td>${month.month}</td>
                <td class="text-right">${month.invoice_count}</td>
                <td class="text-right">BDT ${Number(month.total_amount).toLocaleString()}</td>
                <td class="text-right">BDT ${Number(month.total_paid).toLocaleString()}</td>
                <td class="text-right">BDT ${Number(month.total_due).toLocaleString()}</td>
            </tr>
        `;
    });
    
    html += `
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>Top 5 Customers</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Customer</th>
                                        <th class="text-right">Amount</th>
                                        <th class="text-right">Invoices</th>
                                    </tr>
                                </thead>
                                <tbody>
    `;
    
    data.data.top_customers.forEach(customer => {
        html += `
            <tr>
                <td>${customer.customer_name}</td>
                <td class="text-right">BDT ${Number(customer.total_amount).toLocaleString()}</td>
                <td class="text-right">${customer.invoice_count}</td>
            </tr>
        `;
    });
    
    html += `
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-3">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5>All Items</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Item Name</th>
                                        <th class="text-right">Quantity</th>
                                        <th class="text-right">Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
    `;
    
    data.data.top_items.forEach(item => {
        html += `
            <tr>
                <td>${item.item_name}</td>
                <td class="text-right">${item.total_quantity}</td>
                <td class="text-right">BDT ${Number(item.total_amount).toLocaleString()}</td>
            </tr>
        `;
    });
    
    html += `
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    $('#summaryReportContent').html(html);
}

function displayMonthlyStatementReport(data) {
    const fromDate = $('#from_date').val();
    const toDate = $('#to_date').val();
    
    let html = `
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h5 class="mb-1"><i class="fas fa-calendar-alt"></i> Monthly Statement - All Clients</h5>
                <p class="text-muted mb-0">Consolidated monthly statements for all clients in one table</p>
            </div>
            <div>
                <button onclick="exportMonthlyStatement('excel')" class="btn btn-success btn-sm">
                    <i class="fas fa-file-excel"></i> Export to Excel
                </button>
                <button onclick="exportMonthlyStatement('pdf')" class="btn btn-danger btn-sm">
                    <i class="fas fa-file-pdf"></i> Export to PDF
                </button>
            </div>
        </div>
        
        <!-- Date Filter Section -->
        <div class="card mb-3">
            <div class="card-body">
                <div class="row align-items-end">
                    <div class="col-md-3">
                        <label for="monthly_from_date" class="form-label">From Date</label>
                        <input type="date" class="form-control" id="monthly_from_date" value="${fromDate}">
                    </div>
                    <div class="col-md-3">
                        <label for="monthly_to_date" class="form-label">To Date</label>
                        <input type="date" class="form-control" id="monthly_to_date" value="${toDate}">
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn btn-primary" onclick="generateMonthlyStatementReport()">
                            <i class="fas fa-chart-line"></i> Generate Report
                        </button>
                        <button type="button" class="btn btn-secondary" onclick="resetMonthlyStatementFilters()">
                            <i class="fas fa-redo"></i> Reset
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    if (data.data && data.data.length > 0) {
        // Calculate summary totals
        let totalInvoices = 0;
        let totalSales = 0;
        let totalPayments = 0;
        let totalAdvancePayments = 0;
        let totalBalance = 0;
        
        data.data.forEach(client => {
            totalInvoices += Number(client.total_invoices) || 0;
            totalSales += Number(client.total_sales) || 0;
            totalPayments += Number(client.total_payments) || 0;
            totalAdvancePayments += Number(client.total_advance_payment) || 0;
            totalBalance += Number(client.current_balance) || 0;
        });
        
        // Summary cards
        html += `
            <div class="row mb-3">
                <div class="col">
                    <div class="card bg-primary text-white">
                        <div class="card-body py-2">
                            <h6 class="card-title mb-1">Total Clients</h6>
                            <h4 class="mb-0">${data.data.length}</h4>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-info text-white">
                        <div class="card-body py-2">
                            <h6 class="card-title mb-1">Total Sales</h6>
                            <h4 class="mb-0">BDT ${Number(totalSales).toLocaleString()}</h4>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-success text-white">
                        <div class="card-body py-2">
                            <h6 class="card-title mb-1">Total Payments</h6>
                            <h4 class="mb-0">BDT ${Number(totalPayments).toLocaleString()}</h4>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card text-white" style="background-color: #6f42c1 !important;">
                        <div class="card-body py-2">
                            <h6 class="card-title mb-1">Total Advance Payments</h6>
                            <h4 class="mb-0">BDT ${Number(totalAdvancePayments).toLocaleString()}</h4>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card ${totalBalance > 0 ? 'bg-danger' : 'bg-warning'} text-white">
                        <div class="card-body py-2">
                            <h6 class="card-title mb-1">Total Due Balance</h6>
                            <h4 class="mb-0">BDT ${Number(totalBalance).toLocaleString()}</h4>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Single consolidated table
        html += `
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover table-bordered" id="monthlyStatementTable">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Client Name</th>
                                    <th>Email</th>
                                    <th>Month</th>
                                    <th class="text-right">Opening Balance</th>
                                    <th class="text-right">Sales Amount</th>
                                    <th class="text-right">Payments Received</th>
                                    <th class="text-right">Due Balance</th>
                                    <th class="text-right">Advance Payment</th>
                                    <th class="text-center">Invoices</th>
                                </tr>
                            </thead>
                            <tbody>
        `;
        
        // Add all client rows
        data.data.forEach(client => {
            const clientName = client.client_name || 'Unknown Client';
            const clientEmail = client.client_email || 'N/A';
            
            if (client.monthly_statements && client.monthly_statements.length > 0) {
                client.monthly_statements.forEach((statement, index) => {
                    // Ensure balances are never negative (minimum 0)
                    const closingBalance = Math.max(0, Number(statement.closing_balance) || 0);
                    const openingBalance = Math.max(0, Number(statement.opening_balance) || 0);
                    
                    const balanceClass = closingBalance > 0 ? 'text-danger font-weight-bold' : 'text-success font-weight-bold';
                    const openingBalanceClass = openingBalance > 0 ? 'text-danger' : 'text-success';
                    
                    html += `
                        <tr>
                            ${index === 0 ? `<td rowspan="${client.monthly_statements.length}" class="align-middle"><strong>${clientName}</strong></td>` : ''}
                            ${index === 0 ? `<td rowspan="${client.monthly_statements.length}" class="align-middle">${clientEmail}</td>` : ''}
                            <td><strong>${statement.month}</strong></td>
                            <td class="text-right ${openingBalanceClass}">BDT ${openingBalance.toLocaleString()}</td>
                            <td class="text-right">BDT ${Number(statement.sales_amount).toLocaleString()}</td>
                            <td class="text-right text-primary">BDT ${Number(statement.payments_received).toLocaleString()}</td>
                            <td class="text-right ${balanceClass}">BDT ${closingBalance.toLocaleString()}</td>
                            <td class="text-right text-info font-weight-bold">BDT ${Number(statement.advance_payment || 0).toLocaleString()}</td>
                            <td class="text-center">
                                <span class="badge badge-info">${statement.invoice_count}</span>
                            </td>
                        </tr>
                    `;
                });
            } else {
                html += `
                    <tr>
                        <td><strong>${clientName}</strong></td>
                        <td>${clientEmail}</td>
                        <td colspan="7" class="text-center text-muted">No transactions in selected period</td>
                    </tr>
                `;
            }
        });
        
        html += `
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
    } else {
        html += `
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle"></i> No client data found for the selected date range.
            </div>
        `;
    }
    
    $('#monthlyStatementReportContent').html(html);
}

function loadTotalSummaryReport() {
    const fromDate = $('#from_date').val();
    const toDate = $('#to_date').val();
    
    if (!fromDate || !toDate) {
        console.log('Date range not set, using default');
        return;
    }
    
    const url = '{{ url("/reseller/sales-report/total-summary") }}';
    const params = new URLSearchParams({
        from_date: fromDate,
        to_date: toDate
    });
    
    fetch(`${url}?${params}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayTotalSummaryReport(data);
            } else {
                console.error('Error loading total summary report:', data.message);
                $('#totalSummaryReportContent').html(`
                    <div class="text-center text-danger py-5">
                        <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                        <p>Error loading report: ${data.message || 'Unknown error'}</p>
                        <button type="button" class="btn btn-primary mt-3" onclick="loadTotalSummaryReport()">Retry</button>
                    </div>
                `);
            }
        })
        .catch(error => {
            console.error('Fetch error:', error);
            $('#totalSummaryReportContent').html(`
                <div class="text-center text-danger py-5">
                    <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                    <p>Error loading report. Please try again.</p>
                    <button type="button" class="btn btn-primary mt-3" onclick="loadTotalSummaryReport()">Retry</button>
                </div>
            `);
        });
}

function displayTotalSummaryReport(data) {
    const fromDate = $('#from_date').val();
    const toDate = $('#to_date').val();
    
    let html = `
        <div class="mb-4">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h5><i class="fas fa-chart-line"></i> Total Summary Report</h5>
                    <p class="text-muted mb-0">Comprehensive financial summary for all clients</p>
                </div>
                <div>
                    <button class="btn btn-success btn-sm mr-2" onclick="exportTotalSummary('excel')">
                        <i class="fas fa-file-excel"></i> Export to Excel
                    </button>
                    <button class="btn btn-danger btn-sm" onclick="exportTotalSummary('pdf')">
                        <i class="fas fa-file-pdf"></i> Export to PDF
                    </button>
                </div>
            </div>
        </div>
    `;
    
    if (data.data && data.data.length > 0) {
        // Calculate summary totals
        let totalCurrentMonthBill = 0;
        let totalPreviousDue = 0;
        let totalOutstanding = 0;
        let totalCurrentMonthReceive = 0;
        let totalCurrentMonthInvoiceDue = 0;
        let totalMonthToMonthDue = 0;
        let totalClosingDueBalance = 0;
        let totalAdvancePayment = 0;
        
        data.data.forEach(client => {
            totalCurrentMonthBill += Number(client.current_month_bill) || 0;
            totalPreviousDue += Number(client.previous_due) || 0;
            totalOutstanding += Number(client.total_outstanding) || 0;
            totalCurrentMonthReceive += Number(client.current_month_receive) || 0;
            totalCurrentMonthInvoiceDue += Number(client.current_month_invoice_due) || 0;
            totalMonthToMonthDue += Number(client.month_to_month_due) || 0;
            totalClosingDueBalance += Number(client.closing_due_balance) || 0;
            totalAdvancePayment += Number(client.advance_payment) || 0;
        });
        
        // Summary cards
        html += `
            <div class="row mb-2">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body py-2">
                            <h6 class="card-title mb-1">Total Clients</h6>
                            <h4 class="mb-0">${data.data.length}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body py-2">
                            <h6 class="card-title mb-1">Current Month Bill</h6>
                            <h4 class="mb-0">BDT ${Number(totalCurrentMonthBill).toLocaleString()}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body py-2">
                            <h6 class="card-title mb-1">Current Month Receive</h6>
                            <h4 class="mb-0">BDT ${Number(totalCurrentMonthReceive).toLocaleString()}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-danger text-white">
                        <div class="card-body py-2">
                            <h6 class="card-title mb-1">Closing Due Balance</h6>
                            <h4 class="mb-0">BDT ${Number(totalClosingDueBalance).toLocaleString()}</h4>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Table
        html += `
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover table-bordered" id="totalSummaryTable">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Client Name</th>
                                    <th class="text-right">Current Month Bill</th>
                                    <th class="text-right">Previous Due</th>
                                    <th class="text-right">Total Outstanding</th>
                                    <th class="text-right">Current Month Receive</th>
                                    <th class="text-right">Current Month Invoice Due</th>
                                    <th class="text-right">Month to Month Due</th>
                                    <th class="text-right">Closing Due Balance</th>
                                    <th class="text-right">Advance</th>
                                </tr>
                            </thead>
                            <tbody>
        `;
        
        // Add client rows
        data.data.forEach(client => {
            const clientName = client.client_name || 'Unknown Client';
            const currentMonthBill = Number(client.current_month_bill) || 0;
            const previousDue = Number(client.previous_due) || 0;
            const totalOutstanding = Number(client.total_outstanding) || 0;
            const currentMonthReceive = Number(client.current_month_receive) || 0;
            const currentMonthInvoiceDue = Number(client.current_month_invoice_due) || 0;
            const monthToMonthDue = Number(client.month_to_month_due) || 0;
            const closingDueBalance = Number(client.closing_due_balance) || 0;
            const advancePayment = Number(client.advance_payment) || 0;
            
            html += `
                <tr>
                    <td><strong>${clientName}</strong></td>
                    <td class="text-right">BDT ${currentMonthBill.toLocaleString()}</td>
                    <td class="text-right ${previousDue > 0 ? 'text-danger' : ''}">BDT ${previousDue.toLocaleString()}</td>
                    <td class="text-right ${totalOutstanding > 0 ? 'text-warning font-weight-bold' : ''}">BDT ${totalOutstanding.toLocaleString()}</td>
                    <td class="text-right text-success">BDT ${currentMonthReceive.toLocaleString()}</td>
                    <td class="text-right ${currentMonthInvoiceDue > 0 ? 'text-danger' : ''}">BDT ${currentMonthInvoiceDue.toLocaleString()}</td>
                    <td class="text-right ${monthToMonthDue > 0 ? 'text-warning' : ''}">BDT ${monthToMonthDue.toLocaleString()}</td>
                    <td class="text-right ${closingDueBalance > 0 ? 'text-danger font-weight-bold' : 'text-success font-weight-bold'}">BDT ${closingDueBalance.toLocaleString()}</td>
                    <td class="text-right text-info font-weight-bold">BDT ${advancePayment.toLocaleString()}</td>
                </tr>
            `;
        });
        
        // Add total row
        html += `
                <tr class="table-dark font-weight-bold">
                    <td><strong>TOTAL</strong></td>
                    <td class="text-right">BDT ${totalCurrentMonthBill.toLocaleString()}</td>
                    <td class="text-right">BDT ${totalPreviousDue.toLocaleString()}</td>
                    <td class="text-right">BDT ${totalOutstanding.toLocaleString()}</td>
                    <td class="text-right">BDT ${totalCurrentMonthReceive.toLocaleString()}</td>
                    <td class="text-right">BDT ${totalCurrentMonthInvoiceDue.toLocaleString()}</td>
                    <td class="text-right">BDT ${totalMonthToMonthDue.toLocaleString()}</td>
                    <td class="text-right">BDT ${totalClosingDueBalance.toLocaleString()}</td>
                    <td class="text-right">BDT ${totalAdvancePayment.toLocaleString()}</td>
                </tr>
        `;
        
        html += `
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
    } else {
        html += `
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle"></i> No client data found for the selected date range.
            </div>
        `;
    }
    
    $('#totalSummaryReportContent').html(html);
}

function exportTotalSummary(format) {
    const fromDate = $('#from_date').val();
    const toDate = $('#to_date').val();
    
    if (!fromDate || !toDate) {
        alert('Please select a date range first');
        return;
    }
    
    // Create export URL
    const url = '{{ url("/reseller/sales-report/total-summary/export") }}';
    const params = new URLSearchParams({
        from_date: fromDate,
        to_date: toDate,
        format: format
    });
    
    // Open in new window to download
    window.open(`${url}?${params}`, '_blank');
}

function exportSalesByCustomer(format) {
    const fromDate = $('#from_date').val();
    const toDate = $('#to_date').val();
    
    if (!fromDate || !toDate) {
        alert('Please select a date range first');
        return;
    }
    
    // Create export URL
    const url = '{{ url("/reseller/sales-report/customer/export") }}';
    const params = new URLSearchParams({
        from_date: fromDate,
        to_date: toDate,
        format: format
    });
    
    // Open in new window to download
    window.open(`${url}?${params}`, '_blank');
}

function exportMonthlyStatement(format) {
    const fromDate = $('#from_date').val();
    const toDate = $('#to_date').val();
    
    if (!fromDate || !toDate) {
        alert('Please select a date range first');
        return;
    }
    
    // Create export URL
    const url = '{{ url("/reseller/sales-report/monthly-statement/export") }}';
    const params = new URLSearchParams({
        from_date: fromDate,
        to_date: toDate,
        format: format
    });
    
    // Open in new window to download
    window.open(`${url}?${params}`, '_blank');
}

function generateSummaryReport() {
    const fromDate = $('#summary_from_date').val();
    const toDate = $('#summary_to_date').val();
    
    if (!fromDate || !toDate) {
        alert('Please select both From Date and To Date');
        return;
    }
    
    // Update main date fields
    $('#from_date').val(fromDate);
    $('#to_date').val(toDate);
    
    // Reload the summary report
    loadSummaryReport();
}

function resetSummaryFilters() {
    // Clear the summary-specific date fields
    $('#summary_from_date').val('');
    $('#summary_to_date').val('');
    
    // Clear main date fields
    $('#from_date').val('');
    $('#to_date').val('');
    
    // Reload the summary report
    loadSummaryReport();
}

function generateCustomerReport() {
    const fromDate = $('#customer_from_date').val();
    const toDate = $('#customer_to_date').val();
    
    if (!fromDate || !toDate) {
        alert('Please select both From Date and To Date');
        return;
    }
    
    // Update main date fields
    $('#from_date').val(fromDate);
    $('#to_date').val(toDate);
    
    // Reload the customer report
    loadCustomerReport();
}

function resetCustomerFilters() {
    // Clear the customer-specific date fields
    $('#customer_from_date').val('');
    $('#customer_to_date').val('');
    
    // Clear main date fields
    $('#from_date').val('');
    $('#to_date').val('');
    
    // Reload the customer report
    loadCustomerReport();
}

function generateItemReport() {
    const fromDate = $('#item_from_date').val();
    const toDate = $('#item_to_date').val();
    
    if (!fromDate || !toDate) {
        alert('Please select both From Date and To Date');
        return;
    }
    
    // Update main date fields
    $('#from_date').val(fromDate);
    $('#to_date').val(toDate);
    
    // Reload the item report
    loadItemReport();
}

function resetItemFilters() {
    // Clear the item-specific date fields
    $('#item_from_date').val('');
    $('#item_to_date').val('');
    
    // Clear main date fields
    $('#from_date').val('');
    $('#to_date').val('');
    
    // Reload the item report
    loadItemReport();
}

function generateMonthlyStatementReport() {
    const fromDate = $('#monthly_from_date').val();
    const toDate = $('#monthly_to_date').val();
    
    if (!fromDate || !toDate) {
        alert('Please select both From Date and To Date');
        return;
    }
    
    // Update main date fields
    $('#from_date').val(fromDate);
    $('#to_date').val(toDate);
    
    // Reload the monthly statement report
    loadMonthlyStatementReport();
}

function resetMonthlyStatementFilters() {
    // Clear the monthly-specific date fields
    $('#monthly_from_date').val('');
    $('#monthly_to_date').val('');
    
    // Clear main date fields
    $('#from_date').val('');
    $('#to_date').val('');
    
    // Reload the monthly statement report
    loadMonthlyStatementReport();
}

function viewSalesPersonDetails(salesPersonId, salesPersonName) {
    // Get the sales person data from the current report
    const currentData = window.currentSalespersonData;
    
    if (!currentData || !currentData.data) {
        alert('No data available. Please regenerate the report.');
        return;
    }
    
    // Find the sales person in the data
    const salesPerson = currentData.data.find(p => p.sales_person_id === salesPersonId);
    
    if (!salesPerson) {
        alert('Sales person data not found.');
        return;
    }
    
    // Create modal for showing invoice details
    const displayName = salesPerson.sales_person_company_name || salesPerson.sales_person_name || salesPersonName;
    
    let modalHtml = `
        <div class="modal fade" id="salesPersonDetailsModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title">
                            <i class="fas fa-building"></i> Company: ${displayName}
                        </h5>
                        <button type="button" class="close text-white" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row mb-4">
                            <div class="col-md-3">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <small class="text-muted">Total Invoices</small>
                                        <h4>${salesPerson.invoice_count}</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <small class="text-muted">Total Amount</small>
                                        <h4>৳ ${Number(salesPerson.total_amount).toLocaleString()}</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <small class="text-muted">Total Paid</small>
                                        <h4 class="text-success">৳ ${Number(salesPerson.total_paid).toLocaleString()}</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <small class="text-muted">Total Due</small>
                                        <h4 class="text-danger">৳ ${Number(salesPerson.total_due).toLocaleString()}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <h6 class="mb-3"><i class="fas fa-file-invoice"></i> Invoice Details</h6>
                        <div class="table-responsive">
                            <table class="table table-sm table-striped table-hover">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Invoice No</th>
                                        <th>Customer</th>
                                        <th>Date</th>
                                        <th class="text-right">Amount</th>
                                        <th class="text-right">Paid</th>
                                        <th class="text-right">Due</th>
                                    </tr>
                                </thead>
                                <tbody>
    `;
    
    if (salesPerson.invoices && salesPerson.invoices.length > 0) {
        salesPerson.invoices.forEach(invoice => {
            modalHtml += `
                                    <tr>
                                        <td><strong>${invoice.invoice_no}</strong></td>
                                        <td>${invoice.customer_name}</td>
                                        <td>${invoice.invoice_date}</td>
                                        <td class="text-right">৳ ${Number(invoice.amount).toLocaleString()}</td>
                                        <td class="text-right text-success">৳ ${Number(invoice.paid).toLocaleString()}</td>
                                        <td class="text-right text-danger">৳ ${Number(invoice.due).toLocaleString()}</td>
                                    </tr>
            `;
        });
    } else {
        modalHtml += `
                                    <tr>
                                        <td colspan="6" class="text-center text-muted">No invoices found</td>
                                    </tr>
        `;
    }
    
    modalHtml += `
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if any
    $('#salesPersonDetailsModal').remove();
    
    // Add modal to body
    $('body').append(modalHtml);
    
    // Show modal
    $('#salesPersonDetailsModal').modal('show');
}

function showSubTagResellers(subTagId, subTagName, tagName, resellerCount) {
    if (resellerCount === 0) {
        alert('No resellers assigned to this sub-tag.');
        return;
    }
    
    // Create modal for showing reseller details
    let modalHtml = `
        <div class="modal fade" id="subTagResellersModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="fas fa-users"></i> Resellers in "${subTagName}" (${tagName})
                        </h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p class="mt-2">Loading reseller details...</p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if any
    $('#subTagResellersModal').remove();
    
    // Add modal to body
    $('body').append(modalHtml);
    
    // Show modal
    $('#subTagResellersModal').modal('show');
    
    // Load reseller details via AJAX
    loadSubTagResellers(subTagId, subTagName, tagName);
}

function loadSubTagResellers(subTagId, subTagName, tagName) {
    const url = '{{ url("/reseller/sales-report/subtag-resellers") }}';
    const params = new URLSearchParams({
        sub_tag_id: subTagId,
        from_date: $('#from_date').val(),
        to_date: $('#to_date').val()
    });
    
    fetch(`${url}?${params}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displaySubTagResellers(data.data, subTagName, tagName);
            } else {
                $('#subTagResellersModal .modal-body').html(`
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle"></i>
                        Error loading reseller details: ${data.message || 'Unknown error'}
                    </div>
                `);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            $('#subTagResellersModal .modal-body').html(`
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle"></i>
                    Error loading reseller details. Please try again.
                </div>
            `);
        });
}

function displaySubTagResellers(resellers, subTagName, tagName) {
    let html = `
        <div class="mb-3">
            <h6><i class="fas fa-tags"></i> Sub Tag: <span class="badge badge-info">${subTagName}</span></h6>
            <h6><i class="fas fa-tag"></i> Parent Tag: <span class="badge badge-secondary">${tagName}</span></h6>
        </div>
        
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th>Reseller Name</th>
                        <th>Email</th>
                        <th>Company</th>
                        <th>Invoices</th>
                        <th class="text-right">Total Amount</th>
                        <th class="text-right">Total Paid</th>
                        <th class="text-right">Total Due</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
    `;
    
    if (resellers && resellers.length > 0) {
        resellers.forEach(reseller => {
            html += `
                <tr>
                    <td>
                        <strong>${reseller.name}</strong>
                    </td>
                    <td>
                        <a href="mailto:${reseller.email}">${reseller.email}</a>
                    </td>
                    <td>${reseller.company_name || '-'}</td>
                    <td>${reseller.invoice_count}</td>
                    <td class="text-right">BDT ${Number(reseller.total_amount).toLocaleString()}</td>
                    <td class="text-right">BDT ${Number(reseller.total_paid).toLocaleString()}</td>
                    <td class="text-right">BDT ${Number(reseller.total_due).toLocaleString()}</td>
                    <td>
                        <a href="{{ url('/reseller/users') }}/${reseller.id}" 
                           class="btn btn-sm btn-outline-primary" 
                           title="View Reseller Profile">
                            <i class="fas fa-user"></i>
                        </a>
                    </td>
                </tr>
            `;
        });
    } else {
        html += `
            <tr>
                <td colspan="8" class="text-center text-muted py-4">
                    <i class="fas fa-users fa-2x mb-2"></i>
                    <p>No resellers found for this sub-tag.</p>
                </td>
            </tr>
        `;
    }
    
    html += `
                </tbody>
            </table>
        </div>
    `;
    
    $('#subTagResellersModal .modal-body').html(html);
}

function showSalespersonDetails(salespersonName, invoices) {
    let html = `
        <div class="modal fade" id="salespersonDetailsModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Invoice Details - ${salespersonName}</h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Invoice No</th>
                                        <th>Customer</th>
                                        <th>Date</th>
                                        <th class="text-right">Amount</th>
                                        <th class="text-right">Paid</th>
                                        <th class="text-right">Due</th>
                                    </tr>
                                </thead>
                                <tbody>
    `;
    
    invoices.forEach(invoice => {
        html += `
            <tr>
                <td>${invoice.invoice_no}</td>
                <td>${invoice.customer_name}</td>
                <td>${invoice.invoice_date}</td>
                <td class="text-right">BDT ${Number(invoice.amount).toLocaleString()}</td>
                <td class="text-right">BDT ${Number(invoice.paid).toLocaleString()}</td>
                <td class="text-right">BDT ${Number(invoice.due).toLocaleString()}</td>
            </tr>
        `;
    });
    
    html += `
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    $('#salespersonDetailsModal').remove();
    $('body').append(html);
    $('#salespersonDetailsModal').modal('show');
}

function resetFilters() {
    $('#from_date').val('{{ date("Y-m-01") }}');
    $('#to_date').val('{{ date("Y-m-d") }}');
    
    // Reset all tab contents
    $('#customerReportContent').html(`
        <div class="text-center text-muted py-5">
            <div class="spinner-border text-primary mb-3" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <p>Loading Sales by Customer report...</p>
        </div>
    `);
    
    $('#itemReportContent').html(`
        <div class="text-center text-muted py-5">
            <div class="spinner-border text-primary mb-3" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <p>Loading Sales by Item report...</p>
        </div>
    `);
    
    $('#salespersonReportContent').html(`
        <div class="text-center text-muted py-5">
            <div class="spinner-border text-primary mb-3" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <p>Loading Sales by Sales Person report...</p>
        </div>
    `);
    
    $('#summaryReportContent').html(` 
        <div class="text-center text-muted py-5">
            <div class="spinner-border text-primary mb-3" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <p>Loading Sales Summary report...</p>
        </div>
    `);
    
    $('#monthlyStatementReportContent').html(`
        <div class="text-center text-muted py-5">
            <div class="spinner-border text-primary mb-3" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <p>Loading Monthly Statement report...</p>
        </div>
    `);
    
    $('#totalSummaryReportContent').html(`
        <div class="text-center text-muted py-5">
            <div class="spinner-border text-primary mb-3" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <p>Loading Total Summary report...</p>
        </div>
    `);
    
    // Auto-load report for active tab after reset
    const activeTab = $('.nav-link.active').attr('aria-controls');
    if (activeTab) {
        currentTab = activeTab;
        
        setTimeout(() => {
            switch(activeTab) {
                case 'item':
                    loadItemReport();
                    break;
                case 'customer':
                    loadCustomerReport();
                    break;
                case 'summary':
                    loadSummaryReport();
                    break;
                case 'salesperson':
                    loadSalespersonReport();
                    break;
                case 'monthly-statement':
                    loadMonthlyStatementReport();
                    break;
                case 'total-summary':
                    loadTotalSummaryReport();
                    break;
            }
        }, 100);
    }
}

// Sub Tag Statistics Search Functions
let tagsData = [];

function toggleSubTagSearch() {
    const searchFilters = document.getElementById('subTagSearchFilters');
    const button = event.target.closest('button');
    
    if (searchFilters.style.display === 'none') {
        searchFilters.style.display = 'block';
        button.innerHTML = '<i class="fas fa-search-minus"></i> Hide Search';
        button.classList.remove('btn-outline-primary');
        button.classList.add('btn-outline-secondary');
        
        // Load tags and sub-tags when search is opened
        loadTagsAndSubTags();
    } else {
        searchFilters.style.display = 'none';
        button.innerHTML = '<i class="fas fa-search"></i> Search';
        button.classList.remove('btn-outline-secondary');
        button.classList.add('btn-outline-primary');
    }
}

function loadTagsAndSubTags() {
    if (tagsData.length > 0) {
        populateDropdowns();
        return;
    }
    
    // Show loading state
    const parentTagSelect = document.getElementById('parentTagSearch');
    const subTagSelect = document.getElementById('subTagSearch');
    
    parentTagSelect.innerHTML = '<option value="">Loading...</option>';
    subTagSelect.innerHTML = '<option value="">Loading...</option>';
    
    console.log('Fetching tags from:', '{{ url("/reseller/sales-report/tags-subtags") }}');
    
    fetch('{{ url("/reseller/sales-report/tags-subtags") }}', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        credentials: 'same-origin'
    })
        .then(response => {
            console.log('Response status:', response.status);
            console.log('Response headers:', response.headers);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('Received data:', data);
            if (data.success) {
                tagsData = data.data;
                console.log('Tags data loaded:', tagsData);
                populateDropdowns();
            } else {
                console.error('Error loading tags:', data.message);
                parentTagSelect.innerHTML = '<option value="">Error loading tags</option>';
                subTagSelect.innerHTML = '<option value="">Error loading sub-tags</option>';
            }
        })
        .catch(error => {
            console.error('Error loading tags:', error);
            parentTagSelect.innerHTML = '<option value="">Error loading tags</option>';
            subTagSelect.innerHTML = '<option value="">Error loading sub-tags</option>';
        });
}

function populateDropdowns() {
    console.log('=== populateDropdowns called ===');
    console.log('Tags data:', tagsData);
    
    const parentTagSelect = document.getElementById('parentTagSearch');
    const subTagSelect = document.getElementById('subTagSearch');
    
    if (!parentTagSelect || !subTagSelect) {
        console.log('ERROR: Dropdown elements not found');
        return;
    }
    
    // Clear existing options
    parentTagSelect.innerHTML = '<option value="">All Parent Tags</option>';
    subTagSelect.innerHTML = '<option value="">All Sub Tags</option>';
    
    // Populate parent tags
    tagsData.forEach(tag => {
        const option = document.createElement('option');
        option.value = tag.id;
        option.textContent = tag.name;
        parentTagSelect.appendChild(option);
        console.log(`Added parent tag: ${tag.name} (ID: ${tag.id})`);
    });
    
    // Populate all sub tags
    tagsData.forEach(tag => {
        tag.sub_tags.forEach(subTag => {
            const option = document.createElement('option');
            option.value = subTag.id;
            option.textContent = `${tag.name} - ${subTag.name}`;
            option.dataset.tagId = subTag.tag_id;
            subTagSelect.appendChild(option);
            console.log(`Added sub tag: ${subTag.name} (ID: ${subTag.id}, Parent ID: ${subTag.tag_id})`);
        });
    });
    
    console.log(`Total parent tags: ${parentTagSelect.options.length - 1}`);
    console.log(`Total sub tags: ${subTagSelect.options.length - 1}`);
    
    // Add event listeners for selection changes
    parentTagSelect.addEventListener('change', function() {
        console.log('Parent tag changed:', this.value);
        filterSubTagsByParentTag();
        // Auto-trigger filtering when parent tag changes
        setTimeout(() => {
            console.log('Auto-filtering after parent tag change');
            filterSubTagStats();
        }, 100);
    });
    
    subTagSelect.addEventListener('change', function() {
        console.log('Sub tag changed:', this.value);
        // Auto-trigger filtering when sub tag changes
        setTimeout(() => {
            console.log('Auto-filtering after sub tag change');
            filterSubTagStats();
        }, 100);
    });
}

function filterSubTagsByParentTag() {
    const parentTagSelect = document.getElementById('parentTagSearch');
    const subTagSelect = document.getElementById('subTagSearch');
    const selectedParentTagId = parentTagSelect.value;
    
    // Clear sub tag options
    subTagSelect.innerHTML = '<option value="">All Sub Tags</option>';
    
    if (!selectedParentTagId) {
        // Show all sub tags if no parent tag selected
        tagsData.forEach(tag => {
            tag.sub_tags.forEach(subTag => {
                const option = document.createElement('option');
                option.value = subTag.id;
                option.textContent = `${tag.name} - ${subTag.name}`;
                option.dataset.tagId = subTag.tag_id;
                subTagSelect.appendChild(option);
            });
        });
    } else {
        // Show only sub tags from selected parent tag
        tagsData.forEach(tag => {
            if (tag.id == selectedParentTagId) {
                tag.sub_tags.forEach(subTag => {
                    const option = document.createElement('option');
                    option.value = subTag.id;
                    option.textContent = subTag.name;
                    option.dataset.tagId = subTag.tag_id;
                    subTagSelect.appendChild(option);
                });
            }
        });
    }
}

function filterSubTagStats() {
    console.log('=== filterSubTagStats called ===');
    
    const subTagSelect = document.getElementById('subTagSearch').value;
    const parentTagSelect = document.getElementById('parentTagSearch').value;
    
    console.log('Filter values:');
    console.log('- Parent Tag:', parentTagSelect);
    console.log('- Sub Tag:', subTagSelect);
    
    const tableBody = document.getElementById('subTagStatsTableBody');
    if (!tableBody) {
        console.log('ERROR: Table body not found, skipping filter');
        return;
    }
    
    const rows = tableBody.getElementsByTagName('tr');
    console.log('Total rows found:', rows.length);
    
    // Debug: Show all row data
    for (let i = 0; i < rows.length; i++) {
        const row = rows[i];
        if (row.id !== 'noResultsRow') {
            const subTagId = row.dataset.subTagId || row.getAttribute('data-sub-tag-id');
            const parentTagId = row.dataset.parentTagId || row.getAttribute('data-parent-tag-id');
            console.log(`Row ${i}: SubTag ID=${subTagId}, ParentTag ID=${parentTagId}`);
        }
    }
    
    let visibleCount = 0;
    
    for (let i = 0; i < rows.length; i++) {
        const row = rows[i];
        
        // Skip the "no results" row
        if (row.id === 'noResultsRow') {
            continue;
        }
        
        const rowSubTagId = row.dataset.subTagId || row.getAttribute('data-sub-tag-id');
        const rowParentTagId = row.dataset.parentTagId || row.getAttribute('data-parent-tag-id');
        
        console.log(`Row ${i}: SubTag=${rowSubTagId}, ParentTag=${rowParentTagId}`);
        
        let showRow = true;
        
        // Filter by Sub Tag ID (convert both to strings for comparison)
        if (subTagSelect && String(rowSubTagId) !== String(subTagSelect)) {
            console.log(`Hiding row ${i}: SubTag mismatch (${rowSubTagId} != ${subTagSelect})`);
            showRow = false;
        }
        
        // Filter by Parent Tag ID (convert both to strings for comparison)
        if (parentTagSelect && String(rowParentTagId) !== String(parentTagSelect)) {
            console.log(`Hiding row ${i}: ParentTag mismatch (${rowParentTagId} != ${parentTagSelect})`);
            showRow = false;
        }
        
        row.style.display = showRow ? '' : 'none';
        
        if (showRow) {
            visibleCount++;
            console.log(`Showing row ${i}`);
        }
    }
    
    console.log(`Filtering complete - Visible rows: ${visibleCount}`);
    
    // Show message if no results
    const visibleRows = Array.from(rows).filter(row => row.style.display !== 'none' && row.id !== 'noResultsRow');
    if (visibleRows.length === 0) {
        // Add a "no results" row if it doesn't exist
        let noResultsRow = document.getElementById('noResultsRow');
        if (!noResultsRow) {
            noResultsRow = document.createElement('tr');
            noResultsRow.id = 'noResultsRow';
            noResultsRow.innerHTML = `
                <td colspan="8" class="text-center text-muted py-4">
                    <i class="fas fa-search fa-2x mb-2"></i>
                    <p>No results found matching your search criteria.</p>
                </td>
            `;
            tableBody.appendChild(noResultsRow);
        }
        noResultsRow.style.display = '';
        console.log('Showing no results message');
    } else {
        // Hide "no results" row if it exists
        const noResultsRow = document.getElementById('noResultsRow');
        if (noResultsRow) {
            noResultsRow.style.display = 'none';
            console.log('Hiding no results message');
        }
    }
}

function clearSubTagFilters() {
    console.log('=== Clearing all Sub Tag filters ===');
    
    // Reset date inputs to default (first day of current month to today)
    const now = new Date();
    const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().split('T')[0];
    const today = now.toISOString().split('T')[0];
    
    $('#subTagFromDate').val(firstDayOfMonth);
    $('#subTagToDate').val(today);
    console.log('✓ Dates reset to this month:', firstDayOfMonth, 'to', today);
    
    // Clear dropdown selections
    document.getElementById('parentTagSearch').value = '';
    document.getElementById('subTagSearch').value = '';
    console.log('✓ Parent Tag and Sub Tag cleared');
    
    // Reset sub tag dropdown to show all sub tags
    if (typeof filterSubTagsByParentTag === 'function') {
        filterSubTagsByParentTag();
    }
    
    // Show all rows
    const tableBody = document.getElementById('subTagStatsTableBody');
    if (tableBody) {
        const rows = tableBody.getElementsByTagName('tr');
        
        for (let i = 0; i < rows.length; i++) {
            // Skip the "no results" row if it exists
            if (rows[i].id !== 'noResultsRow') {
                rows[i].style.display = '';
            }
        }
        
        // Hide "no results" row if it exists
        const noResultsRow = document.getElementById('noResultsRow');
        if (noResultsRow) {
            noResultsRow.style.display = 'none';
        }
    }
    
    console.log('✓ Filters cleared successfully');
}

// Store original sub tag data for advanced filtering
let originalSubTagData = [];

function storeOriginalSubTagData(data) {
    if (data.sub_tag_stats) {
        originalSubTagData = data.sub_tag_stats;
    }
}

// Enhanced filter function with date range (requires server-side implementation)
function filterSubTagStatsWithDateRange() {
    // This function is now replaced by runSubTagReport()
    // Keeping for backward compatibility
    runSubTagReport();
}


function testFiltering() {
    console.log('=== TEST FILTERING ===');
    console.log('Manual filter test triggered');
    filterSubTagStats();
}

function runSubTagReport() {
    console.log('=== runSubTagReport called ===');
    
    // Get date values from search input fields
    const fromDate = $('#subTagFromDate').val();
    const toDate = $('#subTagToDate').val();
    
    // Validate dates
    if (!fromDate || !toDate) {
        alert('Please select both From Date and To Date');
        return;
    }
    
    if (fromDate > toDate) {
        alert('From Date cannot be greater than To Date');
        return;
    }
    
    // Get current filter values
    const parentTagValue = $('#parentTagSearch').val();
    const subTagValue = $('#subTagSearch').val();
    
    console.log('Run Report Configuration:');
    console.log('- From Date:', fromDate);
    console.log('- To Date:', toDate);
    console.log('- Parent Tag:', parentTagValue || 'All');
    console.log('- Sub Tag:', subTagValue || 'All');
    
    // Show loading overlay on the table only
    const tableContainer = $('#salespersonReportContent');
    const originalContent = tableContainer.html();
    
    // Create a loading overlay without replacing content
    const loadingOverlay = $(`
        <div id="searchLoadingOverlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
             background: rgba(255,255,255,0.9); z-index: 1000; display: flex; align-items: center; justify-content: center;">
            <div class="text-center">
                <i class="fas fa-spinner fa-spin fa-3x text-primary"></i>
                <p class="mt-3">Loading search results...</p>
            </div>
        </div>
    `);
    
    tableContainer.css('position', 'relative').append(loadingOverlay);
    
    // Fetch data with search date range (don't modify main date filters)
    const url = '{{ url("/reseller/sales-report/salesperson") }}';
    const params = new URLSearchParams({
        from_date: fromDate,
        to_date: toDate
    });
    
    fetch(`${url}?${params}`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('Search results received:', data);
            
            // Remove loading overlay
            $('#searchLoadingOverlay').remove();
            
            if (data.success) {
                // Update the display with search results
                displaySalespersonReport(data);
                
                // Apply dropdown filters to the new data
                setTimeout(() => {
                    console.log('Applying dropdown filters to search results...');
                    filterSubTagStats();
                    console.log('✓ Search completed successfully');
                }, 200);
                
                // Show search active indicator
                const dateRangeText = `${fromDate} to ${toDate}`;
                $('#searchDateRange').text(dateRangeText);
                $('#searchActiveIndicator').show();
                $('#resetSearchBtn').show();
                
                console.log(`✓ Search results loaded for ${dateRangeText}`);
            } else {
                throw new Error(data.message || 'Failed to load search results');
            }
        })
        .catch(error => {
            console.error('Error loading search results:', error);
            
            // Remove loading overlay
            $('#searchLoadingOverlay').remove();
            
            // Show error message
            alert('Error loading search results: ' + error.message);
        });
}

// Reset search and load original date range data
function resetSearch() {
    console.log('=== Resetting search ===');
    
    // Hide search indicator and reset button
    $('#searchActiveIndicator').hide();
    $('#resetSearchBtn').hide();
    
    // Clear search filters
    clearSubTagFilters();
    
    // Reload report with main date filters
    const mainFromDate = $('#from_date').val();
    const mainToDate = $('#to_date').val();
    
    console.log(`Loading original data: ${mainFromDate} to ${mainToDate}`);
    
    // Show loading overlay
    const tableContainer = $('#salespersonReportContent');
    const loadingOverlay = $(`
        <div id="searchLoadingOverlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
             background: rgba(255,255,255,0.9); z-index: 1000; display: flex; align-items: center; justify-content: center;">
            <div class="text-center">
                <i class="fas fa-spinner fa-spin fa-3x text-primary"></i>
                <p class="mt-3">Resetting to original data...</p>
            </div>
        </div>
    `);
    tableContainer.css('position', 'relative').append(loadingOverlay);
    
    // Load original data
    loadSalespersonReport()
        .then(() => {
            $('#searchLoadingOverlay').remove();
            console.log('✓ Reset complete');
        })
        .catch(error => {
            $('#searchLoadingOverlay').remove();
            console.error('Error resetting search:', error);
            alert('Error resetting search: ' + error.message);
        });
}
</script>
@endsection