@extends('layouts.app')
@section('title', 'Login')

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

    {{-- Left side - Slider --}}
    <div class="hidden lg:block flex-1 relative bg-green-600 overflow-hidden">
        <div id="loginSlides" class="absolute inset-0">
            @php
            $bgSlides = [
                [
                    'type'  => 'image',
                    'image' => '/images/slider/slide1.jpg',
                    'title' => 'Sistem Manajemen HR Modern',
                    'desc'  => 'Kelola administrasi surat dengan mudah dan efisien',
                ],
                [
                    'type'  => 'image',
                    'image' => '/images/slider/slide2.jpg',
                    'title' => 'PT Putra Taro Paloma',
                    'desc'  => 'Solusi digital untuk pengelolaan dokumen perusahaan',
                ],
                [
                    'type'  => 'image',
                    'image' => '/images/slider/slide3.jpg',
                    'title' => 'Efisiensi & Produktivitas',
                    'desc'  => 'Satu platform untuk semua kebutuhan HR perusahaan',
                ],
            ];
            @endphp

            @foreach($bgSlides as $i => $s)
            <div class="absolute inset-0 transition-opacity duration-1000 {{ $i === 0 ? 'opacity-100' : 'opacity-0' }}" data-lslide="{{ $i }}">

                @if(($s['type'] ?? 'gradient') === 'image')
                    <img src="{{ $s['image'] }}" alt="{{ $s['title'] }}"
                        class="w-full h-full object-cover"
                        onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
                    {{-- Fallback gradient jika gambar gagal load --}}
                    <div class="w-full h-full bg-gradient-to-br from-green-600 to-emerald-700 hidden"></div>
                @else
                    <div class="w-full h-full bg-gradient-to-br {{ $s['gradient'] }}">
                        <div class="absolute top-10 right-10 w-64 h-64 bg-white/5 rounded-full blur-3xl animate-pulse"></div>
                        <div class="absolute bottom-10 left-10 w-96 h-96 bg-white/5 rounded-full blur-3xl animate-pulse" style="animation-delay:1s"></div>
                        <div class="absolute inset-0 opacity-10" style="background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:50px 50px"></div>
                    </div>
                @endif

                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex flex-col justify-end p-12">
                    <h2 class="text-4xl font-bold text-white mb-3 drop-shadow-2xl">{{ $s['title'] }}</h2>
                    <p class="text-lg text-white/80">{{ $s['desc'] }}</p>
                </div>
            </div>
            @endforeach
        </div>

        {{-- Dots --}}
        <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-3 z-20">
            @foreach($bgSlides as $i => $s)
            <button onclick="goLoginSlide({{ $i }})" data-ldot="{{ $i }}"
                class="h-2.5 rounded-full transition-all duration-300 {{ $i === 0 ? 'w-8 bg-white' : 'w-2.5 bg-white/40 hover:bg-white/70' }}"></button>
            @endforeach
        </div>

        {{-- Curved Divider --}}
        <div class="absolute right-0 top-0 bottom-0 w-24 bg-white z-30" style="clip-path: ellipse(100% 50% at 100% 50%)"></div>
    </div>

    {{-- Right side - Login Form --}}
    <div class="w-full lg:w-[45%] flex items-center justify-center p-6 lg:p-12 bg-white relative z-40">
        <div class="w-full max-w-md">

            {{-- Logo --}}
            <div class="text-center mb-8">
                <div class="flex justify-center mb-4">
                    <img src="/images/logo-taro.png" alt="TARO" class="h-16 w-auto object-contain"
                        onerror="this.style.display='none'; document.getElementById('logoText').style.display='flex'">
                    <div id="logoText" class="hidden items-center justify-center bg-gradient-to-r from-green-600 to-emerald-600 text-white text-2xl font-bold py-2 px-5 rounded-lg shadow-lg">TARO</div>
                </div>
                <h1 class="text-2xl lg:text-3xl font-extrabold text-green-700 mb-1">Sistem Manajemen HR</h1>
                <p class="text-gray-500 text-sm">Silakan masuk untuk melanjutkan ke sistem</p>
            </div>

            {{-- Error Alert --}}
            @if($errors->any())
            <div class="mb-5 p-4 bg-red-50 border-l-4 border-red-500 rounded-r flex items-start gap-3">
                <i class="fas fa-exclamation-circle text-red-500 mt-0.5"></i>
                <div>
                    <p class="text-red-800 text-sm font-semibold">Login Gagal</p>
                    <p class="text-red-600 text-sm">{{ $errors->first('username') }}</p>
                </div>
            </div>
            @endif

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

                <div>
                    <label class="flex items-center text-green-600 font-semibold mb-2 text-sm gap-1.5">
                        <i class="fas fa-user text-sm"></i> Username
                    </label>
                    <input type="text" name="username" value="{{ old('username') }}" required autofocus
                        class="w-full px-5 py-3 border-2 border-green-100 rounded-xl focus:outline-none focus:ring-4 focus:ring-green-500/10 focus:border-green-500 transition-all bg-green-50 text-gray-800 placeholder:text-gray-400"
                        placeholder="Masukkan username Anda">
                </div>

                <div>
                    <label class="flex items-center text-green-600 font-semibold mb-2 text-sm gap-1.5">
                        <i class="fas fa-lock text-sm"></i> Password
                    </label>
                    <div class="relative">
                        <input type="password" name="password" id="loginPassword" required
                            class="w-full px-5 py-3 pr-12 border-2 border-green-100 rounded-xl focus:outline-none focus:ring-4 focus:ring-green-500/10 focus:border-green-500 transition-all bg-green-50 text-gray-800 placeholder:text-gray-400"
                            placeholder="Masukkan password Anda">
                        <button type="button" onclick="toggleLoginPwd()"
                            class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-green-600">
                            <i class="fas fa-eye" id="loginEye"></i>
                        </button>
                    </div>
                </div>

                <div class="flex items-center gap-2">
                    <input type="checkbox" name="remember" id="remember"
                        class="w-4 h-4 text-green-600 border-2 border-green-100 rounded">
                    <label for="remember" class="text-sm text-gray-600">Ingat Saya</label>
                </div>

                <button type="submit"
                    class="w-full py-3.5 rounded-xl font-bold text-base transition-all text-white flex items-center justify-center gap-2 shadow-lg uppercase tracking-wide bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0">
                    <i class="fas fa-sign-in-alt"></i> Masuk
                </button>
            </form>

            <div class="mt-8 pt-6 border-t border-gray-200 text-center">
                <p class="text-gray-400 text-xs">© {{ date('Y') }} PT Putra Taro Paloma - HR Management System</p>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
let lCurrent = 0;
const lSlides = document.querySelectorAll('[data-lslide]');
const lDots   = document.querySelectorAll('[data-ldot]');

function goLoginSlide(n) {
    lSlides[lCurrent].classList.replace('opacity-100','opacity-0');
    lDots[lCurrent].className = 'h-2.5 w-2.5 rounded-full bg-white/40 hover:bg-white/70 transition-all duration-300';
    lCurrent = (n + lSlides.length) % lSlides.length;
    lSlides[lCurrent].classList.replace('opacity-0','opacity-100');
    lDots[lCurrent].className = 'h-2.5 w-8 rounded-full bg-white transition-all duration-300';
}
if (lSlides.length > 1) setInterval(() => goLoginSlide(lCurrent + 1), 5000);

function toggleLoginPwd() {
    const inp = document.getElementById('loginPassword');
    const ico = document.getElementById('loginEye');
    if (inp.type === 'password') { inp.type = 'text'; ico.className = 'fas fa-eye-slash'; }
    else { inp.type = 'password'; ico.className = 'fas fa-eye'; }
}
</script>
@endpush
@endsection