@extends('layouts.app')
@section('title','Login')
@section('content')
<div class="mx-auto flex min-h-screen max-w-md items-center px-5 py-10">
<div class="w-full"><div class="mb-8"><p class="text-sm font-semibold uppercase tracking-wide text-slate-500">Welcome back</p><h1 class="mt-2 text-3xl font-black">Login to your account</h1><p class="mt-2 text-sm text-slate-500">Use your email address or phone number.</p></div>
<form id="login-form" class="vtu-card space-y-4"><div><label class="vtu-label">Email or phone</label><input name="login" class="vtu-input" required autocomplete="username"></div><div><label class="vtu-label">Password</label><input name="password" type="password" class="vtu-input" required autocomplete="current-password"></div><label class="flex items-center gap-2 text-sm"><input name="remember" type="checkbox"> Remember me</label><div id="login-error" class="hidden rounded-2xl bg-red-50 px-4 py-3 text-sm text-red-700"></div><button class="vtu-btn-primary w-full">Login</button><div class="flex items-center justify-between text-sm"><a href="/forgot-password" class="font-semibold text-slate-700">Forgot password?</a><a href="/register" class="font-semibold text-slate-950">Create account</a></div></form></div></div>
<script>
document.getElementById('login-form').addEventListener('submit',async e=>{e.preventDefault();const f=e.currentTarget,b=document.getElementById('login-error');b.classList.add('hidden');try{await axios.get('/sanctum/csrf-cookie');const r=await axios.post('/session/login',{login:f.login.value,password:f.password.value,remember:f.remember.checked});window.location.href=r.data.redirect;}catch(x){b.textContent=x.response?.data?.message||Object.values(x.response?.data?.errors||{}).flat().join(' ')||'Unable to login.';b.classList.remove('hidden');}});
</script>
@endsection