<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="csrf-token" content="{{ csrf_token() }}"> <title>School Login | EduKids ERP</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Quicksand', sans-serif; overflow: hidden; }
        .glow-bg {
            background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 50%, #f9d423 100%);
            background-size: 200% 200%;
            animation: moveGradient 8s ease infinite;
        }
        @keyframes moveGradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .login-box {
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 10px 25px rgba(255, 65, 108, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            max-height: 90vh;
        }
    </style>
</head>
<body class="glow-bg h-screen w-screen flex flex-col items-center justify-center p-4">

    <div class="login-box w-full max-w-[380px] rounded-[2rem] overflow-hidden flex flex-col transition-all">
        <div class="bg-gradient-to-r from-red-500 to-orange-500 p-5 text-center relative">
            <div class="relative z-10">
                <div class="inline-flex items-center justify-center w-12 h-12 bg-yellow-400 rounded-xl shadow-md mb-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path d="M12 14l9-5-9-5-9 5 9 5z" />
                        <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
                    </svg>
                </div>
                <h1 class="text-xl font-bold text-white tracking-tight uppercase">EduKids Portal</h1>
                <p class="text-yellow-100 text-[9px] font-bold tracking-[0.15em] uppercase opacity-90">School Management System</p>
            </div>
        </div>

        <form id="loginForm" class="p-6 space-y-4">
            @csrf
            <div>
                <label class="text-[9px] font-bold text-gray-400 uppercase ml-1 mb-1 block tracking-wider">Credential Identity</label>
                <div class="relative">
                    <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center text-red-400">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2V7a5 5 0 00-5-5zM7 7a3 3 0 016 0v2H7V7z" />
                        </svg>
                    </span>
                    <input type="text" name="login_identity" id="login_identity"
                        class="w-full pl-10 pr-4 py-2.5 bg-gray-50 border-2 border-gray-100 rounded-xl focus:border-red-400 focus:outline-none" 
                        placeholder="Username or Mobile">
                </div>
            </div>

            <div>
                <label class="text-[9px] font-bold text-gray-400 uppercase ml-1 mb-1 block tracking-wider">Security Pass</label>
                <div class="relative">
                    <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center text-yellow-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
                        </svg>
                    </span>
                    <input type="password" name="password" id="password"
                        class="w-full pl-10 pr-4 py-2.5 bg-gray-50 border-2 border-gray-100 rounded-xl focus:border-red-400 focus:outline-none transition text-sm font-semibold text-gray-700" 
                        placeholder="••••••••">
                </div>
            </div>

            <div class="flex items-center justify-between px-1">
                <label class="flex items-center cursor-pointer">
                    <input type="checkbox" name="remember" class="w-3.5 h-3.5 rounded text-red-500 border-gray-300 focus:ring-red-400">
                    <span class="ml-2 text-[9px] font-bold text-gray-500 uppercase">Remember</span>
                </label>
                <a href="#" class="text-[9px] font-bold text-red-500 hover:text-orange-600 transition uppercase underline decoration-dotted">Forgot Access?</a>
            </div>

            <button type="submit" id="submitBtn" class="w-full bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 text-white font-bold py-3 rounded-xl shadow-lg transition duration-300 transform active:scale-95 uppercase tracking-widest text-xs">
                Unlock Dashboard
            </button>
        </form>
    </div>

    <div class="mt-4 text-center text-white opacity-90">
        <p class="text-[10px] font-bold tracking-wider drop-shadow-sm">© 2026 EduKids ERP</p>
        <p class="text-[8px] uppercase tracking-[0.2em]">Veer Software Solution</p>
    </div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
    // AJAX এর জন্য CSRF টোকেন সেটআপ
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('#loginForm').on('submit', function(e)
	{
        e.preventDefault();
		
		var $login_identity = $('#login_identity').val();
		var $password = $('#password').val();
		
		if($login_identity.trim() == '')
		{
			Swal.fire({
                    icon: 'error',
                    title: 'ওহ হো!',
                    text: 'আপনার ইউজারনেম অথবা মোবাইল নাম্বার লিখুন।',
                    confirmButtonColor: '#ff4b2b'
                });
			document.getElementById('login_identity').focus();
			return;
		}
		if($password.trim() == '')
		{
			Swal.fire({
                    icon: 'error',
                    title: 'ওহ হো!',
                    text: 'আপনার সঠিক পাসওয়ার্ড লিখুন।',
                    confirmButtonColor: '#ff4b2b'
                });
			document.getElementById('password').focus();
			return;
		}
		
        let formData = $(this).serialize();
        let submitBtn = $('#submitBtn');
        
        submitBtn.prop('disabled', true).html('Checking...');

        $.ajax({
            url: "{{ route('login.post') }}",
            type: "POST",
            data: formData,
            success: function(response) {
                if (response.status === 'success') {
                    Swal.fire({
                        icon: 'success',
                        title: 'স্বাগতম!',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        window.location.href = response.redirect;
                    });
                }
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false).html('Unlock Dashboard');
                
                let errorMsg = 'লগইন করতে সমস্যা হয়েছে!';
                
                // ভ্যালিডেশন এরর হ্যান্ডেল করা (৪২২ এরর)
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    errorMsg = Object.values(errors)[0][0]; // প্রথম এরর মেসেজটা দেখাবে
                } 
                // ক্রেডেনশিয়াল এরর হ্যান্ডেল করা (৪০১ এরর)
                else if (xhr.status === 401) {
                    errorMsg = xhr.responseJSON.message;
                }

                Swal.fire({
                    icon: 'error',
                    title: 'ওহ হো!',
                    text: errorMsg,
                    confirmButtonColor: '#ff4b2b'
                });
            }
        });
    });
});
</script>
</body>
</html>