@extends('frontend.layout_2')
@section('title', 'Deposit Submitted')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<style>
@media (prefers-reduced-motion:no-preference){ .pop{ animation:pop .35s ease; } }
@keyframes pop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
.copy-toast{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(8px);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.copy-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
</style>
@endpush

@section('sub_layout')
@php
    // methodType যদি না আসে, ডিফল্ট mobile ধরে নিচ্ছি (error এড়ানোর জন্য)
    $methodType = $methodType ?? 'mobile';

    // logo url build
    $logoUrl = '';
    if (!empty($pm?->logo)) {
        $logoUrl = preg_match('/^(https?:\/\/|\/)/i', $pm->logo)
            ? $pm->logo
            : asset('storage/'.$pm->logo);
    }

    // bank / mobile অনুযায়ী method এর নাম
    $isBank       = $methodType === 'bank';
    $methodName   = $isBank
        ? ($pm->bank_name    ?? 'Bank')
        : ($pm->name         ?? 'Mobile Wallet');

    $accountLabel = $isBank
        ? ($pm->account_holder ?? null)
        : null;
@endphp

<div class="mx-auto max-w-md px-4 py-8">
  <div class="rounded-2xl bg-white/90 backdrop-blur p-6 shadow-lg ring-1 ring-black/5 pop">

    {{-- Header --}}
    <div class="flex items-center gap-3">
      <span class="inline-flex size-12 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600 ring-1 ring-emerald-100">
        <i class="fa-solid fa-circle-check text-2xl"></i>
      </span>
      <div>
        <div class="text-sm text-slate-500">Deposit Submitted</div>
        <div class="text-lg font-extrabold text-slate-900">আপনার তথ্য গ্রহণ করা হয়েছে</div>
      </div>
      @if($logoUrl)
        <span class="ms-auto inline-flex size-10 items-center justify-center overflow-hidden rounded-xl ring-1 ring-slate-200 bg-white">
          <img src="{{ $logoUrl }}" alt="{{ $methodName }}" class="h-full w-full object-contain">
        </span>
      @endif
    </div>

    {{-- Info banner --}}
    <div class="mt-4 rounded-xl border border-emerald-200 bg-emerald-50/70 px-3 py-3 text-[13px] text-emerald-800">
      <span class="inline-flex items-center gap-2 font-semibold">
        <i class="fa-solid fa-circle-info"></i> স্ট্যাটাস
      </span>
      <div class="mt-1">
        আপনার ডিপোজিটটি <strong>রিভিউতে</strong> আছে। কনফার্ম হলে ট্রানজ্যাকশন্স পেজে স্ট্যাটাস আপডেট হবে।
      </div>
    </div>

    {{-- Summary --}}
    <div class="mt-5 grid grid-cols-1 gap-3">
      {{-- Method --}}
      <div class="flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
        <span class="inline-flex size-9 items-center justify-center rounded-lg
                     {{ $isBank ? 'bg-sky-50 text-sky-600 ring-1 ring-sky-100' : 'bg-sky-50 text-sky-600 ring-1 ring-sky-100' }}">
          <i class="fa-solid {{ $isBank ? 'fa-building-columns' : 'fa-wallet' }}"></i>
        </span>
        <div class="min-w-0">
          <div class="text-xs text-slate-500">Method</div>
          <div class="text-[15px] font-bold text-slate-900">
            {{ strtoupper($deposit->method) }}
            @if($pm)
                · {{ $methodName }}
            @endif
          </div>

          @if($isBank && $pm)
            <div class="text-[11px] text-slate-500">
                {{ $pm->account_holder ?? '' }}
                @if(!empty($pm->branch_name))
                    · {{ $pm->branch_name }}
                @endif
            </div>
          @endif
        </div>
      </div>

      {{-- Amount --}}
      <div class="flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
        <span class="inline-flex size-9 items-center justify-center rounded-lg bg-amber-50 text-amber-600 ring-1 ring-amber-100">
          <i class="fa-solid fa-sack-dollar"></i>
        </span>
        <div class="min-w-0">
          <div class="text-xs text-slate-500">Amount</div>
          <div class="text-[15px] font-bold text-slate-900">{{ number_format($deposit->amount) }} BDT</div>
        </div>
      </div>

      {{-- Transaction ID --}}
      <div class="flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
        <span class="inline-flex size-9 items-center justify-center rounded-lg bg-violet-50 text-violet-600 ring-1 ring-violet-100">
          <i class="fa-solid fa-barcode"></i>
        </span>
        <div class="min-w-0">
          <div class="text-xs text-slate-500">Transaction ID</div>
          <div id="trx-id" class="truncate text-[15px] font-bold text-slate-900">{{ $deposit->transaction_id }}</div>
        </div>
        <button type="button"
          class="ms-auto inline-flex items-center gap-1.5 rounded-full border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-rose-500"
          onclick="copyText(document.getElementById('trx-id').textContent.trim())">
          <i class="fa-regular fa-copy"></i> Copy
        </button>
      </div>
    </div>

    {{-- CTA buttons --}}
    <div class="mt-6 grid grid-cols-1 gap-2 sm:grid-cols-2">
      <a href="{{ route('transactions') }}"
         class="inline-flex items-center justify-center gap-2 rounded-full bg-gradient-to-r from-emerald-600 to-green-600 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-emerald-600/20 ring-1 ring-white/10 hover:brightness-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
        <i class="fa-solid fa-list-check"></i> Transactions
      </a>

      <a href="{{ route('dashboard') }}"
         class="inline-flex items-center justify-center gap-2 rounded-full border border-slate-200 bg-white px-5 py-3 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-rose-500">
        <i class="fa-solid fa-house"></i> Home
      </a>
    </div>
  </div>
</div>

<div id="copy-toast" class="copy-toast z-50 rounded-full bg-black/85 px-3 py-2 text-xs font-semibold text-white">
  Copied!
</div>
@endsection

@push('scripts')
<script>
function showToast(msg){
  const t = document.getElementById('copy-toast');
  if(!t) return;
  t.textContent = msg || 'Copied!';
  t.classList.add('show');
  clearTimeout(window.__copy_to);
  window.__copy_to = setTimeout(()=>t.classList.remove('show'), 1200);
}
async function copyText(text){
  try{
    if(navigator.clipboard && window.isSecureContext){
      await navigator.clipboard.writeText(text);
    }else{
      const ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta);
      ta.select(); document.execCommand('copy'); ta.remove();
    }
    showToast('Copied!');
  }catch(e){ console.error(e); }
}
</script>
@endpush