@extends('layouts.user')
@section('title', 'Plans')

@section('content')
<div class="page">
  <div class="page-head">
    <div>
      <p class="eyebrow">Investment</p>
      <h1 class="page-title">Subscription Plans</h1>
      <p class="page-sub">Choose a plan and start earning today.</p>
    </div>
    <div class="pill-stat">
      <span class="pill-stat__label">Wallet balance</span>
      <span class="pill-stat__value">${{ number_format($walletSummary['total_usd'] ?? 0, 2) }}</span>
    </div>
  </div>

  <div class="plan-grid">
    @forelse($plans as $plan)

      <div class="plan-card">
        <div class="plan-deco"><span></span><span></span><span></span></div>
        <div class="plan-card__inner">
          <h2 class="plan-name">{{ $plan->name }}</h2>
          <div class="plan-stats">
            <div class="plan-stat-row"><span class="ps-arrow">›</span><span>Return {{ number_format($plan->roi_percent, 0) }}%</span></div>
            <div class="plan-stat-row"><span class="ps-arrow">›</span><span>Every Day</span></div>
            <div class="plan-stat-row"><span class="ps-arrow">›</span><span>For {{ $plan->duration_days }} Day{{ $plan->duration_days > 1 ? 's' : '' }}</span></div>
            <div class="plan-stat-row"><span class="ps-arrow">›</span><span>Total {{ number_format($plan->roi_percent * $plan->duration_days, 0) }}% + <span class="capital-badge">Capital</span></span></div>
          </div>
          @if(is_array($plan->features) && count($plan->features))
            <div class="plan-features">
              @foreach($plan->features as $feat)<span>{{ $feat }}</span>@endforeach
            </div>
          @endif
          <div class="plan-price">${{ number_format($plan->price, 2) }}</div>
          <button type="button" class="plan-btn" data-target="#subscribe{{ $plan->id }}">Invest Now</button>
        </div>
      </div>

      <div class="modal fade" id="subscribe{{ $plan->id }}" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header bg-danger text-white">
              <h5 class="modal-title">Subscribe to {{ $plan->name }}</h5>
              <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
              <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                  <p class="mb-1"><strong>Price:</strong> ${{ number_format($plan->price, 2) }}</p>
                  <p class="mb-1"><strong>Duration:</strong> {{ $plan->duration_days }} days</p>
                  <p class="mb-0"><strong>ROI:</strong> {{ number_format($plan->roi_percent, 2) }}%</p>
                </div>
                <div class="text-right">
                  <div class="text-muted small">Your balance</div>
                  <div class="h5 mb-0">${{ number_format($walletSummary['total_usd'] ?? 0, 2) }}</div>
                </div>
              </div>
              <div class="payment-box">
                <h6 class="mb-1">Deposit to subscribe</h6>
                <p class="text-muted small mb-2">Fund your wallet first, then return to confirm.</p>
                <ol class="mb-0 text-muted small" style="padding-left:18px;">
                  <li>Go to Wallet &gt; Deposit</li>
                  <li>Choose an asset and fund your account</li>
                  <li>Return here and confirm subscription</li>
                </ol>
              </div>
            </div>
            <div class="modal-footer">
              <a href="{{ route('dashboard.wallet.deposit') }}" class="btn btn-danger">Go to Deposit</a>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>

    @empty
      <div class="empty">No plans available yet.</div>
    @endforelse
  </div>
</div>
@endsection

@section('styles')
<style>
  .page { padding: 32px; }
  .page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
  .page-title { font-size: 28px; font-weight: 700; color: var(--text); }
  .page-sub { color: var(--text2); margin-top: 6px; }
  .eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: var(--primary); font-weight: 700; }
  .pill-stat { background: var(--surface); border: 1px solid var(--border); padding: 12px 16px; border-radius: 12px; min-width: 220px; }
  .pill-stat__label { display: block; font-size: 12px; color: var(--text2); }
  .pill-stat__value { font-size: 20px; font-weight: 700; color: var(--primary); }

  /* Grid */
  .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; align-items: stretch; }

  /* Card */
  .plan-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid #ffd4da;
    box-shadow: 0 8px 28px rgba(215,0,22,.1);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
  }
  .plan-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(215,0,22,.2);
    border-color: var(--primary);
  }

  /* Deco lines — red version */
  .plan-deco { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; }
  .plan-deco span { position: absolute; display: block; border-radius: 2px; }
  .plan-deco span:nth-child(1) { width: 200px; height: 3px; top: 65px; left: -50px; transform: rotate(-38deg); background: linear-gradient(90deg, transparent, rgba(215,0,22,.25), transparent); }
  .plan-deco span:nth-child(2) { width: 220px; height: 2px; top: 88px; left: -50px; transform: rotate(-38deg); background: linear-gradient(90deg, transparent, rgba(215,0,22,.12), transparent); }
  .plan-deco span:nth-child(3) { width: 180px; height: 2px; bottom: 110px; right: -40px; transform: rotate(-38deg); background: linear-gradient(90deg, transparent, rgba(215,0,22,.15), transparent); }

  /* Inner */
  .plan-card__inner { position: relative; z-index: 1; padding: 24px 20px 22px; display: flex; flex-direction: column; flex: 1; }

  /* Name — red gradient header feel */
  .plan-name {
    font-size: 26px;
    font-weight: 800;
    text-align: center;
    margin: 0 0 20px;
    letter-spacing: .3px;
    background: linear-gradient(135deg, #d70016, #ff4d6d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Stats */
  .plan-stats { display: flex; flex-direction: column; border-top: 1.5px solid #ffd4da; margin-bottom: 18px; }
  .plan-stat-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ffeef0; color: var(--text); font-size: 14px; font-weight: 500; }
  .ps-arrow { font-size: 22px; color: var(--primary); font-weight: 900; line-height: 1; flex-shrink: 0; }
  .capital-badge { display: inline-block; background: #27ae60; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-left: 4px; vertical-align: middle; }

  /* Features */
  .plan-features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
  .plan-features span { background: #fff0f2; border: 1px solid #ffd4da; color: var(--primary); font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 600; }

  /* Price */
  .plan-price { text-align: center; font-size: 28px; font-weight: 800; color: var(--primary); letter-spacing: -0.5px; margin: 8px 0 20px; }

  /* Button */
  .plan-btn {
    display: block;
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #d70016, #ff4d6d);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: .3px;
    transition: opacity .15s, transform .1s;
    box-shadow: 0 4px 16px rgba(215,0,22,.3);
  }
  .plan-btn:hover { opacity: .9; transform: scale(.99); }
  .plan-btn:active { transform: scale(.97); }

  .payment-box { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--surface2); }
  .empty { padding: 32px; text-align: center; color: var(--text2); background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; }

@media (max-width: 480px) { .page { padding: 16px; } .plan-grid { grid-template-columns: 1fr; } }
</style>
@endsection

@push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('[data-target^="#subscribe"]').forEach(function (btn) {
      btn.addEventListener('click', function () {
        var target = btn.getAttribute('data-target');
        if (!target) return;
        var el = document.querySelector(target);
        if (!el) return;
        if (window.$ && $(el).modal) {
          $(el).modal('show');
        }
      });
    });
  });
</script>
@endpush