{{-- resources/views/dashboard/wallet/deposit.blade.php --}}
@extends('layouts.user')
@section('title', 'Deposit {{ $asset }}')
@section('content')

<style>
.dep-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.dep-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #ececec);
  border-radius: 14px;
  overflow: hidden;
}
.dep-card__head {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border, #ececec);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dep-card__title { font-size: 14px; font-weight: 800; color: var(--text, #181818); }
.dep-card__sub   { font-size: 12px; color: var(--muted, #717171); margin-top: 2px; }
.dep-card__body  { padding: 20px; }

.dep-address-box {
  background: var(--surface2, #fafafa);
  border: 1px solid var(--border, #ececec);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.dep-address-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.dep-address-val {
  font-family: 'DM Mono', 'Fira Code', monospace;
  font-size: 12px;
  word-break: break-all;
  color: var(--text);
  font-weight: 600;
  line-height: 1.6;
}
.dep-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border, #ececec);
  font-size: 12px;
}
.dep-meta-row:last-child { border-bottom: 0; }
.dep-meta-lbl { color: var(--muted); width: 90px; flex-shrink: 0; }
.dep-meta-val { font-weight: 700; color: var(--text); }

.dep-warning {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  margin-top: 12px;
}
.dep-warning__icon {
  width: 24px; height: 24px;
  background: #f59e0b;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #1e2329;
  flex-shrink: 0; margin-top: 1px;
}
.dep-warning__title { font-size: 11px; font-weight: 800; color: #92400e; margin-bottom: 2px; text-transform: uppercase; }
.dep-warning__text  { font-size: 11px; color: #78350f; line-height: 1.5; }

/* Responsive */
@media (max-width: 720px) {
  .dep-layout { grid-template-columns: 1fr; }
}
</style>

<div class="page-hdr">
  <h1 class="page-hdr__title">Deposit <span style="color:var(--primary)">{{ $asset }}</span></h1>
  <div class="page-hdr__right">
    <div class="breadcrumb">
      <i class="icon ion-md-home"></i>
      <a href="{{ route('dashboard.overview') }}">Home</a>
      <i class="icon ion-ios-arrow-forward"></i>
      <a href="{{ route('dashboard.wallet') }}">Wallet</a>
      <i class="icon ion-ios-arrow-forward"></i>
      <span>Deposit</span>
    </div>
  </div>
</div>

<div class="dep-layout">

  {{-- Deposit address card --}}
  <div class="dep-card">
    <div class="dep-card__head">
      <div>
        <div class="dep-card__title">Deposit Address</div>
        <div class="dep-card__sub">Send only <strong>{{ $asset }}</strong> to this address</div>
      </div>
      <span style="display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;background:var(--primary-lt);color:var(--primary);font-size:11px;font-weight:700;">
        <i class="icon ion-md-logo-bitcoin"></i> {{ $asset }}
      </span>
    </div>
    <div class="dep-card__body">
<div class="dep-address-box">
         <div class="dep-address-label">Deposit Address</div>
         <div class="dep-address-val" id="depositAddressText">{{ $depositAddress->address }}</div>
         <button type="button" id="btnCopyAddress" class="btn btn--outline btn--sm" style="margin-top:8px;">
           <i class="icon ion-md-copy"></i> Copy Address
         </button>
       </div>
      @if(!empty($depositAddress->network))
      <div class="dep-meta-row">
        <span class="dep-meta-lbl">Network</span>
        <span class="dep-meta-val">{{ $depositAddress->network }}</span>
      </div>
      @endif
      @if(!empty($depositAddress->instructions))
      <div class="dep-warning" style="margin-top:14px;">
        <div class="dep-warning__icon">!</div>
        <div>
          <div class="dep-warning__title">Instructions</div>
          <div class="dep-warning__text">{{ $depositAddress->instructions }}</div>
        </div>
      </div>
      @endif
    </div>
  </div>

  {{-- Submit form card --}}
  <div class="dep-card">
    <div class="dep-card__head">
      <div>
        <div class="dep-card__title">Confirm Transaction</div>
        <div class="dep-card__sub">Submit your transfer details below</div>
      </div>
    </div>
    <div class="dep-card__body">
      <form method="POST" action="{{ route('dashboard.wallet.deposit.store') }}">
        @csrf
        <input type="hidden" name="asset" value="{{ $asset }}">
        <div class="form-group">
          <label class="form-label">Amount ({{ $asset }})</label>
          <input type="number" step="0.00000001" min="0.00000001" name="amount"
                 value="{{ old('amount') }}" required class="form-control"
                 placeholder="e.g. 0.05000000">
          @error('amount')<div class="field-error">{{ $message }}</div>@enderror
        </div>
        <div class="form-group">
          <label class="form-label">Transaction Hash</label>
          <input type="text" name="tx_hash"
                 value="{{ old('tx_hash') }}" required class="form-control"
                 placeholder="Paste your blockchain tx hash">
          @error('tx_hash')<div class="field-error">{{ $message }}</div>@enderror
        </div>
        <div class="dep-warning">
          <div class="dep-warning__icon">!</div>
          <div>
            <div class="dep-warning__title">Verification Required</div>
            <div class="dep-warning__text">Your deposit will be reviewed and credited after network confirmations.</div>
          </div>
        </div>
        <div style="display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;">
          <button type="submit" class="btn btn--primary">
            <i class="icon ion-md-checkmark"></i> Submit Deposit
          </button>
          <a href="{{ route('dashboard.wallet') }}" class="btn btn--outline">Cancel</a>
        </div>
      </form>
    </div>
  </div>
</div>

{{-- Recent deposits table --}}
<div class="dep-card">
  <div class="dep-card__head">
    <div>
      <div class="dep-card__title">Deposit History</div>
      <div class="dep-card__sub">All your deposit records</div>
    </div>
  </div>
  <div class="dep-card__body" style="padding:0;">
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Reference</th>
            <th>Asset</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Note</th>
            <th>Date</th>
          </tr>
        </thead>
        <tbody>
          @forelse($depositHistory as $deposit)
          <tr>
            <td class="font-mono" style="font-size:11px;color:var(--muted);">{{ $deposit['reference'] }}</td>
            <td><strong>{{ $deposit['asset'] }}</strong></td>
            <td class="font-bold font-mono">{{ number_format((float)$deposit['amount'],8) }}</td>
            <td><span class="badge badge-{{ $deposit['status'] }}">{{ ucfirst($deposit['status']) }}</span></td>
            <td style="color:var(--muted);">{{ $deposit['note'] ?: '—' }}</td>
            <td style="color:var(--muted);font-size:11px;">{{ $deposit['created_at']?->format('M d, Y H:i') }}</td>
          </tr>
          @empty
          <tr>
            <td colspan="6" style="text-align:center;padding:32px;color:var(--muted);">No deposit history yet.</td>
          </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>

@endsection

@push('scripts')
<script>
(function() {
  const copyBtn = document.getElementById('btnCopyAddress');
  const addressText = document.getElementById('depositAddressText');
  if (copyBtn && addressText) {
    copyBtn.addEventListener('click', function() {
      navigator.clipboard.writeText(addressText.textContent).then(() => {
        copyBtn.innerHTML = '<i class="icon ion-md-checkmark"></i> Copied!';
        setTimeout(() => {
          copyBtn.innerHTML = '<i class="icon ion-md-copy"></i> Copy Address';
        }, 2000);
      }).catch(() => {
        alert('Failed to copy. Please copy manually.');
      });
    });
  }
})();
</script>
@endpush