@extends('layouts.app')
@section('title','Bank List')

@push('styles')
  {{-- Same font & blob animation style --}}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body{
      font-family: "Hind Siliguri", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    @keyframes blobFloat {
      0%   { transform: translate3d(-10%, -10%, 0) scale(1); }
      50%  { transform: translate3d(15%, 10%, 0) scale(1.08); }
      100% { transform: translate3d(40%, -5%, 0) scale(1); }
    }
    @keyframes blobFloat2 {
      0%   { transform: translate3d(40%, 20%, 0) scale(1); }
      50%  { transform: translate3d(5%, 0, 0) scale(1.04); }
      100% { transform: translate3d(-20%, 10%, 0) scale(1); }
    }
  </style>
@endpush

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 flex justify-center items-start px-3 sm:px-4 py-8 relative overflow-hidden">

  {{-- animated blobs --}}
  <svg class="pointer-events-none absolute -top-32 -left-32 w-80 h-80 text-emerald-500/20"
       viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
       style="animation: blobFloat 18s ease-in-out infinite alternate;">
    <path fill="currentColor"
          d="M45.1,-62C58.8,-54.8,69.1,-39.4,73.4,-22.5C77.7,-5.7,75.9,12.7,67.4,26.8C58.8,40.9,43.4,50.7,27.2,58.2C11,65.7,-6,70.9,-20.4,66.3C-34.7,61.6,-46.4,47.1,-55.3,31.5C-64.3,15.9,-70.4,-0.7,-68.1,-16.7C-65.8,-32.7,-55.1,-48.1,-41.2,-55.6C-27.3,-63.1,-10.1,-62.6,5.7,-69C21.5,-75.3,43,-88.4,45.1,-62Z"/>
  </svg>

  <svg class="pointer-events-none absolute bottom-0 -right-24 w-72 h-72 text-cyan-400/10"
       viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
       style="animation: blobFloat2 22s ease-in-out infinite alternate;">
    <path fill="currentColor"
          d="M35.8,-54.7C46.3,-47.4,54,-38,60.9,-27.1C67.7,-16.2,73.7,-4.1,71.9,6.8C70.1,17.7,60.5,27.3,50.4,36.6C40.4,46,29.9,55.3,17.3,60.4C4.6,65.6,-10.1,66.6,-24.4,62.4C-38.7,58.3,-52.6,49.1,-59.8,36.3C-66.9,23.4,-67.3,7,-64.6,-8.3C-61.9,-23.6,-56.1,-37.9,-45.7,-45.9C-35.2,-53.9,-20.1,-55.7,-5.2,-49.9C9.7,-44,19.3,-30.5,35.8,-54.7Z"/>
  </svg>

  <main class="mx-auto w-full max-w-[980px] relative z-10 mb-24">

    {{-- top bar --}}
    <div class="flex items-center justify-between mb-4 text-xs text-slate-300">
      <button type="button"
              onclick="window.history.back()"
              class="inline-flex items-center gap-1 text-slate-300 hover:text-emerald-400 transition">
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
          <path d="M15.75 4.75 9.5 11 15.75 17.25 14.25 18.75 6.5 11 14.25 3.25 15.75 4.75Z"/>
        </svg>
        Back
      </button>
      <span class="tracking-[0.18em] uppercase text-emerald-400 font-semibold text-[11px]">
        Bank List
      </span>
    </div>

    {{-- heading --}}
    <div class="mb-3">
      <h1 class="text-xl sm:text-2xl font-extrabold text-slate-50">Select Your Bank</h1>
      <p class="mt-1 text-xs sm:text-sm text-slate-400">Choose a bank to continue your transaction.</p>
    </div>

    {{-- glass card --}}
    <div class="rounded-3xl bg-slate-900/85 border border-emerald-500/25 shadow-[0_25px_70px_-35px_rgba(16,185,129,0.7)] backdrop-blur-sm p-4 sm:p-6">

      {{-- Search --}}
      <form method="GET"
            class="rounded-2xl border border-slate-800 bg-slate-950/70 p-3 shadow-[0_18px_55px_-30px_rgba(15,23,42,0.9)]">
        <div class="relative">
          <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">ЁЯФО</span>
          <input
            name="q" value="{{ $q }}"
            placeholder="Search for banks..."
            class="h-11 w-full rounded-2xl border-2 border-slate-700 bg-slate-900/80 pl-10 pr-3 text-sm text-slate-100 placeholder-slate-500 outline-none
                   focus:border-emerald-400 focus:ring-2 focus:ring-emerald-400/40"
          >
        </div>
      </form>

      {{-- Banks list --}}
      <div class="mt-4 space-y-3">
        @forelse($banks as $b)
          <a href="{{ route('user.bank.show',$b) }}"
             class="flex items-center justify-between rounded-2xl border border-slate-800 bg-slate-950/70 p-3
                    shadow-[0_22px_60px_-30px_rgba(15,23,42,0.9)]
                    hover:border-emerald-500/40 hover:shadow-[0_26px_70px_-32px_rgba(16,185,129,0.7)] transition">
            <div class="flex items-center gap-3 min-w-0">

              {{-- logo (FULL FIX) --}}
              <div class="h-12 w-12 rounded-2xl bg-slate-900/80 ring-2 ring-slate-700 overflow-hidden  place-items-center">
                @php
                    $p       = $b->logo_path;
                    $name    = $b->name ?? 'Bank';
                    $initial = strtoupper(mb_substr($name, 0, 1));

                    $isStored = $p && \Illuminate\Support\Facades\Storage::disk('public')->exists($p);
                    $isUrl    = $p && \Illuminate\Support\Str::startsWith($p, ['http://', 'https://']);
                @endphp

                @if($isStored)
                  {{-- storage/app/public/... --}}
                  <img
                    src="{{ asset('storage/' . $p) }}"
                    class="h-full w-full object-contain"
                    alt="{{ $name }}"
                  >
                @elseif($isUrl)
                  {{-- full URL --}}
                  <img
                    src="{{ $p }}"
                    class="h-full w-full object-contain"
                    alt="{{ $name }}"
                  >
                @elseif($p)
                  {{-- logo_path ржП text/code ржерж╛ржХрж▓рзЗ --}}
                  <span class="text-emerald-300 font-semibold text-[10px] text-center px-1 leading-tight">
                    {{ $p }}
                  </span>
                @else
                  {{-- ржПржХржжржо ржХрж┐ржЫрзБ ржирж╛ржЗ, ржирж╛ржорзЗрж░ initial --}}
                  <span class="text-emerald-300 font-bold text-lg">
                    {{ $initial }}
                  </span>
                @endif
              </div>

              <div class="min-w-0">
                <div class="truncate text-[15px] font-semibold text-slate-50">{{ $b->name }}</div>
                <div class="mt-1 flex flex-wrap items-center gap-2">
                  <span class="inline-flex items-center gap-1 rounded-full border border-emerald-500/40 bg-emerald-500/10 px-2 py-0.5 text-[11px] font-semibold text-emerald-200">
                    Min рз│{{ number_format($b->min_transaction,0) }}
                  </span>
                  @if($b->reward_percent > 0)
                    <span class="inline-flex items-center gap-1 rounded-full border border-sky-500/40 bg-sky-500/10 px-2 py-0.5 text-[11px] font-semibold text-sky-200">
                      Reward {{ rtrim(rtrim(number_format($b->reward_percent,2), '0'), '.') }}%
                    </span>
                  @endif
                  @if(!$b->is_active)
                    <span class="inline-flex items-center gap-1 rounded-full border border-rose-500/40 bg-rose-500/10 px-2 py-0.5 text-[11px] font-semibold text-rose-200">
                      Inactive
                    </span>
                  @endif
                </div>
              </div>
            </div>
            <div class="shrink-0 text-slate-500 text-lg">тА║</div>
          </a>
        @empty
          <div class="rounded-2xl border border-slate-800 bg-slate-950/70 p-6 text-center text-slate-400 shadow-[0_22px_60px_-30px_rgba(15,23,42,0.9)]">
            No banks found.
          </div>
        @endforelse
      </div>

      {{-- Pagination --}}
      <div class="mt-4">
        {{ $banks->withQueryString()->links() }}
      </div>
    </div>
  </main>
</div>
@endsection