<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Zakat Warga</title>
    <link rel="stylesheet" href="{{ asset('css/nprogress.css') }}">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    colors: {
                        primary: '#154b32',
                        surface: '#f5f6fa',
                        panelGreen: '#356E52',
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Inter', sans-serif; background-color: #f5f6fa; }
        .form-input {
            width: 100%;
            background-color: #f1f4fb;
            border: 1px solid #e4e9f2;
            border-radius: 0.5rem;
            padding: 0.875rem 1rem;
            font-size: 0.875rem;
            color: #374151;
            transition: all 0.2s;
        }
        .form-input:focus {
            outline: none;
            border-color: #154b32;
            box-shadow: 0 0 0 3px rgba(21, 75, 50, 0.1);
            background-color: #ffffff;
        }
        .form-label {
            display: block;
            font-size: 0.75rem;
            font-weight: 600;
            color: #4b5563;
            margin-bottom: 0.375rem;
        }
        /* Custom Checkbox */
        .custom-checkbox {
            appearance: none;
            background-color: #fff;
            margin: 0;
            font: inherit;
            color: currentColor;
            width: 1.15em;
            height: 1.15em;
            border: 1px solid #d1d5db;
            border-radius: 50%;
            display: grid;
            place-content: center;
            cursor: pointer;
        }
        .custom-checkbox::before {
            content: "";
            width: 0.65em;
            height: 0.65em;
            border-radius: 50%;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            box-shadow: inset 1em 1em #154b32;
        }
        .custom-checkbox:checked::before {
            transform: scale(1);
        }
        .custom-checkbox:checked {
            border-color: #154b32;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4 md:p-8">

    <div class="bg-white w-full max-w-[1050px] rounded-[24px] shadow-2xl overflow-hidden flex flex-col md:flex-row min-h-[650px]">
        
        <!-- Left Panel (Green) -->
        <div class="w-full md:w-1/2 bg-panelGreen p-10 md:p-14 flex flex-col items-center justify-center text-center relative">
            <div class="z-10 flex flex-col items-center w-full h-full">
                <!-- Icon Top -->
                <div class="w-[72px] h-[72px] rounded-full border border-white/20 flex items-center justify-center mb-8 bg-white/5 backdrop-blur-sm">
                    <i class="bi bi-box2-heart-fill text-white text-3xl"></i>
                </div>
                
                <h1 class="text-white text-[32px] md:text-[40px] font-bold mb-4 tracking-tight">Zakat Warga</h1>
                <p class="text-[#a4cbb7] text-[15px] leading-relaxed max-w-[280px] mx-auto mb-12">
                    Sistem manajemen zakat yang amanah, transparan, dan memudahkan kolaborasi komunitas warga.
                </p>
                
                <!-- Mosque Image at bottom -->
                <div class="w-full max-w-[260px] rounded-[16px] overflow-hidden shadow-2xl mt-auto border border-white/5">
                    <img src="{{ asset('images/mosque_vector.png') }}" alt="Ilustrasi Masjid" class="w-full h-auto object-cover opacity-95">
                </div>
            </div>
        </div>
        
        <!-- Right Panel (Login Form) -->
        <div class="w-full md:w-1/2 p-10 md:p-16 flex flex-col justify-center">
            <div class="w-full max-w-[360px] mx-auto">
                <h2 class="text-[32px] font-bold text-primary mb-2 tracking-tight">Selamat Datang</h2>
                <p class="text-gray-500 text-[15px] mb-10">Silakan masuk untuk mengelola data zakat.</p>
                
                @if($errors->has('email'))
                    <div class="bg-red-50 border border-red-100 text-red-700 p-3 rounded-xl mb-6 text-sm flex items-start gap-2">
                        <i class="bi bi-exclamation-triangle-fill mt-0.5"></i> 
                        <div>{{ $errors->first('email') }}</div>
                    </div>
                @endif
                @if(session('success'))
                    <div class="bg-green-50 border border-green-100 text-green-700 p-3 rounded-xl mb-6 text-sm flex items-start gap-2">
                        <i class="bi bi-check-circle-fill mt-0.5"></i>
                        <div>{{ session('success') }}</div>
                    </div>
                @endif

                <form action="{{ url('/login') }}" method="POST">
                    @csrf
                    
                    <div class="mb-6">
                        <label class="form-label">Email atau Username</label>
                        <input type="text" name="email" class="form-input" placeholder="admin@zakatwarga.id atau username" value="{{ old('email') }}" required autofocus>
                    </div>

                    <div class="mb-6">
                        <div class="flex justify-between items-center mb-1.5">
                            <label class="form-label mb-0">Kata Sandi</label>
                            <a href="#" class="text-[13px] font-semibold text-primary hover:underline">Lupa Kata Sandi?</a>
                        </div>
                        <div class="relative">
                            <input type="password" id="password" name="password" class="form-input pr-10" placeholder="••••••••" required>
                            <button type="button" class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-gray-400 hover:text-gray-700" id="togglePassword">
                                <i class="bi bi-eye-slash text-lg" id="toggleIcon"></i>
                            </button>
                        </div>
                    </div>

                    <div class="mb-8 flex items-center gap-2.5">
                        <input type="checkbox" id="remember" class="custom-checkbox">
                        <label for="remember" class="text-[14px] text-gray-600 cursor-pointer select-none">Ingat saya di perangkat ini</label>
                    </div>

                    <button type="submit" class="w-full bg-primary hover:bg-[#0c331f] text-white font-semibold py-3.5 rounded-[10px] transition-colors shadow-md hover:shadow-lg flex justify-center items-center gap-2">
                        Masuk ke Dashboard
                    </button>
                </form>

                <div class="mt-10 pt-8 border-t border-gray-100 text-center">
                    <p class="text-[13px] text-gray-500">
                        Lingkungan belum terdaftar? 
                        <a href="{{ url('/pengajuan') }}" class="font-bold text-primary hover:underline">Daftarkan Masjid Baru</a>
                    </p>
                </div>
            </div>
        </div>

    </div>

    <!-- Script for toggle password -->
    <script>
        const togglePassword = document.querySelector('#togglePassword');
        const password = document.querySelector('#password');
        const toggleIcon = document.querySelector('#toggleIcon');

        togglePassword.addEventListener('click', function () {
            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);
            toggleIcon.classList.toggle('bi-eye');
            toggleIcon.classList.toggle('bi-eye-slash');
        });
    </script>
</body>

{{-- NProgress untuk feedback saat submit --}}
<script src="{{ asset('js/nprogress.min.js') }}"></script>
<script>
NProgress.configure({ minimum: 0.2, showSpinner: false, speed: 250 });
document.querySelector('form').addEventListener('submit', function() {
    NProgress.start();
});
document.addEventListener('click', function(e) {
    var a = e.target.closest('a[href]');
    if (!a) return;
    if (e.ctrlKey || e.metaKey || e.shiftKey) return;
    if (a.target === '_blank') return;
    var href = a.getAttribute('href');
    if (!href || href.startsWith('#') || href.startsWith('javascript:')) return;
    try {
        var url = new URL(a.href, window.location.href);
        if (url.origin !== window.location.origin) return;
    } catch(e) { return; }
    NProgress.start();
});
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() { NProgress.done(); });
} else { NProgress.done(); }
</script>
</html>