 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>eTailorz — Login</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  body { font-family: 'Inter', sans-serif; }
  .font-display { font-family: 'Sora', sans-serif; }
  .stitch-border {
    background-image: repeating-linear-gradient(90deg, #F57C00 0, #F57C00 8px, transparent 8px, transparent 16px);
    background-size: 16px 2px; background-repeat: repeat-x; background-position: top;
  }
</style>
</head>
<body class="min-h-screen" style="background:#FFF9F0;">

<div class="min-h-screen flex">

  <div class="hidden lg:flex lg:w-1/2 relative overflow-hidden" style="background:#5E35B1;">
    <div class="relative z-10 flex flex-col justify-between p-12 text-white w-full">
            <div class="flex items-center gap-3">
        <div style="width:38px; height:38px; min-width:38px; border-radius:10px; background:white; display:flex; align-items:center; justify-content:center; padding:2px;">
            <img src="{{ asset('images/logo.png') }}" alt="eTailorz"
                style="width:100%; height:100%; object-fit:contain; display:block;">
        </div>
        <span class="font-display font-semibold text-xl">eTailorz</span>
        </div>
      <div>
        <h1 class="font-display font-bold text-4xl leading-tight mb-4">Every stitch,<br>every shop,<br>one dashboard.</h1>
        <p class="text-white/70 text-base max-w-sm">Manage measurements, orders and payments across all your shop branches.</p>
      </div>
      <div></div>
    </div>
  </div>

  <div class="flex-1 flex items-center justify-center p-8">
    <div class="w-full max-w-sm">

      <h2 class="font-display font-semibold text-2xl mb-1" style="color:#1A1625;">Welcome back</h2>
      <p class="text-sm mb-8" style="color:#6b6470;">Sign in to your shop dashboard.</p>

      @if ($errors->any())
        <div class="mb-4 text-sm rounded-lg px-4 py-3" style="background:#FCEBEB; color:#791F1F;">
          {{ $errors->first() }}
        </div>
      @endif

      <form method="POST" action="{{ route('login') }}" class="space-y-4">
        @csrf

        <div>
          <label class="block text-xs font-medium mb-1.5" style="color:#1A1625;">Phone number</label>
          <input type="text" name="phone" value="{{ old('phone') }}" placeholder="e.g. 9894569856" required autofocus
            class="w-full px-4 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8; background:white;">
        </div>

        <div>
          <div class="flex items-center justify-between mb-1.5">
            <label class="block text-xs font-medium" style="color:#1A1625;">Password</label>
           <a href="{{ route('password.help') }}" class="text-xs font-medium" style="color:#C2185B;">Forgot?</a>
          </div>
          <input type="password" name="password" placeholder="••••••••" required
            class="w-full px-4 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8; background:white;">
        </div>

        <label class="flex items-center gap-2 text-xs pt-1" style="color:#6b6470;">
          <input type="checkbox" name="remember" class="rounded" style="accent-color:#C2185B;"> Remember me for 30 days
        </label>

        <button type="submit" class="w-full py-2.5 rounded-lg font-medium text-sm text-white mt-2" style="background:#C2185B;">
          Sign in
        </button>
      </form>

      <div class="mt-8 pt-6 stitch-border">
        <p class="text-xs text-center pt-4" style="color:#a19a8f;">Super Admin · Shop Owner · Staff login — same form, different dashboard</p>
      </div>

    </div>
  </div>

</div>

</body>
</html>
