{{-- resources/views/dashboard/stocks/payment.blade.php --}}
@extends('layouts.user')
@section('title', 'Investment Payment')
@section('content')

<div class="page-hdr">
  <h1 class="page-hdr__title">Investment Payment</h1>
  <div class="page-hdr__right">
    <a href="{{ route('dashboard.stocks') }}" class="btn btn--outline btn--sm">
      <i class="icon ion-ios-arrow-back"></i> Back to Stocks
    </a>
  </div>
</div>

<style>
  .stk-pay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .stk-pay-actions {
    display: flex;
    gap: 10px;
  }
  @media (max-width: 991px) {
    .stk-pay-grid {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 640px) {
    .stk-pay-actions {
      flex-direction: column;
    }
    .stk-pay-actions .btn {
      width: 100%;
      justify-content: center;
    }
  }
</style>

<div class="stk-pay-grid">

  {{-- Order Summary --}}
  <div class="card">
    <div class="card__head">
      <div><div class="card__title">Order Summary</div><div class="card__sub">Review your investment details</div></div>
      <span class="badge badge-{{ $order->payment_status }}" style="font-size:12px;">{{ ucfirst($order->payment_status) }}</span>
    </div>
    <div class="card__body" style="padding-top:12px;">
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap;">
        <img src="{{ $symbolImage }}" alt="{{ $order->symbol }}" style="width:54px;height:54px;border-radius:10px;background:#fff;border:1px solid var(--border);" onerror="this.style.display='none'">
        <div>
          <div style="font-weight:800;font-size:16px;">{{ $order->symbol }}</div>
          <div style="font-size:12px;color:var(--muted);">Selected stock item</div>
        </div>
      </div>
      <div style="display:flex;flex-direction:column;gap:0;">
        @foreach([
          ['Order ID',              '#'.$order->id],
          ['Symbol',                $order->symbol],
          ['Quantity',              number_format((float)$order->quantity,6)],
          ['Price Snapshot',        '$'.number_format((float)$order->price_snapshot,2)],
          ['Order Status',          ucfirst(str_replace('_',' ',$order->order_status))],
        ] as $row)
        <div style="display:flex;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);">
          <span style="width:200px;font-size:12.5px;font-weight:600;color:var(--muted);flex-shrink:0;">{{ $row[0] }}</span>
          <span style="font-weight:600;">{{ $row[1] }}</span>
        </div>
        @endforeach
        <div style="display:flex;align-items:center;padding:14px 0;">
          <span style="width:200px;font-size:12.5px;font-weight:600;color:var(--muted);flex-shrink:0;">Exact Amount Required</span>
          <span style="font-size:22px;font-weight:800;color:var(--primary);">${{ number_format((float)$order->order_value,2) }}</span>
        </div>
      </div>
    </div>
  </div>

  {{-- Payment method selector --}}
  <div class="card">
    <div class="card__head">
      <div><div class="card__title">Select Payment Method</div><div class="card__sub">Choose a deposit method to fund this order</div></div>
    </div>
    <div class="card__body">
      <form method="POST" action="{{ route('dashboard.stocks.payment.submit', $order) }}">
        @csrf
        <div class="form-group">
          <label class="form-label">Quantity</label>
          <input type="number" step="0.000001" min="0.000001" name="quantity" value="{{ old('quantity', number_format((float)$order->quantity, 6, '.', '')) }}" class="form-control" required>
          @error('quantity')<div class="field-error">{{ $message }}</div>@enderror
          <small style="color:var(--muted);font-size:12px;">Total amount is auto-calculated by live price; no manual payment amount needed.</small>
        </div>
        <div class="form-group">
          <label class="form-label">Available Methods</label>
          <select name="payment_method" required class="form-control">
            <option value="">Select deposit method</option>
            @foreach($methods as $method)
              <option value="{{ $method->asset }}">
                {{ $method->asset }}{{ $method->network ? ' — '.$method->network : '' }}
              </option>
            @endforeach
          </select>
          @error('payment_method')<div class="field-error">{{ $message }}</div>@enderror
        </div>

        <div class="alert alert-info" style="margin-bottom:14px;">
          <i class="icon ion-md-information-circle" style="margin-right:6px;"></i>
          Payment is deposit-only. Selecting a method creates a deposit payment request linked to this order.
        </div>

        <div class="stk-pay-actions">
          <button type="submit" class="btn btn--primary">
            <i class="icon ion-md-arrow-forward"></i> Continue Payment
          </button>
          <a href="{{ route('dashboard.stocks') }}" class="btn btn--outline">Cancel</a>
        </div>
      </form>
    </div>
  </div>

</div>

@endsection


{{-- ═══════════════════════════════════════════════════════
   resources/views/dashboard/stocks/future.blade.php
═══════════════════════════════════════════════════════ --}}