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

@section('content')
    <div class="content_area superAdmin subscriptionpage">
         <!-- ================= BREADCRUMB + HEADER ================= -->
  <nav class="crumbs">
    <a href="#">Subscriptions</a><span class="sep">›</span>
    <span class="current">Plan Details</span>
  </nav>

  <div class="page-head">
    <h1 class="page-title normal">Create New Plan</h1>
    <button class="btn-lime" type="button" style="padding:.6rem 2.2rem;">Add</button>
  </div>

  <!-- ================= PLAN INFORMATION ================= -->
  <div class="form-section">
    <div class="card-head">Plan Information</div>

    <div class="row g-3">
      <div class="col-md-6">
        <label class="f-label" for="planName">Plan Name</label>
        <input class="f-input" id="planName" type="text" placeholder="Enterprise Plan">
      </div>
      <div class="col-md-6">
        <label class="f-label" for="currency">Currency</label>
        <select class="f-select" id="currency">
          <option selected>US$ (NZ)</option>
          <option>NZ$ (NZD)</option>
          <option>A$ (AUD)</option>
          <option>₹ (INR)</option>
        </select>
      </div>

      <div class="col-md-4">
        <label class="f-label" for="priceM">Monthly Price</label>
        <input class="f-input" id="priceM" type="text" placeholder="$199">
      </div>
      <div class="col-md-4">
        <label class="f-label" for="priceQ">Quarterly Price</label>
        <input class="f-input" id="priceQ" type="text" placeholder="$399">
      </div>
      <div class="col-md-4">
        <label class="f-label" for="priceA">Annual Yearly Price</label>
        <input class="f-input" id="priceA" type="text" placeholder="$599">
      </div>

      <div class="col-12">
        <label class="f-label" for="desc">Description</label>
        <textarea class="f-textarea" id="desc" placeholder="The ultimate package for large sports organizations requiring full control, unlimited user seats, and priority 24/7 support."></textarea>
      </div>

      <div class="col-12">
        <div class="toggle-row">
          <div>
            <div class="t-title">Plan Status</div>
            <div class="t-sub">Currently active and available for subscription.</div>
          </div>
          <label class="switch">
            <input type="checkbox" checked>
            <span class="track"></span>
          </label>
        </div>
      </div>
    </div>
  </div>

  <!-- ================= ENABLED FEATURES ================= -->
  <div class="form-section">
    <div class="d-flex justify-content-between align-items-center card-head">
      <span>Enabled Features</span>
      <button class="btn-lime-outline" type="button" onclick="addFeature()">+ Add Feature</button>
    </div>

    <div id="featureList">
      <div class="feature-row">
        <div class="feature-left"><span class="feature-check"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6ZM10 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></span>Unlimited User Seats</div>
        <div class="feature-actions">
          <button class="icon-btn" type="button" title="Edit">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="m16.9 4.4 2.7 2.7m-1.4-4.1a1.9 1.9 0 1 1 2.7 2.7L7.5 19.1 3 20l.9-4.5L17.5 2.9Z"/></svg>
          </button>
          <button class="icon-btn del" type="button" title="Delete" onclick="this.closest('.feature-row').remove()">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M6 7h12M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2m3 0-1 13a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1L6 7m4 4v6m4-6v6"/></svg>
          </button>
        </div>
      </div>
      <div class="feature-row">
        <div class="feature-left"><span class="feature-check"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6ZM10 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></span>Priority 24/7 Support</div>
        <div class="feature-actions">
          <button class="icon-btn" type="button" title="Edit">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="m16.9 4.4 2.7 2.7m-1.4-4.1a1.9 1.9 0 1 1 2.7 2.7L7.5 19.1 3 20l.9-4.5L17.5 2.9Z"/></svg>
          </button>
          <button class="icon-btn del" type="button" title="Delete" onclick="this.closest('.feature-row').remove()">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M6 7h12M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2m3 0-1 13a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1L6 7m4 4v6m4-6v6"/></svg>
          </button>
        </div>
      </div>
      <div class="feature-row">
        <div class="feature-left"><span class="feature-check"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6ZM10 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></span>Advanced Analytics Dashboard</div>
        <div class="feature-actions">
          <button class="icon-btn" type="button" title="Edit">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="m16.9 4.4 2.7 2.7m-1.4-4.1a1.9 1.9 0 1 1 2.7 2.7L7.5 19.1 3 20l.9-4.5L17.5 2.9Z"/></svg>
          </button>
          <button class="icon-btn del" type="button" title="Delete" onclick="this.closest('.feature-row').remove()">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M6 7h12M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2m3 0-1 13a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1L6 7m4 4v6m4-6v6"/></svg>
          </button>
        </div>
      </div>
      <div class="feature-row">
        <div class="feature-left"><span class="feature-check"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6ZM10 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></span>Custom API Access</div>
        <div class="feature-actions">
          <button class="icon-btn" type="button" title="Edit">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="m16.9 4.4 2.7 2.7m-1.4-4.1a1.9 1.9 0 1 1 2.7 2.7L7.5 19.1 3 20l.9-4.5L17.5 2.9Z"/></svg>
          </button>
          <button class="icon-btn del" type="button" title="Delete" onclick="this.closest('.feature-row').remove()">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M6 7h12M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2m3 0-1 13a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1L6 7m4 4v6m4-6v6"/></svg>
          </button>
        </div>
      </div>
    </div>
  </div>

    </div>
@endsection

@section('scripts')

@endsection