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

@section('content')
    <div class="content_area superAdmin subscriptionpage">
        
  <!-- ================= TOP BAR ================= -->
  <div class="top-bar">
    <div class="role-tabs" id="roleTabs">
      <button type="button" class="active" data-tab="league_admin">League Admin</button>
      <button type="button" data-tab="player">Player</button>
      <button type="button" data-tab="team_owner">Team Owner</button>
      <button type="button" data-tab="sponsor">Sponsor</button>
    </div>
    <select class="league-select">
      <option selected>New Zealand Champion League</option>
      <option>Premier Pro League</option>
      <option>Elite Legends 2024</option>
      <option>Underdog Cup</option>
    </select>
  </div>

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

    <!-- 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="inactive">Inactive</option>
      </select>
      <select class="filter-select" id="durationFilter">
        <option value="">Duration</option>
        <option value="Monthly">Monthly</option>
        <option value="Quarterly">Quarterly</option>
        <option value="Annual">Annual</option>
      </select>
      <button class="btn-create" type="button">
        <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>
        Create New Plan
      </button>
    </div>

    <!-- table (tbody JS se render hoti hai per tab) -->
    <div class="table-responsive">
      <table class="table plans-table">
        <thead>
          <tr>
            <th>Plan Name</th>
            <th>Price</th>
            <th>Duration</th>
            <th>Active Users</th>
            <th>Status</th>
            <th class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody id="plansBody"></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">00</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>
    </div>
    
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
/* =========================================================
   TAB DATA — Laravel mein isse se replace
   kar dena, structure same rakhna
========================================================= */
const PLANS = {
  league_admin: [
    { name:'Pro League Executive',   price:'$499.00', duration:'Annual',    users:'1,240', delta:'+5%',  status:'active',   color:'#7C3AED' },
    { name:'Standard Official',      price:'$299.00', duration:'Annual',    users:'980',   delta:'+3%',  status:'active',   color:'#7C3AED' },
    { name:'Trial Moderator',        price:'$0.00',   duration:'Monthly',   users:'2,410', delta:'+12%', status:'active',   color:'#7C3AED' },
    { name:'Pro League Executive',   price:'$499.00', duration:'Annual',    users:'1,240', delta:'+5%',  status:'inactive', color:'#7C3AED' },
    { name:'Enterprise League Suite',price:'$899.00', duration:'Annual',    users:'320',   delta:'+2%',  status:'active',   color:'#7C3AED' }
  ],
  player: [
    { name:'Rookie Pass',            price:'$9.99',   duration:'Monthly',   users:'8,540', delta:'+18%', status:'active',   color:'#60A5FA' },
    { name:'Pro Player',             price:'$24.99',  duration:'Monthly',   users:'3,120', delta:'+9%',  status:'active',   color:'#60A5FA' },
    { name:'Season Elite',           price:'$149.00', duration:'Annual',    users:'1,860', delta:'+6%',  status:'active',   color:'#60A5FA' },
    { name:'Legacy Player',          price:'$99.00',  duration:'Annual',    users:'440',   delta:'-2%',  status:'inactive', color:'#60A5FA' }
  ],
  team_owner: [
    { name:'Franchise Starter',      price:'$1,499',  duration:'Annual',    users:'86',    delta:'+4%',  status:'active',   color:'#FB923C' },
    { name:'Franchise Pro',          price:'$2,999',  duration:'Annual',    users:'54',    delta:'+7%',  status:'active',   color:'#FB923C' },
    { name:'Multi-Team Suite',       price:'$4,999',  duration:'Annual',    users:'21',    delta:'+1%',  status:'active',   color:'#FB923C' }
  ],
  sponsor: [
    { name:'Brand Booster',          price:'$799.00', duration:'Quarterly', users:'112',   delta:'+11%', status:'active',   color:'#A3E635' },
    { name:'Premium Sponsor',        price:'$2,499',  duration:'Annual',    users:'48',    delta:'+5%',  status:'active',   color:'#A3E635' },
    { name:'Title Partner',          price:'$9,999',  duration:'Annual',    users:'6',     delta:'0%',   status:'inactive', color:'#A3E635' }
  ]
};

const SHIELD_SVG = '<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.825 5.25L9.475 0H9.775L12.425 5.25H6.825ZM8.875 17.1L0.25 6.75H8.875V17.1ZM10.375 17.1V6.75H19L10.375 17.1ZM14.075 5.25L11.475 0H16.625L19.25 5.25H14.075ZM0 5.25L2.625 0H7.775L5.175 5.25H0Z" fill="#8B5CF6"/></svg>';

let currentTab = 'league_admin';

const tbody        = document.getElementById('plansBody');
const totalEl      = document.getElementById('totalRecords');
const searchInput  = document.getElementById('searchInput');
const statusFilter = document.getElementById('statusFilter');
const durationFilter = document.getElementById('durationFilter');

/* ---------- render active tab ke rows ---------- */
function render(){
  const q   = searchInput.value.toLowerCase().trim();
  const st  = statusFilter.value;
  const dur = durationFilter.value;

  const rows = PLANS[currentTab].filter(p =>
    p.name.toLowerCase().includes(q) &&
    (!st  || p.status === st) &&
    (!dur || p.duration === dur)
  );

  if (!rows.length){
    tbody.innerHTML = '<tr class="empty-row"><td colspan="6">No plans found for this filter.</td></tr>';
    totalEl.textContent = '00';
    return;
  }

  tbody.innerHTML = rows.map((p, i) => `
    <tr class="tab-fade">
      <td>
        <div class="d-flex align-items-center gap-2">
          <span class="plan-ic" style="background:${p.color}22;color:${p.color};">${SHIELD_SVG}</span>
          <span class="plan-name">${p.name}</span>
        </div>
      </td>
      <td class="price">${p.price}</td>
      <td><span class="chip">${p.duration}</span></td>
      <td class="users">${p.users}<span class="delta ${p.delta.startsWith('-') ? 'down' : ''}">${p.delta}</span></td>
      <td>
        <select class="status-select ${p.status === 'inactive' ? 'st-inactive' : ''}" data-index="${i}" onchange="changeStatus(this)">
          <option value="active"   ${p.status === 'active'   ? 'selected' : ''}>Active</option>
          <option value="inactive" ${p.status === 'inactive' ? 'selected' : ''}>Inactive</option>
        </select>
      </td>
      <td class="text-end"><button class="btn-dots" type="button">•••</button></td>
    </tr>
  `).join('');

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

/* ---------- status change (data mein bhi update) ---------- */
function changeStatus(sel){
  sel.classList.toggle('st-inactive', sel.value === 'inactive');
  const name = sel.closest('tr').querySelector('.plan-name').textContent;
  const plan = PLANS[currentTab].find(p => p.name === name);
  if (plan) plan.status = sel.value;
}

/* ---------- tab switching ---------- */
document.querySelectorAll('#roleTabs button').forEach(btn => {
  btn.addEventListener('click', function(){
    document.querySelectorAll('#roleTabs button').forEach(b => b.classList.remove('active'));
    this.classList.add('active');
    currentTab = this.dataset.tab;
    searchInput.value = '';       // tab change par filters reset
    statusFilter.value = '';
    durationFilter.value = '';
    render();
  });
});

/* ---------- filters ---------- */
searchInput.addEventListener('input', render);
statusFilter.addEventListener('change', render);
durationFilter.addEventListener('change', render);

/* initial */
render();
</script>
@endsection

@section('scripts')

@endsection