@extends('layouts.master')

@section('styles')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
@endsection

@section('content')
<div class="page-header d-flex align-items-center justify-content-between mb-4">
    <div>
        <h2 class="fw-semibold mb-0">Revenue & Finance</h2>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 mt-1">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Revenue & Finance</li>
            </ol>
        </nav>
    </div>

    <div class="d-flex align-items-center">
        <select id="revRange" class="form-select form-select-sm me-2" style="width:auto">
            <option value="24h">Last 24 hours</option>
            <option value="yesterday">Yesterday</option>
            <option value="7">Last 7 days</option>
            <option value="15">Last 15 days</option>
            <option selected value="30">Last 30 days</option>
        </select>
        <button id="revRefresh" class="btn btn-primary btn-sm">Refresh</button>
    </div>
</div>

{{-- KPI row (use x-ui.stat-card server-side if you want static initial render) --}}
<div id="rev-kpi-row" class="row g-3 mb-4"></div>

{{-- Charts --}}
<div class="row g-3 mb-4">
    <div class="col-md-8">
        <div class="card custom-card">
            <div class="card-body">
                <h6 class="card-title">Admin Revenue (Last <span id="rev-label-days">30</span>)</h6>
                <div id="revRevenueChart" style="height:360px;"></div>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card custom-card">
            <div class="card-body">
                <h6 class="card-title">Payouts Breakdown</h6>
                <div id="payoutDonut" style="height:320px;"></div>
            </div>
        </div>
    </div>
</div>

{{-- Recent payouts / transactions --}}
<div class="row g-3">
    <div class="col-lg-6">
        <div class="card custom-card">
            <div class="card-body">
                <h6 class="card-title">Recent Payout Requests</h6>
                <div class="table-responsive">
                    <table class="table table-sm table-striped align-middle" id="recentPayoutTable">
                        <thead class="table-light">
                            <tr>
                                <th>ID</th>
                                <th>User</th>
                                <th>Amount</th>
                                <th>Method</th>
                                <th>Status</th>
                                <th>Time</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card custom-card">
            <div class="card-body">
                <h6 class="card-title">Gateways / Sources</h6>
                <div id="gatewayChart" style="height:320px;"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
@include('layouts.components.scripts')
@include('layouts.components.common-script')
<script src="{{ asset('build/assets/libs/apexcharts/apexcharts.min.js') }}"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const rangeEl = document.getElementById('revRange');
    const refreshBtn = document.getElementById('revRefresh');
    const labelDays = document.getElementById('rev-label-days');

    // chart instances
    let revenueChart = null, payoutDonut = null, gatewayChart = null;

    function mapRangeValue(selected) {
        if(selected === '24h') return { range: 1, mode: '24h' };
        if(selected === 'yesterday') return { range: 1, mode: 'yesterday' };
        return { range: Number(selected), mode: 'days' };
    }

    function renderKPIs(kpis) {
        const container = document.getElementById('rev-kpi-row');
        container.innerHTML = '';
        if(!Array.isArray(kpis) || !kpis.length) {
            container.innerHTML = '<div class="col-12"><div class="alert alert-info py-2 mb-0">No KPI data</div></div>';
            return;
        }

        kpis.forEach(k => {
            const html = `
            <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-6">
          <div class="card custom-card overflow-hidden h-100">
            <div class="m-3 bg-light rounded-1 border">
              <div class="card-body pb-4 mb-2 d-flex align-items-center justify-content-between">
                <div>
                  <p class="mb-1 text-muted fw-medium">${k.title}</p>
                  <h4 class="mb-0 fw-medium">${k.value}</h4>
                </div>
                <div class="text-end">
                  <div class="text-muted fs-12">Last ${rangeEl.value === '24h' ? '24 hours' : (rangeEl.value === 'yesterday' ? 'Yesterday' : rangeEl.value + ' days')}</div>
                  <div class="mt-1"><i class="${k.icon} fs-4" style="color: ${k.iconColor};"></i></div>
                </div>
              </div>
              <div class="apexchart-mini" style="height:36px;"></div>
            </div>
          </div>
        </div>`;
            container.insertAdjacentHTML('beforeend', html);
        });
    }

    function renderRevenueTrend(labels, series) {
        if(!document.querySelector('#revRevenueChart')) return;
        const opts = {
            chart:{ type:'area', height:360, toolbar:{show:false} },
            series:[{ name:'Revenue', data: series }],
            xaxis:{ categories: labels },
            stroke:{ curve:'smooth' },
            colors:['#0ea5a4']
        };
        if(revenueChart) { revenueChart.updateOptions(opts); revenueChart.updateSeries([{ name:'Revenue', data: series }]); }
        else { revenueChart = new ApexCharts(document.querySelector('#revRevenueChart'), opts); revenueChart.render(); }
    }

    function renderPayoutDonut(labels, series) {
        if(!document.querySelector('#payoutDonut')) return;
        const opts = { chart:{ type:'donut', height:320 }, labels, series, colors:['#ef4444','#10b981','#6366f1'] };
        if(payoutDonut){ payoutDonut.updateOptions({ labels }); payoutDonut.updateSeries(series); }
        else { payoutDonut = new ApexCharts(document.querySelector('#payoutDonut'), opts); payoutDonut.render(); }
    }

    function renderGatewayChart(labels, series) {
        if(!document.querySelector('#gatewayChart')) return;
        const opts = { chart:{ type:'pie', height:320 }, labels, series, colors:['#6366f1','#10b981','#f59e0b','#ef4444'] };
        if(gatewayChart){ gatewayChart.updateOptions({ labels }); gatewayChart.updateSeries(series); }
        else { gatewayChart = new ApexCharts(document.querySelector('#gatewayChart'), opts); gatewayChart.render(); }
    }

    function renderRecentPayouts(rows) {
        const tbody = document.querySelector('#recentPayoutTable tbody');
        if(!tbody) return;
        tbody.innerHTML = '';
        (rows || []).forEach(r => {
            const tr = document.createElement('tr');
            tr.innerHTML = `<td>${r.id}</td><td>${r.user_id || r.user || '-'}</td><td>${r.amount}</td><td>${r.method || '-'}</td><td>${r.status || '-'}</td><td>${r.created_at}</td>`;
            tbody.appendChild(tr);
        });
    }

    function fetchData() {
        const sel = rangeEl ? rangeEl.value : '30';
        const mapped = mapRangeValue(sel);
        labelDays.innerText = (sel === '24h' ? '24h' : (sel === 'yesterday' ? 'Yesterday' : sel));
        axios.get("{{ route('admin.dashboard.revenue.data') }}", { params: { range: mapped.range, mode: mapped.mode } })
            .then(res => {
                const p = res.data || {};
                console.log('Revenue payload', p);

                // KPIs
                const kpis = p.kpis || [];
                renderKPIs(kpis);

                // Revenue trend
                const labels = p.charts?.labels || [];
                const revenueSeries = p.charts?.revenue_trend?.series || p.charts?.revenue_trend || [];
                renderRevenueTrend(labels, revenueSeries);

                // payouts breakdown
                const payoutLabels = p.charts?.payout_breakdown?.labels || [];
                const payoutValues = p.charts?.payout_breakdown?.values || [];
                renderPayoutDonut(payoutLabels, payoutValues);

                // gateway / source breakdown
                const gwLabels = p.charts?.gateways?.labels || [];
                const gwValues = p.charts?.gateways?.values || [];
                renderGatewayChart(gwLabels, gwValues);

                // recent table
                renderRecentPayouts(p.recent?.payouts || p.recent_payouts || p.payouts || []);
            })
            .catch(err => console.error(err));
    }

    if(refreshBtn) refreshBtn.addEventListener('click', fetchData);
    if(rangeEl) rangeEl.addEventListener('change', fetchData);

    // initial load
    fetchData();
});
</script>
@endsection