@php $isBranch = Request::is('branch/*'); @endphp

@if($isBranch)
    @extends('layouts.app')

    @section('title', 'Login')

    @section('content')
    <div class="min-h-[70vh] flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-md w-full mx-auto space-y-8">
            <div class="text-center">
                <h2 class="text-4xl font-black tracking-tight text-slate-800 uppercase">
                    Portal<span class="text-indigo-600">Login</span>
                </h2>
                <p class="mt-2 text-sm text-slate-500 font-medium uppercase tracking-widest">Access your hospital portal</p>
            </div>

            <div class="bg-white rounded-[2rem] border border-slate-100 shadow-2xl shadow-slate-200/50 p-10">
                @if($errors->any())
                    <div class="mb-8 p-4 bg-red-50 border border-red-100 rounded-2xl">
                        <ul class="text-sm text-red-600 font-bold space-y-1">
                            @foreach($errors->all() as $error)
                                <li>• {{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form method="POST" action="{{ $isBranch ? route('branch.login.post') : route('admin.login.post') }}" class="space-y-8" x-data="{ loginType: 'branch' }">
                    @csrf
                    
                    <div class="space-y-2">
                        <label for="login_type" class="block text-xs font-black text-slate-500 uppercase tracking-widest">Identify as</label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-400 transition-colors group-focus-within:text-indigo-600">
                                <svg class="h-5 w-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>
                            <select id="login_type" name="login_type" x-model="loginType"
                                class="w-full pl-12 pr-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 outline-none transition-all font-bold text-slate-700 appearance-none">
                                <option value="branch">Hospital Branch</option>
                                <option value="doctor">Medical Staff / Doctor</option>
                                <option value="lab">Diagnostic Lab Staff</option>
                            </select>
                            <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-slate-400">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"/></svg>
                            </div>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label for="email" class="block text-xs font-black text-slate-500 uppercase tracking-widest" 
                            x-text="loginType === 'branch' ? 'Branch Code' : (loginType === 'doctor' ? 'Doctor ID' : 'Lab Identity')"></label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-400 transition-colors group-focus-within:text-indigo-600">
                                <svg x-show="loginType === 'branch'" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16"/></svg>
                                <svg x-show="loginType !== 'branch'" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                            <input id="email" name="email" type="text" required value="{{ old('email') }}"
                                class="w-full pl-12 pr-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 outline-none transition-all font-bold placeholder:text-slate-300"
                                :placeholder="loginType === 'branch' ? 'e.g. MC-NYC-01' : (loginType === 'doctor' ? 'e.g. DR-1001' : 'e.g. LAB-001')">
                        </div>
                    </div>

                    <div class="space-y-2" x-data="{ show: false }">
                        <label for="password" class="block text-xs font-black text-slate-500 uppercase tracking-widest">Security Password</label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-400 transition-colors group-focus-within:text-indigo-600">
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                            </div>
                            <input id="password" name="password" :type="show ? 'text' : 'password'" required
                                class="w-full pl-12 pr-14 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-4 focus:ring-indigo-50 focus:border-indigo-600 outline-none transition-all font-bold placeholder:text-slate-300"
                                placeholder="••••••••">
                            <button type="button" @click="show = !show" class="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 hover:text-indigo-600 transition-colors">
                                <svg x-show="!show" class="h-5 w-5" 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" class="h-5 w-5" 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.542-7 1.274-4.057 5.064-7 9.542-7 1.274 0 2.458.208 3.555.589m4.888 4.888A9.957 9.957 0 0121.458 12c-1.274 4.057-5.064 7-9.542 7-1.121 0-2.193-.208-3.18-.588M15 12a3 3 0 11-6 0 3 3 0 016 0zM3 3l18 18"/></svg>
                            </button>
                        </div>
                    </div>

                    <div class="flex items-center">
                        <label class="flex items-center gap-3 cursor-pointer group">
                            <input id="remember_me" name="remember" type="checkbox" class="h-5 w-5 rounded-lg border-slate-200 text-indigo-600 focus:ring-indigo-50 transition-all cursor-pointer">
                            <span class="text-xs font-black text-slate-500 uppercase tracking-widest group-hover:text-indigo-600 transition-colors">Remember access</span>
                        </label>
                    </div>

                    <button type="submit" class="w-full py-5 bg-indigo-600 text-white rounded-2xl font-black uppercase tracking-widest text-sm hover:bg-indigo-700 shadow-2xl shadow-indigo-100 transition-all transform hover:scale-[1.02] active:scale-95 flex items-center justify-center gap-3">
                        Authenticate <span x-text="loginType.charAt(0).toUpperCase() + loginType.slice(1)"></span>
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                    </button>
                </form>

                <div class="mt-12 p-6 bg-slate-50 rounded-3xl border border-slate-100 border-dashed">
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3">System Identity</p>
                    <div class="space-y-1">
                        <p class="text-xs font-bold text-slate-600" x-text="loginType === 'branch' ? 'Enter branch code and security password.' : (loginType === 'doctor' ? 'Enter your unique Doctor ID and personalized password.' : 'Laboratory portal access.')"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection
@else
<!DOCTYPE html>
<html lang="en" class="h-full bg-slate-900">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Login - Medcare</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Instrument Sans', sans-serif; }
    </style>
</head>
<body class="h-full antialiased text-slate-900 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-indigo-900 via-slate-900 to-black">
    <div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
        <div class="sm:mx-auto sm:w-full sm:max-max-w-md text-center">
            <h2 class="text-4xl font-extrabold tracking-tight text-white mb-2">
                Medcare<span class="text-indigo-400">Admin</span>
            </h2>
            <p class="text-slate-400 font-medium uppercase tracking-widest text-xs">Administrative Secure Access</p>
        </div>

        <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
            <div class="bg-white/5 backdrop-blur-xl border border-white/10 py-10 px-8 shadow-2xl rounded-[2.5rem] sm:px-12">
                @if($errors->any())
                    <div class="mb-8 p-4 bg-red-500/10 border border-red-500/30 rounded-2xl">
                        <ul class="text-xs text-red-400 font-bold space-y-1">
                            @foreach($errors->all() as $error)
                                <li>• {{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form method="POST" action="{{ route('admin.login.post') }}" class="space-y-8">
                    @csrf
                    <input type="hidden" name="login_type" value="admin">
                    <div class="space-y-2">
                        <label for="email" class="block text-[10px] font-black text-slate-400 uppercase tracking-widest">Email Address</label>
                        <div class="mt-1">
                            <input id="email" name="email" type="email" autocomplete="email" required value="{{ old('email') }}"
                                class="w-full px-6 py-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder:text-slate-600 focus:ring-4 focus:ring-indigo-500/20 focus:border-indigo-500 outline-none transition-all font-medium"
                                placeholder="name@medcare.com">
                        </div>
                    </div>

                    <div class="space-y-2" x-data="{ show: false }">
                        <label for="password" class="block text-[10px] font-black text-slate-400 uppercase tracking-widest">Security Token</label>
                        <div class="mt-1 relative">
                            <input id="password" name="password" :type="show ? 'text' : 'password'" autocomplete="current-password" required
                                class="w-full px-6 py-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder:text-slate-600 focus:ring-4 focus:ring-indigo-500/20 focus:border-indigo-500 outline-none transition-all font-medium"
                                placeholder="••••••••">
                            <button type="button" @click="show = !show" class="absolute inset-y-0 right-0 pr-6 flex items-center text-slate-500 hover:text-indigo-400 transition-colors">
                                <svg x-show="!show" class="h-5 w-5" 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" class="h-5 w-5" 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.542-7 1.274-4.057 5.064-7 9.542-7 1.274 0 2.458.208 3.555.589m4.888 4.888A9.957 9.957 0 0121.458 12c-1.274 4.057-5.064 7-9.542 7-1.121 0-2.193-.208-3.18-.588M15 12a3 3 0 11-6 0 3 3 0 016 0zM3 3l18 18"/></svg>
                            </button>
                        </div>
                    </div>

                    <button type="submit" class="w-full py-5 bg-indigo-600 text-white rounded-2xl font-black uppercase tracking-widest text-sm hover:bg-indigo-500 shadow-2xl shadow-indigo-500/20 transition-all transform active:scale-95">
                        Authorise Access
                    </button>
                </form>

                <div class="mt-12 pt-8 border-t border-white/5">
                    <div class="flex items-center gap-4 p-4 bg-white/5 rounded-2xl border border-white/5">
                        <div class="h-10 w-10 bg-indigo-500/20 rounded-xl flex items-center justify-center text-indigo-400">
                            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                        </div>
                        <div>
                            <p class="text-[10px] font-black text-slate-500 uppercase tracking-widest">Global Admin</p>
                            <p class="text-sm font-bold text-white">admin@medcare.com</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- AlpineJS for UI interactions -->
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</html>
@endif