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

@section('content')
    
    <div class="content_area superAdmin">
        
  <!-- ================= STAT CARDS ================= -->
  <div class="row g-3">
    <div class="col-md-4">
      <div class="stat-card">
        <div class="stat-icon ic-purple">
          <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-1a4 4 0 0 0-5.7-3.6M17 20H7m10 0v-1c0-1.1-.2-2.1-.6-3M7 20H2v-1a4 4 0 0 1 5.7-3.6M7 20v-1c0-1.1.2-2.1.6-3m0 0a6 6 0 0 1 8.8 0M15 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 2a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM8 9a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/>
          </svg>
        </div>
        <div>
          <div class="stat-label">Total Admins</div>
          <div class="stat-value">142</div>
          <div class="stat-sub up">&#8599;&nbsp; +12% this month</div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="stat-card">
        <div class="stat-icon ic-green">
          <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
            <circle cx="12" cy="12" r="9"/>
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4"/>
          </svg>
        </div>
        <div>
          <div class="stat-label">Active Sessions</div>
          <div class="stat-value">48</div>
          <div class="stat-sub">Currently online in portal</div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="stat-card">
        <div class="stat-icon ic-orange">
          <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/>
          </svg>
        </div>
        <div>
          <div class="stat-label">Pending Approvals</div>
          <div class="stat-value">09</div>
          <div class="stat-sub warn">Requires attention</div>
        </div>
      </div>
    </div>
  </div>

  <!-- ================= PANEL ================= -->
  <div class="panel mt-3">

    <!-- toolbar -->
    <div class="toolbar">
      <div class="search-wrap">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 10.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z"/>
        </svg>
        <input type="text" id="searchInput" placeholder="Search Here...">
      </div>
      <select class="filter-select" id="statusFilter">
        <option value="">All Status</option>
        <option value="active">Active</option>
        <option value="pending">Pending</option>
        <option value="rejected">Rejected</option>
      </select>
      <select class="filter-select">
        <option selected>All Plans</option>
        <option>Free</option>
        <option>Pro</option>
        <option>Enterprise</option>
      </select>
      <button class="btn-add">
        <svg width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
          <path stroke-linecap="round" d="M12 5v14M5 12h14"/>
        </svg>
        Add League Admin
      </button>
    </div>

    <!-- table -->
    <div class="table-responsive">
      <table class="table admin-table" id="adminTable">
        <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 data-status="active">
            <td>
              <div class="d-flex align-items-center gap-2">
                <span class="avatar" style="background:#7C3AED;">PL</span>
                <div>
                  <div class="league-name">Premier Elite League</div>
                  <div class="l-sub">Football – UK</div>
                </div>
              </div>
            </td>
            <td>Jonathan Wick</td>
            <td>452</td>
            <td class="auction-cell"><span class="dot" style="background:var(--lime)"></span>Live Auction</td>
            <td class="revenue">$142,500</td>
            <td>
              <select class="status-select st-active" onchange="setStatusClass(this)">
                <option value="active" selected>Active</option>
                <option value="pending">Pending</option>
                <option value="rejected">Rejected</option>
              </select>
            </td>
            <td class="text-end"><button class="btn-dots" type="button">•••</button></td>
          </tr>
          <tr data-status="pending">
            <td>
              <div class="d-flex align-items-center gap-2">
                <span class="avatar" style="background:#F97316;">CC</span>
                <div>
                  <div class="league-name">Champions Cricket</div>
                  <div class="l-sub">Cricket – India</div>
                </div>
              </div>
            </td>
            <td>Sarah Sharma</td>
            <td>210</td>
            <td class="auction-cell"><span class="dot" style="background:var(--muted)"></span>Scheduled (13h)</td>
            <td class="revenue">$89,200</td>
            <td>
              <select class="status-select st-pending" onchange="setStatusClass(this)">
                <option value="active">Active</option>
                <option value="pending" selected>Pending</option>
                <option value="rejected">Rejected</option>
              </select>
            </td>
            <td class="text-end"><button class="btn-dots" type="button">•••</button></td>
          </tr>
          <tr data-status="rejected">
            <td>
              <div class="d-flex align-items-center gap-2">
                <span class="avatar" style="background:#F97316;">CC</span>
                <div>
                  <div class="league-name">Champions Cricket</div>
                  <div class="l-sub">Cricket – India</div>
                </div>
              </div>
            </td>
            <td>Sarah Sharma</td>
            <td>210</td>
            <td class="auction-cell"><span class="dot" style="background:var(--red)"></span>Rejected</td>
            <td class="revenue">$89,200</td>
            <td>
              <select class="status-select st-rejected" onchange="setStatusClass(this)">
                <option value="active">Active</option>
                <option value="pending">Pending</option>
                <option value="rejected" selected>Rejected</option>
              </select>
            </td>
            <td class="text-end"><button class="btn-dots" type="button">•••</button></td>
          </tr>
          <tr data-status="active">
            <td>
              <div class="d-flex align-items-center gap-2">
                <span class="avatar" style="background:#F97316;">CC</span>
                <div>
                  <div class="league-name">Champions Cricket</div>
                  <div class="l-sub">Cricket – India</div>
                </div>
              </div>
            </td>
            <td>Sarah Sharma</td>
            <td>210</td>
            <td class="auction-cell"><span class="dot" style="background:var(--muted)"></span>Scheduled (13h)</td>
            <td class="revenue">$89,200</td>
            <td>
              <select class="status-select st-active" onchange="setStatusClass(this)">
                <option value="active" selected>Active</option>
                <option value="pending">Pending</option>
                <option value="rejected">Rejected</option>
              </select>
            </td>
            <td class="text-end"><button class="btn-dots" type="button">•••</button></td>
          </tr>
          <tr data-status="active">
            <td>
              <div class="d-flex align-items-center gap-2">
                <span class="avatar" style="background:#F97316;">CC</span>
                <div>
                  <div class="league-name">Champions Cricket</div>
                  <div class="l-sub">Cricket – India</div>
                </div>
              </div>
            </td>
            <td>Sarah Sharma</td>
            <td>210</td>
            <td class="auction-cell"><span class="dot" style="background:var(--muted)"></span>Scheduled (13h)</td>
            <td class="revenue">$89,200</td>
            <td>
              <select class="status-select st-active" onchange="setStatusClass(this)">
                <option value="active" selected>Active</option>
                <option value="pending">Pending</option>
                <option value="rejected">Rejected</option>
              </select>
            </td>
            <td class="text-end"><button class="btn-dots" type="button">•••</button></td>
          </tr>
          <tr data-status="active">
            <td>
              <div class="d-flex align-items-center gap-2">
                <span class="avatar" style="background:#A3E635;color:#101204;">PH</span>
                <div>
                  <div class="league-name">Pro Hoops Masters</div>
                  <div class="l-sub">Basketball – USA</div>
                </div>
              </div>
            </td>
            <td>Mike Miller</td>
            <td>186</td>
            <td class="auction-cell"><span class="dot" style="background:var(--purple-soft)"></span>Finalizing</td>
            <td class="revenue">$115,000</td>
            <td>
              <select class="status-select st-active" onchange="setStatusClass(this)">
                <option value="active" selected>Active</option>
                <option value="pending">Pending</option>
                <option value="rejected">Rejected</option>
              </select>
            </td>
            <td class="text-end"><button class="btn-dots" type="button">•••</button></td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- footer -->
    <div class="table-footer">
      <div class="d-flex align-items-center gap-3 flex-wrap">
        <select class="per-page">
          <option>10 / page</option>
          <option>25 / page</option>
          <option>50 / page</option>
        </select>
        <span>Total Records: <strong style="color:var(--text)" id="totalRecords">06</strong></span>
      </div>
      <div class="pager">
        <button type="button" disabled>&#8249;</button>
        <button type="button" class="active">1</button>
        <button type="button">2</button>
        <button type="button">3</button>
        <button type="button">&#8250;</button>
      </div>
    </div>

  </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
/* ---------- status dropdown color switch ---------- */
function setStatusClass(sel){
  sel.classList.remove('st-active','st-pending','st-rejected');
  sel.classList.add('st-' + sel.value);
  sel.closest('tr').dataset.status = sel.value;
}

/* ---------- combined search + status filter ---------- */
const searchInput  = document.getElementById('searchInput');
const statusFilter = document.getElementById('statusFilter');
const rows         = document.querySelectorAll('#adminTable tbody tr');
const totalEl      = document.getElementById('totalRecords');

function applyFilters(){
  const q  = searchInput.value.toLowerCase().trim();
  const st = statusFilter.value;
  let visible = 0;

  rows.forEach(tr => {
    const matchText   = tr.textContent.toLowerCase().includes(q);
    const matchStatus = !st || tr.dataset.status === st;
    const show = matchText && matchStatus;
    tr.style.display = show ? '' : 'none';
    if (show) visible++;
  });

  totalEl.textContent = String(visible).padStart(2, '0');
}

searchInput.addEventListener('input', applyFilters);
statusFilter.addEventListener('change', applyFilters);
</script>
@endsection

@section('scripts')

@endsection