{{-- ========== Premium Navbar (Blade) ========== --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

@php
    $user = auth()->user();
    $rawBalance = (float) ($user->balance ?? 0);
    $currency = '৳'; // change if needed
@endphp

<style>
    :root{
        --nav-h:70px;
        --brand-1:#e53935;
        --brand-2:#c62828;
        --on:#fff;
        --hit:42px;
        --ring:0 0 0 2px rgba(255,255,255,.22);
        --shadow:0 10px 30px rgba(0,0,0,.12);
    }
    *{ box-sizing:border-box; margin:0; padding:0; }
    body{
        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
        background:#f5f5f5;
        padding-top:var(--nav-h); /* space for fixed navbar */
        -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    }

    /* ===== Navbar ===== */
    .navbar{
        position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:1000;
        background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
        color:var(--on);
        border-bottom:1px solid rgba(255,255,255,.12);
        box-shadow:var(--shadow);
        backdrop-filter:blur(10px) saturate(125%);
        -webkit-backdrop-filter:blur(10px) saturate(125%);
    }
    .navbar-inner{
        max-width:1000px; height:100%; margin:0 auto; padding:0 16px;
        display:flex; align-items:center; justify-content:space-between; gap:10px;
    }

    /* Left: back */
    .back-btn{
        width:var(--hit); height:var(--hit);
        display:inline-flex; align-items:center; justify-content:center;
        border:none; border-radius:999px; cursor:pointer;
        color:var(--on); background:rgba(255,255,255,.14);
        box-shadow:var(--ring);
        transition:transform .12s ease, background .2s ease, box-shadow .2s ease;
    }
    .back-btn:hover{ background:rgba(255,255,255,.22); transform:translateY(-1px); }
    .back-btn:active{ transform:translateY(0); }
    .back-btn:focus-visible{ outline:2px solid rgba(255,255,255,.65); outline-offset:2px; }

    /* Center: title */
    .nav-title{
        flex:1; text-align:center; padding:0 8px;
        font-weight:800; letter-spacing:.03em; font-size:18px; line-height:1;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
        text-shadow:0 1px 0 rgba(0,0,0,.18);
    }

    /* Right: logo + balance + logout */
    .right-side{ display:flex; align-items:center; gap:10px; }

    .brand-img-wrap{
        width:40px; height:40px; border-radius:12px;
        display:inline-flex; align-items:center; justify-content:center;
        background:rgba(255,255,255,.16); box-shadow:var(--ring); overflow:hidden;
    }
    .brand-img{
        width:100%; height:100%; display:block; object-fit:cover; border-radius:10px;
        filter:contrast(1.05) saturate(1.05);
        transition:transform .25s ease;
    }
    .brand-img-wrap:hover .brand-img{ transform:scale(1.06); }

    .balance-pill{
        display:inline-flex; align-items:center; gap:8px;
        height:36px; padding:0 12px; border-radius:999px;
        background:rgba(255,255,255,.16); color:#fff; box-shadow:var(--ring);
        font-weight:700; letter-spacing:.02em;
        backdrop-filter:blur(8px) saturate(120%); -webkit-backdrop-filter:blur(8px) saturate(120%);
        white-space:nowrap;
        transition:transform .12s ease, background .2s ease, box-shadow .2s ease;
    }
    .balance-pill:hover{ background:rgba(255,255,255,.22); transform:translateY(-1px); }
    .balance-pill i{ font-size:14px; opacity:.95; }
    .balance-label{ font-size:12px; font-weight:600; opacity:.9; }
    .balance-amt{ font-size:14px; font-variant-numeric:tabular-nums; }

    .logout-btn{
        width:var(--hit); height:var(--hit);
        display:inline-flex; align-items:center; justify-content:center;
        color:var(--on); background:rgba(255,255,255,.14);
        border:none; border-radius:999px; cursor:pointer; text-decoration:none;
        box-shadow:var(--ring);
        transition:transform .12s ease, background .2s ease, box-shadow .2s ease;
    }
    .logout-btn:hover{ background:rgba(255,255,255,.22); transform:translateY(-1px); }
    .logout-btn:active{ transform:translateY(0); }
    .logout-label{ display:none; font-size:13px; font-weight:600; margin-left:2px; opacity:.95; }

    /* Motion respect */
    @media (prefers-reduced-motion: reduce){
        .back-btn, .logout-btn, .brand-img, .balance-pill{ transition:none !important; }
    }

    /* Optional content polish */
    .page{ max-width:420px; margin:20px auto; padding:0 16px; }
    .card{ background:#fff; border-radius:20px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.1); margin-bottom:20px; }

    /* Responsive */
    @media (min-width:520px){
        .nav-title{ font-size:19px; }
        .logout-label{ display:inline-block; }
    }
    @media (max-width:390px){
        .balance-label{ display:none; } /* tiny screens: show only amount */
    }
    @media (max-width:360px){
        .nav-title{ display:none; }
    }
</style>

<nav class="navbar" role="navigation" aria-label="Main">
    <div class="navbar-inner">
        <!-- Left -->
        <button class="back-btn" onclick="history.back()" aria-label="Go back">
            <i class="fa-solid fa-arrow-left"></i>
        </button>

        <!-- Center -->
        <div class="nav-title">
            @yield('title', 'LOAN APP')
        </div>

        <!-- Right -->
        <div class="right-side">
            {{-- <span class="brand-img-wrap" title="Brand">
                <img class="brand-img" src="{{ asset('img/amritosoft.jpg') }}" alt="Logo">
            </span> --}}

            {{-- Balance pill --}}
            @php $formatted = number_format($rawBalance, 2); @endphp
            <span class="balance-pill" id="balance-pill" data-amount="{{ $rawBalance }}" title="Current Balance">
                <i class="fa-solid fa-wallet"></i>
            
                <span class="balance-amt"><span class="cur">{{ $currency }}</span> <span id="balance-text">{{ $formatted }}</span></span>
            </span>

            {{-- Logout --}}
            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display:none;">
                @csrf
            </form>
            <button class="logout-btn" title="Logout" aria-label="Logout"
                onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                <i class="fa-solid fa-right-from-bracket"></i>
            </button>
            <span class="logout-label">Logout</span>
        </div>
    </div>
</nav>

{{-- Optional smooth count-up (respects reduced motion) --}}
<script>
(function(){
  const pill = document.getElementById('balance-pill');
  if(!pill) return;
  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if(prefersReduced) return;

  const amt = parseFloat(pill.dataset.amount || '0');
  const textEl = document.getElementById('balance-text');
  if(!textEl) return;

  let start=null, dur=600;
  const fmt = new Intl.NumberFormat('en-US',{minimumFractionDigits:2, maximumFractionDigits:2});

  function step(ts){
    if(!start) start=ts;
    const p = Math.min(1,(ts-start)/dur);
    const ease = 1 - Math.pow(1-p,3);
    textEl.textContent = fmt.format(amt*ease);
    if(p<1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
})();
</script>