<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reports — 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 {
      --teal:        #00b09b;
      --teal-dk:     #008f7a;
      --teal-deep:   #006b5c;
      --teal-glow:   rgba(0,176,155,.22);
      --teal-lt:     rgba(0,176,155,.10);

      --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;
      background: linear-gradient(150deg, #00c9b1 0%, #009e8a 38%, #006f6a 72%, #004f6e 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 52px 56px;
      position: relative;
      overflow: hidden;
    }

    .ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.12);
      pointer-events: none;
      transition: transform .6s ease, opacity .6s ease;
    }
    .ring-1 { width: 440px; height: 440px; top: -160px; right: -160px; }
    .ring-2 { width: 300px; height: 300px; bottom: -100px; left: -80px; }
    .ring-3 { width: 180px; height: 180px; top: 42%; left: -60px; }

    /* rings animate on panel hover */
    .panel-l:hover .ring-1 { transform: scale(1.08) rotate(15deg); opacity: .2; }
    .panel-l:hover .ring-2 { transform: scale(1.10) rotate(-10deg); opacity: .2; }
    .panel-l:hover .ring-3 { transform: scale(1.15) rotate(20deg); opacity: .22; }

    .blob {
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,.06);
      filter: blur(0px);
      pointer-events: none;
      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); }

    .pcontent {
      position: relative;
      z-index: 1;
      color: #fff;
      width: 100%;
      max-width: 400px;
    }

    /* ── logo mark ── */
    .plogo {
      width: 72px;
      height: 72px;
      background: rgba(255,255,255,.18);
      border: 1px solid rgba(255,255,255,.30);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 28px;
      box-shadow: 0 8px 30px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.25);
      backdrop-filter: blur(10px);
      cursor: default;
      /* HOVER: logo spins slightly and glows */
      transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .3s ease;
    }
    .plogo:hover {
      transform: rotate(-8deg) scale(1.1);
      background: rgba(255,255,255,.28);
      box-shadow: 0 12px 40px rgba(0,0,0,.25), 0 0 0 6px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.35);
    }

    .ptitle {
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -.6px;
      margin-bottom: 10px;
    }

    .psub {
      font-size: 14px;
      line-height: 1.75;
      opacity: .78;
      margin-bottom: 38px;
      max-width: 320px;
    }

    /* ── stat pills ── */
    .stats-row {
      display: flex;
      gap: 12px;
      margin-bottom: 36px;
    }

    .spill {
      flex: 1;
      background: rgba(255,255,255,.13);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 14px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      backdrop-filter: blur(8px);
      cursor: default;
      /* HOVER: pill lifts and brightens */
      transition: transform .25s cubic-bezier(.34,1.56,.64,1),
                  background .25s ease,
                  border-color .25s ease,
                  box-shadow .25s ease;
    }
    .spill:hover {
      transform: translateY(-5px) scale(1.04);
      background: rgba(255,255,255,.22);
      border-color: rgba(255,255,255,.40);
      box-shadow: 0 12px 28px rgba(0,0,0,.18);
    }

    /* icon inside pill bounces on pill hover */
    .spill:hover .spill-icon {
      transform: scale(1.15) rotate(-5deg);
    }

    .spill-icon {
      width: 36px;
      height: 36px;
      background: rgba(255,255,255,.18);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease;
    }
    .spill:hover .spill-icon {
      background: rgba(255,255,255,.28);
    }

    .spill-icon svg { stroke: #fff; }

    .sl {
      font-size: 11px;
      opacity: .75;
      text-align: center;
      line-height: 1.3;
      font-weight: 500;
      transition: opacity .25s;
    }
    .spill:hover .sl { opacity: 1; }

    /* ── feature list ── */
    .flist {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 13px;
    }

    .fi {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13.5px;
      font-weight: 500;
      opacity: .9;
      cursor: default;
      border-radius: 10px;
      padding: 6px 8px;
      margin: -6px -8px;
      /* HOVER: row slides right and highlights */
      transition: transform .22s cubic-bezier(.34,1.56,.64,1),
                  background .22s ease,
                  opacity .22s ease;
    }
    .fi:hover {
      transform: translateX(6px);
      background: rgba(255,255,255,.10);
      opacity: 1;
    }

    .fic {
      width: 34px;
      height: 34px;
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.20);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      /* HOVER: icon container glows */
      transition: background .22s ease, border-color .22s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
    }
    .fi:hover .fic {
      background: rgba(255,255,255,.26);
      border-color: rgba(255,255,255,.38);
      transform: scale(1.12);
    }

    .fic svg { stroke: rgba(255,255,255,.95); }

    /* ─── 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);
    }

    /* form wrapper */
    .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-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--teal-lt);
      color: var(--teal-dk);
      border: 1px solid rgba(0,176,155,.18);
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 11.5px;
      font-weight: 700;
      margin-bottom: 16px;
      letter-spacing: .3px;
      text-transform: uppercase;
      /* HOVER: badge pulses */
      cursor: default;
      transition: background .22s, border-color .22s, transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
    }
    .fhdr-badge:hover {
      background: rgba(0,176,155,.18);
      border-color: rgba(0,176,155,.35);
      transform: scale(1.05);
      box-shadow: 0 4px 14px rgba(0,176,155,.18);
    }

    .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);
    }

    /* alerts */
    .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; }

    /* ── form group ── */
    .fg { margin-bottom: 18px; }

    .flbl {
      display: block;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--text-mid);
      margin-bottom: 8px;
      letter-spacing: .2px;
      /* HOVER: label color shifts */
      transition: color .2s;
      cursor: default;
    }
    .fg:hover .flbl { color: var(--teal-dk); }

    .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);
    }

    /* ── INPUT: the star of the show ── */
    .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;
      /* HOVER + FOCUS transitions */
      transition: border-color .22s ease,
                  background .22s ease,
                  box-shadow .22s ease,
                  transform .22s ease;
    }
    .fc::placeholder { color: #b8c9d5; }

    /* HOVER (not focused) */
    .fc:hover:not(:focus) {
      border-color: #c4d0db;
      background: #f8f9fb;
      box-shadow: 0 3px 10px rgba(0,0,0,.05);
      transform: translateY(-1px);
    }
    /* icon follows input hover */
    .iw:hover .iico:not([style*="teal"]) {
      color: var(--text-mid);
      transform: translateY(-50%) scale(1.1);
    }

    /* FOCUS */
    .fc:focus {
      border-color: var(--teal);
      background: #fff;
      box-shadow: 0 0 0 3.5px var(--teal-glow), 0 4px 16px rgba(0,176,155,.1);
      transform: translateY(-1px);
    }
    .fc:focus ~ .iico { color: var(--teal); }

    /* eye button */
    .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;
      /* HOVER: eye button gets a teal bg pill */
      transition: color .2s ease, background .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
    }
    .eyebtn:hover {
      color: var(--teal);
      background: var(--teal-lt);
      transform: translateY(-50%) scale(1.15);
    }
    .eyebtn:active { transform: translateY(-50%) scale(.95); }

    /* ── checkbox row ── */
    .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;
      /* HOVER: checkbox row gets subtle bg */
      transition: background .2s, color .2s;
    }
    .cbwrap:hover {
      background: var(--teal-lt);
      color: var(--teal-dk);
    }
    .cbwrap input {
      width: 15px;
      height: 15px;
      accent-color: var(--teal);
      cursor: pointer;
      /* small scale on hover */
      transition: transform .2s;
    }
    .cbwrap:hover input { transform: scale(1.15); }

    /* ── SUBMIT BUTTON ── */
    .bsub {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dk) 60%, var(--teal-deep) 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,176,155,.35);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      /* HOVER: lift + stronger glow */
      transition: transform .22s cubic-bezier(.34,1.56,.64,1),
                  box-shadow .22s ease,
                  background .22s ease;
    }

    /* sheen layer */
    .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;
    }

    /* ripple layer */
    .bsub::before {
      content: '';
      position: absolute;
      width: 200%;
      height: 200%;
      top: -50%;
      left: -110%;
      background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
      transition: left .5s ease;
      pointer-events: none;
    }

    .bsub:hover {
      transform: translateY(-3px) scale(1.01);
      box-shadow: 0 14px 34px rgba(0,176,155,.45), 0 4px 12px rgba(0,176,155,.25);
    }
    .bsub:hover::before { left: 110%; }  /* sweep shine across */
    .bsub:hover::after  { opacity: .7; }

    .bsub:active {
      transform: translateY(0) scale(.98);
      box-shadow: 0 4px 14px rgba(0,176,155,.3);
    }

    /* icon inside button spins slightly on hover */
    .bsub:hover .btn-icon {
      transform: translateX(3px) rotate(-8deg);
    }
    .btn-icon {
      display: flex;
      transition: transform .25s cubic-bezier(.34,1.56,.64,1);
    }

    /* footer */
    .ffoot {
      text-align: center;
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
    }

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

  <!-- ═══════════ LEFT ═══════════ -->
  <div class="panel-l">
    <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 class="pcontent">
      <div class="plogo">
        <i data-lucide="bar-chart-2" style="width:34px;height:34px;stroke:white;stroke-width:1.8"></i>
      </div>

      <div class="ptitle">Reporting System</div>
      <div class="psub">
        An intelligent platform for managing financial reports, uploading Excel invoices, and monitoring merchant operations with high precision.
      </div>

      <div class="stats-row">
        <div class="spill">
          <div class="spill-icon">
            <i data-lucide="folder-open" style="width:18px;height:18px;stroke-width:1.8"></i>
          </div>
          <span class="sl">Uploaded<br>Files</span>
        </div>
        <div class="spill">
          <div class="spill-icon">
            <i data-lucide="banknote" style="width:18px;height:18px;stroke-width:1.8"></i>
          </div>
          <span class="sl">Total<br>Volume</span>
        </div>
        <div class="spill">
          <div class="spill-icon">
            <i data-lucide="store" style="width:18px;height:18px;stroke-width:1.8"></i>
          </div>
          <span class="sl">Active<br>Merchants</span>
        </div>
      </div>

      <ul class="flist">
        <li class="fi">
          <div class="fic"><i data-lucide="upload" style="width:16px;height:16px;stroke-width:1.9"></i></div>
          <span>Seamless Excel Uploads</span>
        </li>
        <li class="fi">
          <div class="fic"><i data-lucide="trending-up" style="width:16px;height:16px;stroke-width:1.9"></i></div>
          <span>Advanced Data Analytics</span>
        </li>
        <li class="fi">
          <div class="fic"><i data-lucide="search" style="width:16px;height:16px;stroke-width:1.9"></i></div>
          <span>Search by Merchant or Terminal</span>
        </li>
        <li class="fi">
          <div class="fic"><i data-lucide="receipt" style="width:16px;height:16px;stroke-width:1.9"></i></div>
          <span>Detailed Invoicing &amp; Logs</span>
        </li>
      </ul>
    </div>
  </div>

  <!-- ═══════════ RIGHT ═══════════ -->
  <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>

      <form method="post" action="<?php echo e(route('admin.login.store')); ?>" novalidate>
        <?php echo e(csrf_field()); ?>


        <!-- Email -->
        <div class="fg">
          <label class="flbl" for="user-email">Email Address</label>
          <div class="iw">
            <input
              type="text"
              id="user-email"
              name="email"
              class="fc"
              placeholder="example@domain.com"
              value="<?php echo e(old('email')); ?>"
              required
            >
            <span class="iico" id="emailIco">
              <i data-lucide="mail" style="width:16px;height:16px;stroke-width:1.9"></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" style="width:16px;height:16px;stroke-width:1.9"></i>
            </span>
            <button type="button" class="eyebtn" id="eyeBtn" onclick="togglePass()" title="Toggle password visibility">
              <i data-lucide="eye" id="eyeIcon" style="width:16px;height:16px;stroke-width:1.9"></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" style="width:17px;height:17px;stroke-width:2"></i>
          </span>
          Login Now
        </button>
      </form>
    </div>
  </div>

</div>

<script>
  lucide.createIcons();

  const emailInput = document.getElementById('user-email');
  const passInput  = document.getElementById('user-password');
  const emailIco   = document.getElementById('emailIco');
  const passIco    = document.getElementById('passIco');

  emailInput.addEventListener('focus', () => emailIco.style.color = 'var(--teal)');
  emailInput.addEventListener('blur',  () => emailIco.style.color = '');
  passInput.addEventListener('focus',  () => passIco.style.color  = 'var(--teal)');
  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" style="width:16px;height:16px;stroke-width:1.9"></i>'
      : '<i data-lucide="eye"     style="width:16px;height:16px;stroke-width:1.9"></i>';
    lucide.createIcons();
  }
</script>
</body>
</html><?php /**PATH /home/gamcoiraq/sctlold.gamcoiraq.com/resources/views/admin/login.blade.php ENDPATH**/ ?>