@extends('layouts.app')

@section('title', 'Sign In & 1-Click Demo Portals — Abu Dhabi Auto Care')

@section('content')
<div class="py-16 bg-slate-950 min-h-screen">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-10">

        <!-- Top Heading -->
        <div class="text-center space-y-2 max-w-xl mx-auto">
            <span class="inline-block px-3.5 py-1 text-xs font-bold rounded-full bg-sky-500/10 text-sky-400 border border-sky-500/20">
                ROLE-BASED PORTAL ACCESS
            </span>
            <h1 class="text-3xl sm:text-4xl font-black text-white tracking-tight">
                Sign In to Workshop Portal
            </h1>
            <p class="text-slate-400 text-xs sm:text-sm">
                Access your real-time vehicle progress, workshop floor jobs, or administration dashboards.
            </p>
        </div>

        <!-- 1-CLICK INSTANT DEMO ROLES (No typing required) -->
        <div class="space-y-4">
            <div class="flex items-center justify-between">
                <h2 class="text-xs font-bold text-slate-400 uppercase tracking-widest flex items-center">
                    <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse mr-2"></span>
                    Instant 1-Click Demo Login
                </h2>
                <span class="text-[11px] text-slate-500">Click any card to enter portal immediately</span>
            </div>

            <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
                <!-- Demo 1: Super Admin -->
                <a href="{{ route('login.demo', 'super_admin') }}" class="p-4 sm:p-5 rounded-2xl bg-slate-900 border border-slate-800 hover:border-amber-500/60 transition group flex flex-col justify-between shadow-xl hover:-translate-y-1 duration-200">
                    <div>
                        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-amber-500/15 text-amber-400 flex items-center justify-center mb-3 border border-amber-500/20">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                        </div>
                        <h3 class="text-xs sm:text-sm font-black text-white group-hover:text-amber-300">Super Admin</h3>
                        <p class="text-[10px] sm:text-[11px] text-slate-400 mt-1 leading-relaxed line-clamp-2">
                            Full control: settings, user roles & finances.
                        </p>
                    </div>
                    <div class="mt-3 pt-2.5 border-t border-slate-800/80 flex items-center justify-between text-[11px] sm:text-xs font-bold text-amber-400">
                        <span>1-Click</span>
                        <span class="font-mono">➔</span>
                    </div>
                </a>

                <!-- Demo 2: Workshop Admin -->
                <a href="{{ route('login.demo', 'admin') }}" class="p-4 sm:p-5 rounded-2xl bg-slate-900 border border-slate-800 hover:border-sky-500/60 transition group flex flex-col justify-between shadow-xl hover:-translate-y-1 duration-200">
                    <div>
                        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-sky-500/15 text-sky-400 flex items-center justify-center mb-3 border border-sky-500/20">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                        </div>
                        <h3 class="text-xs sm:text-sm font-black text-white group-hover:text-sky-300">Workshop Admin</h3>
                        <p class="text-[10px] sm:text-[11px] text-slate-400 mt-1 leading-relaxed line-clamp-2">
                            Intake orders, change workshop stages & clients.
                        </p>
                    </div>
                    <div class="mt-3 pt-2.5 border-t border-slate-800/80 flex items-center justify-between text-[11px] sm:text-xs font-bold text-sky-400">
                        <span>1-Click</span>
                        <span class="font-mono">➔</span>
                    </div>
                </a>

                <!-- Demo 3: Technician / Staff -->
                <a href="{{ route('login.demo', 'technician') }}" class="p-4 sm:p-5 rounded-2xl bg-slate-900 border border-slate-800 hover:border-emerald-500/60 transition group flex flex-col justify-between shadow-xl hover:-translate-y-1 duration-200">
                    <div>
                        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-emerald-500/15 text-emerald-400 flex items-center justify-center mb-3 border border-emerald-500/20">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        </div>
                        <h3 class="text-xs sm:text-sm font-black text-white group-hover:text-emerald-300">Technician</h3>
                        <p class="text-[10px] sm:text-[11px] text-slate-400 mt-1 leading-relaxed line-clamp-2">
                            Assigned workshop floor jobs & booth logs.
                        </p>
                    </div>
                    <div class="mt-3 pt-2.5 border-t border-slate-800/80 flex items-center justify-between text-[11px] sm:text-xs font-bold text-emerald-400">
                        <span>1-Click</span>
                        <span class="font-mono">➔</span>
                    </div>
                </a>

                <!-- Demo 4: Client -->
                <a href="{{ route('login.demo', 'client') }}" class="p-4 sm:p-5 rounded-2xl bg-slate-900 border border-slate-800 hover:border-purple-500/60 transition group flex flex-col justify-between shadow-xl hover:-translate-y-1 duration-200">
                    <div>
                        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-purple-500/15 text-purple-400 flex items-center justify-center mb-3 border border-purple-500/20">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                        </div>
                        <h3 class="text-xs sm:text-sm font-black text-white group-hover:text-purple-300">Vehicle Client</h3>
                        <p class="text-[10px] sm:text-[11px] text-slate-400 mt-1 leading-relaxed line-clamp-2">
                            Live 8-stage progress tracker & invoices.
                        </p>
                    </div>
                    <div class="mt-3 pt-2.5 border-t border-slate-800/80 flex items-center justify-between text-[11px] sm:text-xs font-bold text-purple-400">
                        <span>1-Click</span>
                        <span class="font-mono">➔</span>
                    </div>
                </a>
            </div>
        </div>

        <!-- Manual Credentials Form -->
        <div class="max-w-md mx-auto p-8 rounded-3xl bg-slate-900 border border-slate-800 shadow-2xl space-y-6">
            <div class="text-center">
                <h3 class="text-base font-bold text-white">Manual Credential Sign In</h3>
                <p class="text-xs text-slate-400 mt-1">Enter your registered email and password</p>
            </div>

            @if($errors->any())
                <div class="p-3.5 rounded-xl bg-rose-950/80 border border-rose-500/40 text-rose-300 text-xs">
                    {{ $errors->first() }}
                </div>
            @endif

            <form action="{{ route('login.post') }}" method="POST" class="space-y-4 text-xs">
                @csrf
                <div>
                    <label for="email" class="block font-bold text-slate-300 mb-1">Email Address</label>
                    <input type="email" name="email" id="email" value="{{ old('email') }}" required autocomplete="username" placeholder="name@abudhabiautocare.ae" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-xs">
                </div>

                <div>
                    <label for="password" class="block font-bold text-slate-300 mb-1">Password</label>
                    <input type="password" name="password" id="password" required autocomplete="current-password" placeholder="••••••••" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white focus:outline-none focus:border-sky-500 text-xs">
                </div>

                <div class="flex items-center justify-between pt-1">
                    <label class="flex items-center space-x-2 text-slate-400 cursor-pointer">
                        <input type="checkbox" name="remember" value="1" class="rounded bg-slate-950 border-slate-700 text-sky-500 focus:ring-0">
                        <span class="text-[11px]">Keep me signed in</span>
                    </label>
                    <a href="{{ route('orders.track') }}" class="text-[11px] text-sky-400 hover:underline">Track without sign-in ➔</a>
                </div>

                <div class="pt-2">
                    <button type="submit" class="w-full py-3.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-bold text-xs shadow-xl shadow-sky-600/30 transition">
                        Sign In with Credentials ➔
                    </button>
                </div>
            </form>
        </div>

    </div>
</div>
@endsection