@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-2">
        <div>
            <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">Global Dashboard</li>
                </ol>
            </nav>
        </div>
        <div class="d-flex align-items-center mt-3">
            <select id="dataRange" class="form-select form-select-sm me-2" style="width:auto">
                <option value="24h">Last 24 hours</option>
                <option value="yesterday">Yesterday</option>
                <option selected value="7">Last 7 days</option>
                <option value="15">Last 15 days</option>
                <option value="30">Last 30 days</option>
            </select> <button id="refreshBtn" class="btn btn-primary btn-sm">Refresh</button>
        </div>
    </div>
@can('dashboard.global')
    <div class="row">
        <div id="kpi-row" class="row "></div>
        <div class="col-12">
            <x-dashboard.full-overview />
        </div>
        <div class="row mt-3">
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <h6 class="card-title">Top Countries</h6>
                        <ul id="topCountries" class="list-group list-group-flush"></ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body">
                        <h6 class="card-title">Recent Transactions</h6>
                        <div class="table-responsive">
                            <table class="table table-sm table-striped align-middle" id="recentTxTable">
                                <thead class="table-light">
                                    <tr>
                                        <th>ID</th>
                                        <th>User</th>
                                        <th>Type</th>
                                        <th>Amount</th>
                                        <th>Task/Offer</th>
                                        <th>Time</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endcan    
@endsection
@section('scripts')
    @include('layouts.components.common-script')
    {{-- @include('layouts.components.common-script') <!-- Apex Charts JS --> --}}
    <script src="{{ asset('build/assets/libs/apexcharts/apexcharts.min.js') }}"></script>

    @can('dashboard.global')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const rangeEl = document.getElementById('dataRange');
            const refreshBtn = document.getElementById('refreshBtn');
            const sel = rangeEl ? rangeEl.value : '24h';
            const mapped = mapRangeValue(sel);

            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 fetchData() {
                const sel = (rangeEl && rangeEl.value) ? rangeEl.value : '24h'; // default to 24h
                const mapped = mapRangeValue(sel);

                axios.get('{{ route('admin.dashboard.data') }}', {
                        params: {
                            range: mapped.range,
                            mode: mapped.mode
                        }
                    })
                    .then(res => {
                        const data = res.data;
                        renderKPIs(data.meta);
                        renderTopCountries(data.charts.top_countries);
                        renderRecentTx(data.recent.transactions);
                    })
                    .catch(err => console.error(err));
            }


            function renderKPIs(meta) {
                const container = document.getElementById('kpi-row');
                container.innerHTML = '';
                const cards = [{
                        title: 'Total Users',
                        value: meta.totalUsers,
                        icon: 'ri-group-line',
                        color:'rgba(99,102,241,1)'
                    },
                    {
                        title: 'New Subscription',
                        value: meta.newSub, icon: 'ri-coins-line' ,
                        color:'green'
                    },
                    {
                        title: 'Coins Distributed',
                        value: meta.totalCoinsDistributed, icon: 'ri-coins-line' ,
                        color:'red'
                    },
                    {
                        title: 'Pending Payouts',
                        value: meta.pendingPayouts, icon: 'ri-bank-line',
                        color:'gold'
                    },
                    {
                        title: 'Diamonds Sold',
                        value: meta.diamondsSold , icon:'ri-coins-line' ,
                        color:'green'
                    },
                    {
                        title: 'Revenue (Month)',
                        value: meta.adminRevenueMonth, icon: 'ri-wallet-line' ,
                        color:'green'
                    },
                    {
                        title: 'Active Offers',
                        value: meta.activeOffers, icon:'ri-advertisement-line' ,
                        color:'rgba(99,102,241,1)'
                    },
                    {
                        title: 'Leaderboards',
                        value: meta.runningLeaderboards, icon: 'ri-trophy-line' ,
                        color:'rgba(99,102,241,1)'
                    }
                ];


                cards.forEach(k => {

                    const title = k.title ?? '—';
                    const value = (k.value !== undefined && k.value !== null) ? k.value : '0';
                    const icon = k.icon ?? 'ri-user-line';
                    const color = k.color|| 'rgba(99,102,241,1)';

                    const html = `
        <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-6">
          <div class="card custom-card overflow-hidden ">
            <div class="m-3 bg-light rounded-1 border">
              <div class="card-body d-flex align-items-center justify-content-between">
                <div>
                  <p class="mb-1 text-muted fw-medium">${title}</p>
                  <h4 class="mb-0 fw-medium">${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="${icon} fs-4" style="color: ${color};"></i></div>
                </div>
              </div>
              <div class="apexchart-mini" style="height:25px;"></div>
            </div>
          </div>
        </div>`;
                    container.insertAdjacentHTML('beforeend', html);;
                    //      container.appendChild(html);
                });
            }

            function renderTopCountries(rows) {
                const list = document.getElementById('topCountries');
                list.innerHTML = '';
                rows.forEach(r => {
                    const item = document.createElement('li');
                    item.className = 'list-group-item d-flex justify-content-between align-items-center';
                    item.innerHTML =
                        `<span>${r.country_code || 'Unknown'}</span><span class="fw-bold">${r.cnt}</span>`;
                    list.appendChild(item);
                });
            }


            function renderRecentTx(rows) {
                const tbody = document.querySelector('#recentTxTable tbody');
                tbody.innerHTML = '';
                rows.forEach(r => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
<td>${r.id}</td>
<td>${r.user_id}</td>
<td>${r.type}</td>
<td>${r.amount}</td>
<td>${r.task || r.offer_id || '-'}</td>
<td>${r.created_at}</td>`;
                    tbody.appendChild(tr);
                });
            }


            refreshBtn.addEventListener('click', fetchData);
            rangeEl.addEventListener('change', fetchData);
            fetchData();
        });
    </script>

    @endcan
@endsection