lms-v2/resources/views/livewire/pages/auth/login.blade.php

<?php

use App\Livewire\Forms\LoginForm;
use Illuminate\Support\Facades\Session;
use function Livewire\Volt\{form, layout};

// 1. Definisikan Layout
layout('layouts.guest');

// 2. Hubungkan dengan LoginForm class yang sudah kita sempurnakan
form(LoginForm::class);

// 3. Definisikan aksi "login" yang dipanggil oleh form
$login = function () {
    $this->validate();

    // Jalankan autentikasi dari LoginForm
    $this->form->authenticate();

    // Regenerasi session untuk keamanan
    Session::regenerate();

    // Ambil data user beserta relasi roles-nya
    $user = auth()->user();

    // Redirect otomatis berdasarkan Role (RBAC)
    if ($user->hasRole('admin') || $user->hasRole('trainer')) {
        $this->redirectIntended(default: route('admin.dashboard', absolute: false), navigate: true);
    } else {
        $this->redirectIntended(default: route('cbt.dashboard', absolute: false), navigate: true);
    }
};

?>

<div class="min-h-screen w-full flex flex-col lg:flex-row bg-slate-50">
    <div class="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-900 justify-center items-center p-12 relative overflow-hidden">
        <div class="absolute inset-0 opacity-10 bg-[radial-gradient(#3b82f6_1px,transparent_1px)] [background-size:16px_16px]"></div>
        
        <div class="max-w-md w-full relative z-10 text-white">
            <div class="w-16 h-16 bg-indigo-600 rounded-2xl flex items-center justify-center mb-8 shadow-xl border border-indigo-500/30">
                <span class="text-3xl font-extrabold tracking-wider">T</span>
            </div>
            <h1 class="text-4xl font-extrabold tracking-tight leading-tight mb-4">
                Learning Management System <span class="text-indigo-400 block mt-2 text-3xl">Version 2.0</span>
            </h1>
            <p class="text-slate-400 text-sm leading-relaxed mb-8">
                Portal pelatihan digital resmi PT Tunggal Idaman Abdi. Tingkatkan kompetensi standarisasi CPOB, SOP, dan validasi industri farmasi secara mandiri dan terukur.
            </p>

            <div class="grid grid-cols-2 gap-4 border-t border-slate-800 pt-8">
                <div>
                    <p class="text-2xl font-bold text-indigo-400">100%</p>
                    <p class="text-xs text-slate-400 uppercase tracking-wider font-semibold mt-1">Standar CPOB</p>
                </div>
                <div>
                    <p class="text-2xl font-bold text-indigo-400">Realtime</p>
                    <p class="text-xs text-slate-400 uppercase tracking-wider font-semibold mt-1">Sertifikasi & Evaluasi</p>
                </div>
            </div>
        </div>
    </div>

    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-12 md:p-16 bg-white">
        <div class="max-w-md w-full space-y-6">
            <div class="lg:hidden text-center mb-6">
                <div class="w-12 h-12 bg-indigo-600 rounded-xl flex items-center justify-center mx-auto mb-3 text-white font-bold text-xl shadow-md">T</div>
            </div>
            <div>
                <h2 class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">Selamat Datang Kembali</h2>
                <p class="mt-2 text-sm text-slate-500">Silakan masuk menggunakan akun karyawan Anda untuk memulai pelatihan.</p>
            </div>

            @if ($errors->has('form.email'))
                <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-xl flex items-start space-x-3 transition-all">
                    <svg class="w-5 h-5 text-red-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                    </svg>
                    <div class="text-sm text-red-700 font-medium">
                        {{ $errors->first('form.email') }}
                    </div>
                </div>
            @endif

            <form wire:submit="login" class="space-y-4">
                <div>
                    <label for="email" class="block text-xs font-semibold uppercase tracking-wider text-slate-600 mb-1.5">Email Perusahaan</label>
                    <input wire:model="form.email" id="email" type="email" required autofocus placeholder="nama@tia-pharma.com" 
                        class="w-full px-4 py-2.5 bg-slate-50 border @error('form.email') border-red-300 bg-red-50/30 focus:border-red-500 focus:ring-red-500/20 @else border-slate-200 focus:border-indigo-600 focus:ring-indigo-500/20 @enderror rounded-xl focus:bg-white transition-all text-sm">
                </div>

                <div>
                    <div class="flex justify-between items-center mb-1.5">
                        <label for="password" class="block text-xs font-semibold uppercase tracking-wider text-slate-600">Password</label>
                        @if (Route::has('password.request'))
                            <a href="{{ route('password.request') }}" class="text-xs font-medium text-indigo-600 hover:text-indigo-700 transition-colors">Lupa Password?</a>
                        @endif
                    </div>
                    <input wire:model="form.password" id="password" type="password" required placeholder="••••••••" 
                        class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-600 transition-all text-sm">
                    @error('form.password') <span class="text-xs text-red-500 mt-1 block font-medium">{{ $message }}</span> @enderror
                </div>

                <div class="flex items-center pt-1">
                    <input wire:model="form.remember" id="remember" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500/20 border-slate-300 rounded-md">
                    <label for="remember" class="ml-2 block text-sm text-slate-600 font-medium">Ingat perangkat ini</label>
                </div>

                <button type="submit" class="w-full mt-2 bg-indigo-600 text-white py-2.5 px-4 rounded-xl font-semibold text-sm hover:bg-indigo-700 active:scale-[0.99] transition-all shadow-md shadow-indigo-600/10 hover:shadow-indigo-600/20 flex justify-center items-center">
                    <span>Masuk ke Dashboard</span>
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </button>
            </form>

            <p class="text-center text-sm text-slate-500 pt-4 border-t border-slate-100">
                Karyawan baru? <a href="{{ route('register') }}" class="text-indigo-600 font-bold hover:underline">Registrasi Akun Mandiri</a>
            </p>
        </div>
    </div>
</div>