@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">Enterprise Plan</h1>
    <div class="d-flex gap-2">
      <button class="btn-danger-outline" type="button">Delete</button>
      <button class="btn-lime" type="button">Save Changes</button>
    </div>
  </div>

  <!-- ================= STAT CARDS ================= -->
  <div class="row g-3 mb-3">
    <div class="col-md-4">
      <div class="stat-card">
        <div class="flex-grow-1">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <span class="stat-label mb-0">Active Users</span>
            <span class="stat-icon ic-purple">
              <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>
            </span>
          </div>
          <div class="d-flex align-items-baseline gap-2">
            <span class="stat-value">1,245</span>
            <span class="stat-delta"><svg width="12" height="7" viewBox="0 0 12 7" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M0.816667 7L0 6.18333L4.31667 1.8375L6.65 4.17083L9.68333 1.16667H8.16667V0H11.6667V3.5H10.5V1.98333L6.65 5.83333L4.31667 3.5L0.816667 7Z"
                  fill="#A0E86F" />
              </svg> 12%</span>
          </div>
          <div class="stat-sub-line">vs last month</div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="stat-card">
        <div class="flex-grow-1">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <span class="stat-label mb-0">Renewal Rate</span>
            <span class="stat-icon ic-green">
              <svg width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M1.1 15.05C0.733333 14.4167 0.458333 13.7667 0.275 13.1C0.0916667 12.4333 0 11.75 0 11.05C0 8.81667 0.775 6.91667 2.325 5.35C3.875 3.78333 5.76667 3 8 3H8.175L6.575 1.4L7.975 0L11.975 4L7.975 8L6.575 6.6L8.175 5H8C6.33333 5 4.91667 5.5875 3.75 6.7625C2.58333 7.9375 2 9.36667 2 11.05C2 11.4833 2.05 11.9083 2.15 12.325C2.25 12.7417 2.4 13.15 2.6 13.55L1.1 15.05ZM8.025 22L4.025 18L8.025 14L9.425 15.4L7.825 17H8C9.66667 17 11.0833 16.4125 12.25 15.2375C13.4167 14.0625 14 12.6333 14 10.95C14 10.5167 13.95 10.0917 13.85 9.675C13.75 9.25833 13.6 8.85 13.4 8.45L14.9 6.95C15.2667 7.58333 15.5417 8.23333 15.725 8.9C15.9083 9.56667 16 10.25 16 10.95C16 13.1833 15.225 15.0833 13.675 16.65C12.125 18.2167 10.2333 19 8 19H7.825L9.425 20.6L8.025 22Z"
                  fill="#A0E86F" />
              </svg>
            </span>
          </div>
          <div class="d-flex align-items-baseline gap-2">
            <span class="stat-value">94.2%</span>
            <span class="delta-down"><svg width="12" height="7" viewBox="0 0 12 7" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M0.816667 7L0 6.18333L4.31667 1.8375L6.65 4.17083L9.68333 1.16667H8.16667V0H11.6667V3.5H10.5V1.98333L6.65 5.83333L4.31667 3.5L0.816667 7Z"
                  fill="#A0E86F" />
              </svg> 2.1%</span>
          </div>
          <div class="stat-sub-line">Average over 12 months</div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="stat-card">
        <div class="flex-grow-1">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <span class="stat-label mb-0">Total Revenue</span>
            <span class="stat-icon ic-yellow">
              <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M3.7 18V15.85C2.81667 15.65 2.05417 15.2667 1.4125 14.7C0.770833 14.1333 0.3 13.3333 0 12.3L1.85 11.55C2.1 12.35 2.47083 12.9583 2.9625 13.375C3.45417 13.7917 4.1 14 4.9 14C5.58333 14 6.1625 13.8458 6.6375 13.5375C7.1125 13.2292 7.35 12.75 7.35 12.1C7.35 11.5167 7.16667 11.0542 6.8 10.7125C6.43333 10.3708 5.58333 9.98333 4.25 9.55C2.81667 9.1 1.83333 8.5625 1.3 7.9375C0.766667 7.3125 0.5 6.55 0.5 5.65C0.5 4.56667 0.85 3.725 1.55 3.125C2.25 2.525 2.96667 2.18333 3.7 2.1V0H5.7V2.1C6.53333 2.23333 7.22083 2.5375 7.7625 3.0125C8.30417 3.4875 8.7 4.06667 8.95 4.75L7.1 5.55C6.9 5.01667 6.61667 4.61667 6.25 4.35C5.88333 4.08333 5.38333 3.95 4.75 3.95C4.01667 3.95 3.45833 4.1125 3.075 4.4375C2.69167 4.7625 2.5 5.16667 2.5 5.65C2.5 6.2 2.75 6.63333 3.25 6.95C3.75 7.26667 4.61667 7.6 5.85 7.95C7 8.28333 7.87083 8.8125 8.4625 9.5375C9.05417 10.2625 9.35 11.1 9.35 12.05C9.35 13.2333 9 14.1333 8.3 14.75C7.6 15.3667 6.73333 15.75 5.7 15.9V18H3.7Z"
                  fill="#EFAB36" />
              </svg>
            </span>
          </div>
          <div class="d-flex align-items-baseline gap-2">
            <span class="stat-value">$124.5k</span>
            <span class="stat-delta"><svg width="12" height="7" viewBox="0 0 12 7" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M0.816667 7L0 6.18333L4.31667 1.8375L6.65 4.17083L9.68333 1.16667H8.16667V0H11.6667V3.5H10.5V1.98333L6.65 5.83333L4.31667 3.5L0.816667 7Z"
                  fill="#A0E86F" />
              </svg> 8%</span>
          </div>
          <div class="stat-sub-line">YTD 2024</div>
        </div>
      </div>
    </div>
  </div>

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

    <div class="row g-3">
      <div class="col-md-8">
        <label class="f-label" for="planName">Plan Name</label>
        <input class="f-input" id="planName" type="text" value="Enterprise Plan">
      </div>
      <div class="col-md-4">
        <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" value="$199">
      </div>
      <div class="col-md-4">
        <label class="f-label" for="priceQ">Quarterly Price</label>
        <input class="f-input" id="priceQ" type="text" value="$299">
      </div>
      <div class="col-md-4">
        <label class="f-label" for="priceA">Annual Yearly Price</label>
        <input class="f-input" id="priceA" type="text" value="$599">
      </div>

      <div class="col-12">
        <label class="f-label" for="desc">Description</label>
        <textarea class="f-textarea"
          id="desc">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>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
  /* naya feature add karna */
  function addFeature() {
    const name = prompt('Feature name:');
    if (!name) return;
    const row = document.createElement('div');
    row.className = 'feature-row';
    row.innerHTML = `
    <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>${name}</div>
    <div class="feature-actions">
      <button class="icon-btn" type="button" title="Edit">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10.5802 4.50369L3.59175 11.4922L3 15.0007L6.50925 14.4082L13.497 7.42044L15.7898 5.12844L12.873 2.21094L10.5802 4.50369ZM10.5802 4.50369L13.497 7.42119" stroke="#BABABA" stroke-width="1.5" stroke-linecap="square"/>
        </svg>
      </button>
      <button class="icon-btn del" type="button" title="Delete" onclick="this.closest('.feature-row').remove()">
        <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M3 18C2.45 18 1.97917 17.8042 1.5875 17.4125C1.19583 17.0208 1 16.55 1 16V3H0V1H5V0H11V1H16V3H15V16C15 16.55 14.8042 17.0208 14.4125 17.4125C14.0208 17.8042 13.55 18 13 18H3ZM13 3H3V16H13V3ZM5 14H7V5H5V14ZM9 14H11V5H9V14ZM3 3V16V3Z" fill="#C8C6C5"/>
        </svg>
      </button>
    </div>`;
    document.getElementById('featureList').appendChild(row);
  }
</script>
@endsection

@section('scripts')

@endsection