@extends('layouts.app')
@section('title','My Investments')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<style>
  body{background:#071018;color:#e6f0ff}
  .cardx{background:rgba(255,255,255,.03);border:1px solid rgba(0,180,255,.18);border-radius:16px}
</style>
@endpush

@section('content')
<div class="container py-4">
  <h4 class="mb-3">My Investments</h4>
  <div class="cardx p-3">
    <div class="table-responsive">
      <table class="table table-dark table-striped">
        <thead>
          <tr>
            <th>Plan</th><th>Amount</th><th>Network</th><th>Daily %</th><th>Term</th><th>Status</th><th>Start</th><th>End</th>
          </tr>
        </thead>
        <tbody>
          @forelse($investments as $i)
          <tr>
            <td>{{ optional($i->plan)->name }}</td>
            <td>{{ $i->amount }} USDT</td>
            <td>{{ $i->network }}</td>
            <td>{{ $i->daily_rate }}%</td>
            <td>{{ $i->term_days }} d</td>
            <td>{{ $i->status }}</td>
            <td>{{ $i->start_at }}</td>
            <td>{{ $i->end_at }}</td>
          </tr>
          @empty
          <tr><td colspan="8" class="text-center text-muted">No investments yet.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>
@endsection