@extends('layouts.main')
@push('title')
    <title>Fit Sport Hub - Register</title>
@endpush
@section('main-section')


    @if (session()->has('success_message'))
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                Swal.fire({
                    title: 'Success',
                    text: '{{ session()->get('success_message') }}',
                    icon: 'success',
                    toast: true,
                    position: 'top-end', // Top-left corner
                    customClass: {
                        popup: 'swal-elongated'
                    },
                    showConfirmButton: false,
                    timer: 3000 // Disappears after 2 seconds
                });
            });
        </script>
    @endif

    @if (count($errors) > 0)
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                Swal.fire({
                    title: 'Error',
                    html: '<ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>',
                    icon: 'warning',
                    toast: true,
                    position: 'top-end', // Top-left corner
                    customClass: {
                        popup: 'swal-elongated'
                    },
                    showConfirmButton: false,
                    timer: 3000 // Disappears after 2 seconds
                });
            });
        </script>
    @endif


    <!-- Main Content -->
    <main class="container mx-auto px-4 py-12">
        <div class="max-w-md mx-auto">
            <div class="bg-white p-8 rounded-2xl shadow-xl border border-slate-200">
                <div class="text-center mb-8">
                    <h1 class="text-3xl font-bold text-gray-900 mb-2">Create Account</h1>
                    <p class="text-gray-600">Join our fitness community today</p>
                </div>
                
                <div class="auth-tabs mb-6">
                    <div class="auth-tab active" data-tab="email-tab">
                        <i class="fas fa-envelope mr-2"></i> Email
                    </div>
                    <!-- <div class="auth-tab" data-tab="phone-tab">
                        <i class="fas fa-phone mr-2"></i> Phone
                    </div> -->
                </div>
                
                <!-- Email Registration Form -->
                <div id="email-tab" class="auth-tab-content active">
                    <form method="POST" action="{{ route('register') }}" id="email-register-form">
                        @csrf
                        
                        <div class="mb-4">
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                            <input type="text" id="name" name="name" value="{{ old('name') }}" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
                                   placeholder="John Doe" required>
                        </div>
                        
                        <div class="mb-4 relative">
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                            <input type="email" id="email" name="email" value="{{ old('email') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
                                   placeholder="your@email.com" required>
                        </div>
                        
                        <div class="mb-4 relative">
                            <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                            <div class="relative">
                                <input type="password" id="password" name="password"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
                                       placeholder="••••••••" required>
                                <button type="button" class="absolute right-3 top-3 text-gray-500 hover:text-gray-700" id="togglePassword">
                                    <i class="far fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <label for="password-confirm" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
                            <input type="password" id="password-confirm" name="password_confirmation"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
                                   placeholder="••••••••" required>
                        </div>

                        <div class="mb-4">
                                <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
                                @error('g-recaptcha-response')
                                    <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
                                @enderror
                            </div>
                        
                        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition">
                            Create Account
                        </button>
                    </form>
                    
                    <div class="mt-6">
                        <div class="relative">
                            <div class="absolute inset-0 flex items-center">
                                <div class="w-full border-t border-gray-300"></div>
                            </div>
                            <div class="relative flex justify-center text-sm">
                                <span class="px-2 bg-white text-gray-500">Or continue with</span>
                            </div>
                        </div>
                        
                        <div class="mt-6">
                            <a href="{{ url('login/google') }}" class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 rounded-lg shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                <img src="{{asset('img/bcgoogle.png')}}" alt="Google" class="h-5 w-5 mr-2">
                                Google
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Phone Registration Form -->

                <div id="phone-tab" class="auth-tab-content">
                    <form id="phone-login-form">
                        <!-- Phone Number Input -->
                        <div class="mb-4 relative">
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Mobile Number</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <img src="{{asset('img/indianflag.jpg')}}" class="h-5" alt="Indian flag">
                                    <!-- <span class="ml-2 text-gray-500">+91</span> -->
                                </div>
                                <input type="tel" id="phone" name="phone" 
                                    class="w-full pl-16 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
                                    placeholder="9876543210"
                                    maxlength="10" 
                                    pattern="\d{10}"
                                    title="Enter a 10-digit mobile number"
                                    oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10)"
                                    required>
                                <button type="button" id="sendOtpBtn" 
                                        class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-600 hover:bg-blue-700 text-white text-sm px-3 py-1 rounded transition">
                                    Send OTP
                                </button>
                            </div>
                        </div>

                        <!-- OTP Section (Initially Hidden) -->
                        <div id="otp-section" class="hidden space-y-4">
                            <div class="mb-4">
                                <label for="otp" class="block text-sm font-medium text-gray-700 mb-1">Enter OTP</label>
                                <div class="relative">
                                    <input type="text" id="otp" name="otp"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all otp-input"
                                        placeholder="••••••"
                                        maxlength="6"
                                        pattern="\d{6}"
                                        title="Enter 6-digit OTP"
                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6)"
                                        required>
                                    <button type="button" id="resendOtpBtn" 
                                            class="absolute right-2 top-1/2 transform -translate-y-1/2 text-blue-600 hover:text-blue-800 text-sm">
                                        Resend
                                    </button>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">OTP sent to +91 XXXXXXX<span id="lastTwoDigits"></span></p>
                            </div>

                            <button type="submit" id="verifyOtpBtn" 
                                    class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition">
                                Verify & Login
                            </button>
                        </div>
                    </form>

                    <!-- <div class="mt-6 pt-6 border-t border-gray-200">
                        <p class="text-sm text-gray-600 text-center">
                            By continuing, you agree to our 
                            <a href="#" class="text-blue-600 hover:text-blue-800">Terms</a> and 
                            <a href="#" class="text-blue-600 hover:text-blue-800">Privacy Policy</a>
                        </p>
                    </div> -->
                </div>


                
                <div class="mt-6 text-center">
                    <p class="text-sm text-gray-600">
                        By creating an account, you agree to our 
                        <a href="#" class="text-blue-600 hover:text-blue-800">Terms</a> and 
                        <a href="#" class="text-blue-600 hover:text-blue-800">Privacy Policy</a>.
                    </p>
                    <p class="mt-4 text-sm text-gray-600">
                        Already have an account? 
                        <a href="{{ route('login') }}" class="text-blue-600 font-medium hover:text-blue-800">Sign in</a>
                    </p>
                </div>
            </div>
        </div>
    </main>

@endsection

@section('extrascripts')
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        // Toggle password visibility
        document.getElementById('togglePassword').addEventListener('click', function() {
            const password = document.getElementById('password');
            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);
            this.querySelector('i').classList.toggle('fa-eye-slash');
        });
        
        // document.getElementById('togglePhonePassword').addEventListener('click', function() {
        //     const password = document.getElementById('phone-password');
        //     const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
        //     password.setAttribute('type', type);
        //     this.querySelector('i').classList.toggle('fa-eye-slash');
        // });
        
        // Tab switching
        document.querySelectorAll('.auth-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                // Remove active class from all tabs and content
                document.querySelectorAll('.auth-tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.auth-tab-content').forEach(c => c.classList.remove('active'));
                
                // Add active class to clicked tab and corresponding content
                this.classList.add('active');
                const tabId = this.getAttribute('data-tab');
                document.getElementById(tabId).classList.add('active');
            });
        });
        
        // Form validation
        document.getElementById('email-register-form').addEventListener('submit', function(e) {
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('password-confirm').value;
            
            if (password !== confirmPassword) {
                e.preventDefault();
                alert('Passwords do not match!');
            }
        });
        
        // document.getElementById('phone-register-form').addEventListener('submit', function(e) {
        //     const phone = document.getElementById('phone').value;
        //     const password = document.getElementById('phone-password').value;
        //     const confirmPassword = document.getElementById('phone-password-confirm').value;
            
        //     if (phone.length !== 10) {
        //         e.preventDefault();
        //         alert('Please enter a valid 10-digit phone number');
        //         return;
        //     }
            
        //     if (password !== confirmPassword) {
        //         e.preventDefault();
        //         alert('Passwords do not match!');
        //     }
        // });
    </script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const sendOtpBtn = document.getElementById('sendOtpBtn');
        const otpSection = document.getElementById('otp-section');
        const phoneInput = document.getElementById('phone');
        const lastTwoDigits = document.getElementById('lastTwoDigits');
        
        // Handle OTP Sending
        sendOtpBtn.addEventListener('click', function() {
            const phoneNumber = phoneInput.value;
            
            if (phoneNumber.length === 10) {
                // Show loading state
                sendOtpBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Sending';
                sendOtpBtn.disabled = true;
                
                // Simulate API call
                setTimeout(() => {
                    // Show OTP section
                    otpSection.classList.remove('hidden');
                    
                    // Update last two digits display
                    lastTwoDigits.textContent = phoneNumber.slice(-2);
                    
                    // Reset button
                    sendOtpBtn.innerHTML = 'Sent!';
                    setTimeout(() => {
                        sendOtpBtn.innerHTML = 'Send OTP';
                        sendOtpBtn.disabled = false;
                    }, 2000);
                    
                    // Start countdown for resend
                    startResendCountdown();
                    
                }, 1500);
            } else {
                alert('Please enter a valid 10-digit mobile number');
            }
        });
        
        // Resend OTP functionality
        const resendOtpBtn = document.getElementById('resendOtpBtn');
        
        function startResendCountdown() {
            let seconds = 30;
            resendOtpBtn.disabled = true;
            resendOtpBtn.innerHTML = `Resend in ${seconds}s`;
            
            const countdown = setInterval(() => {
                seconds--;
                resendOtpBtn.innerHTML = `Resend in ${seconds}s`;
                
                if (seconds <= 0) {
                    clearInterval(countdown);
                    resendOtpBtn.disabled = false;
                    resendOtpBtn.innerHTML = 'Resend OTP';
                }
            }, 1000);
        }
        
        resendOtpBtn.addEventListener('click', function() {
            // Similar to initial OTP send
            sendOtpBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Sending';
            sendOtpBtn.disabled = true;
            
            setTimeout(() => {
                sendOtpBtn.innerHTML = 'Sent!';
                setTimeout(() => {
                    sendOtpBtn.innerHTML = 'Send OTP';
                    sendOtpBtn.disabled = false;
                }, 2000);
                
                startResendCountdown();
                alert('New OTP sent successfully!');
            }, 1500);
        });
        
        // Form submission
        document.getElementById('phone-login-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const otp = document.getElementById('otp').value;
            
            if (otp.length === 6) {
                // Show loading on verify button
                const verifyBtn = document.getElementById('verifyOtpBtn');
                verifyBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Verifying...';
                verifyBtn.disabled = true;
                
                // Simulate verification
                setTimeout(() => {
                    // Here you would typically submit to your backend
                    alert('Login successful!');
                    // window.location.href = '/dashboard'; // Redirect on success
                }, 1500);
            } else {
                alert('Please enter a valid 6-digit OTP');
            }
        });
    });
</script>
@endsection