@extends('layouts.app')

@section('title', 'Sign In – Customer & Admin Portal | MotoSolution Bangladesh')

@section('content')
<div class="min-h-[80vh] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 bg-[#0B0F19] relative overflow-hidden">
    <!-- Ambient Japanese Red Background Glow -->
    <div class="absolute top-1/4 left-1/2 -translate-x-1/2 w-96 h-96 bg-red-600/10 rounded-full blur-3xl pointer-events-none"></div>

    <div class="max-w-md w-full space-y-8 bg-[#111827] border border-white/10 p-8 rounded-2xl shadow-2xl relative z-10">
        <div class="text-center">
            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-red-600 to-red-800 flex items-center justify-center text-white font-extrabold text-2xl mx-auto shadow-lg shadow-red-900/40">
                M
            </div>
            <h2 class="mt-4 text-2xl font-bold text-white font-heading">Welcome Back</h2>
            <p class="mt-1 text-xs text-slate-400">Sign in to your customer bidding dashboard or CRM console</p>
        </div>

        @if($errors->any())
            <div class="bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs p-3 rounded-xl">
                <ul class="list-disc pl-4 space-y-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form class="mt-6 space-y-4" method="POST" action="{{ route('login') }}">
            @csrf
            <div>
                <label for="email" class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-1">Email Address</label>
                <input id="email" name="email" type="email" autocomplete="email" required value="{{ old('email') }}" 
                    class="w-full px-4 py-2.5 bg-black/40 border border-white/10 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-red-500 text-sm">
            </div>

            <div>
                <div class="flex items-center justify-between mb-1">
                    <label for="password" class="block text-xs font-semibold text-slate-300 uppercase tracking-wider">Password</label>
                    <a href="{{ route('password.request') }}" class="text-xs text-red-400 hover:underline">Forgot password?</a>
                </div>
                <input id="password" name="password" type="password" autocomplete="current-password" required
                    class="w-full px-4 py-2.5 bg-black/40 border border-white/10 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-red-500 text-sm">
            </div>

            <div class="flex items-center justify-between text-xs">
                <label class="flex items-center gap-2 cursor-pointer text-slate-300">
                    <input type="checkbox" name="remember" class="rounded bg-black/40 border-white/10 text-red-600 focus:ring-0">
                    <span>Remember me</span>
                </label>
            </div>

            <button type="submit" class="w-full py-3 px-4 bg-red-600 hover:bg-red-700 text-white text-sm font-bold rounded-xl shadow-lg shadow-red-900/30 transition flex items-center justify-center gap-2">
                <i class="fa-solid fa-arrow-right-to-bracket"></i>
                <span>Sign In to Portal</span>
            </button>
        </form>

        <!-- Quick Demo Credentials Login for instant testing -->
        <div class="pt-6 border-t border-white/10">
            <p class="text-[11px] font-bold uppercase tracking-wider text-slate-400 text-center mb-3">Instant Demo Credentials</p>
            <div class="grid grid-cols-2 gap-2 text-xs">
                <button type="button" onclick="fillLogin('admin@motosolbd.com', 'password')" class="p-2.5 bg-white/5 hover:bg-white/10 rounded-xl border border-white/10 text-left transition">
                    <p class="font-bold text-red-400">Super Admin</p>
                    <p class="text-[10px] text-slate-400">admin@motosolbd.com</p>
                </button>
                <button type="button" onclick="fillLogin('tanvir.ahmed@gmail.com', 'password')" class="p-2.5 bg-white/5 hover:bg-white/10 rounded-xl border border-white/10 text-left transition">
                    <p class="font-bold text-emerald-400">Customer (Tanvir)</p>
                    <p class="text-[10px] text-slate-400">tanvir.ahmed@gmail.com</p>
                </button>
            </div>
        </div>

        <p class="text-center text-xs text-slate-400">
            Don't have an account yet? 
            <a href="{{ route('register') }}" class="font-bold text-red-400 hover:underline">Register now</a>
        </p>
    </div>
</div>

<script>
    function fillLogin(email, password) {
        document.getElementById('email').value = email;
        document.getElementById('password').value = password;
    }
</script>
@endsection