<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  @php
    $gs   = \App\Models\GeneralSetting::first();
    $name = $gs->site_name ?? 'EARNING BD';
    $g1   = $gs->icon_color   ?? '#0B5D1E';
    $g2   = $gs->hover_color  ?? '#0F7A2E';
    $g3   = $gs->accent_color ?? '#E4002B';
    $ink  = $gs->text_color   ?? '#0f172a';
    $logo = $gs?->logo ? asset(ltrim($gs->logo,'/')) : null;
  @endphp

  <title>Set New Password — {{ $name }}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  {{-- Google Font & Icons --}}
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

  <style>
    :root{
      --g1:{{ $g1 }};
      --g2:{{ $g2 }};
      --g3:{{ $g3 }};
      --ink:{{ $ink }};
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:'Inter',sans-serif;
      background:linear-gradient(135deg,var(--g1),var(--g2));
      min-height:100vh;display:flex;align-items:center;justify-content:center;
      color:var(--ink);padding:20px;
    }

    .card{
      background:rgba(255,255,255,0.15);
      backdrop-filter:blur(16px);
      border:1px solid rgba(255,255,255,0.25);
      border-radius:20px;
      padding:36px 26px;
      width:100%;max-width:440px;
      color:#fff;
      box-shadow:0 10px 35px rgba(0,0,0,0.25);
      animation:fadeUp .6s ease both;
    }
    @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

    .brand{text-align:center;margin-bottom:18px;}
    .brand img{
      width:78px;height:78px;object-fit:contain;
      border-radius:14px;background:#fff;padding:10px;
      box-shadow:0 8px 20px rgba(0,0,0,0.18);
    }
    .brand h1{font-weight:800;font-size:1.25rem;margin-top:10px;color:#fff;}
    .brand p{font-size:.85rem;opacity:.85;}

    .field{margin-bottom:14px;position:relative;}
    .field label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:#fff;}
    .field input{
      width:100%;padding:12px 44px 12px 14px;border:0;border-radius:12px;
      font-size:15px;background:rgba(255,255,255,0.95);color:#111;
      outline:none;transition:all .25s ease;
    }
    .field input:focus{background:#fff;box-shadow:0 0 0 4px rgba(11,93,30,0.15)}

    .toggle{
      position:absolute;right:10px;top:33px;
      width:32px;height:32px;border-radius:8px;border:0;cursor:pointer;
      background:transparent;color:var(--g1);display:flex;align-items:center;justify-content:center;
    }
    .toggle:focus{outline:none}

    .btn{
      width:100%;padding:13px;border:0;border-radius:12px;
      background:linear-gradient(90deg,var(--g1),var(--g2));
      color:#fff;font-weight:800;font-size:15px;
      cursor:pointer;transition:transform .15s,filter .15s;
      box-shadow:0 12px 24px rgba(0,0,0,0.25);
    }
    .btn:hover{filter:brightness(1.06);transform:translateY(-2px);}

    .note{
      background:rgba(255,255,255,0.12);
      border-left:4px solid var(--g3);
      color:#fff;font-size:14px;padding:10px 12px;margin-bottom:12px;border-radius:8px;
    }
    .note.ok{border-left-color:#22c55e;}

    .footer{
      margin-top:14px;text-align:center;font-size:12px;color:#fff;opacity:.85;
    }

    .link,
    .link:hover,
    .link:focus,
    .link:active,
    .link:visited{
      color:#fff;opacity:.95;font-weight:600;text-decoration:none;outline:0;
    }
    .link:hover{opacity:1;filter:brightness(1.15);}
    .link:focus-visible{
      box-shadow:0 0 0 3px rgba(255,255,255,.35);
      border-radius:6px;
    }

    @media(max-width:480px){.card{padding:26px 18px}.brand img{width:64px;height:64px}}
  </style>
</head>
<body>

  <div class="card">
    <div class="brand">
      @if($logo)
        <img src="{{ $logo }}" alt="{{ $name }} Logo">
      @else
        <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="Admin">
      @endif
      <h1>{{ $name }}</h1>
      <p><i class="fa-solid fa-lock"></i> Set New Password</p>
    </div>

    @if ($errors->any())
      <div class="note"><i class="fa-solid fa-triangle-exclamation"></i> {{ $errors->first() }}</div>
    @endif
    @if(session('status'))
      <div class="note ok"><i class="fa-solid fa-circle-check"></i> {{ session('status') }}</div>
    @endif

    <form method="POST" action="{{ route('admin.password.update') }}">
      @csrf
      {{-- যদি তোমার ফ্লোতে hidden email/otp দরকার হয়, এখানে রাখতে পারো --}}
      {{-- <input type="hidden" name="email" value="{{ session('admin_reset_email') }}"> --}}

      <div class="field">
        <label for="password">New Password</label>
        <input type="password" id="password" name="password" required placeholder="Enter new password">
        <button class="toggle" type="button" onclick="togglePw('password', this)" aria-label="Show/Hide password">
          <i class="fa-solid fa-eye"></i>
        </button>
      </div>

      <div class="field">
        <label for="password_confirmation">Confirm Password</label>
        <input type="password" id="password_confirmation" name="password_confirmation" required placeholder="Re-type new password">
        <button class="toggle" type="button" onclick="togglePw('password_confirmation', this)" aria-label="Show/Hide password">
          <i class="fa-solid fa-eye"></i>
        </button>
      </div>

      <button type="submit" class="btn"><i class="fa-solid fa-arrows-rotate"></i> Reset Password</button>
    </form>

    <div class="footer">
      <a href="{{ route('admin.login') }}" class="link"><i class="fa-solid fa-arrow-left"></i> Back to Login</a>
    </div>
  </div>

  <script>
    function togglePw(id, btn){
      const input = document.getElementById(id);
      const icon  = btn.querySelector('i');
      if(!input) return;
      if(input.type === 'password'){
        input.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
      }else{
        input.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
      }
    }
  </script>
</body>
</html>