@extends('layouts.app')

@section('title', 'Login')

@section('content')
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-gray-100 px-4">
    <div class="w-full max-w-md">
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-6 md:p-10">
            <div class="text-center mb-6 md:mb-8">
                @php
                    $logo = \App\Models\Setting::get('logo_path');
                    $appName = \App\Models\Setting::get('app_name', 'Ujian Online');
                @endphp
                @if($logo)
                    <img src="{{ asset('storage/' . $logo) }}" alt="Logo" class="h-14 md:h-16 mx-auto mb-3 object-contain">
                @else
                    <div class="w-14 h-14 md:w-16 md:h-16 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-2xl flex items-center justify-center text-white text-2xl md:text-3xl font-bold mx-auto mb-3 shadow-lg shadow-blue-200">U</div>
                @endif
                <h1 class="text-xl md:text-2xl font-bold text-gray-800">{{ $appName }}</h1>
                <p class="text-sm text-gray-500 mt-1">Silakan login untuk melanjutkan</p>
            </div>

            @if(session('error'))
                <div class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl text-sm">
                    {{ session('error') }}
                </div>
            @endif

            <form method="POST" action="{{ route('login') }}" class="space-y-4 md:space-y-5">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                    <input type="email" name="email" required class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm" placeholder="Masukkan email Anda">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                    <input type="password" name="password" required class="w-full px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm" placeholder="Masukkan password">
                </div>
                <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-2.5 rounded-xl hover:from-blue-700 hover:to-indigo-700 transition font-medium shadow-lg shadow-blue-200 active:scale-[0.98]">
                    Login
                </button>
            </form>

            <div class="mt-5 md:mt-6 text-center">
                <p class="text-sm text-gray-500">Belum punya akun? <a href="{{ route('register') }}" class="text-blue-600 font-medium hover:text-blue-700">Daftar</a></p>
            </div>
        </div>
    </div>
</div>
@endsection