@extends('layouts.app')
@section('title','Crypto Payment')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<style>
  body{background:#071018;color:#e6f0ff}
  .cardx{background:rgba(255,255,255,.03);border:1px solid rgba(0,180,255,.18);border-radius:16px}
  .glow{box-shadow:0 0 0 1px rgba(0,180,255,.18), 0 0 22px rgba(0,224,255,.12) inset}
  .addr{display:flex; align-items:center; gap:12px; padding:10px 14px; background:rgba(0,224,255,.06); border-radius:12px}
  .label{opacity:.7; font-size:12px}
  .mono{font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
  .btn-gradient{background:linear-gradient(113deg,#114fee 6%,#b654fd 83%);border:none;color:#fff}
</style>
@endpush

@section('content')
<div class="container py-4">
  <div class="d-flex justify-content-between mb-3">
    <h4 class="mb-0">Crypto Payment</h4>
    <span class="badge badge-info">Invoice: {{ $deposit->provider_invoice_id }}</span>
  </div>

  <div class="row">
    <div class="col-lg-6">
      <div class="cardx p-3 glow">
        <div class="d-flex justify-content-between">
          <div><div class="label">Network</div><div class="h5 mb-0">{{ strtoupper($deposit->network) }}</div></div>
          <div class="text-right"><div class="label">Currency</div><div class="h5 mb-0">{{ strtoupper($deposit->currency) }}</div></div>
        </div>

        <div class="mt-3 text-center">
          <div id="qrcode" class="d-inline-block p-2 bg-white rounded"></div>
        </div>

        <div class="mt-3">
          <div class="label">Address</div>
          <div class="addr mono">
            <span class="flex-fill">{{ $deposit->address }}</span>
            <button class="btn btn-sm btn-outline-info" onclick="copyText(`{{ $deposit->address }}`)">Copy</button>
          </div>
        </div>

        @if($deposit->memo)
        <div class="mt-2">
          <div class="label">Memo/Tag</div>
          <div class="addr mono">
            <span class="flex-fill">{{ $deposit->memo }}</span>
            <button class="btn btn-sm btn-outline-info" onclick="copyText(`{{ $deposit->memo }}`)">Copy</button>
          </div>
        </div>
        @endif

        <div class="mt-3 d-flex justify-content-between">
          <div>
            <div class="label">Amount to pay</div>
            <div class="h5 mono mb-0">
              {{ $deposit->amount_exact ?? $deposit->amount_requested ?? 'Any amount' }}
              <small>{{ $deposit->currency }}</small>
            </div>
          </div>
          <div class="text-right">
            <div class="label">Expires</div>
            <div class="h5 mb-0">{{ optional($deposit->expires_at)->toDayDateTimeString() ?? '—' }}</div>
          </div>
        </div>

        <div class="mt-3 small text-muted">
          Confirmations needed: {{ config('oxapay.confirmations') }}. Payment status updates automatically.
        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="cardx p-3 h-100">
        <h5>Status</h5>
        <div id="statusBox" class="mono">pending</div>
        <div class="mt-2">
          <div class="label">Tx Hash</div>
          <div id="txBox" class="mono">—</div>
        </div>
        <div class="mt-2">
          <div class="label">Confirmations</div>
          <div id="confBox" class="mono">0</div>
        </div>
        <div class="mt-3">
          <a href="{{ config('oxapay.success_url') }}" id="goSuccess" class="btn btn-gradient d-none">Continue</a>
        </div>

        <hr>
        <ol class="small mb-0">
          <li>Copy the address above or scan the QR code.</li>
          <li>Send <b>{{ strtoupper($deposit->currency) }}</b> on <b>{{ strtoupper($deposit->network) }}</b>.</li>
          <li>If a tag/memo is shown, it’s mandatory.</li>
          <li>Confirmations take 5–30 minutes.</li>
        </ol>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/js/qrcode.js') }}"></script>
<script>
  const address = @json($deposit->address);
  new QRCode('qrcode', { text: address, width: 180, height: 180, colorDark:'#000', colorLight:'#fff', correctLevel: QRCode.CorrectLevel.H });

  async function copyText(t){ try{ await navigator.clipboard.writeText(String(t)); alert('Copied'); }catch(e){ alert('Copy failed'); } }

  const statusUrl = @json(route('deposits.status', $deposit));
  const goBtn = document.getElementById('goSuccess');
  const statusBox = document.getElementById('statusBox');
  const txBox = document.getElementById('txBox');
  const confBox = document.getElementById('confBox');

  async function poll(){
    try{
      const r = await fetch(statusUrl, {cache:'no-store'});
      const j = await r.json();
      statusBox.textContent = j.status;
      txBox.textContent = j.tx_hash || '—';
      confBox.textContent = j.confirmations ?? 0;
      if(j.is_final && j.status === 'confirmed'){ goBtn.classList.remove('d-none'); }
      if(!j.is_final) setTimeout(poll, 5000);
    }catch(e){ setTimeout(poll, 7000); }
  }
  poll();
</script>
@endpush