{{-- resources/views/frontend/loan/deposit-gateway.blade.php --}}

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

@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){ .press:active{ transform:translateY(1px); } }
.copy-tip{ opacity:0; transform:translateY(2px); transition:opacity .15s ease, transform .15s ease; }
.copy-wrap:hover .copy-tip{ opacity:1; transform:translateY(0); }
.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
    // controller থেকে আসবে: $methodType = 'mobile'|'bank'
    $methodType = $methodType ?? 'mobile';
    $isBank     = $methodType === 'bank';

    $logoUrl = '';
    if (!empty($logo)) {
        $logoUrl = preg_match('/^(https?:\/\/|\/)/i', $logo) ? $logo : asset('storage/'.$logo);
    }
@endphp

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

        {{-- Header --}}
        <div class="flex items-center gap-3">
            <span class="inline-flex size-12 items-center justify-center overflow-hidden rounded-xl ring-1 ring-slate-200 bg-white">
                @if($logoUrl)
                    <img src="{{ $logoUrl }}" alt="{{ $methodName }}" class="h-full w-full object-contain">
                @else
                    <i class="fa-regular fa-image text-slate-300 text-xl"></i>
                @endif
            </span>
            <div>
                <div class="text-sm text-slate-500">Payment Method</div>
                <div class="text-lg font-extrabold text-slate-900">{{ $methodName }}</div>
            </div>
            <span class="ms-auto inline-flex items-center gap-1 rounded-full bg-rose-50 px-2.5 py-1 text-[11px] font-semibold text-rose-700 ring-1 ring-rose-100">
                <i class="fa-solid fa-shield-halved"></i> Secure
            </span>
        </div>

        {{-- Info banner --}}
        <div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-3 py-3 text-[13px] text-amber-800">
            <span class="inline-flex items-center gap-2 font-semibold">
                <i class="fa-solid fa-circle-info"></i> নির্দেশনা
            </span>
            @if($isBank)
                <div class="mt-1">
                    আপনার ব্যাংক অ্যাপ / ইন্টারনেট ব্যাংকিং / কাউন্টার থেকে
                    <strong>Bank Transfer</strong> করে নিচের অ্যাকাউন্টে টাকা পাঠান, তারপর Transaction ID লিখুন।
                </div>
            @else
                <div class="mt-1">
                    বিকাশ / নগদ / রকেট ইত্যাদি থেকে <strong>Send Money</strong> করে নিচের নম্বরে টাকা পাঠান, তারপর Transaction ID লিখুন।
                </div>
            @endif
        </div>

        {{-- Account & Amount --}}
        <div class="mt-5 grid grid-cols-1 gap-3">

            {{-- ✅ Account card (better design) --}}
            <div class="flex items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-slate-50/70 px-4 py-3 shadow-sm">
                <div class="min-w-0">
                    {{-- ছোট টাইটেল + আইকন --}}
                    <div class="flex items-center gap-2 text-[11px] font-semibold tracking-wide text-slate-500 uppercase">
                        <i class="fa-solid {{ $isBank ? 'fa-building-columns' : 'fa-wallet' }} text-slate-400"></i>
                        <span>{{ $isBank ? 'Bank Account' : 'Account' }}</span>
                    </div>

                    {{-- অ্যাকাউন্ট নম্বর (বড় ও স্পষ্ট) --}}
                    <div id="account-number"
                         class="mt-1 truncate text-[17px] font-extrabold tracking-wide text-slate-900">
                        {{ $agentNumber }}
                    </div>

                    {{-- Account holder (bank হলে) --}}
                    @if($isBank && !empty($accountHolder))
                        <div class="mt-1 text-[12px] text-slate-700">
                            <i class="fa-solid fa-user text-[11px] mr-1 text-slate-400"></i>
                            <span class="font-medium">Account holder:</span>
                            <span>{{ $accountHolder }}</span>
                        </div>
                    @endif

                    {{-- Branch (bank হলে) --}}
                    @if($isBank && !empty($branchName))
                        <div class="mt-0.5 text-[12px] text-slate-700">
                            <i class="fa-solid fa-location-dot text-[11px] mr-1 text-slate-400"></i>
                            <span class="font-medium">Branch:</span>
                            <span>{{ $branchName }}</span>
                        </div>
                    @endif
                </div>

                {{-- Copy button --}}
                <button type="button"
                    class="copy-wrap ms-2 inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-rose-500"
                    data-copy-target="#account-number">
                    <i class="fa-regular fa-copy text-[13px]"></i>
                    <span>Copy</span>
                    <span class="copy-tip ml-1 rounded bg-black/80 px-1.5 py-0.5 text-[10px] font-medium text-white">
                        Account
                    </span>
                </button>
            </div>

            {{-- Amount card --}}
            <div class="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
                <span class="inline-flex size-9 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 ring-1 ring-emerald-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($depositAmount) }} BDT</div>
                </div>
            </div>
        </div>

        {{-- Form --}}
        <form action="{{ route('loan.deposit.store', $loan) }}" method="POST" class="mt-4">
            @csrf
            <input type="hidden" name="method" value="{{ $methodKey }}">
            <input type="hidden" name="amount" value="{{ $depositAmount }}">

            <label for="trx" class="mb-1 mt-2 block text-sm font-semibold text-slate-700">
                Transaction ID
            </label>
            <div class="relative">
                <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-slate-400">
                    <i class="fa-solid fa-barcode"></i>
                </span>
                <input id="trx" name="transaction_id" required placeholder="e.g. 8J3K4L5M6"
                       class="w-full rounded-xl border border-slate-300 bg-white pl-10 pr-24 py-2.5 text-[15px] text-slate-700
                              focus:outline-none focus:ring-2 focus:ring-rose-500/60 focus:border-rose-500 transition" />

                <button type="button" id="trx-paste"
                        class="absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center gap-1 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">
                    <i class="fa-solid fa-clipboard"></i> Paste
                </button>
            </div>

            <button type="submit"
                class="press mt-4 inline-flex w-full items-center justify-center gap-2 rounded-full
                       bg-gradient-to-r from-rose-600 to-red-600 px-5 py-3 text-sm font-semibold text-white
                       shadow-lg shadow-rose-600/20 ring-1 ring-white/10
                       transition hover:brightness-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
                <i class="fa-solid fa-paper-plane"></i>
                Add Deposit
            </button>
        </form>
    </div>

    <div class="mt-4 text-center">
        <a href="{{ route('loan.deposit.method', $loan) }}"
           class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 hover:text-slate-800 transition">
            <i class="fa-solid fa-arrow-left-long"></i> পেমেন্ট মেথড পরিবর্তন
        </a>
    </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(){
  function showToast(msg){
    const toast = document.getElementById('copy-toast');
    if(!toast) return;
    toast.textContent = msg || 'Copied!';
    toast.classList.add('show');
    clearTimeout(window.__copy_to);
    window.__copy_to = setTimeout(()=>toast.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('Account number copied!');
    }catch(e){ console.error('Copy failed', e); }
  }

  document.querySelectorAll('[data-copy-target]').forEach(btn=>{
    btn.addEventListener('click', ()=>{
      const sel = btn.getAttribute('data-copy-target');
      const el  = document.querySelector(sel);
      if(el){ copyText(el.textContent.trim()); }
    });
  });

  const pasteBtn = document.getElementById('trx-paste');
  if(pasteBtn){
    pasteBtn.addEventListener('click', async ()=>{
      try{
        if(navigator.clipboard && navigator.clipboard.readText){
          const txt = await navigator.clipboard.readText();
          const input = document.getElementById('trx');
          if(input && txt){ input.value = txt.trim(); showToast('Pasted!'); }
        }
      }catch(e){ console.warn('Paste not allowed', e); }
    });
  }
})();
</script>
@endpush