@extends('emails.layouts.crypto')

@section('content')

<div style="text-align:center;margin-bottom:28px;">
  <div style="display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:50%;">
    <span style="font-size:24px;">🔒</span>
  </div>
</div>

<h2 style="color:#0f172a;font-size:22px;font-weight:500;text-align:center;margin:0 0 8px;letter-spacing:-0.4px;">
  Trade closed
</h2>
<p style="color:#64748b;font-size:14px;text-align:center;margin:0 0 32px;line-height:1.6;">
  Your trade on <strong>{{ $symbol }}</strong> has been closed. Here is a summary of the result.
</p>

<hr style="border:none;border-top:1px solid #e2e8f0;margin:0 0 28px;" />

{{-- P&L highlight --}}
<table width="100%" cellpadding="0" cellspacing="0" style="margin-bottom:28px;">
  <tr>
    <td align="center">
      @php $isProfit = $pnl >= 0; @endphp
      <div style="background:{{ $isProfit ? 'linear-gradient(135deg,#f0fdf4,#dcfce7)' : 'linear-gradient(135deg,#fef2f2,#fee2e2)' }};border:1px solid {{ $isProfit ? '#bbf7d0' : '#fecaca' }};border-radius:12px;padding:24px 32px;text-align:center;">
        <p style="margin:0 0 4px;color:#64748b;font-size:12px;text-transform:uppercase;letter-spacing:0.08em;font-family:monospace;">Profit / Loss</p>
        <p style="margin:0;color:{{ $isProfit ? '#16a34a' : '#dc2626' }};font-size:32px;font-weight:700;font-family:monospace;letter-spacing:-1px;">
          {{ $isProfit ? '+' : '' }}{{ $currency }} {{ number_format($pnl, 2) }}
        </p>
      </div>
    </td>
  </tr>
</table>

<table width="100%" cellpadding="0" cellspacing="0" style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;margin-bottom:28px;">
  <tr>
    <td style="padding:14px 18px;border-bottom:1px solid #e2e8f0;">
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
          <td style="color:#64748b;font-size:13px;">Symbol</td>
          <td style="color:#0f172a;font-size:13px;font-weight:600;text-align:right;font-family:monospace;">{{ $symbol }}</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="padding:14px 18px;border-bottom:1px solid #e2e8f0;">
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
          <td style="color:#64748b;font-size:13px;">Entry price</td>
          <td style="color:#334155;font-size:13px;text-align:right;font-family:monospace;">{{ $entry_price }}</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="padding:14px 18px;border-bottom:1px solid #e2e8f0;">
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
          <td style="color:#64748b;font-size:13px;">Exit price</td>
          <td style="color:#334155;font-size:13px;text-align:right;font-family:monospace;">{{ $exit_price }}</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="padding:14px 18px;border-bottom:1px solid #e2e8f0;">
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
          <td style="color:#64748b;font-size:13px;">Volume</td>
          <td style="color:#334155;font-size:13px;text-align:right;font-family:monospace;">{{ $volume }}</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="padding:14px 18px;">
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
          <td style="color:#64748b;font-size:13px;">Closed at</td>
          <td style="color:#334155;font-size:13px;text-align:right;">{{ $closed_at }}</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<table width="100%" cellpadding="0" cellspacing="0" style="margin-bottom:28px;">
  <tr>
    <td align="center">
      <a href="{{ config('app.url') }}/trades"
        style="display:block;background:#22c55e;color:#ffffff;font-weight:500;font-size:15px;text-decoration:none;border-radius:10px;padding:14px 24px;text-align:center;">
        View trade history →
      </a>
    </td>
  </tr>
</table>

<p style="color:#94a3b8;font-size:12px;text-align:center;line-height:1.6;margin:0;">
  Trading involves risk. Past performance does not guarantee future results.
</p>

@endsection