@extends('layouts.auth')

@section('title', 'Login')

@section('content')
<div class="flex min-h-screen bg-gray-50">
    <div class="min-h-screen flex items-center justify-center bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
    @if ($errors->any())
    <div class="fixed top-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
        <strong class="font-bold">Error!</strong>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
        <div class="mx-auto w-full max-w-sm lg:w-96">
            <div class="text-center mb-8">
                <div class="flex items-center justify-center space-x-2">
                    <i class="fas fa-fire-flame-curved text-primary-600 text-3xl"></i>
                    <h1 class="text-3xl font-bold text-gray-900">GasGuard</h1>
                </div>
                <h2 class="mt-6 text-xl font-semibold text-gray-900">Welcome Back</h2>
                <p class="mt-2 text-sm text-gray-600">Log in to your account to monitor your gas sensors and manage refill requests.</p>
            </div>

            @if(session('error'))
            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6" role="alert">
                <p>{{ session('error') }}</p>
            </div>
            @endif

            <div class="mt-8">
                <div class="mt-6">
                    <form action="{{ route('login.submit') }}" method="POST" class="space-y-6">
                        @csrf
                        
                        <div>
                            <label for="phone_number" class="block text-sm font-medium text-gray-700">Phone Number</label>
                            <div class="mt-1 relative rounded-md shadow-sm">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-phone text-gray-400"></i>
                                </div>
                                <input id="phone_number" name="phone_number" type="tel" required class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm @error('phone_number') border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500 @enderror" placeholder="+254 7XX XXX XXX">
                            </div>
                            @error('phone_number')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div id="otp-section" class="hidden">
                            <label for="otp" class="block text-sm font-medium text-gray-700">Enter OTP</label>
                            <p class="text-xs text-gray-500 mb-2">For testing, use OTP: 123456</p>
                            <div class="mt-1 flex justify-between">
                                <input type="text" maxlength="1" class="otp-input w-12 h-12 text-center text-xl rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500" pattern="[0-9]" required>
                                <input type="text" maxlength="1" class="otp-input w-12 h-12 text-center text-xl rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500" pattern="[0-9]" required>
                                <input type="text" maxlength="1" class="otp-input w-12 h-12 text-center text-xl rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500" pattern="[0-9]" required>
                                <input type="text" maxlength="1" class="otp-input w-12 h-12 text-center text-xl rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500" pattern="[0-9]" required>
                                <input type="text" maxlength="1" class="otp-input w-12 h-12 text-center text-xl rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500" pattern="[0-9]" required>
                                <input type="text" maxlength="1" class="otp-input w-12 h-12 text-center text-xl rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500" pattern="[0-9]" required>
                            </div>
                            <input type="hidden" name="otp" id="otp-value">
                            @error('otp')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                            <div class="mt-4 flex items-center justify-between">
                                <p class="text-sm text-gray-500">Didn't receive the code?</p>
                                <button type="button" id="resend-otp" class="text-sm font-medium text-primary-600 hover:text-primary-500">Resend OTP</button>
                            </div>
                        </div>

                        <div>
                            <button type="submit" id="login-button" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                Request OTP
                            </button>
                        </div>
                    </form>
                    
                    <!-- Quick Login Section for Testing -->
                    @if(!app()->environment('production'))
                    <div class="mt-8 pt-6 border-t border-gray-200">
                        <h3 class="text-sm font-medium text-gray-700 mb-3">Quick Login (Testing Only)</h3>
                        <div class="grid grid-cols-3 gap-3">
                            <a href="{{ route('login.as', 'super_admin') }}" class="flex justify-center py-2 px-2 border border-transparent rounded-md shadow-sm text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                Super Admin
                            </a>
                            <a href="{{ route('login.as', 'gas_company_admin') }}" class="flex justify-center py-2 px-2 border border-transparent rounded-md shadow-sm text-xs font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                                Company Admin
                            </a>
                            <a href="{{ route('login.as', 'end_user') }}" class="flex justify-center py-2 px-2 border border-transparent rounded-md shadow-sm text-xs font-medium text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500">
                                End User
                            </a>
                        </div>
                        <p class="mt-2 text-xs text-gray-500 text-center">These options are for testing only and will be hidden in production.</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="hidden lg:block relative w-0 flex-1 bg-gradient-to-br from-primary-600 to-secondary-600">
        <div class="absolute inset-0 flex flex-col items-center justify-center px-8">
            <div class="max-w-2xl">
                <h2 class="text-4xl font-bold text-white mb-6">Smart Gas Monitoring System</h2>
                <p class="text-xl text-white opacity-90 mb-8">Monitor your gas levels in real-time, receive instant alerts, and request refills with a single click.</p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-blur-sm">
                        <div class="text-white text-3xl mb-4">
                            <i class="fas fa-gauge-high"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-white mb-2">Real-time Monitoring</h3>
                        <p class="text-white opacity-90">Track your gas levels in real-time with accurate sensors and smart analytics.</p>
                    </div>
                    
                    <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-blur-sm">
                        <div class="text-white text-3xl mb-4">
                            <i class="fas fa-bell"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-white mb-2">Instant Alerts</h3>
                        <p class="text-white opacity-90">Get notified immediately about gas leaks or when your gas levels are running low.</p>
                    </div>
                    
                    <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-blur-sm">
                        <div class="text-white text-3xl mb-4">
                            <i class="fas fa-truck"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-white mb-2">Easy Refill Requests</h3>
                        <p class="text-white opacity-90">Request gas refills with a single click and track delivery in real-time.</p>
                    </div>
                    
                    <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-blur-sm">
                        <div class="text-white text-3xl mb-4">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-white mb-2">Enhanced Safety</h3>
                        <p class="text-white opacity-90">Advanced leak detection and safety features for peace of mind.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const loginForm = document.querySelector('form');
        const phoneInput = document.getElementById('phone');
        const otpSection = document.getElementById('otp-section');
        const loginButton = document.getElementById('login-button');
        const resendOtpBtn = document.getElementById('resend-otp');
        const otpInputs = document.querySelectorAll('.otp-input');
        const otpValue = document.getElementById('otp-value');
        
        // Handle form submission
        loginForm.addEventListener('submit', function(e) {
            if (otpSection.classList.contains('hidden')) {
                e.preventDefault();
                // Request OTP
                requestOTP();
            } else {
                // Collect OTP before submission
                let otp = '';
                otpInputs.forEach(input => {
                    otp += input.value;
                });
                otpValue.value = otp;
            }
        });
        
        // Request OTP function
        function requestOTP() {
            const phone = phoneInput.value.trim();
            
            if (!phone) {
                alert('Please enter your phone number');
                return;
            }
            
            // Show loading state
            loginButton.disabled = true;
            loginButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Sending OTP...';
            
            // Simulate OTP request (replace with actual API call)
            setTimeout(() => {
                // Show OTP section
                otpSection.classList.remove('hidden');
                loginButton.innerHTML = 'Verify OTP';
                loginButton.disabled = false;
                otpInputs[0].focus();
                
                // Start countdown for resend button
                startResendCountdown();
            }, 1500);
        }
        
        // Handle OTP input
        otpInputs.forEach((input, index) => {
            // Auto focus next input
            input.addEventListener('input', function() {
                if (this.value.length === 1) {
                    if (index < otpInputs.length - 1) {
                        otpInputs[index + 1].focus();
                    } else {
                        this.blur();
                    }
                }
            });
            
            // Handle backspace
            input.addEventListener('keydown', function(e) {
                if (e.key === 'Backspace' && !this.value) {
                    if (index > 0) {
                        otpInputs[index - 1].focus();
                    }
                }
            });
            
            // Only allow numbers
            input.addEventListener('keypress', function(e) {
                if (!/[0-9]/.test(e.key)) {
                    e.preventDefault();
                }
            });
        });
        
        // Resend OTP countdown
        function startResendCountdown() {
            let countdown = 30;
            resendOtpBtn.disabled = true;
            resendOtpBtn.innerHTML = `Resend OTP (${countdown})`;
            
            const timer = setInterval(() => {
                countdown--;
                resendOtpBtn.innerHTML = `Resend OTP (${countdown})`;
                
                if (countdown <= 0) {
                    clearInterval(timer);
                    resendOtpBtn.disabled = false;
                    resendOtpBtn.innerHTML = 'Resend OTP';
                }
            }, 1000);
        }
        
        // Resend OTP
        resendOtpBtn.addEventListener('click', function() {
            if (!this.disabled) {
                requestOTP();
            }
        });
    });
</script>
@endsection