@extends('layouts.auth')
@section('title', 'Sign In')

@section('content')
<h2 class="text-xl font-bold text-gray-900 mb-6">Sign in to your account</h2>

<form method="POST" action="{{ route('login') }}" class="space-y-4">
    @csrf
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1" for="email">Email address</label>
        <input type="email" id="email" name="email" value="{{ old('email') }}" required autofocus
               class="form-input @error('email') border-red-400 @enderror"
               placeholder="you@business.com">
        @error('email')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
    </div>

    <div>
        <div class="flex justify-between items-center mb-1">
            <label class="text-sm font-medium text-gray-700" for="password">Password</label>
            <a href="#" class="text-xs text-indigo-600 hover:underline">Forgot password?</a>
        </div>
        <div class="relative" x-data="{ show: false }">
            <input :type="show ? 'text' : 'password'" id="password" name="password" required
                   class="form-input pr-10 @error('password') border-red-400 @enderror"
                   placeholder="••••••••">
            <button type="button" @click="show=!show"
                    class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
                <svg x-show="!show" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                </svg>
                <svg x-show="show" x-cloak class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
                </svg>
            </button>
        </div>
    </div>

    <div class="flex items-center gap-2">
        <input type="checkbox" id="remember" name="remember" class="rounded border-gray-300 text-indigo-600">
        <label for="remember" class="text-sm text-gray-600">Remember me</label>
    </div>

    <button type="submit" class="btn-primary">Sign in</button>
</form>

<p class="mt-6 text-center text-sm text-gray-500">
    Don't have an account?
    <a href="{{ route('register') }}" class="text-indigo-600 font-medium hover:underline">Create one free</a>
</p>
@endsection