@extends('layouts.app')
@section('title', 'P2P Coin Marketplace')

@push('styles')
<style>
/* ── HERO ── */
.p2p-hero{background:linear-gradient(135deg,#06060f,#0a0a1e,#0d1020);border:1px solid rgba(99,102,241,.2);border-radius:24px;padding:2.5rem;margin-bottom:2rem;position:relative;overflow:hidden;}
.p2p-hero::before{content:'';position:absolute;top:-80px;right:-80px;width:300px;height:300px;background:radial-gradient(circle,rgba(99,102,241,.18),transparent 70%);border-radius:50%;}
.p2p-hero::after{content:'';position:absolute;bottom:-60px;left:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(76,175,80,.1),transparent 70%);border-radius:50%;}
.ph-inner{position:relative;z-index:1;}
.ph-title{font-size:clamp(1.4rem,3vw,2rem);font-weight:900;margin-bottom:.5rem;}
.ph-sub{color:rgba(255,255,255,.45);font-size:.875rem;margin-bottom:1.25rem;}
.stat-pills{display:flex;gap:.65rem;flex-wrap:wrap;}
.sp{background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);border-radius:50px;padding:.32rem .85rem;font-size:.75rem;font-weight:700;color:#a5b4fc;display:inline-flex;align-items:center;gap:.35rem;}

/* ── 3D LISTING CARDS ── */
.listings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.25rem;}
.lcard{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:1.5rem;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  transform-style:preserve-3d;cursor:default;position:relative;overflow:hidden;}
.lcard::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(99,102,241,.06),transparent);opacity:0;transition:opacity .3s;border-radius:18px;}
.lcard:hover{transform:translateY(-6px) rotateX(2deg);box-shadow:0 20px 40px rgba(99,102,241,.15),0 0 0 1px rgba(99,102,241,.25);border-color:rgba(99,102,241,.3);}
.lcard:hover::before{opacity:1;}
.lcard-seller{display:flex;align-items:center;gap:.65rem;margin-bottom:1rem;}
.lcard-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;color:#fff;flex-shrink:0;background:linear-gradient(135deg,#4338ca,#6366f1);}
.lcard-name{font-weight:700;font-size:.875rem;}
.lcard-role{font-size:.68rem;color:#a5b4fc;margin-top:.1rem;}
.lcard-price{font-size:1.75rem;font-weight:900;color:#a5b4fc;line-height:1;margin:.5rem 0 .2rem;}
.lcard-price span{font-size:.82rem;color:var(--muted);font-weight:400;}
.lcard-avail{font-size:.8rem;color:var(--gl);font-weight:700;}
.lcard-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin:.75rem 0;}
.ltag{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:50px;padding:.18rem .6rem;font-size:.68rem;color:var(--muted);}
.lcard-terms{font-size:.72rem;color:var(--muted);margin-bottom:.65rem;line-height:1.5;}
.buy-btn{width:100%;background:linear-gradient(135deg,#4338ca,#6366f1);color:#fff;border:none;border-radius:50px;padding:.65rem;font-weight:800;font-size:.855rem;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:.4rem;}
.buy-btn:hover{opacity:.9;transform:translateY(-1px);}
.own-tag{text-align:center;font-size:.75rem;color:var(--muted);padding:.5rem 0;}

/* ── SELL PANEL ── */
.sell-panel{background:linear-gradient(160deg,rgba(99,102,241,.07),var(--card));border:1px solid rgba(99,102,241,.2);border-radius:18px;padding:1.5rem;position:sticky;top:80px;}
.sell-panel-title{font-size:.95rem;font-weight:800;color:#a5b4fc;margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem;}
.sf{margin-bottom:.85rem;}
.sf label{display:block;font-size:.7rem;font-weight:700;color:var(--muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.4px;}
.sf input,.sf select,.sf textarea{width:100%;background:rgba(255,255,255,.04);border:1.5px solid var(--border);border-radius:10px;padding:.55rem .85rem;color:var(--text);font-size:.855rem;outline:none;transition:.2s;font-family:inherit;}
.sf input:focus,.sf select:focus,.sf textarea:focus{border-color:#6366f1;background:rgba(99,102,241,.04);}
.sf select option{background:#0d1520;}
.sell-btn{width:100%;background:linear-gradient(135deg,#4338ca,#6366f1);color:#fff;border:none;border-radius:50px;padding:.75rem;font-weight:800;font-size:.875rem;cursor:pointer;transition:.2s;}
.sell-btn:hover{opacity:.9;transform:translateY(-1px);}

/* ── MODAL ── */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:2000;display:flex;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(10px);}
.modal-box{background:#0d1117;border:1px solid rgba(99,102,241,.3);border-radius:22px;padding:2rem;max-width:440px;width:100%;position:relative;animation:modalIn .3s ease;}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(10px);}to{opacity:1;transform:scale(1) translateY(0);}}
.modal-close{position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,.06);border:none;color:var(--muted);font-size:.9rem;cursor:pointer;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s;}
.modal-close:hover{background:rgba(239,68,68,.15);color:#f87171;}

/* ── ORDERS STRIP ── */
.order-strip{display:flex;justify-content:space-between;align-items:center;padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:.8rem;}
.order-strip:last-child{border-bottom:none;}

@media(max-width:900px){.p2p-layout{grid-template-columns:1fr !important;}.sell-panel{position:static;}}
</style>
@endpush

@section('content')
<div class="page-header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;">
  <div>
    <h1>P2P Coin Marketplace</h1>
    <p>Buy and sell Nabola Coins peer-to-peer with escrow protection</p>
  </div>
  @auth
  <a href="{{ route('p2p.my-listings') }}" style="background:rgba(99,102,241,.12);color:#a5b4fc;border:1px solid rgba(99,102,241,.2);border-radius:10px;padding:.5rem 1.1rem;font-size:.82rem;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;">
    <i class="fas fa-list"></i> My Listings & Orders
  </a>
  @endauth
</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

{{-- Hero --}}
<div class="p2p-hero">
  <div class="ph-inner">
    <div class="ph-title">🔒 Escrow-Protected P2P Trading</div>
    <div class="ph-sub">Coins are locked in escrow until payment is confirmed. Safe, transparent, and instant.</div>
    <div class="stat-pills">
      <span class="sp"><i class="fas fa-list"></i> {{ $stats['total_listings'] }} Active Listings</span>
      <span class="sp"><i class="fas fa-coins"></i> ₦{{ number_format($stats['total_volume']) }} Volume</span>
      <span class="sp"><i class="fas fa-tag"></i> Avg ₦{{ number_format($stats['avg_price'], 2) }}/NC</span>
      <span class="sp"><i class="fas fa-shield-halved"></i> 1.5% Commission</span>
    </div>
  </div>
</div>

{{-- How it works --}}
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem;">
  @foreach([
    ['1','fas fa-tag','Post Listing','Seller posts NC for sale. Coins locked in escrow instantly.','rgba(99,102,241,.1)','#a5b4fc'],
    ['2','fas fa-shopping-cart','Place Order','Buyer selects amount and places order.','rgba(96,165,250,.1)','#60a5fa'],
    ['3','fas fa-money-bill-wave','Send Payment','Buyer sends payment to seller\'s bank account.','rgba(251,191,36,.1)','#fbbf24'],
    ['4','fas fa-unlock','Release Coins','Seller confirms payment → coins released to buyer.','rgba(76,175,80,.1)','var(--gl)'],
  ] as [$n,$icon,$title,$desc,$bg,$color])
  <div style="background:{{ $bg }};border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:1.1rem;text-align:center;">
    <div style="width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;margin:0 auto .65rem;font-size:.85rem;color:{{ $color }};font-weight:900;">{{ $n }}</div>
    <div style="font-weight:800;font-size:.855rem;margin-bottom:.3rem;color:{{ $color }};">{{ $title }}</div>
    <div style="font-size:.72rem;color:var(--muted);line-height:1.5;">{{ $desc }}</div>
  </div>
  @endforeach
</div>

<div class="p2p-layout" style="display:grid;grid-template-columns:1fr 320px;gap:1.5rem;align-items:start;">

  {{-- Listings Grid --}}
  <div>
    @if($listings->count())
    <div class="listings-grid">
      @foreach($listings as $listing)
      <div class="lcard">
        <div class="lcard-seller">
          @if($listing->seller->avatar)
          <img src="{{ Storage::url($listing->seller->avatar) }}" class="lcard-av" style="object-fit:cover;">
          @else
          <div class="lcard-av">{{ strtoupper(substr($listing->seller->name,0,2)) }}</div>
          @endif
          <div>
            <div class="lcard-name">
              {{ $listing->seller->name }}
              @if($listing->seller->isKycApproved()) <span style="color:var(--gl);font-size:.65rem;" title="KYC Verified">✓</span>@endif
            </div>
            <div class="lcard-role">
              @if($listing->seller->isPartner()) 🤝 Partner
              @elseif($listing->seller->business?->isApproved()) 🏢 Business
              @else ♻️ User @endif
            </div>
          </div>
        </div>

        <div class="lcard-price">₦{{ number_format($listing->price_per_coin, 2) }} <span>per NC</span></div>
        <div class="lcard-avail">{{ number_format($listing->coins_available) }} NC · ≈ ₦{{ number_format($listing->totalNaira()) }}</div>

        <div class="lcard-tags">
          <span class="ltag"><i class="fas fa-arrow-down" style="font-size:.6rem;"></i> Min {{ $listing->min_order_coins }} NC</span>
          <span class="ltag"><i class="fas fa-credit-card" style="font-size:.6rem;"></i> {{ ucfirst(str_replace('_',' ',$listing->payment_method)) }}</span>
          @if($listing->seller->isPremium())<span class="ltag" style="color:#fbbf24;border-color:rgba(251,191,36,.2);">⭐ Premium</span>@endif
        </div>

        @if($listing->terms)
        <div class="lcard-terms">{{ Str::limit($listing->terms, 80) }}</div>
        @endif

        @auth
        @if(auth()->id() !== $listing->seller_id)
        <button onclick="openBuyModal({{ $listing->id }}, {{ $listing->price_per_coin }}, {{ $listing->coins_available }}, {{ $listing->min_order_coins }}, '{{ addslashes($listing->seller->name) }}')"
          class="buy-btn"><i class="fas fa-shopping-cart"></i> Buy NC</button>
        @else
        <div class="own-tag">Your listing</div>
        @endif
        @else
        <a href="{{ route('login') }}" class="buy-btn" style="display:flex;text-decoration:none;"><i class="fas fa-lock"></i> Login to Buy</a>
        @endauth
      </div>
      @endforeach
    </div>
    @if($listings->hasPages())
    <div style="margin-top:1.25rem;">{{ $listings->links() }}</div>
    @endif
    @else
    <div style="text-align:center;padding:5rem 2rem;color:var(--muted);">
      <i class="fas fa-coins" style="font-size:3rem;opacity:.15;display:block;margin-bottom:1rem;"></i>
      <div style="font-size:1rem;font-weight:700;margin-bottom:.5rem;">No active listings</div>
      <p style="font-size:.855rem;">Be the first to sell NC on the marketplace!</p>
    </div>
    @endif
  </div>

  {{-- Sell Panel --}}
  @auth
  <div>
    <div class="sell-panel">
      <div class="sell-panel-title"><i class="fas fa-tag"></i> Post a Sell Listing</div>
      <form method="POST" action="{{ route('p2p.listings.create') }}">
        @csrf
        <div class="sf">
          <label>Coins to Sell (NC) *</label>
          <input type="number" name="coins_amount" min="10" max="{{ auth()->user()->getCoins() }}" placeholder="e.g. 500" required oninput="calcTotal()">
          <div style="font-size:.68rem;color:var(--muted);margin-top:.2rem;">Balance: <strong style="color:var(--gl);">{{ number_format(auth()->user()->getCoins()) }} NC</strong></div>
        </div>
        <div class="sf">
          <label>Price per NC (₦) *</label>
          <input type="number" name="price_per_coin" id="sellPrice" min="1" step="0.01" placeholder="e.g. 10.00" required oninput="calcTotal()">
          <div id="sellTotal" style="font-size:.68rem;color:#a5b4fc;margin-top:.2rem;"></div>
        </div>
        <div class="sf">
          <label>Min Order (NC) *</label>
          <input type="number" name="min_order_coins" min="1" value="10" required>
        </div>
        <div class="sf">
          <label>Payment Method *</label>
          <select name="payment_method" onchange="toggleBank(this.value)">
            <option value="bank_transfer">Bank Transfer</option>
            <option value="paystack">Paystack</option>
          </select>
        </div>
        <div id="bankFields">
          <div class="sf">
            <label>Bank Name</label>
            <input type="text" name="bank_name" placeholder="e.g. Access Bank">
          </div>
          <div class="sf">
            <label>Account Number</label>
            <input type="text" name="account_number" maxlength="10" placeholder="10 digits">
          </div>
          <div class="sf">
            <label>Account Name</label>
            <input type="text" name="account_name" placeholder="As on your account">
          </div>
        </div>
        <div class="sf">
          <label>Terms (optional)</label>
          <textarea name="terms" rows="2" placeholder="e.g. Payment within 30 minutes..."></textarea>
        </div>
        <div style="background:rgba(251,191,36,.05);border:1px solid rgba(251,191,36,.12);border-radius:8px;padding:.6rem .85rem;font-size:.72rem;color:rgba(251,191,36,.65);margin-bottom:.85rem;">
          <i class="fas fa-lock"></i> Coins locked in escrow on listing. 1.5% commission per trade.
        </div>
        <button type="submit" class="sell-btn"><i class="fas fa-tag"></i> Post Listing</button>
      </form>
    </div>

    @if($myOrders->count())
    <div class="card" style="margin-top:1.25rem;">
      <div class="card-title" style="color:#a5b4fc;font-size:.855rem;"><i class="fas fa-clock-rotate-left" style="color:#a5b4fc;"></i> My Recent Orders</div>
      @foreach($myOrders as $order)
      <div class="order-strip">
        <div>
          <div style="font-weight:600;font-size:.82rem;">{{ number_format($order->coins_amount) }} NC</div>
          <div style="font-size:.68rem;color:var(--muted);">₦{{ number_format($order->total_naira) }}</div>
        </div>
        <div style="display:flex;align-items:center;gap:.4rem;">
          <span class="badge badge-{{ $order->statusColor() }}" style="font-size:.65rem;">{{ ucfirst($order->status) }}</span>
          <a href="{{ route('p2p.order', $order) }}" style="color:#a5b4fc;font-size:.7rem;text-decoration:none;font-weight:700;">→</a>
        </div>
      </div>
      @endforeach
    </div>
    @endif
  </div>
  @endauth

</div>

{{-- Buy Modal --}}
<div id="buyModal" class="modal-ov" style="display:none;" onclick="if(event.target===this)closeBuyModal()">
  <div class="modal-box">
    <button class="modal-close" onclick="closeBuyModal()"><i class="fas fa-times"></i></button>
    <div style="font-size:1.1rem;font-weight:900;margin-bottom:.2rem;color:#a5b4fc;"><i class="fas fa-shopping-cart"></i> Buy NC</div>
    <div style="font-size:.78rem;color:var(--muted);margin-bottom:1.25rem;">From: <strong id="modalSeller" style="color:var(--text);"></strong></div>

    <form id="buyForm" method="POST">
      @csrf
      <div style="margin-bottom:1rem;">
        <label style="font-size:.7rem;font-weight:700;color:var(--muted);display:block;margin-bottom:.3rem;text-transform:uppercase;">Amount (NC) *</label>
        <input type="number" name="coins_amount" id="modalCoins" class="form-control" min="1" required oninput="updateCalc()">
        <div style="font-size:.72rem;color:#a5b4fc;margin-top:.3rem;font-weight:600;" id="modalCalc"></div>
      </div>
      <div style="margin-bottom:1.25rem;">
        <label style="font-size:.7rem;font-weight:700;color:var(--muted);display:block;margin-bottom:.3rem;text-transform:uppercase;">Note (optional)</label>
        <input type="text" name="buyer_note" class="form-control" placeholder="Message to seller">
      </div>
      <div style="background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.15);border-radius:10px;padding:.75rem;font-size:.75rem;color:rgba(165,180,252,.7);margin-bottom:1rem;line-height:1.6;">
        <i class="fas fa-shield-halved"></i> Coins held in escrow until you confirm payment. 1.5% commission applies.
      </div>
      <button type="submit" style="width:100%;background:linear-gradient(135deg,#4338ca,#6366f1);color:#fff;border:none;border-radius:50px;padding:.8rem;font-weight:800;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.4rem;">
        <i class="fas fa-lock"></i> Place Order
      </button>
    </form>
  </div>
</div>

@push('scripts')
<script>
function toggleBank(val) {
  document.getElementById('bankFields').style.display = val === 'bank_transfer' ? 'block' : 'none';
}
function calcTotal() {
  const coins = parseFloat(document.querySelector('[name="coins_amount"]')?.value) || 0;
  const price = parseFloat(document.getElementById('sellPrice')?.value) || 0;
  const total = coins * price;
  const el = document.getElementById('sellTotal');
  if (el && total > 0) el.textContent = `Total: ₦${total.toLocaleString('en-NG', {minimumFractionDigits:2})}`;
}

let modalPrice = 0;
function openBuyModal(listingId, price, available, minOrder, seller) {
  modalPrice = price;
  document.getElementById('buyModal').style.display = 'flex';
  document.getElementById('buyForm').action = '/p2p/listings/' + listingId + '/order';
  document.getElementById('modalSeller').textContent = seller;
  const inp = document.getElementById('modalCoins');
  inp.min = minOrder; inp.max = available; inp.value = minOrder;
  updateCalc();
}
function closeBuyModal() { document.getElementById('buyModal').style.display = 'none'; }
function updateCalc() {
  const coins = parseInt(document.getElementById('modalCoins').value) || 0;
  const total = (coins * modalPrice).toFixed(2);
  const comm  = (total * 0.015).toFixed(2);
  document.getElementById('modalCalc').textContent =
    coins > 0 ? `Total: ₦${parseFloat(total).toLocaleString()} · Commission: ₦${comm}` : '';
}
</script>
@endpush
@endsection