@extends('dashboard.layouts.master')
@section('title', 'Financial Reporting Dashboard')
@push('after-styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" type="text/css" />
{{-- Styles moved to custom.css --}}
@endpush

@section('content')
    <div class="padding website-label">
        <div class="box">
            <div class="box-header">
                <div class="box-header-left">
                    <h3 class="d-block">Financial Reporting Dashboard</h3>
                    <small class="d-inline-block">
                        <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                        <span>Financial Reports</span>
                    </small>
                </div>
            </div>

        <!-- Summary Cards -->
        <div class="row row-sm">
            <div class="col-sm-6 col-md-3 d-flex">
                <div class="box p-a flex-fill financial-card border-info">
                    <div class="metric-header">
                        <i class="fa fa-credit-card text-primary" style="font-size: 20px;"></i>
                        <span class="metric-label">Subscriptions</span>
                    </div>
                    <div class="metric-value font-weight-bold" id="sum-subscription">BHD {{ number_format($summary->subscription_revenue ?? 0, 2) }}</div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3 d-flex">
                <div class="box p-a flex-fill financial-card border-success">
                    <div class="metric-header">
                        <i class="fa fa-bullhorn text-info" style="font-size: 20px;"></i>
                        <span class="metric-label">Promotions</span>
                    </div>
                    <div class="metric-value font-weight-bold" id="sum-promotion">BHD {{ number_format($summary->promotion_revenue ?? 0, 2) }}</div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3 d-flex">
                <div class="box p-a flex-fill financial-card border-warning">
                    <div class="metric-header">
                        <i class="fa fa-truck text-warning" style="font-size: 20px;"></i>
                        <span class="metric-label">Supplier Trans.</span>
                    </div>
                    <div class="metric-value font-weight-bold" id="sum-supplier">BHD {{ number_format($summary->supplier_revenue ?? 0, 2) }}</div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3 d-flex">
                <div class="box p-a flex-fill financial-card border-primary">
                    <div class="metric-header">
                        <i class="fa fa-percentage text-success" style="font-size: 20px;"></i>
                        <span class="metric-label">Commissions</span>
                    </div>
                    <div class="metric-value font-weight-bold" id="sum-commission">BHD {{ number_format($summary->commission_revenue ?? 0, 2) }}</div>
                </div>
            </div>
        </div>

        {{-- Tabbing System --}}
        <div class="nav-active-primary m-b-1">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" href="" data-toggle="tab" data-target="#tab-ledger">
                        <i class="material-icons align-middle m-r-xs">&#xe8ef;</i> Transaction Ledger
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="" data-toggle="tab" data-target="#tab-analytics">
                        <i class="material-icons align-middle m-r-xs">&#xe85c;</i> Performance Analytics
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="" data-toggle="tab" data-target="#tab-commission">
                        <i class="material-icons align-middle m-r-xs">&#xe8d0;</i> Commission Management
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="" data-toggle="tab" data-target="#tab-reports">
                        <i class="material-icons align-middle m-r-xs">&#xe85d;</i> Transaction Reports
                    </a>
                </li>
            </ul>
        </div>

        <div class="tab-content">
            <div class="tab-pane fade in active" id="tab-ledger">
                <div class="row row-sm">
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill financial-card" style="border-top: 3px solid #002868;">
                            <div class="metric-label">Subscriptions</div>
                            <div class="metric-value" id="sum-subscription">BHD 0.00</div>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill financial-card" style="border-top: 3px solid #fcc100;">
                            <div class="metric-label">Promotions</div>
                            <div class="metric-value" id="sum-promotion">BHD 0.00</div>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill financial-card" style="border-top: 3px solid #0cc2aa;">
                            <div class="metric-label">Supplier</div>
                            <div class="metric-value" id="sum-supplier">BHD 0.00</div>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill financial-card" style="border-top: 3px solid #6887ff;">
                            <div class="metric-label">Commission</div>
                            <div class="metric-value" id="sum-commission">BHD 0.00</div>
                        </div>
                    </div>
                </div>

                <div class="box p-a" style="border-radius: 12px;">
                    <div class="box-header" style="padding:0; margin-bottom:16px;">
                        <div class="row row-sm">
                            <div class="col-sm-6">
                                <h3>Global Transaction Ledger</h3>
                                <small>Full financial audit trail across the platform</small>
                            </div>
                            <div class="col-sm-6 text-right">
                                <button type="button" id="export-csv" class="btn btn-sm white"><i class="fa fa-file-excel-o mr-1"></i> CSV</button>
                                <button type="button" id="export-pdf" class="btn btn-sm white"><i class="fa fa-file-pdf-o mr-1"></i> PDF</button>
                            </div>
                        </div>
                    </div>

                    <div class="bd-b m-b" style="padding-bottom:16px;">
                        <form id="filter-form" class="row row-sm">
                            <div class="col-md-3">
                                <div class="form-group m-b-0">
                                    <label class="metric-label">From</label>
                                    <input type="date" name="date_from" value="{{ $date_from }}" class="form-control form-control-sm">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group m-b-0">
                                    <label class="metric-label">To</label>
                                    <input type="date" name="date_to" value="{{ $date_to }}" class="form-control form-control-sm">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group m-b-0">
                                    <label class="metric-label">Status</label>
                                    <select name="status" id="filter-status" class="form-control form-control-sm">
                                        <option value="">All Statuses</option>
                                        <option value="completed">Completed</option>
                                        <option value="pending">Pending</option>
                                        <option value="refunded">Refunded</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="m-b" style="margin-bottom:16px;">
                        <div class="filter-tabs" id="type-tabs" style="margin-bottom:0;">
                            <button type="button" class="filter-tab active" data-type="">All <span class="tab-count" id="cnt-all">—</span></button>
                            <button type="button" class="filter-tab" data-type="subscription">Subscriptions <span class="tab-count" id="cnt-subscription">—</span></button>
                            <button type="button" class="filter-tab" data-type="promotion">Promotions <span class="tab-count" id="cnt-promotion">—</span></button>
                            <button type="button" class="filter-tab" data-type="supplier_purchase">Supplier <span class="tab-count" id="cnt-supplier">—</span></button>
                            <button type="button" class="filter-tab" data-type="commission">Commissions <span class="tab-count" id="cnt-commission">—</span></button>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered m-a-0" id="financial-table">
                            <thead class="bg-light">
                                <tr>
                                    <th>Ref #</th>
                                    <th>User / Entity</th>
                                    <th>Business</th>
                                    <th>Type</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                    <th class="no-sort text-center">Options</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- TAB: ANALYTICS --}}
            <div class="tab-pane fade" id="tab-analytics">
                <div class="box p-a" style="border-radius: 12px; margin-bottom: 24px;">
                    <div class="box-header" style="padding:0; margin-bottom:16px;">
                        <div class="row row-sm" style="align-items: center;">
                            <div class="col-sm-6">
                                <h3>Financial Analytics</h3>
                                <small>Revenue breakdown by period and category</small>
                            </div>
                            <div class="col-sm-6 text-right">
                                <label class="metric-label" style="display:inline-block; margin-right:8px;">YEAR</label>
                                <select id="analytics-year" class="form-control form-control-sm d-inline-block" style="width:100px; display:inline-block!important;">
                                    @for($y = date('Y'); $y >= date('Y') - 5; $y--)
                                        <option value="{{ $y }}" {{ $y == date('Y') ? 'selected' : '' }}>{{ $y }}</option>
                                    @endfor
                                    <option value="">All Years</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    {{-- Period Tabs --}}
                    <div class="m-b" style="margin-bottom:16px;">
                        <div class="filter-tabs" id="period-tabs" style="margin-bottom:0;">
                            <button type="button" class="filter-tab active" data-period="monthly">Monthly</button>
                            <button type="button" class="filter-tab" data-period="quarterly">Quarterly</button>
                            <button type="button" class="filter-tab" data-period="annual">Annual</button>
                        </div>
                    </div>

                    <div class="row row-sm">
                        {{-- Revenue Trends Table --}}
                        <div class="col-md-5">
                            <h5 class="metric-label" style="margin-bottom:12px; color:#002868;">Revenue Trends</h5>
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered m-a-0" id="revenue-trends-table">
                                    <thead class="bg-light">
                                        <tr>
                                            <th>Period</th>
                                            <th class="text-right">Revenue</th>
                                            <th class="text-right">Txns</th>
                                            <th class="text-right">%</th>
                                        </tr>
                                    </thead>
                                    <tbody id="revenue-trends-body">
                                        <tr><td colspan="4" class="text-center text-muted p-a">Loading...</td></tr>
                                    </tbody>
                                    <tfoot>
                                        <tr style="background:#f8f9fa; font-weight:700;">
                                            <td>Total</td>
                                            <td class="text-right" id="rt-grand-total" colspan="3">—</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>

                        {{-- Revenue by Category Table --}}
                        <div class="col-md-4">
                            <h5 class="metric-label" style="margin-bottom:12px; color:#002868;">Revenue by Category</h5>
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered m-a-0">
                                    <thead class="bg-light">
                                        <tr>
                                            <th>Category</th>
                                            <th class="text-right">Revenue</th>
                                            <th class="text-right">%</th>
                                        </tr>
                                    </thead>
                                    <tbody id="category-body">
                                        <tr><td colspan="3" class="text-center text-muted p-a">Loading...</td></tr>
                                    </tbody>
                                    <tfoot>
                                        <tr style="background:#f8f9fa; font-weight:700;">
                                            <td>Total</td>
                                            <td class="text-right" id="cat-grand-total" colspan="2">—</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>

                        {{-- Top Businesses Table --}}
                        <div class="col-md-3">
                            <h5 class="metric-label" style="margin-bottom:12px; color:#002868;">Top Businesses</h5>
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered m-a-0">
                                    <thead class="bg-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Business</th>
                                            <th class="text-right">BHD</th>
                                        </tr>
                                    </thead>
                                    <tbody id="top-businesses-body">
                                        <tr><td colspan="3" class="text-center text-muted p-a">Loading...</td></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- TAB: COMMISSION --}}
            <div class="tab-pane fade" id="tab-commission">
                <div class="row row-sm">
                    <div class="col-sm-4 d-flex">
                        <div class="box p-a flex-fill financial-card border-primary" style="background: #f0f4ff;">
                            <div class="metric-label">Total Earned</div>
                            <div class="metric-value font-weight-bold text-primary" id="comm-total-earned">BHD 0.00</div>
                        </div>
                    </div>
                    <div class="col-sm-4 d-flex">
                        <div class="box p-a flex-fill financial-card border-warning" style="background: #fff9f0;">
                            <div class="metric-label text-warning">Pending / Unpaid</div>
                            <div class="metric-value font-weight-bold text-warning" id="comm-total-pending">BHD 0.00</div>
                        </div>
                    </div>
                    <div class="col-sm-4 d-flex">
                        <div class="box p-a flex-fill financial-card border-success" style="background: #f0fff4;">
                            <div class="metric-label text-success">Net Balance</div>
                            <div class="metric-value font-weight-bold text-success" id="comm-total-balance">BHD 0.00</div>
                        </div>
                    </div>
                </div>

                <div class="box p-a" style="border-radius: 12px;">
                    <div class="box-header" style="padding:0; margin-bottom:16px;">
                        <h3>Commission Management</h3>
                        <small>Global, business, and supplier settlements</small>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered m-a-0" id="commission-analysis-table">
                            <thead class="bg-light shadow-sm">
                                <tr>
                                    <th>Entity / Partner</th>
                                    <th>Type</th>
                                    <th class="text-right">Earned</th>
                                    <th class="text-right">Pending</th>
                                    <th class="text-center">Status</th>
                                </tr>
                            </thead>
                            <tbody id="commission-analysis-body">
                                <tr><td colspan="5" class="text-center text-muted p-a">Loading...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- TAB: TRANSACTION REPORTS --}}
            <div class="tab-pane fade" id="tab-reports">
                <div class="m-b" style="margin-bottom:16px;">
                    <div class="filter-tabs" id="report-category-tabs" style="margin-bottom:0;">
                        <button type="button" class="filter-tab active" data-type="subscription">Subscriptions</button>
                        <button type="button" class="filter-tab" data-type="promotion">Promotions</button>
                        <button type="button" class="filter-tab" data-type="supplier_purchase">Supplier</button>
                    </div>
                </div>

                <div class="row row-sm">
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill financial-card border-primary">
                            <div class="metric-label">Total Revenue</div>
                            <div class="metric-value font-weight-bold" id="cat-total-revenue">BHD 0.00</div>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill financial-card border-warning">
                            <div class="metric-label text-warning">Pending</div>
                            <div class="metric-value font-weight-bold" id="cat-pending-revenue">BHD 0.00</div>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill financial-card border-success">
                            <div class="metric-label">Txn Count</div>
                            <div class="metric-value font-weight-bold" id="cat-txn-count">0</div>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-3 d-flex">
                        <div class="box p-a flex-fill financial-card border-info">
                            <div class="metric-label">Avg. Value</div>
                            <div class="metric-value font-weight-bold" id="cat-avg-value">BHD 0.00</div>
                        </div>
                    </div>
                </div>

                <div class="box p-a" style="border-radius: 12px;">
                    <div class="box-header" style="padding:0; margin-bottom:16px;">
                        <h3 id="report-title">Subscription Payment Reports</h3>
                        <small>Categorized financial audit trail</small>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover m-a-0" id="category-report-table" style="width: 100%;">
                            <thead class="bg-light shadow-sm">
                                <tr>
                                    <th style="width: 120px;">Ref #</th>
                                    <th>User / Entity</th>
                                    <th>Business Partner</th>
                                    <th class="text-right">Amount (BHD)</th>
                                    <th class="text-center">Status</th>
                                    <th style="width: 160px;">Date & Time</th>
                                    <th class="no-sort text-center" style="width: 80px;">Action</th>
                                </tr>
                            </thead>
                            <tbody id="category-report-body" style="font-size: 13px;">
                                <tr><td colspan="7" class="text-center text-muted p-a-lg"><i class="fa fa-spin fa-spinner mr-2"></i> Initializing Report...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('after-scripts')
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Main Ledger DataTables
        var table = $('#financial-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            ordering: true,
            columnDefs: [{ bSortable: false, aTargets: [7] }],
            ajax: {
                url: "{{ route('financial-reports.anyData') }}",
                type: 'POST',
                data: function(d) {
                    d.transaction_type = $('#type-tabs .filter-tab.active').data('type');
                    d.date_from = $('input[name="date_from"]').val();
                    d.date_to = $('input[name="date_to"]').val();
                    d.status = $('#filter-status').val();
                }
            },
            columns: [
                { data: 'transaction_number', name: 'transaction_number' },
                { data: 'user_name', name: 'user_name' },
                { data: 'business_name', name: 'business_name' },
                { data: 'type', name: 'type' },
                { data: 'amount', name: 'amount' },
                { data: 'status', name: 'status' },
                { data: 'created_at', name: 'created_at' },
                { data: 'options', name: 'options', orderable: false, searchable: false, className: 'text-center' }
            ],
            order: [[6, 'desc']]
        });

        // Category Report DataTables (Refined Design)
        var categoryDataTable = $('#category-report-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            ordering: true,
            dom: 'rtip', 
            searching: false,
            ajax: {
                url: "{{ route('financial-reports.anyData') }}",
                type: 'POST',
                data: function(d) {
                    d.transaction_type = $('#report-category-tabs .filter-tab.active').data('type');
                    d.date_from = $('input[name="date_from"]').val();
                    d.date_to = $('input[name="date_to"]').val();
                    d.status = 'completed'; 
                }
            },
            columns: [
                { data: 'transaction_number', name: 'transaction_number', className: 'v-middle font-weight-bold' },
                { data: 'user_name', name: 'user_name', className: 'v-middle' },
                { data: 'business_name', name: 'business_name', className: 'v-middle' },
                { data: 'amount', name: 'amount', className: 'v-middle text-right font-weight-bold text-dark' },
                { data: 'status', name: 'status', className: 'v-middle text-center' },
                { data: 'created_at', name: 'created_at', className: 'v-middle text-muted' },
                { data: 'options', name: 'options', orderable: false, searchable: false, className: 'text-center v-middle' }
            ],
            order: [[5, 'desc']]
        });

        $('#type-tabs .filter-tab').click(function() {
            $('#type-tabs .filter-tab').removeClass('active');
            $(this).addClass('active');
            table.draw();
            refreshSummary(); 
        });

        // Auto-apply on change
        $('input[name="date_from"], input[name="date_to"], #filter-status').on('change', function() {
            table.draw();
            refreshSummary();
            if ($('#tab-analytics').hasClass('active')) loadAllAnalytics();
            if ($('#tab-commission').hasClass('active')) loadCommissionAnalysis();
            if ($('#tab-reports').hasClass('active')) {
                loadCategoryAnalysis();
                categoryDataTable.draw();
            }
        });

        loadTabCounts();

        function loadTabCounts() {
            $.ajax({
                url: "{{ route('financial-reports.tabCounts') }}",
                type: 'POST',
                success: function(data) {
                    $('#cnt-all').text(data.all);
                    $('#cnt-subscription').text(data.subscription);
                    $('#cnt-promotion').text(data.promotion);
                    $('#cnt-supplier').text(data.supplier);
                    $('#cnt-commission').text(data.commission);
                }
            });
        }

        function refreshSummary() {
            $.ajax({
                url: "{{ route('financial-reports.summary') }}",
                type: 'POST',
                data: {
                    date_from: $('input[name="date_from"]').val(),
                    date_to: $('input[name="date_to"]').val(),
                    transaction_type: $('#type-tabs .active').data('type')
                },
                success: function(data) {
                    $('#sum-subscription').text('BHD ' + data.subscription_revenue);
                    $('#sum-promotion').text('BHD ' + data.promotion_revenue);
                    $('#sum-supplier').text('BHD ' + data.supplier_revenue);
                    $('#sum-commission').text('BHD ' + data.commission_revenue);
                }
            });
        }

        $('#export-csv, #export-pdf').click(function() {
            var baseUrl = $(this).attr('id') == 'export-csv'
                ? "{{ route('financial-reports.export-csv') }}"
                : "{{ route('financial-reports.export-pdf') }}";

            var params = $.param({
                transaction_type: $('#type-tabs .active').data('type'),
                date_from: $('input[name="date_from"]').val(),
                date_to: $('input[name="date_to"]').val(),
                status: $('#filter-status').val()
            });

            window.location.href = baseUrl + '?' + params;
        });

        // -------------------------------------------------------
        // ANALYTICS & COMMISSIONS (Previously Implemented)
        // -------------------------------------------------------

        function loadAllAnalytics() {
            loadRevenueTrends();
            loadRevenueByCategory();
            loadTopBusinesses();
        }

        function loadRevenueTrends() {
            $.ajax({
                url: "{{ route('financial-reports.revenue-summary') }}",
                type: 'POST',
                data: { year: $('#analytics-year').val(), period: $('#period-tabs .active').data('period') },
                success: function(res) {
                    var html = '';
                    if (res.rows.length === 0) html = '<tr><td colspan="4" class="text-center p-a">No data</td></tr>';
                    else $.each(res.rows, function(i, r) {
                        html += '<tr><td>' + r.label + '</td><td class="text-right">' + parseFloat(r.total).toFixed(2) + '</td><td class="text-right">' + r.cnt + '</td><td class="text-right">' + r.pct + '%</td></tr>';
                    });
                    $('#revenue-trends-body').html(html);
                    $('#rt-grand-total').text('BHD ' + res.grand_total);
                }
            });
        }

        function loadRevenueByCategory() {
            $.ajax({
                url: "{{ route('financial-reports.revenue-by-category') }}",
                type: 'POST',
                data: { year: $('#analytics-year').val() },
                success: function(res) {
                    var html = '';
                    if (res.rows.length === 0) html = '<tr><td colspan="3" class="text-center p-a">No data</td></tr>';
                    else $.each(res.rows, function(i, r) {
                        html += '<tr><td>' + r.category + '</td><td class="text-right">' + parseFloat(r.total).toFixed(2) + '</td><td class="text-right">' + r.pct + '%</td></tr>';
                    });
                    $('#category-body').html(html);
                    $('#cat-grand-total').text('BHD ' + res.grand_total);
                }
            });
        }

        function loadTopBusinesses() {
            $.ajax({
                url: "{{ route('financial-reports.top-businesses') }}",
                type: 'POST',
                data: { year: $('#analytics-year').val(), limit: 10 },
                success: function(res) {
                    var html = '';
                    if (res.rows.length === 0) html = '<tr><td colspan="4" class="text-center p-a">No data</td></tr>';
                    else $.each(res.rows, function(i, r) {
                        html += '<tr><td>' + r.rank + '</td><td>' + r.business_name + '</td><td class="text-right">' + parseFloat(r.total).toFixed(2) + '</td><td class="text-right">' + r.pct + '%</td></tr>';
                    });
                    $('#top-businesses-body').html(html);
                }
            });
        }

        function loadCommissionAnalysis() {
            $.ajax({
                url: "{{ route('financial-reports.commission-analysis') }}",
                type: 'POST',
                data: { date_from: $('input[name="date_from"]').val(), date_to: $('input[name="date_to"]').val() },
                success: function(res) {
                    $('#comm-total-earned').text('BHD ' + res.summary.total_earned);
                    $('#comm-total-pending').text('BHD ' + res.summary.total_pending);
                    $('#comm-total-balance').text('BHD ' + res.summary.balance);
                    var html = '';
                    if (res.rows.length === 0) html = '<tr><td colspan="5" class="text-center p-a">No data</td></tr>';
                    else $.each(res.rows, function(i, r) {
                        var statusIcon = r.pending > 0 ? '<i class="fa fa-clock-o text-warning"></i>' : '<i class="fa fa-check-circle text-success"></i>';
                        html += '<tr><td><strong>' + r.name + '</strong></td><td><span class="label info">' + r.type + '</span></td><td class="text-right">' + r.earned_fmt + '</td><td class="text-right text-warning">' + r.pending_fmt + '</td><td class="text-center">' + statusIcon + '</td></tr>';
                    });
                    $('#commission-analysis-body').html(html);
                }
            });
        }

        // -------------------------------------------------------
        // TRANSACTION REPORTS (Category-Specific)
        // -------------------------------------------------------

        function loadCategoryAnalysis() {
            var type = $('#report-category-tabs .filter-tab.active').data('type');
            var titles = { subscription: 'Subscription Payment Reports', promotion: 'Paid Promotion Reports', supplier_purchase: 'Supplier Transaction Reports' };
            $('#report-title').text(titles[type]);

            $.ajax({
                url: "{{ route('financial-reports.category-analysis') }}",
                type: 'POST',
                data: {
                    type:      type,
                    date_from: $('input[name="date_from"]').val(),
                    date_to:   $('input[name="date_to"]').val()
                },
                success: function(res) {
                    $('#cat-total-revenue').text('BHD ' + res.summary.total_revenue);
                    $('#cat-pending-revenue').text('BHD ' + res.summary.pending_revenue);
                    $('#cat-txn-count').text(res.summary.count);
                    $('#cat-avg-value').text('BHD ' + res.summary.avg_value);
                }
            });
        }

        $('#report-category-tabs .filter-tab').click(function() {
            $('#report-category-tabs .filter-tab').removeClass('active');
            $(this).addClass('active');
            loadCategoryAnalysis();
            categoryDataTable.draw();
        });

        // Trigger loads when tabs are shown
        $('a[data-target="#tab-analytics"]').on('shown.bs.tab', function (e) { loadAllAnalytics(); });
        $('a[data-target="#tab-commission"]').on('shown.bs.tab', function (e) { loadCommissionAnalysis(); });
        $('a[data-target="#tab-reports"]').on('shown.bs.tab', function (e) { 
            loadCategoryAnalysis(); 
            categoryDataTable.draw();
        });

        // Period tab switching
        $('#period-tabs .filter-tab').click(function() {
            $('#period-tabs .filter-tab').removeClass('active');
            $(this).addClass('active');
            loadRevenueTrends();
        });

        $('#analytics-year').on('change', function() { loadAllAnalytics(); });

        // Initial check
        if ($('#tab-analytics').hasClass('active')) loadAllAnalytics();
        if ($('#tab-commission').hasClass('active')) loadCommissionAnalysis();
        if ($('#tab-reports').hasClass('active')) { loadCategoryAnalysis(); categoryDataTable.draw(); }
    });
</script>
@endpush