@extends('layouts.app')
@section('title', 'P2P Order #' . $order->id)

@section('content')
@php $me = auth()->user(); $isBuyer = $me->id === $order->buyer_id; $isSeller = $me->id === $order->seller_id; @endphp

<div class="page-header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;">
  <div>
    <h1>P2P Order #{{ $order->id }}</h1>
    <p>{{ $isBuyer ? 'You are buying' : 'You are selling' }} {{ number_format($order->coins_amount) }} NC</p>
  </div>
  <span class="badge badge-{{ $order->statusColor() }}" style="font-size:.875rem;padding:.4rem 1rem;">{{ ucfirst($order->status) }}</span>
</div>

@if(session('success'))
<div class="alert alert-success"><i class="fas fa-check-circle"></i> {{ session('success') }}</div>
@endif
@if($errors->any())
<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> {{ $errors->first() }}</div>
@endif

@if($order->isExpired())
<div class="alert alert-warning"><i class="fas fa-clock"></i> This order has expired. It will be auto-cancelled.</div>
@endif

<div style="display:grid;grid-template-columns:1.5fr 1fr;gap:1.25rem;align-items:start;">

  {{-- Order Details --}}
  <div class="card">
    <div class="card-title"><i class="fas fa-receipt"></i> Order Details</div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem;">
      <div>
        <div style="font-size:.72rem;color:var(--muted);text-transform:uppercase;font-weight:700;margin-bottom:.2rem;">Coins</div>
        <div style="font-weight:600;font-size:.875rem;">{{ number_format($order->coins_amount) }} NC</div>
      </div>
      <div>
        <div style="font-size:.72rem;color:var(--muted);text-transform:uppercase;font-weight:700;margin-bottom:.2rem;">Price per NC</div>
        <div style="font-weight:600;font-size:.875rem;">₦{{ number_format($order->price_per_coin, 2) }}</div>
      </div>
      <div>
        <div style="font-size:.72rem;color:var(--muted);text-transform:uppercase;font-weight:700;margin-bottom:.2rem;">Total Amount</div>
        <div style="font-weight:600;font-size:.875rem;">₦{{ number_format($order->total_naira) }}</div>
      </div>
      <div>
        <div style="font-size:.72rem;color:var(--muted);text-transform:uppercase;font-weight:700;margin-bottom:.2rem;">Commission</div>
        <div style="font-weight:600;font-size:.875rem;">₦{{ number_format($order->commission_naira) }}</div>
      </div>
      <div>
        <div style="font-size:.72rem;color:var(--muted);text-transform:uppercase;font-weight:700;margin-bottom:.2rem;">Buyer</div>
        <div style="font-weight:600;font-size:.875rem;">{{ $order->buyer->name }}</div>
      </div>
      <div>
        <div style="font-size:.72rem;color:var(--muted);text-transform:uppercase;font-weight:700;margin-bottom:.2rem;">Seller</div>
        <div style="font-weight:600;font-size:.875rem;">{{ $order->seller->name }}</div>
      </div>
      <div>
        <div style="font-size:.72rem;color:var(--muted);text-transform:uppercase;font-weight:700;margin-bottom:.2rem;">Placed</div>
        <div style="font-weight:600;font-size:.875rem;">{{ $order->created_at->format('d M Y, H:i') }}</div>
      </div>
      <div>
        <div style="font-size:.72rem;color:var(--muted);text-transform:uppercase;font-weight:700;margin-bottom:.2rem;">Expires</div>
        <div style="font-weight:600;font-size:.875rem;">{{ $order->expires_at?->format('d M Y, H:i') ?? 'N/A' }}</div>
      </div>
    </div>

    {{-- Payment Instructions (for buyer) --}}
    @if($isBuyer && in_array($order->status, ['pending']))
    <div style="background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.2);border-radius:12px;padding:1.25rem;margin-bottom:1.25rem;">
      <div style="font-weight:800;font-size:.9rem;color:#a5b4fc;margin-bottom:.75rem;"><i class="fas fa-credit-card"></i> Payment Instructions</div>
      @if($order->listing->payment_method === 'bank_transfer')
      <div style="font-size:.855rem;line-height:2;">
        <div>Bank: <strong>{{ $order->listing->bank_name }}</strong></div>
        <div>Account: <strong style="font-family:monospace;font-size:1rem;">{{ $order->listing->account_number }}</strong></div>
        <div>Name: <strong>{{ $order->listing->account_name }}</strong></div>
        <div>Amount: <strong style="color:#a5b4fc;">₦{{ number_format($order->total_naira) }}</strong></div>
      </div>
      @else
      <p style="font-size:.855rem;color:var(--muted);">Pay via Paystack. Contact seller for payment link.</p>
      @endif
      @if($order->listing->terms)
      <div style="margin-top:.75rem;font-size:.78rem;color:var(--muted);border-top:1px solid rgba(255,255,255,.06);padding-top:.75rem;">
        <strong>Seller Terms:</strong> {{ $order->listing->terms }}
      </div>
      @endif
    </div>
    @endif

    {{-- Payment Proof --}}
    @if($order->payment_proof)
    <div style="margin-bottom:1rem;">
      <div style="font-size:.72rem;color:var(--muted);text-transform:uppercase;font-weight:700;margin-bottom:.4rem;">Payment Proof</div>
      <img src="{{ Storage::url($order->payment_proof) }}" style="max-width:100%;border-radius:10px;border:1px solid var(--border);">
    </div>
    @endif

    @if($order->buyer_note)
    <div style="background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem;font-size:.82rem;color:var(--muted);">
      <strong style="color:var(--text);">Buyer note:</strong> {{ $order->buyer_note }}
    </div>
    @endif
  </div>

  {{-- Actions --}}
  <div style="display:flex;flex-direction:column;gap:1rem;">

    {{-- Buyer: Mark as Paid --}}
    @if($isBuyer && $order->status === 'pending')
    <div class="card">
      <div class="card-title" style="color:#60a5fa;"><i class="fas fa-money-bill-wave" style="color:#60a5fa;"></i> Confirm Payment</div>
      <p style="font-size:.82rem;color:var(--muted);margin-bottom:1rem;">After sending payment, upload proof and mark as paid.</p>
      <form method="POST" action="{{ route('p2p.order.paid', $order) }}" enctype="multipart/form-data">
        @csrf
        <div style="margin-bottom:.75rem;">
          <label style="font-size:.72rem;font-weight:700;color:var(--muted);display:block;margin-bottom:.3rem;text-transform:uppercase;">Payment Proof (optional)</label>
          <input type="file" name="payment_proof" accept="image/*" class="form-control" style="font-size:.78rem;">
        </div>
        <div style="margin-bottom:.75rem;">
          <label style="font-size:.72rem;font-weight:700;color:var(--muted);display:block;margin-bottom:.3rem;text-transform:uppercase;">Note</label>
          <input type="text" name="buyer_note" class="form-control" placeholder="e.g. Sent via GTBank">
        </div>
        <button style="width:100%;background:rgba(96,165,250,.12);color:#60a5fa;border:1px solid rgba(96,165,250,.2);border-radius:10px;padding:.65rem;font-weight:700;cursor:pointer;">
          <i class="fas fa-check"></i> I've Paid — Mark as Paid
        </button>
      </form>
    </div>
    @endif

    {{-- Seller: Release Escrow --}}
    @if($isSeller && in_array($order->status, ['paid','pending']))
    <div class="card">
      <div class="card-title" style="color:var(--gl);"><i class="fas fa-unlock" style="color:var(--gl);"></i> Release Coins</div>
      <p style="font-size:.82rem;color:var(--muted);margin-bottom:1rem;">Confirm you received payment, then release coins to buyer.</p>
      <form method="POST" action="{{ route('p2p.order.release', $order) }}" onsubmit="return confirm('Release coins to buyer? This cannot be undone.')">
        @csrf
        <button style="width:100%;background:rgba(76,175,80,.12);color:var(--gl);border:1px solid rgba(76,175,80,.2);border-radius:10px;padding:.65rem;font-weight:700;cursor:pointer;">
          <i class="fas fa-unlock"></i> Release Coins to Buyer
        </button>
      </form>
    </div>
    @endif

    {{-- Dispute --}}
    @if(in_array($order->status, ['pending','paid']) && ($isBuyer || $isSeller))
    <div class="card">
      <div class="card-title" style="color:#f87171;"><i class="fas fa-triangle-exclamation" style="color:#f87171;"></i> Raise Dispute</div>
      <form method="POST" action="{{ route('p2p.order.dispute', $order) }}">
        @csrf
        <input type="text" name="reason" class="form-control" placeholder="Describe the issue..." style="margin-bottom:.75rem;" required>
        <button style="width:100%;background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2);border-radius:10px;padding:.55rem;font-weight:700;cursor:pointer;">
          <i class="fas fa-flag"></i> Raise Dispute
        </button>
      </form>
    </div>
    @endif

    {{-- Cancel --}}
    @if($isBuyer && $order->status === 'pending')
    <form method="POST" action="{{ route('p2p.order.cancel', $order) }}" onsubmit="return confirm('Cancel this order?')">
      @csrf
      <button style="width:100%;background:rgba(255,255,255,.04);color:var(--muted);border:1px solid var(--border);border-radius:10px;padding:.55rem;font-weight:600;cursor:pointer;font-size:.82rem;">
        Cancel Order
      </button>
    </form>
    @endif

    {{-- Status Timeline --}}
    <div class="card">
      <div class="card-title" style="font-size:.82rem;"><i class="fas fa-timeline"></i> Order Timeline</div>
      @foreach([
        ['pending','Order Placed',$order->created_at],
        ['paid','Payment Sent',$order->paid_at],
        ['released','Coins Released',$order->released_at],
      ] as [$s,$label,$time])
      @php $done = in_array($s, ['pending']) || ($s === 'paid' && in_array($order->status,['paid','released'])) || ($s === 'released' && $order->status === 'released'); @endphp
      <div style="display:flex;align-items:center;gap:.75rem;padding:.5rem 0;font-size:.82rem;">
        <div style="width:20px;height:20px;border-radius:50%;background:{{ $done ? 'var(--gl)' : 'rgba(255,255,255,.1)' }};display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.6rem;color:#fff;">{{ $done ? '✓' : '' }}</div>
        <div style="flex:1;color:{{ $done ? 'var(--text)' : 'var(--muted)' }};">{{ $label }}</div>
        @if($time)<div style="font-size:.7rem;color:var(--muted);">{{ $time->format('d M H:i') }}</div>@endif
      </div>
      @endforeach
    </div>

  </div>
</div>
@endsection