<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>OKELaundry - Login Admin</title>
  @include('partials.favicon')
  @include('partials.brand-fonts')
  <style>
    :root{
      --brand-deep:#1f7fb7;--brand-main:#3aa5e6;--brand-accent:#4BB8FA;--brand-soft:#7BCBF6;
      --primary:#4BB8FA;--primary-dark:#3aa5e6;--primary-soft:#E5F2FB;
      --text:#0F172A;--muted:#5B6B80;--line:#D9E6F2;--bg:#F4F9FE;--bg-soft:#E5F2FB;--card:#FFFFFF;
      --shadow:0 24px 60px rgba(31,127,183,.10);
      font-family:'Plus Jakarta Sans',Inter,Segoe UI,Roboto,system-ui,sans-serif
    }
    *{box-sizing:border-box}
    body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);display:grid;place-items:center;padding:24px;position:relative;overflow:hidden}
    body::before,body::after{content:"";position:absolute;border-radius:50%;opacity:.55;filter:blur(2px);pointer-events:none}
    body::before{left:-90px;bottom:-90px;width:280px;height:280px;background:#C4E2F5}
    body::after{right:-120px;top:-120px;width:340px;height:340px;background:#E5F2FB}

    .shell{position:relative;z-index:1;width:100%;max-width:980px;background:#FBFDFE;border:1px solid #D9E6F2;border-radius:28px;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;gap:0}

    .left{padding:48px 44px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
    .left-inner{max-width:400px}
    .left-logo{margin:0 auto 14px;display:flex;align-items:center;justify-content:center}
    .left-logo .auto-logo{width:88px;height:88px;border-radius:24px;background:linear-gradient(135deg,#7BCBF6 0%,#4BB8FA 100%);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 18px 36px rgba(75,184,250,.3)}
    .left-logo .auto-logo svg{width:44px;height:44px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    .left h1{margin:6px 0 4px;font-size:34px;letter-spacing:-0.02em;color:var(--brand-deep);font-weight:800}
    .left .subtitle{color:var(--muted);font-size:14px;margin-bottom:14px;font-weight:600}
    .left p{color:#5b5249;font-size:14px;line-height:1.55;margin:0 0 28px}

    .features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .feature{display:flex;flex-direction:column;align-items:center;gap:8px}
    .feature .icon{width:42px;height:42px;border-radius:14px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center}
    .feature .icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    .feature .title{font-weight:800;font-size:13px;color:var(--brand-deep)}
    .feature .desc{font-size:11px;color:var(--muted);line-height:1.45;max-width:120px}

    .right{background:var(--card);padding:48px 44px;display:flex;align-items:center;border-left:1px solid #D9E6F2}
    .form-wrap{width:100%}
    .form-title{margin:0 0 6px;font-size:30px;font-weight:800;color:var(--brand-deep);text-align:center;letter-spacing:-0.02em}
    .form-sub{margin:0 0 26px;color:var(--muted);font-size:13px;text-align:center}
    .form-group{margin-bottom:16px}
    .form-group label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--text)}
    .input-wrap{position:relative;display:flex;align-items:center}
    .input-wrap .lead-icon{position:absolute;left:14px;color:#7a8aa3;display:flex}
    .input-wrap .lead-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    .input-main{width:100%;border:1px solid #D9E6F2;border-radius:12px;padding:13px 14px 13px 40px;background:#fff;color:var(--text);font-size:14px;transition:border-color .2s ease,box-shadow .2s ease}
    .input-main:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(75,184,250,.18)}
    .input-main::placeholder{color:#9aa9bd}
    .toggle-eye{position:absolute;right:10px;background:transparent;border:none;cursor:pointer;color:#7a8aa3;padding:6px;border-radius:8px;display:flex}
    .toggle-eye:hover{color:var(--primary)}
    .toggle-eye svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

    .error-box{background:#fff2f2;border:1px solid #efc0c0;color:var(--brand-accent);padding:12px;border-radius:12px;font-size:13px;margin-bottom:18px;font-weight:600}

    .btn-submit{width:100%;border:none;border-radius:12px;padding:14px 18px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#4BB8FA,#3aa5e6);color:#fff;box-shadow:0 14px 24px rgba(75,184,250,.28);font-size:15px;transition:transform .2s ease}
    .btn-submit:hover{transform:translateY(-1px)}
    .btn-submit:active{transform:translateY(0)}

    .back-link{display:block;text-align:center;margin-top:18px;font-size:13px;color:var(--muted);text-decoration:none}
    .back-link:hover{color:var(--primary);text-decoration:underline}

    @media (max-width:880px){
      .shell{grid-template-columns:1fr;max-width:480px}
      .right{border-left:none;border-top:1px solid #D9E6F2}
      .features{gap:12px}
      .left,.right{padding:34px 28px}
    }
  </style>
</head>
<body>
  <div class="shell">
    <div class="left">
      <div class="left-inner">
        <div class="left-logo">
          @if (!empty($brandLogoUrl))
            <img src="{{ $brandLogoUrl }}" alt="OKE Laundry" style="height:88px;width:88px;border-radius:24px;object-fit:cover;background:#fff" />
          @else
            <span class="auto-logo">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <circle cx="12" cy="13" r="6"/>
                <path d="M5 7h14l-1-3H6z"/>
                <circle cx="12" cy="13" r="2.4"/>
              </svg>
            </span>
          @endif
        </div>
        <h1>OKE LAUNDRY</h1>
        <div class="subtitle">Admin Panel</div>
        <p>Silakan masuk ke akun admin Anda untuk mengelola data pesanan, pelanggan, dan operasional laundry dengan mudah.</p>

        <div class="features">
          <div class="feature">
            <span class="icon">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 3v18h18"/><path d="M7 14l3-4 3 3 4-7"/></svg>
            </span>
            <div class="title">Kelola Pesanan</div>
            <div class="desc">Pantau semua pesanan laundry secara real-time</div>
          </div>
          <div class="feature">
            <span class="icon">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            </span>
            <div class="title">Data Pelanggan</div>
            <div class="desc">Kelola data pelanggan dengan mudah</div>
          </div>
          <div class="feature">
            <span class="icon">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M9 13h6M9 17h6M9 9h2"/></svg>
            </span>
            <div class="title">Laporan &amp; Rekap</div>
            <div class="desc">Lihat ringkasan dan laporan bisnis</div>
          </div>
        </div>
      </div>
    </div>

    <div class="right">
      <div class="form-wrap">
        <h2 class="form-title">Login Admin</h2>
        <p class="form-sub">Masukkan kredensial Anda untuk melanjutkan</p>

        @if ($errors->any())
          <div class="error-box" role="alert">
            @foreach ($errors->all() as $error)
              <div>{{ $error }}</div>
            @endforeach
          </div>
        @endif

        <form action="{{ route('login') }}" method="POST" novalidate>
          @csrf
          <div class="form-group">
            <label for="email">Email</label>
            <div class="input-wrap">
              <span class="lead-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/><path d="m22 6-10 7L2 6"/></svg>
              </span>
              <input type="email" id="email" name="email" class="input-main" placeholder="Masukkan email admin" value="{{ old('email') }}" required autofocus autocomplete="email" />
            </div>
          </div>

          <div class="form-group">
            <label for="password">Password</label>
            <div class="input-wrap">
              <span class="lead-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
              </span>
              <input type="password" id="password" name="password" class="input-main" placeholder="Masukkan password" required autocomplete="current-password" />
              <button type="button" class="toggle-eye" id="togglePwd" aria-label="Tampilkan password">
                <svg viewBox="0 0 24 24" id="eyeIcon">
                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z"/>
                  <circle cx="12" cy="12" r="3"/>
                </svg>
              </button>
            </div>
          </div>

          <button type="submit" class="btn-submit">Masuk</button>
        </form>

        <a href="/" class="back-link">← Kembali ke halaman tracking</a>
      </div>
    </div>
  </div>

  <script>
    (function(){
      const btn = document.getElementById('togglePwd');
      const inp = document.getElementById('password');
      const icon = document.getElementById('eyeIcon');
      btn?.addEventListener('click', () => {
        const isPwd = inp.type === 'password';
        inp.type = isPwd ? 'text' : 'password';
        // Tampilkan ikon "eye-off" saat terlihat
        if (isPwd) {
          icon.innerHTML = '<path d="M17.94 17.94A10.94 10.94 0 0 1 12 20C5 20 1 12 1 12a18.7 18.7 0 0 1 4.06-5.94"/><path d="M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 8 11 8a18.6 18.6 0 0 1-2.16 3.19"/><path d="M14.12 14.12a3 3 0 1 1-4.24-4.24"/><path d="M1 1l22 22"/>';
        } else {
          icon.innerHTML = '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z"/><circle cx="12" cy="12" r="3"/>';
        }
        btn.setAttribute('aria-label', isPwd ? 'Sembunyikan password' : 'Tampilkan password');
      });
    })();
  </script>
</body>
</html>
