{{-- resources/views/dashboard/markets.blade.php --}}
@extends('layouts.user')
@section('title', 'Markets')
@section('content')

<div class="page-hdr">
  <h1 class="page-hdr__title">Markets</h1>
</div>

<div class="stats-grid mb-5">
  <div class="stat-card stat-card--blue">
    <div class="stat-card__body">
      <div class="stat-card__ico"><i class="icon ion-md-trending-up"></i></div>
      <div class="stat-card__tag">Tracked Symbols</div>
      <div class="stat-card__val">{{ $topSymbols->count() }}</div>
      <div class="stat-card__lbl">Active tickers</div>
    </div>
    <div class="stat-card__chart" id="msc0"></div>
  </div>
  <div class="stat-card stat-card--green">
    <div class="stat-card__body">
      <div class="stat-card__ico"><i class="icon ion-md-wallet"></i></div>
      <div class="stat-card__tag">Available Balance</div>
      <div class="stat-card__val">${{ number_format((float)$walletSummary['available_balance'],2) }}</div>
      <div class="stat-card__lbl">Ready to invest</div>
    </div>
    <div class="stat-card__chart" id="msc1"></div>
  </div>
  <div class="stat-card stat-card--teal">
    <div class="stat-card__body">
      <div class="stat-card__ico"><i class="icon ion-md-checkmark-circle"></i></div>
      <div class="stat-card__tag">Completed Tx</div>
      <div class="stat-card__val">{{ $walletSummary['completed_transactions'] }}</div>
      <div class="stat-card__lbl">Settled transactions</div>
    </div>
    <div class="stat-card__chart" id="msc2"></div>
  </div>
  <div class="stat-card stat-card--gold">
    <div class="stat-card__body">
      <div class="stat-card__ico"><i class="icon ion-md-hourglass"></i></div>
      <div class="stat-card__tag">Pending Tx</div>
      <div class="stat-card__val">{{ $walletSummary['pending_transactions'] }}</div>
      <div class="stat-card__lbl">Awaiting processing</div>
    </div>
    <div class="stat-card__chart" id="msc3"></div>
  </div>
</div>

<div class="card">
  <div class="card__head">
    <div><div class="card__title">Top Symbols by Order Activity</div><div class="card__sub">Your most traded assets by volume and value</div></div>
    <a href="{{ route('dashboard.stocks') }}" class="btn btn--primary btn--sm">Trade Now</a>
  </div>
  <div class="card__body" style="padding-top:12px;">
    <div class="table-wrap">
      <table>
        <thead>
          <tr><th>#</th><th>Symbol</th><th>Orders Count</th><th>Total Order Value</th><th>Action</th></tr>
        </thead>
        <tbody>
          @forelse($topSymbols as $i => $symbol)
          <tr>
            <td style="color:var(--muted);font-weight:700;">{{ $loop->iteration }}</td>
            <td>
              <span style="display:inline-flex;align-items:center;gap:10px;">
                <span style="width:34px;height:34px;border-radius:10px;background:var(--primary-lt);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--primary);">
                  {{ strtoupper(substr($symbol->symbol,0,2)) }}
                </span>
                <strong>{{ $symbol->symbol }}</strong>
              </span>
            </td>
            <td>
              <span style="display:inline-flex;align-items:center;gap:6px;">
                <span style="width:{{ min(100, $symbol->orders_count * 10) }}px;height:6px;border-radius:3px;background:var(--primary);display:inline-block;"></span>
                <strong>{{ $symbol->orders_count }}</strong>
              </span>
            </td>
            <td class="font-bold text-success">${{ number_format((float)$symbol->total_value,2) }}</td>
            <td>
              <a href="{{ route('dashboard.stocks') }}" class="btn btn--primary btn--sm">Trade</a>
            </td>
          </tr>
          @empty
          <tr><td colspan="5" style="text-align:center;padding:32px;color:var(--muted);">No market activity found for your account yet.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>

@endsection
@push('scripts')
<script>
(function(){
  ['msc0','msc1','msc2','msc3'].forEach(function(id,i){
    var el=document.getElementById(id); if(!el) return;
    var data=[[40,55,35,70,50,80,65,90],[30,50,40,65,55,75,60,85],[20,35,55,30,50,40,60,35],[50,40,60,35,55,30,50,40]];
    new ApexCharts(el,{series:[{data:data[i]}],chart:{type:'area',height:56,sparkline:{enabled:true},toolbar:{show:false}},
      colors:['rgba(255,255,255,.7)'],stroke:{curve:'smooth',width:2},
      fill:{type:'gradient',gradient:{opacityFrom:.35,opacityTo:0}},tooltip:{enabled:false},dataLabels:{enabled:false}}).render();
  });
})();
</script>
@endpush