@extends('layouts.app')

@section('title', 'Masuk ke Akun Anda')

@section('content')
<div class="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <!-- Main Card Container: Desktop splits into two columns, Mobile is a single compact card -->
    <div class="bg-white rounded-2xl border border-gray-200 shadow-xl overflow-hidden w-full max-w-4xl grid md:grid-cols-2 grid-cols-1">
        
        <!-- Left Side Column: Info and Features (Desktop Only) -->
        <div class="bg-indigo-900 p-10 text-white flex-col justify-between hidden md:flex">
            <div>
                <a href="/" class="flex items-center gap-2 font-bold text-2xl tracking-tight text-white mb-8">
                    <i data-lucide="file-check-2" class="w-8 h-8"></i>
                    <span>ATS<span class="text-indigo-300 font-medium">CV</span></span>
                </a>
                <h2 class="text-3xl font-extrabold tracking-tight mb-4">
                    Buat CV ATS-Friendly dalam Hitungan Menit.
                </h2>
                <p class="text-indigo-200 text-sm leading-relaxed mb-6">
                    Sistem pembuat CV kami dirancang khusus agar lolos pemindaian ATS perusahaan terkemuka. Ekstrak data dari CV lama secara instan dan simpan riwayat pengisian Anda.
                </p>
                <ul class="space-y-3.5 text-sm text-indigo-150">
                    <li class="flex items-center gap-2.5">
                        <i data-lucide="shield-check" class="w-5 h-5 text-indigo-300"></i>
                        <span>Keamanan data terlindungi dengan OTP WhatsApp</span>
                    </li>
                    <li class="flex items-center gap-2.5">
                        <i data-lucide="zap" class="w-5 h-5 text-indigo-300"></i>
                        <span>Parsing teks PDF client-side instan (No-AI)</span>
                    </li>
                    <li class="flex items-center gap-2.5">
                        <i data-lucide="printer" class="w-5 h-5 text-indigo-300"></i>
                        <span>Hasil cetak langsung PDF standar A4 ATS</span>
                    </li>
                </ul>
            </div>
            <div class="text-xs text-indigo-300 mt-10">
                &copy; {{ date('Y') }} ATS CV Maker. All rights reserved.
            </div>
        </div>

        <!-- Right Side Column: Form Login (Responsive: full width on Mobile) -->
        <div class="p-8 sm:p-12 flex flex-col justify-center">
            <div class="mb-8">
                <!-- Mini Logo for Mobile View -->
                <div class="flex items-center gap-2 font-bold text-xl tracking-tight text-indigo-600 mb-4 md:hidden">
                    <i data-lucide="file-check-2" class="w-6 h-6"></i>
                    <span>ATS<span class="text-gray-900 font-medium">CV</span></span>
                </div>
                <h1 class="text-2xl font-bold text-gray-900">Selamat datang kembali</h1>
                <p class="text-sm text-gray-500 mt-1">Masuk untuk mengelola dan mencetak riwayat CV Anda.</p>
            </div>

            <!-- Login Form -->
            <form id="login-form" class="space-y-5">
                @csrf
                <div>
                    <label for="login" class="block text-xs font-semibold text-gray-700 uppercase tracking-wider mb-1.5">Email atau No. WhatsApp</label>
                    <div class="relative rounded-lg shadow-xs">
                        <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-gray-400">
                            <i data-lucide="user" class="w-5 h-5"></i>
                        </div>
                        <input type="text" name="login" id="login" required placeholder="name@example.com / 081234..."
                            class="block w-full pl-11 pr-4 py-2.5 border border-gray-300 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-shadow">
                    </div>
                </div>

                <div>
                    <label for="password" class="block text-xs font-semibold text-gray-700 uppercase tracking-wider mb-1.5">Password</label>
                    <div class="relative rounded-lg shadow-xs">
                        <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-gray-400">
                            <i data-lucide="lock" class="w-5 h-5"></i>
                        </div>
                        <input type="password" name="password" id="password" required placeholder="••••••••"
                            class="block w-full pl-11 pr-4 py-2.5 border border-gray-300 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-shadow">
                    </div>
                </div>

                <div class="flex items-center justify-between">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="remember" class="w-4 h-4 text-indigo-600 border-gray-300 rounded-sm focus:ring-indigo-500">
                        <span class="text-xs text-gray-600 select-none">Ingat saya</span>
                    </label>
                    <a href="#" class="text-xs text-indigo-600 hover:text-indigo-800 transition-colors font-medium">Lupa Password?</a>
                </div>

                <button type="submit" id="btn-submit"
                    class="w-full py-2.5 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-semibold transition-colors shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 flex justify-center items-center gap-2 cursor-pointer">
                    <i data-lucide="log-in" class="w-4 h-4"></i>
                    <span>Masuk</span>
                </button>
            </form>

            <div class="mt-8 text-center text-xs text-gray-500">
                Belum punya akun? <a href="{{ route('register') }}" class="font-semibold text-indigo-600 hover:text-indigo-800 transition-colors">Daftar sekarang</a>
            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script>
    document.getElementById('login-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const submitBtn = document.getElementById('btn-submit');
        const originalText = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = `<span class="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full mr-2"></span> Memproses...`;

        const formData = new FormData(this);
        
        fetch('{{ route("login") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json().then(data => ({ status: response.status, body: data })))
        .then(res => {
            if (res.status === 200 && res.body.success) {
                Toast.fire({
                    icon: 'success',
                    title: res.body.message
                });
                setTimeout(() => {
                    window.location.href = res.body.redirect;
                }, 1000);
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Login Gagal',
                    text: res.body.message || 'Email/WhatsApp atau password salah.',
                    confirmButtonText: 'Coba Lagi'
                });
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        })
        .catch(err => {
            console.error('Login error:', err);
            Swal.fire({
                icon: 'error',
                title: 'Koneksi Error',
                text: 'Terjadi kesalahan sistem, silakan coba beberapa saat lagi.',
                confirmButtonText: 'Oke'
            });
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        });
    });
</script>
@endsection
