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


<style>
        .password-toggle {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #6b7280;
    }
</style>
    @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',
                    customClass: {
                        popup: 'swal-elongated'
                    },
                    showConfirmButton: false,
                    timer: 3000
                });
            });
        </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',
                    customClass: {
                        popup: 'swal-elongated'
                    },
                    showConfirmButton: false,
                    timer: 3000
                });
            });
        </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">Welcome Back</h1>
                    <p class="text-gray-600">Sign in to continue your fitness journey</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 Login Form -->
                <div id="email-tab" class="auth-tab-content active">
                    <form method="POST" action="{{ route('login') }}" id="email-login-form">
                        @csrf
                        
                        <div class="mb-4">
                            <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 autofocus>
                        </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>
                                <span class="password-toggle" id="togglePassword">
                                    <i class="far fa-eye"></i>
                                </span>
                            </div>
                        </div>
                        
                        <div class="mb-6 flex justify-between items-center">
                            <div class="flex items-center">
                                <input type="checkbox" id="remember" name="remember" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                <label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label>
                            </div>
                            <a href="{{ route('password.request') }}" class="text-sm text-blue-600 hover:text-blue-800">Forgot password?</a>
                        </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">
                            Sign In
                        </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 Login 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">
                                </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>
                
                <div class="mt-6 text-center">
                    <p class="text-sm text-gray-600">
                        Don't have an account? 
                        <a href="{{ route('register') }}" class="text-blue-600 font-medium hover:text-blue-800">Sign up</a>
                    </p>
                </div>
            </div>
        </div>
    </main>

    @endsection

    @section('extrascripts')
    <script>
        // Toggle password visibility
        document.getElementById('togglePassword').addEventListener('click', function() {
            const password = document.getElementById('password');
            const icon = this.querySelector('i');
            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);
            icon.classList.toggle('fa-eye');
            icon.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');
            });
        });
        
        // Phone OTP functionality
        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');
            const resendOtpBtn = document.getElementById('resendOtpBtn');
            const verifyOtpBtn = document.getElementById('verifyOtpBtn');
            
            // 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;
                    
                    // Get CSRF token
                    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                    
                    // Make AJAX call to send OTP
                    $.ajax({
                        url: '/send-otp',
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        data: { phone: phoneNumber },
                        success: function(response) {
                            // 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();
                        },
                        error: function(error) {
                            console.error('Error sending OTP:', error);
                            alert('Error sending OTP. Please try again.');
                            sendOtpBtn.innerHTML = 'Send OTP';
                            sendOtpBtn.disabled = false;
                        }
                    });
                } else {
                    alert('Please enter a valid 10-digit mobile number');
                }
            });
            
            // Resend OTP functionality
            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() {
                const phoneNumber = phoneInput.value;
                
                // Show loading state
                resendOtpBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Sending';
                resendOtpBtn.disabled = true;
                
                // Get CSRF token
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                
                // Make AJAX call to resend OTP
                $.ajax({
                    url: '/resend-otp',
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    data: { phone: phoneNumber },
                    success: function(response) {
                        // Reset button
                        resendOtpBtn.innerHTML = 'Sent!';
                        setTimeout(() => {
                            startResendCountdown();
                        }, 2000);
                        
                        alert('New OTP sent successfully!');
                    },
                    error: function(error) {
                        console.error('Error resending OTP:', error);
                        alert('Error resending OTP. Please try again.');
                        resendOtpBtn.innerHTML = 'Resend OTP';
                        resendOtpBtn.disabled = false;
                    }
                });
            });
            
            // Form submission for OTP verification
            document.getElementById('phone-login-form').addEventListener('submit', function(e) {
                e.preventDefault();
                const phoneNumber = phoneInput.value;
                const otp = document.getElementById('otp').value;
                
                if (otp.length === 6) {
                    // Show loading on verify button
                    verifyOtpBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Verifying...';
                    verifyOtpBtn.disabled = true;
                    
                    // Get CSRF token
                    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                    
                    // Make AJAX call to verify OTP
                    $.ajax({
                        url: '/verify-otp',
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        data: { 
                            phone: phoneNumber,
                            otp: otp 
                        },
                        success: function(response) {
                            if (response.success) {
                                // Redirect on successful verification
                                window.location.href = '/';
                            } else {
                                alert('Invalid OTP. Please try again.');
                                verifyOtpBtn.innerHTML = 'Verify & Login';
                                verifyOtpBtn.disabled = false;
                            }
                        },
                        error: function(error) {
                            console.error('Error verifying OTP:', error);
                            alert('Error verifying OTP. Please try again.');
                            verifyOtpBtn.innerHTML = 'Verify & Login';
                            verifyOtpBtn.disabled = false;
                        }
                    });
                } else {
                    alert('Please enter a valid 6-digit OTP');
                }
            });
        });
    </script>
    @endsection