@php
    $brandLogo = asset('assets/tamu/favicon.ico');
    $buildingPhoto = asset('assets/tamu/gedung.jpeg');
@endphp

<div class="grid min-h-screen bg-[#f8fafc] lg:grid-cols-[1fr_1fr]">
    <section class="relative hidden min-h-screen overflow-hidden bg-[#dbeafe] lg:block">
        <img src="{{ $buildingPhoto }}" alt="Gedung DPRD Ogan Ilir" class="absolute inset-0 h-full w-full object-cover" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
        <div class="absolute inset-0 hidden bg-[linear-gradient(180deg,rgba(219,234,254,.85),rgba(248,250,252,.85)),linear-gradient(135deg,#dbeafe,#f8fafc_45%,#d1fae5)]"></div>
    </section>

    <section class="flex min-h-screen items-center justify-center px-6 py-12">
        <div class="w-full max-w-[520px]">
            <div class="mb-7">
                <span class="mb-6 flex h-16 w-16 items-center justify-center overflow-hidden rounded-full bg-white shadow-[0_10px_22px_rgba(79,70,229,.16)] ring-1 ring-slate-200">
                    <img src="{{ $brandLogo }}" alt="DPRD Ogan Ilir" class="h-14 w-14 object-contain" onerror="this.style.display='none'; this.nextElementSibling.style.display='grid';">
                    <span class="hidden h-full w-full place-items-center bg-[#4f46e5] text-2xl font-black text-white">D</span>
                </span>
                <p class="text-lg font-black uppercase tracking-wide text-[#4f46e5]">Login Administrator</p>
                <h1 class="mt-3 text-3xl font-black leading-tight text-[#111827] md:text-[36px]">Selamat Datang Kembali</h1>
                <p class="mt-3 text-lg text-[#64748b]">Gunakan username admin untuk masuk ke dashboard.</p>
            </div>

            <form wire:submit.prevent="submit" class="rounded-[28px] bg-white p-6 shadow-sm ring-1 ring-[#dbe3f3] sm:p-8">
                <label class="block">
                    <span class="text-base font-black text-[#344054]">Username</span>
                    <input wire:model.defer="login" placeholder="Ketikkan username anda" class="mt-2 h-[58px] w-full rounded-[15px] border border-[#cbd5e1] px-5 text-xl text-[#111827] outline-none transition placeholder:text-[#6b7280] focus:border-[#6366f1] focus:ring-4 focus:ring-[#6366f1]/15">
                </label>

                <label class="mt-5 block">
                    <span class="text-base font-black text-[#344054]">Password</span>
                    <input type="password" wire:model.defer="password" placeholder="Masukkan password" class="mt-2 h-[58px] w-full rounded-[15px] border border-[#cbd5e1] px-5 text-xl text-[#111827] outline-none transition placeholder:text-[#6b7280] focus:border-[#6366f1] focus:ring-4 focus:ring-[#6366f1]/15">
                </label>

                <div class="mt-5 flex items-center justify-between gap-4">
                    <label class="flex items-center gap-3 text-base font-medium text-[#475569]">
                        <input type="checkbox" wire:model.defer="remember" class="h-5 w-5 rounded-md border-[#cbd5e1] text-[#4f46e5] focus:ring-[#4f46e5]">
                        <span>Ingat saya</span>
                    </label>
                    <a href="{{ route('tamu.home') }}" class="text-base font-black text-[#4f46e5]">Lupa password?</a>
                </div>

                @error('login')<p class="mt-5 text-base font-semibold text-red-600">{{ $message }}</p>@enderror
                <button class="mt-6 h-[54px] w-full rounded-full bg-[#4f46e5] text-base font-black text-white shadow-[0_14px_24px_rgba(79,70,229,.22)] transition hover:bg-[#4338ca]">Masuk Dashboard</button>
            </form>

            <div class="mt-6 flex items-center justify-between gap-4 text-base font-black text-[#344054]">
                <a href="{{ route('tamu.home') }}" class="transition hover:text-[#4f46e5]">&larr; Kembali ke Beranda</a>
                <a href="{{ route('tamu.survey') }}" class="transition hover:text-[#4f46e5]">Isi Survey</a>
            </div>
        </div>
    </section>
</div>