@extends('layouts.app')

@section('content')
    <div class="min-h-[calc(100vh-4rem)] overflow-hidden rounded-3xl bg-white shadow-xl lg:grid lg:grid-cols-2">
        <div class="relative hidden lg:flex">
            <div class="absolute inset-0 bg-gradient-to-br from-[#2a0f14] via-[#3a1219] to-[#1b0a0e]"></div>
            <div class="absolute inset-0 opacity-90" style="background-image: url('{{ asset('images/login-monggo-mampir.png') }}'); background-size: cover; background-position: center;"></div>
            <div class="absolute inset-0 bg-gradient-to-t from-black/55 via-black/30 to-black/20"></div>
            <div class="relative z-10 flex w-full flex-col justify-end p-10 text-white">
                <div class="max-w-md">
                    <p class="text-sm uppercase tracking-[0.35em] text-amber-200/80">Selamat Datang</p>
                    <h1 class="mt-3 text-4xl font-semibold text-amber-50">{{ app_setting('app_name', 'Foodcourt') }}</h1>
                    <p class="mt-3 text-sm text-amber-100/80">Masuk untuk kelola order dan transaksi dengan cepat.</p>
                </div>
            </div>
        </div>

        <div class="flex items-center justify-center p-8 lg:p-12">
            <div class="w-full max-w-md rounded-2xl border border-amber-100 bg-gradient-to-b from-white to-amber-50/40 p-8 shadow-[0_20px_50px_-30px_rgba(88,28,33,0.6)]">
                <div class="mb-8">
                    <div class="flex items-center gap-3">
                        @if(app_setting('app_logo'))
                            <img src="{{ asset('storage/' . app_setting('app_logo')) }}" alt="Logo" class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-200">
                        @endif
                        <div>
                            <p class="text-sm uppercase tracking-[0.3em] text-amber-700/70">Sign In</p>
                            <h2 class="text-2xl font-semibold text-slate-900">Masuk ke Dashboard</h2>
                        </div>
                    </div>
                </div>

                <form method="post" action="{{ route('login.attempt') }}" class="space-y-5">
                    @csrf
                    <x-input name="username" label="Username" :value="old('username')" required />
                    <x-input name="password" label="Password" type="password" required />
                    <x-button type="submit" class="w-full py-3 text-base">Masuk</x-button>
                </form>
                <p class="mt-6 text-center text-xs text-amber-700/70">Gunakan akun yang diberikan admin.</p>
            </div>
        </div>
    </div>
@endsection
