<x-guest-layout title="লগইন / নিবন্ধন">
    <div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="bg-white rounded-xl shadow-md p-8">
            <div class="text-center mb-8">
                <h1 class="text-2xl font-bold text-gray-900 mb-2" id="authTitle">অ্যাকাউন্টে প্রবেশ করুন</h1>
                <p class="text-sm text-gray-600" id="authSubtitle">ফোন নম্বর দিয়ে OTP পেতে নিচে ফর্ম পূরণ করুন</p>
            </div>

            @if(session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6">
                    {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">
                    {{ session('error') }}
                </div>
            @endif

            <!-- Step 1: Phone Input -->
            <div id="authPhoneStep">
                <form id="authPhoneForm" class="space-y-4">
                    @csrf
                    
                    <div>
                        <label for="auth_name" class="block text-sm font-medium text-gray-700 mb-2">পূর্ণ নাম</label>
                        <input type="text" id="auth_name" name="name"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                               placeholder="আপনার পূর্ণ নাম">
                        <p class="text-xs text-gray-500 mt-1">নতুন ব্যবহারকারী হলে প্রয়োজন</p>
                    </div>

                    <div>
                        <label for="auth_phone" class="block text-sm font-medium text-gray-700 mb-2">ফোন নম্বর *</label>
                        <input type="tel" id="auth_phone" name="phone" required
                               pattern="^01[3-9][0-9]{8}$"
                               inputmode="numeric" maxlength="11"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                               placeholder="01XXXXXXXXX">
                    </div>

                    <button type="submit" id="authSendOtpBtn"
                            class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-colors flex items-center justify-center">
                        <span id="authSendOtpText">OTP পাঠান</span>
                        <span id="authSendOtpLoading" class="hidden ml-2">
                            <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                        </span>
                    </button>
                </form>
                
                <div class="mt-6 text-center">
                    <p class="text-sm text-gray-600">
                        অ্যাকাউন্ট নেই? 
                        <span id="authModeToggle" class="text-blue-600 hover:text-blue-500 font-medium cursor-pointer">নিবদ্ধন করুন</span>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script>
    (function () {
        const form = document.getElementById('authPhoneForm');
        const phoneStep = document.getElementById('authPhoneStep');
        const nameInput = document.getElementById('auth_name');
        const phoneInput = document.getElementById('auth_phone');
        const sendBtn = document.getElementById('authSendOtpBtn');
        const sendBtnText = document.getElementById('authSendOtpText');
        const sendBtnLoading = document.getElementById('authSendOtpLoading');
        const title = document.getElementById('authTitle');
        const subtitle = document.getElementById('authSubtitle');
        const modeToggle = document.getElementById('authModeToggle');
        
        let isLoginMode = true;

        if (modeToggle) {
            modeToggle.addEventListener('click', function () {
                isLoginMode = !isLoginMode;
                if (isLoginMode) {
                    title.textContent = 'অ্যাকাউন্টে প্রবেশ করুন';
                    subtitle.textContent = 'ফোন নম্বর দিয়ে OTP পেতে নিচে ফর্ম পূরণ করুন';
                    modeToggle.textContent = 'নিবদ্ধন করুন';
                } else {
                    title.textContent = 'নতুন অ্যাকাউন্ট তৈরি করুন';
                    subtitle.textContent = 'ফোন নম্বর দিয়ে OTP পেতে নিচে ফর্ম পূরণ করুন';
                    modeToggle.textContent = 'লগইন করুন';
                }
            });
        }

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            
            const phone = phoneInput.value.trim();
            const phonePattern = /^01[3-9][0-9]{8}$/;
            
            if (!phone || !phonePattern.test(phone)) {
                alert('সঠিক মোবাইল নম্বর লিখুন (01XXXXXXXXX)');
                return;
            }

            sendBtn.disabled = true;
            sendBtnText.textContent = 'OTP পাঠানো হচ্ছে...';
            sendBtnLoading.classList.remove('hidden');

            fetch('{{ route("login.send.otp") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    phone: phone,
                    name: nameInput ? nameInput.value : null
                })
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                     window.location.href = '{{ route("login.verify.form") }}?phone=' + encodeURIComponent(phone) + '&type=auth_verification';
                } else {
                    alert(data.message || 'OTP পাঠাতে সমস্যা হয়েছে।');
                }
            })
            .catch(() => {
                alert('একটি সমস্যা হয়েছে। অনুগ্রহ করে আবার চেষ্টা করুন।');
            })
            .finally(() => {
                sendBtn.disabled = false;
                sendBtnText.textContent = 'OTP পাঠান';
                sendBtnLoading.classList.add('hidden');
            });
        });
    })();
    </script>
</x-guest-layout>
