{{-- Phase 3d: Financials with Period Selector + Chart --}}
<div class="project-box p-3 mb-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <h6 class="fw-semibold mb-0">Financials</h6>
        <div class="d-flex gap-2 align-items-center">
            <label class="small text-muted mb-0">View By:</label>
            <div class="btn-group btn-group-sm" role="group" id="financials-period-group">
                <a href="?tab=financials&financial_period=monthly"
                   class="btn waves-effect {{ ($financialPeriod ?? 'monthly') === 'monthly' ? 'green-btn-inner' : 'black-btn-inner' }}">Monthly</a>
                <a href="?tab=financials&financial_period=quarterly"
                   class="btn waves-effect {{ ($financialPeriod ?? 'monthly') === 'quarterly' ? 'green-btn-inner' : 'black-btn-inner' }}">Quarterly</a>
                <a href="?tab=financials&financial_period=annual"
                   class="btn waves-effect {{ ($financialPeriod ?? 'monthly') === 'annual' ? 'green-btn-inner' : 'black-btn-inner' }}">Annual</a>
            </div>
        </div>
    </div>

    {{-- Chart --}}
    @if(!empty($financialsChartData) && count($financialsChartData['labels'] ?? []) > 0)
    <div class="mb-3">
        <div id="financials-chart" style="min-height:280px;"></div>
        <input type="hidden" id="financials-chart-data" value='@json($financialsChartData)'>
    </div>
    @endif

    {{-- Table --}}
    <div class="table-responsive project-table">
        <table class="table table-bordered mb-0">
            <thead>
            <tr>
                <th>Period</th>
                <th class="text-end">Gross Volume</th>
                <th class="text-end">Net Volume</th>
                <th class="text-end">Total Fees</th>
                <th class="text-end">Chargebacks</th>
                <th class="text-end">Retrievals</th>
            </tr>
            </thead>
            <tbody>
            @forelse($financials as $row)
                <tr>
                    <td>{{ $row->period_label ?? ($row->date ? \App\Helpers\Helper::showdate($row->date,false) : '—') }}</td>
                    <td class="text-end">${{ number_format($row->gross_volume ?? 0, 2) }}</td>
                    <td class="text-end">${{ number_format($row->net_volume ?? 0, 2) }}</td>
                    <td class="text-end">${{ number_format($row->total_fees ?? 0, 2) }}</td>
                    <td class="text-end">${{ number_format($row->chargebacks_amount ?? 0, 2) }}</td>
                    <td class="text-end">${{ number_format($row->retrievals_amount ?? 0, 2) }}</td>
                </tr>
            @empty
                <tr><td colspan="6" class="text-center py-4">There are no results in this table.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

@push('page_script')
<script>
(function(){
    const chartEl = document.querySelector('#financials-chart');
    if (!chartEl || typeof ApexCharts === 'undefined') return;
    try {
        const raw = document.querySelector('#financials-chart-data');
        if (!raw) return;
        const d = JSON.parse(raw.value || '{}');
        if (!d.labels || !d.labels.length) return;
        const chart = new ApexCharts(chartEl, {
            chart: { type: 'bar', height: 280, toolbar: { show: false } },
            series: [
                { name: 'Gross Volume', data: d.grossVolume || [] },
                { name: 'Net Volume',   data: d.netVolume || [] }
            ],
            xaxis: { categories: d.labels, labels: { rotate: -30, rotateAlways: true } },
            yaxis: { labels: { formatter: v => '$' + Math.round(v/1000) + 'K' } },
            colors: ['#0B6FA4','#34c38f'],
            dataLabels: { enabled: false },
            plotOptions: { bar: { columnWidth: '45%', borderRadius: 3 } },
            tooltip: { y: { formatter: v => '$' + parseFloat(v).toLocaleString('en-US',{minimumFractionDigits:2}) } },
            legend: { position: 'top' }
        });
        chart.render();
    } catch(e) { console.warn('Financials chart error:', e); }
})();
</script>
@endpush