<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Banknote — Login</title>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* 🎨 تم تحديث الألوان هنا لتطابق اللوجو تماماً 🎨 */
      --banknote-blue:      #0071BC; /* الأزرق الأساسي من اللوجو */
      --banknote-blue-dk:   #005A96; /* درجة أغمق للأزرق (للتأثيرات) */
      --banknote-green:     #39B54A; /* الأخضر الفاتح من اللوجو */
      
      /* ألوان الإضاءة والتوهج المشتقة من الأزرق الجديد */
      --glow-color:         rgba(0, 113, 188, 0.15);
      --light-bg-color:     rgba(0, 113, 188, 0.05);

      /* الألوان المحايدة للنصوص والحدود */
      --text:        #1a2535;
      --text-mid:    #4a6070;
      --muted:       #8fa3b1;
      --border:      #dde5ee;
      --input-bg:    #f5f7fa;
      --white:       #ffffff;
    }

    html, body {
      height: 100%;
      font-family: 'DM Sans', sans-serif;
      background: #f0f4f8;
      overflow: hidden;
    }

    /* ─── LAYOUT ──────────────────────────────────────── */
    .page {
      display: flex;
      height: 100vh;
    }

    /* ─── LEFT PANEL (تم التعديل لكي تغطيه الصورة بالكامل) ─── */
    .panel-l {
      flex: 1;
      position: relative;
      overflow: hidden;
      padding: 0; 
    }

    /* ── حاوية الصورة الكاملة ── */
    .full-image-container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .full-left-image {
      width: 100%;
      height: 100%;
      object-fit: cover; 
      object-position: center; 
    }

    /* تأثيرات الخلفية الجمالية تم الإبقاء عليها لتظهر فوق الصورة بشكل خفيف */
    .ring, .blob {
      position: absolute;
      pointer-events: none;
      z-index: 2;
      transition: transform .6s ease, opacity .6s ease;
    }

    .ring {
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .ring-1 { width: 440px; height: 440px; top: -160px; right: -160px; }
    .ring- ring-2 { width: 300px; height: 300px; bottom: -100px; left: -80px; }
    .ring- ring-3 { width: 180px; height: 180px; top: 42%; left: -60px; }

    .panel-l:hover .ring-1 { transform: scale(1.08) rotate(15deg); opacity: 0.15; }
    .panel-l:hover .ring-2 { transform: scale(1.10) rotate(-10deg); opacity: 0.15; }
    .panel-l:hover .ring-3 { transform: scale(1.15) rotate(20deg); opacity: 0.18; }

    .blob {
      border-radius: 50%;
      background: rgba(255,255,255,0.04);
      transition: transform .8s ease;
    }
    .blob-1 { width: 360px; height: 360px; top: -120px; right: -120px; }
    .blob-2 { width: 240px; height: 240px; bottom: -80px; left: -60px; }
    .panel-l:hover .blob-1 { transform: scale(1.12); }
    .panel-l:hover .blob-2 { transform: scale(1.15) translateX(10px); }

    /* ─── RIGHT PANEL ─────────────────────────────────── */
    .panel-r {
      flex: 1;
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 48px 52px;
      position: relative;
    }

    .sep {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 1px;
      background: linear-gradient(to bottom, transparent, var(--border) 20%, var(--border) 80%, transparent);
    }

    .fwrap {
      width: 100%;
      max-width: 380px;
      animation: riseIn .5s cubic-bezier(.22,1,.36,1) both;
    }

    @keyframes riseIn {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .fhdr { margin-bottom: 32px; }

    .fhdr h2 {
      font-size: 26px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -.4px;
      margin-bottom: 6px;
    }

    .fhdr p {
      font-size: 13.5px;
      color: var(--muted);
    }

    .alert {
      border-radius: 10px;
      padding: 12px 15px;
      font-size: 13px;
      margin-bottom: 20px;
      font-weight: 500;
    }
    .alert-danger {
      background: rgba(231,76,60,.06);
      border: 1px solid rgba(231,76,60,.18);
      color: #c0392b;
    }
    .alert ul { padding-left: 16px; list-style: disc; }

    .fg { margin-bottom: 18px; }

    .flbl {
      display: block;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--text-mid);
      margin-bottom: 8px;
      letter-spacing: .2px;
      transition: color .2s;
      cursor: default;
    }
    /* تأثير التحويم للون العنوان فرعي (Label) */
    .fg:hover .flbl { color: var(--banknote-blue); }

    .iw { position: relative; }

    .iico {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      pointer-events: none;
      display: flex;
      align-items: center;
      transition: color .2s, transform .2s cubic-bezier(.34,1.56,.64,1);
    }

    .iico svg { width: 16px; height: 16px; stroke-width: 1.9; }

    .fc {
      width: 100%;
      background: #f2f3f5;
      border: 1.5px solid #e2e5ea;
      border-radius: 11px;
      padding: 13px 14px 13px 44px;
      font-family: 'DM Sans', sans-serif;
      font-size: 13.5px;
      color: var(--text);
      outline: none;
      transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
    }
    .fc::placeholder { color: #b8c9d5; }

    .fc:hover:not(:focus) {
      border-color: #c4d0db;
      background: #f8f9fb;
      box-shadow: 0 3px 10px rgba(0,0,0,.05);
      transform: translateY(-1px);
    }
    .iw:hover .iico {
      color: var(--text-mid);
      transform: translateY(-50%) scale(1.1);
    }

    /* تأثير التركيز (Focus) على الحقل */
    .fc:focus {
      border-color: var(--banknote-blue); /* لون الإطار عند التركيز */
      background: #fff;
      box-shadow: 0 0 0 3.5px var(--glow-color), 0 4px 16px rgba(0,113,188,0.1);
      transform: translateY(-1px);
    }
    /* لون الأيقونة عند التركيز على الحقل */
    .fc:focus ~ .iico { color: var(--banknote-blue) !important; }

    .eyebtn {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: var(--muted);
      display: flex;
      padding: 5px;
      border-radius: 7px;
      transition: color .2s ease, background .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
    }
    .eyebtn:hover {
      color: var(--banknote-blue); /* لون زر العين عند التحويم */
      background: var(--light-bg-color); /* خلفية خفيفة */
      transform: translateY(-50%) scale(1.15);
    }
    .eyebtn svg { width: 16px; height: 16px; stroke-width: 1.9; }

    .fextras {
      display: flex;
      align-items: center;
      margin-bottom: 22px;
      font-size: 13px;
    }

    .cbwrap {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-mid);
      cursor: pointer;
      font-weight: 500;
      padding: 5px 8px;
      border-radius: 8px;
      margin: -5px -8px;
      transition: background .2s, color .2s;
    }
    .cbwrap:hover {
      background: var(--light-bg-color);
      color: var(--banknote-blue);
    }
    .cbwrap input {
      width: 15px;
      height: 15px;
      accent-color: var(--banknote-blue); /* لون مربع الاختيار (Checkbox) */
      cursor: pointer;
      transition: transform .2s;
    }
    .cbwrap:hover input { transform: scale(1.15); }

    /* ─── زر تسجيل الدخول (BSUB) - تم تحديث الألوان ─── */
    .bsub {
      width: 100%;
      padding: 14px;
      /* 🎨 استخدام تدرج لوني يعتمد على الأزرق والأخضر من اللوجو 🎨 */
      background: linear-gradient(135deg, var(--banknote-blue) 0%, var(--banknote-blue-dk) 60%, var(--banknote-green) 100%);
      border: none;
      border-radius: 11px;
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .2px;
      cursor: pointer;
      /* توهج أزرق */
      box-shadow: 0 5px 20px rgba(0, 113, 188, 0.35);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .22s ease;
    }

    .bsub::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 60%);
      pointer-events: none;
      transition: opacity .22s;
    }

    .bsub:hover {
      transform: translateY(-3px) scale(1.01);
      /* توهج أقوى عند التحويم */
      box-shadow: 0 14px 34px rgba(0, 113, 188, 0.45), 0 4px 12px rgba(0, 113, 188, 0.25);
    }
    .bsub:hover::after  { opacity: .7; }

    .bsub:active {
      transform: translateY(0) scale(.98);
      box-shadow: 0 4px 14px rgba(0, 113, 188, 0.3);
    }

    .bsub:hover .btn-icon {
      transform: translateX(3px) rotate(-8deg);
    }
    .btn-icon {
      display: flex;
      transition: transform .25s cubic-bezier(.34,1.56,.64,1);
    }
    .btn-icon svg { width: 17px; height: 17px; stroke-width: 2; }

    /* ─── RESPONSIVE ──────────────────────────────────── */
    @media (max-width: 820px) {
      .panel-l { display: none; }
      .panel-r { flex: 1; }
    }
  </style>
</head>
<body>
<div class="page">

  <!-- ═══════════ LEFT PANEL (FULL IMAGE) ═══════════ -->
  <div class="panel-l">
    <div class="full-image-container">
      <!-- رابط الصورة الخاصة بك -->
      <img src="<?php echo e(asset('banknotelogo.jpeg')); ?>" alt="Banknote Background" class="full-left-image">
    </div>

    <!-- تأثيرات الخلفية الجمالية -->
    <div class="ring ring-1"></div>
    <div class="ring ring-2"></div>
    <div class="ring ring-3"></div>
    <div class="blob blob-1"></div>
    <div class="blob blob-2"></div>
  </div>

  <!-- ═══════════ RIGHT PANEL ═══════════ -->
  <div class="panel-r">
    <div class="sep"></div>

    <div class="fwrap">
      <div class="fhdr">
        <h2>Welcome Back 👋</h2>
        <p>Please log in to access your dashboard</p>
      </div>
<?php if($errors->any()): ?>
  <div class="alert alert-danger">
    <ul>
      <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <li><?php echo e($error); ?></li>
      <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </ul>
  </div>
<?php endif; ?>
      <form method="post" action="<?php echo e(route('admin.login.store')); ?>" novalidate>
        <?php echo e(csrf_field()); ?>


        <!-- Terminal ID -->
        <div class="fg">
          <label class="flbl" for="terminal-id">Terminal ID</label>
          <div class="iw">
            <input type="text" id="terminal-id" name="terminal_id" class="fc" placeholder="Terminal ID" required>
            <span class="iico">
              <i data-lucide="cpu"></i>
            </span>
          </div>
        </div>

        <!-- Password -->
        <div class="fg">
          <label class="flbl" for="user-password">Password</label>
          <div class="iw">
            <input type="password" id="user-password" name="password" class="fc" placeholder="••••••••" required>
            <span class="iico" id="passIco">
              <i data-lucide="lock"></i>
            </span>
            <button type="button" class="eyebtn" id="eyeBtn" onclick="togglePass()" title="Toggle password visibility">
              <i data-lucide="eye" id="eyeIcon"></i>
            </button>
          </div>
        </div>

        <!-- Remember -->
        <div class="fextras">
          <label class="cbwrap">
            <input type="checkbox" name="remember">
            Remember me
          </label>
        </div>

        <button type="submit" class="bsub">
          <span class="btn-icon">
            <i data-lucide="log-in"></i>
          </span>
          Login Now
        </button>
      </form>
    </div>
  </div>

</div>

<script>
  lucide.createIcons();
  const emailInput = document.getElementById('terminal-id');
  const passInput  = document.getElementById('user-password');
  const emailIco = emailInput.closest('.iw').querySelector('.iico');
  const passIco  = passInput.closest('.iw').querySelector('.iico');

  // جلب متغيرات الألوان الجديدة من CSS
  const styles = getComputedStyle(document.documentElement);
  const banknoteBlue = styles.getPropertyValue('--banknote-blue').trim();

  // تحديث تأثير اللون عند التركيز (Focus) في الـ JavaScript
  emailInput.addEventListener('focus', () => emailIco.style.color = banknoteBlue);
  emailInput.addEventListener('blur',  () => emailIco.style.color = '');
  passInput.addEventListener('focus',  () => passIco.style.color  = banknoteBlue);
  passInput.addEventListener('blur',   () => passIco.style.color  = '');

  let visible = false;
  function togglePass() {
    visible = !visible;
    passInput.type = visible ? 'text' : 'password';
    const btn = document.getElementById('eyeBtn');
    btn.innerHTML = visible
      ? '<i data-lucide="eye-off"></i>'
      : '<i data-lucide="eye"></i>';
    lucide.createIcons();
  }
</script>
</body>
</html><?php /**PATH /home/erppanel/public_html/banknote.roayapay.com/resources/views/admin/login.blade.php ENDPATH**/ ?>