@extends('layouts.superadmin.app')
@section('styles')
  
@endsection

@section('content')
<div class="content_area superAdmin">
  <!-- ================= STAT CARDS ================= -->
 <div class="row g-3">
    <div class="col-sm-6 col-md-4 col-xl">
      <div class="stat-card">
        <div class="d-flex justify-content-between align-items-start">
          <div class="stat-icon">
            <svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M0 16V13.2C0 12.6333 0.145833 12.1125 0.4375 11.6375C0.729167 11.1625 1.11667 10.8 1.6 10.55C2.63333 10.0333 3.68333 9.64583 4.75 9.3875C5.81667 9.12917 6.9 9 8 9C9.1 9 10.1833 9.12917 11.25 9.3875C12.3167 9.64583 13.3667 10.0333 14.4 10.55C14.8833 10.8 15.2708 11.1625 15.5625 11.6375C15.8542 12.1125 16 12.6333 16 13.2V16H0ZM18 16V13C18 12.2667 17.7958 11.5625 17.3875 10.8875C16.9792 10.2125 16.4 9.63333 15.65 9.15C16.5 9.25 17.3 9.42083 18.05 9.6625C18.8 9.90417 19.5 10.2 20.15 10.55C20.75 10.8833 21.2083 11.2542 21.525 11.6625C21.8417 12.0708 22 12.5167 22 13V16H18ZM8 8C6.9 8 5.95833 7.60833 5.175 6.825C4.39167 6.04167 4 5.1 4 4C4 2.9 4.39167 1.95833 5.175 1.175C5.95833 0.391667 6.9 0 8 0C9.1 0 10.0417 0.391667 10.825 1.175C11.6083 1.95833 12 2.9 12 4C12 5.1 11.6083 6.04167 10.825 6.825C10.0417 7.60833 9.1 8 8 8ZM18 4C18 5.1 17.6083 6.04167 16.825 6.825C16.0417 7.60833 15.1 8 14 8C13.8167 8 13.5833 7.97917 13.3 7.9375C13.0167 7.89583 12.7833 7.85 12.6 7.8C13.05 7.26667 13.3958 6.675 13.6375 6.025C13.8792 5.375 14 4.7 14 4C14 3.3 13.8792 2.625 13.6375 1.975C13.3958 1.325 13.05 0.733333 12.6 0.2C12.8333 0.116667 13.0667 0.0625 13.3 0.0375C13.5333 0.0125 13.7667 0 14 0C15.1 0 16.0417 0.391667 16.825 1.175C17.6083 1.95833 18 2.9 18 4ZM2 14H14V13.2C14 13.0167 13.9542 12.85 13.8625 12.7C13.7708 12.55 13.65 12.4333 13.5 12.35C12.6 11.9 11.6917 11.5625 10.775 11.3375C9.85833 11.1125 8.93333 11 8 11C7.06667 11 6.14167 11.1125 5.225 11.3375C4.30833 11.5625 3.4 11.9 2.5 12.35C2.35 12.4333 2.22917 12.55 2.1375 12.7C2.04583 12.85 2 13.0167 2 13.2V14ZM8 6C8.55 6 9.02083 5.80417 9.4125 5.4125C9.80417 5.02083 10 4.55 10 4C10 3.45 9.80417 2.97917 9.4125 2.5875C9.02083 2.19583 8.55 2 8 2C7.45 2 6.97917 2.19583 6.5875 2.5875C6.19583 2.97917 6 3.45 6 4C6 4.55 6.19583 5.02083 6.5875 5.4125C6.97917 5.80417 7.45 6 8 6Z" fill="#6922DA"/>
            </svg>
          </div>
          <span class="stat-delta">+12%</span>
        </div>
        <div class="stat-label">Total Users</div>
        <div class="stat-value">24,892</div>
        <div class="mt-2 d-flex gap-2">
          <span class="stat-pill">18k <br> Players</span>
          <span class="stat-pill">4k <br> Owners</span>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4 col-xl">
      <div class="stat-card">
        <div class="d-flex justify-content-between align-items-start">
          <div class="stat-icon">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M4 18V16H8V12.9C7.18333 12.7167 6.45417 12.3708 5.8125 11.8625C5.17083 11.3542 4.7 10.7167 4.4 9.95C3.15 9.8 2.10417 9.25417 1.2625 8.3125C0.420833 7.37083 0 6.26667 0 5V4C0 3.45 0.195833 2.97917 0.5875 2.5875C0.979167 2.19583 1.45 2 2 2H4V0H14V2H16C16.55 2 17.0208 2.19583 17.4125 2.5875C17.8042 2.97917 18 3.45 18 4V5C18 6.26667 17.5792 7.37083 16.7375 8.3125C15.8958 9.25417 14.85 9.8 13.6 9.95C13.3 10.7167 12.8292 11.3542 12.1875 11.8625C11.5458 12.3708 10.8167 12.7167 10 12.9V16H14V18H4ZM4 7.8V4H2V5C2 5.63333 2.18333 6.20417 2.55 6.7125C2.91667 7.22083 3.4 7.58333 4 7.8ZM9 11C9.83333 11 10.5417 10.7083 11.125 10.125C11.7083 9.54167 12 8.83333 12 8V2H6V8C6 8.83333 6.29167 9.54167 6.875 10.125C7.45833 10.7083 8.16667 11 9 11ZM14 7.8C14.6 7.58333 15.0833 7.22083 15.45 6.7125C15.8167 6.20417 16 5.63333 16 5V4H14V7.8Z" fill="#6922DA"/>
            </svg>
          </div>
          <span class="stat-delta">+3</span>
        </div>
        <div class="stat-label">Active Leagues</div>
        <div class="stat-value">142</div>
        <div class="stat-sub mt-2">8 Auctions Live Now</div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4 col-xl">
      <div class="stat-card">
        <div class="d-flex justify-content-between align-items-start">
          <div class="stat-icon">
            <svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13 9C12.1667 9 11.4583 8.70833 10.875 8.125C10.2917 7.54167 10 6.83333 10 6C10 5.16667 10.2917 4.45833 10.875 3.875C11.4583 3.29167 12.1667 3 13 3C13.8333 3 14.5417 3.29167 15.125 3.875C15.7083 4.45833 16 5.16667 16 6C16 6.83333 15.7083 7.54167 15.125 8.125C14.5417 8.70833 13.8333 9 13 9ZM6 12C5.45 12 4.97917 11.8042 4.5875 11.4125C4.19583 11.0208 4 10.55 4 10V2C4 1.45 4.19583 0.979167 4.5875 0.5875C4.97917 0.195833 5.45 0 6 0H20C20.55 0 21.0208 0.195833 21.4125 0.5875C21.8042 0.979167 22 1.45 22 2V10C22 10.55 21.8042 11.0208 21.4125 11.4125C21.0208 11.8042 20.55 12 20 12H6ZM8 10H18C18 9.45 18.1958 8.97917 18.5875 8.5875C18.9792 8.19583 19.45 8 20 8V4C19.45 4 18.9792 3.80417 18.5875 3.4125C18.1958 3.02083 18 2.55 18 2H8C8 2.55 7.80417 3.02083 7.4125 3.4125C7.02083 3.80417 6.55 4 6 4V8C6.55 8 7.02083 8.19583 7.4125 8.5875C7.80417 8.97917 8 9.45 8 10ZM19 16H2C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14V3H2V14H19V16ZM6 10V2V10Z" fill="#A0E86F"/>
            </svg>
          </div>
          <span class="stat-delta">+20%</span>
        </div>
        <div class="stat-label">Total Revenue</div>
        <div class="stat-value">$1.4M</div>
        <div class="stat-sub mt-2">Fiscal YTD</div>
      </div>
    </div>
    <div class="col-sm-6 col-md-6 col-xl">
      <div class="stat-card">
        <div class="d-flex justify-content-between align-items-start">
          <div class="stat-icon">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 11V13H18V11H2ZM2 0H18C18.55 0 19.0208 0.195833 19.4125 0.5875C19.8042 0.979167 20 1.45 20 2V13C20 13.55 19.8042 14.0208 19.4125 14.4125C19.0208 14.8042 18.55 15 18 15H14V20L10 18L6 20V15H2C1.45 15 0.979167 14.8042 0.5875 14.4125C0.195833 14.0208 0 13.55 0 13V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0ZM2 8H18V2H2V8ZM2 13V2V13Z" fill="#6922DA"/>
            </svg>
          </div>
          <span class="stat-delta">Stable</span>
        </div>
        <div class="stat-label">Subscriptions</div>
        <div class="stat-value">8,421</div>
        <div class="stat-sub mt-2">96% Retention Rate</div>
      </div>
    </div>
    <div class="col-sm-6 col-md-6 col-xl">
      <div class="stat-card">
        <div class="d-flex justify-content-between align-items-start">
          <div class="stat-icon">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 16L10 12.95L14 16L12.5 11.05L16.5 8.2H11.6L10 3L8.4 8.2H3.5L7.5 11.05L6 16ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z" fill="#6922DA"/>
            </svg>
          </div>
          <span class="stat-delta">+2</span>
        </div>
        <div class="stat-label">Total Sponsors</div>
        <div class="stat-value">36</div>
        <div class="stat-sub mt-2">Enterprise Partners</div>
      </div>
    </div>
  </div>

  <!-- ================= LEAGUE MGMT + CHART ================= -->
  <div class="d-flex flex-wrap justify-content-between align-items-center mt-4 mb-3 gap-2">
    <div class="section-title">League Management</div>
    <div class="time-toggle">
      <button class="active" data-range="today">Today</button>
      <button data-range="week">Week</button>
      <button data-range="month">Month</button>
    </div>
  </div>

  <div class="panel p-3">
    <div class="row g-3">
      <div class="col-md-4">
        <div class="mini-card">
          <div class="m-label">Monthly Goal</div>
          <div class="m-value">$420,000</div>
          <div class="progress-goal"><div class="bar"></div></div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="mini-card">
          <div class="m-label warn">Pending Payments</div>
          <div class="m-value">$12,450</div>
          <div class="m-sub">24 Invoices</div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="mini-card">
          <div class="m-label danger">Failed Transactions</div>
          <div class="m-value">38</div>
          <div class="m-sub">Last 24 Hours</div>
        </div>
      </div>
    </div>

    <div class="chart-box"><canvas id="revenueChart"></canvas></div>
  </div>

  <!-- ================= LEAGUE TABLE ================= -->
  <div class="section-title mt-4 mb-3">League Management</div>
  <div class="panel p-0">
    <div class="table-responsive">
      <table class="table league-table mb-0">
        <thead>
          <tr>
            <th>League Name</th>
            <th>Admin Name</th>
            <th>Players</th>
            <th>Auction Status</th>
            <th>Revenue</th>
            <th>Status</th>
            <th class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div class="d-flex align-items-center gap-2">
                <span class="avatar" style="background:#7C3AED;">PL</span>
                <div>
                  <div class="fw-bold">Premier Elite League</div>
                  <div class="stat-sub">Tourball – 88</div>
                </div>
              </div>
            </td>
            <td>Jonathan Wick</td>
            <td>452</td>
            <td><span class="dot" style="background:var(--lime)"></span>Live Auction</td>
            <td class="fw-bold">$142,500</td>
            <td><span class="badge-status badge-active">ACTIVE</span></td>
            <td class="text-end"><button class="btn-dots">⋯</button></td>
          </tr>
          <tr>
            <td>
              <div class="d-flex align-items-center gap-2">
                <span class="avatar" style="background:#F97316;">CL</span>
                <div>
                  <div class="fw-bold">Champions Cricket</div>
                  <div class="stat-sub">Cricket – India</div>
                </div>
              </div>
            </td>
            <td>Sarah Sharma</td>
            <td>210</td>
            <td><span class="dot" style="background:var(--muted)"></span>Scheduled (13h)</td>
            <td class="fw-bold">$89,200</td>
            <td><span class="badge-status badge-active">ACTIVE</span></td>
            <td class="text-end"><button class="btn-dots">⋯</button></td>
          </tr>
          <tr>
            <td>
              <div class="d-flex align-items-center gap-2">
                <span class="avatar" style="background:#A3E635;color:#101204;">NBA</span>
                <div>
                  <div class="fw-bold">Pro Hoops Masters</div>
                  <div class="stat-sub">Basketball</div>
                </div>
              </div>
            </td>
            <td>Mike Miller</td>
            <td>186</td>
            <td><span class="dot" style="background:var(--purple-soft)"></span>Finalizing</td>
            <td class="fw-bold">$115,000</td>
            <td><span class="badge-status badge-dormant">DORMANT</span></td>
            <td class="text-end"><button class="btn-dots">⋯</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
Chart.defaults.font.family = "'Inter', sans-serif";
Chart.defaults.color = '#8A8F98';
Chart.defaults.font.size = 10.5;

const ctx = document.getElementById('revenueChart').getContext('2d');

/* purple gradient — neeche fade, upar bright */
function makeGradient(bright){
  const g = ctx.createLinearGradient(0, 0, 0, 270);
  if (bright){
    g.addColorStop(0, '#8B5CF6');
    g.addColorStop(1, '#6D28D9');
  } else {
    g.addColorStop(0, 'rgba(109,40,217,.85)');
    g.addColorStop(1, 'rgba(76,29,149,.25)');
  }
  return g;
}

const dataSets = {
  today: [8, 14, 12, 19, 24, 30, 38],
  week:  [12, 18, 15, 22, 27, 33, 41],
  month: [20, 24, 28, 26, 34, 39, 47]
};
const labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];

const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      data: dataSets.today,
      backgroundColor: (c) => makeGradient(c.dataIndex === c.dataset.data.length - 1),
      borderRadius: { topLeft: 10, topRight: 10 },
      borderSkipped: 'bottom',
      barPercentage: .72,
      categoryPercentage: .8
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    animation: { duration: 700, easing: 'easeOutQuart' },
    plugins: {
      legend: { display: false },
      tooltip: {
        backgroundColor: '#F2F3F5',
        titleColor: '#101204',
        bodyColor: '#101204',
        displayColors: false,
        padding: 10,
        cornerRadius: 8,
        callbacks: {
          title: () => '',
          label: (c) => '$' + c.parsed.y + 'k'
        }
      }
    },
    scales: {
      x: { grid: { display:false }, border: { display:false } },
      y: { display: false, beginAtZero: true }
    }
  }
});

/* Today / Week / Month toggle */
document.querySelectorAll('.time-toggle button').forEach(btn => {
  btn.addEventListener('click', function(){
    document.querySelectorAll('.time-toggle button').forEach(b => b.classList.remove('active'));
    this.classList.add('active');
    chart.data.datasets[0].data = dataSets[this.dataset.range];
    chart.update();
  });
});
</script>
@endsection

@section('scripts')

@endsection