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

@extends('frontend.layout_2')
@section('title', 'Deposit & Payment Method')

@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);}}
.method-card{transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease;}
.method-card.selected{
  border-color:rgb(244 63 94 / .6);
  box-shadow:0 8px 24px rgba(244,63,94,.12);
  transform:translateY(-1px);
}
</style>
@endpush

@section('sub_layout')
<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">

    <div class="rounded-xl border border-rose-200 bg-rose-50/70 px-3 py-3 text-[13px] text-rose-800">
      <span class="inline-flex items-center gap-2 font-semibold">
        <i class="fa-solid fa-circle-info"></i> নির্দেশনা
      </span>
      <div class="mt-1">
        আপনার লোনের জন্য জামানত: <span class="font-semibold">৳ {{ number_format($depositAmount) }}</span>।
        প্রথমে মেথড নির্বাচন করুন, তারপর Send Money করুন।
      </div>
    </div>

    {{-- MOBILE BANKING --}}
    @if($mobileMethods->count())
      <h4 class="mt-5 mb-2 text-xs font-bold tracking-wide text-slate-500 uppercase">
        মোবাইল ব্যাংকিং
      </h4>
      <div id="mobileGrid" class="grid grid-cols-3 gap-3 mb-4">
        @foreach($mobileMethods as $m)
          @php
            $logo = $m->logo;
            $logoUrl = $logo
                ? (preg_match('/^(https?:\/\/|\/)/i', $logo) ? $logo : asset('storage/'.$logo))
                : '';
          @endphp
          <button type="button"
            class="method-card group press flex flex-col items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white p-3 text-center shadow-sm ring-1 ring-black/0 focus:outline-none hover:shadow-md focus:ring-2 focus:ring-rose-500"
            data-method="mobile:{{ $m->slug }}" aria-pressed="false">
            <span class="inline-flex size-12 items-center justify-center overflow-hidden rounded-lg ring-1 ring-slate-200 bg-white">
              @if($logoUrl)
                <img src="{{ $logoUrl }}" alt="{{ $m->name }}" loading="lazy" class="h-full w-full object-contain"/>
              @else
                <i class="fa-regular fa-image text-slate-300 text-xl"></i>
              @endif
            </span>
            <span class="text-[12px] font-semibold text-slate-700 group-hover:text-slate-900">
              {{ $m->name }}
            </span>
          </button>
        @endforeach
      </div>
    @endif

    {{-- BANK METHODS --}}
    @if($bankMethods->count())
      <h4 class="mt-2 mb-2 text-xs font-bold tracking-wide text-slate-500 uppercase">
        ব্যাংক ট্রান্সফার
      </h4>
      <div id="bankGrid" class="grid grid-cols-3 gap-3 mb-5">
        @foreach($bankMethods as $b)
          @php
            $logo = $b->logo;
            $logoUrl = $logo
                ? (preg_match('/^(https?:\/\/|\/)/i', $logo) ? $logo : asset('storage/'.$logo))
                : '';
          @endphp
          <button type="button"
            class="method-card group press flex flex-col items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white p-3 text-center shadow-sm ring-1 ring-black/0 focus:outline-none hover:shadow-md focus:ring-2 focus:ring-rose-500"
            data-method="bank:{{ $b->slug }}" aria-pressed="false">
            <span class="inline-flex size-12 items-center justify-center overflow-hidden rounded-lg ring-1 ring-slate-200 bg-white">
              @if($logoUrl)
                <img src="{{ $logoUrl }}" alt="{{ $b->bank_name }}" loading="lazy" class="h-full w-full object-contain"/>
              @else
                <i class="fa-regular fa-image text-slate-300 text-xl"></i>
              @endif
            </span>
            <span class="text-[12px] font-semibold text-slate-700 group-hover:text-slate-900">
              {{ $b->bank_name }}
            </span>
          </button>
        @endforeach
      </div>
    @endif

    {{-- Continue button --}}
    <button id="continueBtn" type="button"
      class="press 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 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500
             opacity-60 cursor-not-allowed"
      disabled
      data-url-template="{{ route('loan.deposit.gateway', ['loan'=>$loan, 'method'=>'__METHOD__']) }}">
      <i class="fa-solid fa-arrow-right-to-bracket"></i> পরবর্তী ধাপ
    </button>

  </div>
</div>
@endsection

@push('scripts')
<script>
(function(){
  const btn  = document.getElementById('continueBtn');
  const grids = document.querySelectorAll('#mobileGrid, #bankGrid');
  let selected = null;

  function setEnabled(enable){
    if(enable){
      btn.disabled = false;
      btn.classList.remove('opacity-60','cursor-not-allowed');
    }else{
      btn.disabled = true;
      btn.classList.add('opacity-60','cursor-not-allowed');
    }
  }

  grids.forEach(grid=>{
    grid?.querySelectorAll('[data-method]').forEach(card=>{
      card.addEventListener('click', ()=>{
        // সব কার্ড আনসিলেক্ট
        document.querySelectorAll('.method-card').forEach(c=>{
          c.classList.remove('selected');
          c.setAttribute('aria-pressed','false');
        });
        // কারেন্ট সিলেক্ট
        card.classList.add('selected');
        card.setAttribute('aria-pressed','true');
        selected = card.getAttribute('data-method');
        setEnabled(true);
      });
    });
  });

  btn?.addEventListener('click', ()=>{
    if(!selected) return;
    const tpl = btn.getAttribute('data-url-template');
    const url = tpl.replace('__METHOD__', encodeURIComponent(selected));
    window.location.href = url;
  });

  setEnabled(false);
})();
</script>
@endpush