@extends('layouts.app')

@section('title', 'Login')

@section('content')
<div class="min-h-screen flex">

    <div class="hidden lg:block w-1/2 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2012&q=80');">
        <div class="w-full h-full bg-blue-900 bg-opacity-60 flex flex-col justify-between p-10">
            <div>
                <h2 class="text-white text-3xl font-bold">BKKBN Kanigoro</h2>
                <p class="text-blue-200 mt-2">Selamat datang di panel admin.</p>
            </div>
            <div class="text-blue-200 text-sm">
                &copy; {{ date('Y') }} BKKBN Kecamatan Kanigoro. All rights reserved.
            </div>
        </div>
    </div>

    <div class="w-full lg:w-1/2 flex items-center justify-center bg-gray-100 p-8">
        <div class="max-w-md w-full">
            
            <div class="text-center mb-8">
                <img src="{{ asset('img/LogoBBKN.png') }}" alt="Logo BKKBN" class="w-24 h-auto mx-auto">
            </div>

            <div class="bg-white p-8 rounded-2xl shadow-xl">
                <h2 class="text-2xl font-bold text-center mb-1 text-gray-800">Login ke Akun Anda</h2>
                <p class="text-center text-gray-500 text-sm mb-6">Masukkan email dan password untuk melanjutkan.</p>

                <form method="POST" action="{{ route('login') }}" class="space-y-6">
                    @csrf

                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700">
                            {{ __('Alamat Email') }}
                        </label>
                        <div class="mt-1">
                            <input id="email" type="email"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 @error('email') border-red-500 @enderror"
                                name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
                        </div>
                        @error('email')
                            <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700">
                            {{ __('Password') }}
                        </label>
                        <div class="mt-1">
                            <input id="password" type="password"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 @error('password') border-red-500 @enderror"
                                name="password" required autocomplete="current-password">
                        </div>
                        @error('password')
                            <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input id="remember" name="remember" type="checkbox"
                                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" {{ old('remember') ? 'checked' : '' }}>
                            <label for="remember" class="ml-2 block text-sm text-gray-900">
                                {{ __('Ingat Saya') }}
                            </label>
                        </div>

                        @if (Route::has('password.request'))
                            <div class="text-sm">
                                <a href="{{ route('password.request') }}" class="font-medium text-blue-600 hover:text-blue-500">
                                    {{ __('Lupa password?') }}
                                </a>
                            </div>
                        @endif
                    </div>

                    <div>
                        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                            {{ __('Login') }}
                        </button>
                    </div>
                </form>


                @if (Route::has('register'))
                <p class="mt-6 text-center text-sm text-gray-600">
                    Belum punya akun?
                    <a href="{{ route('register') }}" class="font-medium text-blue-600 hover:text-blue-500">
                        Daftar di sini
                    </a>
                </p>
                @endif

            </div>
        </div>
    </div>
</div>
@endsection