@extends('layouts.app')

@section('title', 'User Login')

@section('content')
    <div class="mx-auto max-w-md rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        <h1 class="mb-4 text-2xl font-bold">User Login</h1>

        @if (session('status'))
            <div class="mb-4 rounded-lg border border-emerald-300 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
                {{ session('status') }}
            </div>
        @endif

        <a
            href="{{ route('user.google.redirect') }}"
            class="mb-4 flex w-full items-center justify-center gap-3 rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:border-slate-400 hover:bg-slate-50"
        >
            <svg class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
                <path fill="#EA4335" d="M12 10.2v3.9h5.5c-.2 1.2-.9 2.2-1.9 2.9l3.1 2.4c1.8-1.7 2.8-4.1 2.8-6.9 0-.7-.1-1.5-.2-2.2H12z"/>
                <path fill="#34A853" d="M12 21c2.6 0 4.8-.9 6.4-2.5l-3.1-2.4c-.9.6-2 .9-3.3.9-2.5 0-4.7-1.7-5.5-4H3.3v2.5A9.6 9.6 0 0012 21z"/>
                <path fill="#FBBC05" d="M6.5 13c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V6.5H3.3A9.6 9.6 0 002.4 11c0 1.5.4 2.9.9 4.2L6.5 13z"/>
                <path fill="#4285F4" d="M12 5.1c1.4 0 2.7.5 3.7 1.4l2.8-2.8C16.8 2.1 14.6 1 12 1A9.6 9.6 0 003.3 6.5L6.5 9c.8-2.3 3-3.9 5.5-3.9z"/>
            </svg>
            Continue with Google
        </a>

        <div class="mb-4 flex items-center gap-3 text-xs uppercase tracking-[0.25em] text-slate-400">
            <span class="h-px flex-1 bg-slate-200"></span>
            <span>or</span>
            <span class="h-px flex-1 bg-slate-200"></span>
        </div>

        <form action="{{ route('user.login.store') }}" method="post" class="space-y-4" data-client-validate novalidate>
            @csrf
            @if ($errors->any())
                <div class="rounded-lg border border-rose-300 bg-rose-50 px-3 py-2 text-sm text-rose-700">
                    {{ $errors->first() }}
                </div>
            @endif
            <div>
                <label for="email" class="block text-sm font-medium">Email</label>
                <input id="email" type="email" name="email" value="{{ old('email') }}" required maxlength="255" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2">
            </div>
            <div>
                <label for="password" class="block text-sm font-medium">Password</label>
                <div class="relative mt-1">
                    <input id="password" type="password" name="password" required maxlength="100" class="w-full rounded-lg border border-slate-300 px-3 py-2 pr-11">
                    <button
                        type="button"
                        id="toggle-password"
                        class="absolute inset-y-0 right-0 inline-flex items-center justify-center px-3 text-slate-500 hover:text-sky-700"
                        aria-label="Show password"
                        title="Show password"
                    >
                        <svg id="icon-eye" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2.46 12C3.73 7.94 7.52 5 12 5s8.27 2.94 9.54 7c-1.27 4.06-5.06 7-9.54 7s-8.27-2.94-9.54-7z"/>
                            <circle cx="12" cy="12" r="3" stroke-width="1.8"/>
                        </svg>
                        <svg id="icon-eye-off" class="hidden h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 3l18 18M10.58 10.58A2 2 0 0012 14a2 2 0 001.42-.58M9.88 5.08A9.63 9.63 0 0112 5c4.48 0 8.27 2.94 9.54 7a10.85 10.85 0 01-3.02 4.56M6.23 6.23A10.89 10.89 0 002.46 12C3.73 16.06 7.52 19 12 19a9.8 9.8 0 004.27-.93"/>
                        </svg>
                    </button>
                </div>
            </div>
            <label class="inline-flex items-center gap-2 text-sm">
                <input type="checkbox" name="remember" value="1">
                Remember me
            </label>
            <button class="btn-primary w-full rounded-lg px-4 py-2 font-semibold">Login</button>
            <p class="text-center text-sm text-slate-600">No account? <a href="{{ route('user.register') }}" class="text-sky-700">Register</a></p>
        </form>
    </div>

    <script>
        (function () {
            const password = document.getElementById('password');
            const toggle = document.getElementById('toggle-password');
            const eye = document.getElementById('icon-eye');
            const eyeOff = document.getElementById('icon-eye-off');

            if (!password || !toggle || !eye || !eyeOff) return;

            toggle.addEventListener('click', function () {
                const show = password.type === 'password';
                password.type = show ? 'text' : 'password';
                eye.classList.toggle('hidden', show);
                eyeOff.classList.toggle('hidden', !show);
                toggle.setAttribute('aria-label', show ? 'Hide password' : 'Show password');
                toggle.setAttribute('title', show ? 'Hide password' : 'Show password');
            });
        })();
    </script>
@endsection