@extends('layouts.mobile')

@section('title', 'Register')

@section('content')
<!-- Registration Form -->
<div class="mobile-card">
    <div class="mobile-card-header text-center">
        <h2 class="mb-2">
            <i class="bi bi-person-plus me-2"></i>
            {{ __('mobile.create_account_title') }}
        </h2>
        <p class="mb-0 opacity-75">{{ __('mobile.join_tcs_courier') }}</p>
    </div>
    <div class="mobile-card-body">
        @if ($errors->any())
            <div class="alert alert-danger alert-mobile">
                <i class="bi bi-exclamation-triangle me-2"></i>
                <strong>Registration Failed!</strong>
                @foreach ($errors->all() as $error)
                    <br>{{ $error }}
                @endforeach
            </div>
        @endif
        
        @if (session('error'))
            <div class="alert alert-danger alert-mobile">
                <i class="bi bi-exclamation-triangle me-2"></i>
                {{ session('error') }}
            </div>
        @endif
        
        @if (session('success'))
            <div class="alert alert-success alert-mobile">
                <i class="bi bi-check-circle me-2"></i>
                {{ session('success') }}
            </div>
        @endif
        
        <form method="POST" action="{{ route('register') }}">
            @csrf
            
            <!-- Full Name -->
            <div class="mb-4">
                <label for="name" class="form-label fw-bold">
                    <i class="bi bi-person me-2 text-primary"></i>Full Name
                </label>
                <input type="text" class="form-control form-control-mobile @error('name') is-invalid @enderror" 
                       id="name" name="name" value="{{ old('name') }}" 
                       placeholder="Enter your full name" required autofocus>
                @error('name')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            
            <!-- Email -->
            <div class="mb-4">
                <label for="email" class="form-label fw-bold">
                    <i class="bi bi-envelope me-2 text-primary"></i>Email Address
                </label>
                <input type="email" class="form-control form-control-mobile @error('email') is-invalid @enderror" 
                       id="email" name="email" value="{{ old('email') }}" 
                       placeholder="Enter your email address" required>
                @error('email')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            
            <!-- Phone Number -->
            <div class="mb-4">
                <label for="phone" class="form-label fw-bold">
                    <i class="bi bi-telephone me-2 text-success"></i>Phone Number
                </label>
                <input type="tel" class="form-control form-control-mobile @error('phone') is-invalid @enderror" 
                       id="phone" name="phone" value="{{ old('phone') }}" 
                       placeholder="+92-300-1234567" required>
                @error('phone')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
                <small class="form-text text-muted">
                    <i class="bi bi-info-circle me-1"></i>
                    We'll use this for order notifications
                </small>
            </div>
            
            <!-- Password -->
            <div class="mb-4">
                <label for="password" class="form-label fw-bold">
                    <i class="bi bi-lock me-2 text-primary"></i>Password
                </label>
                <div class="input-group">
                    <input type="password" class="form-control form-control-mobile @error('password') is-invalid @enderror" 
                           id="password" name="password" placeholder="Create a strong password" required>
                    <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                        <i class="bi bi-eye" id="toggleIcon"></i>
                    </button>
                </div>
                @error('password')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
                <small class="form-text text-muted">
                    <i class="bi bi-shield-check me-1"></i>
                    Minimum 8 characters with letters and numbers
                </small>
            </div>
            
            <!-- Confirm Password -->
            <div class="mb-4">
                <label for="password_confirmation" class="form-label fw-bold">
                    <i class="bi bi-lock-fill me-2 text-primary"></i>Confirm Password
                </label>
                <div class="input-group">
                    <input type="password" class="form-control form-control-mobile" 
                           id="password_confirmation" name="password_confirmation" 
                           placeholder="Confirm your password" required>
                    <button class="btn btn-outline-secondary" type="button" id="toggleConfirmPassword">
                        <i class="bi bi-eye" id="toggleConfirmIcon"></i>
                    </button>
                </div>
            </div>
            
            <!-- Terms and Conditions -->
            <div class="mb-4">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="terms" name="terms" required>
                    <label class="form-check-label" for="terms">
                        I agree to the <a href="#" class="text-primary">Terms of Service</a> and <a href="#" class="text-primary">Privacy Policy</a>
                    </label>
                </div>
            </div>
            
            <!-- Marketing Consent -->
            <div class="mb-4">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="marketing" name="marketing">
                    <label class="form-check-label" for="marketing">
                        Send me promotional offers and updates via SMS/Email
                    </label>
                </div>
            </div>

            <!-- CAPTCHA Challenge -->
            <div class="mb-4" aria-labelledby="captchaLabel">
                <label id="captchaLabel" class="form-label fw-bold d-flex align-items-center justify-content-between">
                    <span>
                        <i class="bi bi-shield-lock me-2 text-danger" aria-hidden="true"></i>
                        Verify you’re human
                    </span>
                    <span class="ms-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="refreshCaptcha" aria-label="Refresh CAPTCHA" title="Refresh CAPTCHA">
                            <i class="bi bi-arrow-clockwise" aria-hidden="true"></i>
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="audioCaptcha" aria-label="Play audio CAPTCHA" title="Play audio CAPTCHA">
                            <i class="bi bi-volume-up" aria-hidden="true"></i>
                        </button>
                    </span>
                </label>
                <div class="d-flex align-items-center gap-3 flex-wrap">
                    <canvas id="captchaCanvas" width="220" height="72" class="border rounded" aria-hidden="true"></canvas>
                    <div class="flex-grow-1">
                        <input type="hidden" name="captcha_token" id="captchaToken">
                        <input type="text" class="form-control form-control-mobile @error('captcha_input') is-invalid @enderror" id="captchaInput" name="captcha_input" placeholder="Enter CAPTCHA" aria-describedby="captchaHelp" required>
                        <small id="captchaHelp" class="form-text text-muted d-block mt-1">
                            <i class="bi bi-info-circle me-1" aria-hidden="true"></i>
                            Type the characters or solve the math problem shown.
                        </small>
                        @error('captcha_input')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
            
            <!-- Submit Button -->
            <div class="d-grid mb-4">
                <button type="submit" class="btn btn-mobile btn-mobile-primary">
                    <i class="bi bi-person-plus me-2"></i>
                    Create My Account
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Social Registration -->
<div class="mobile-card">
    <div class="mobile-card-body">
        <div class="text-center mb-4">
            <p class="text-muted mb-3">Or sign up with</p>
        </div>
        
        <div class="row g-3 mb-4">
            <div class="col-6">
                <a href="#" class="btn btn-mobile btn-mobile-danger w-100" onclick="alert('Google registration coming soon!')">
                    <i class="bi bi-google me-2"></i>
                    Google
                </a>
            </div>
            <div class="col-6">
                <a href="#" class="btn btn-mobile btn-mobile-primary w-100" onclick="alert('Facebook registration coming soon!')">
                    <i class="bi bi-facebook me-2"></i>
                    Facebook
                </a>
            </div>
        </div>
        
        <!-- Phone Registration -->
        <div class="d-grid mb-4">
            <a href="#" class="btn btn-mobile btn-mobile-success" onclick="alert('Phone registration coming soon!')">
                <i class="bi bi-phone me-2"></i>
                Register with Phone Number
            </a>
        </div>
    </div>
</div>

<!-- Login Link -->
<div class="mobile-card">
    <div class="mobile-card-body text-center">
        <p class="text-muted mb-3">Already have an account?</p>
        <a href="{{ route('login') }}" class="btn btn-mobile btn-mobile-warning w-100">
            <i class="bi bi-box-arrow-in-right me-2"></i>
            Sign In to Existing Account
        </a>
    </div>
</div>

<!-- Benefits Section -->
<div class="mobile-card">
    <div class="mobile-card-body">
        <h6 class="mb-4 text-center">
            <i class="bi bi-star text-warning me-2"></i>
            Why Join TCS Courier?
        </h6>
        
        <div class="row g-3">
            <div class="col-12">
                <div class="d-flex align-items-center p-2">
                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                        <i class="bi bi-lightning-charge"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 small">Fast Delivery</h6>
                        <small class="text-muted">Same day & next day options</small>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="d-flex align-items-center p-2">
                    <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                        <i class="bi bi-shield-check"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 small">Secure & Insured</h6>
                        <small class="text-muted">Your packages are protected</small>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="d-flex align-items-center p-2">
                    <div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                        <i class="bi bi-geo-alt"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 small">Real-time Tracking</h6>
                        <small class="text-muted">Track every step of delivery</small>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="d-flex align-items-center p-2">
                    <div class="bg-warning text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                        <i class="bi bi-credit-card"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 small">Flexible Payment</h6>
                        <small class="text-muted">COD, JazzCash, EasyPaisa</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Access -->
<div class="mobile-card">
    <div class="mobile-card-body">
        <h6 class="mb-3 text-center">
            <i class="bi bi-lightning-charge text-warning me-2"></i>
            Quick Access (No Registration Required)
        </h6>
        <div class="row g-2">
            <div class="col-6">
                <a href="{{ route('tracking') }}" class="btn btn-outline-info w-100 btn-sm">
                    <i class="bi bi-search"></i>
                    <br>
                    <small>Track Package</small>
                </a>
            </div>
            <div class="col-6">
                <a href="{{ route('home') }}" class="btn btn-outline-secondary w-100 btn-sm">
                    <i class="bi bi-house"></i>
                    <br>
                    <small>Back to Home</small>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Toggle password visibility
    document.getElementById('togglePassword').addEventListener('click', function() {
        const passwordField = document.getElementById('password');
        const toggleIcon = document.getElementById('toggleIcon');
        
        if (passwordField.type === 'password') {
            passwordField.type = 'text';
            toggleIcon.className = 'bi bi-eye-slash';
        } else {
            passwordField.type = 'password';
            toggleIcon.className = 'bi bi-eye';
        }
    });
    
    // Toggle confirm password visibility
    document.getElementById('toggleConfirmPassword').addEventListener('click', function() {
        const confirmField = document.getElementById('password_confirmation');
        const toggleIcon = document.getElementById('toggleConfirmIcon');
        
        if (confirmField.type === 'password') {
            confirmField.type = 'text';
            toggleIcon.className = 'bi bi-eye-slash';
        } else {
            confirmField.type = 'password';
            toggleIcon.className = 'bi bi-eye';
        }
    });
    
    // Auto-format phone number
    document.getElementById('phone').addEventListener('input', function(e) {
        let value = e.target.value.replace(/\D/g, '');
        if (value.length > 0) {
            if (value.startsWith('92')) {
                value = '+' + value;
            } else if (!value.startsWith('+92')) {
                value = '+92' + value;
            }
        }
        e.target.value = value;
    });
    
    // Password confirmation validation
    document.getElementById('password_confirmation').addEventListener('input', function() {
        const password = document.getElementById('password').value;
        const confirmation = this.value;
        
        if (password !== confirmation) {
            this.setCustomValidity('Passwords do not match');
            this.classList.add('is-invalid');
        } else {
            this.setCustomValidity('');
            this.classList.remove('is-invalid');
            this.classList.add('is-valid');
        }
    });
    
    // Form validation and loading state
    document.querySelector('form').addEventListener('submit', function(e) {
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const phone = document.getElementById('phone').value;
        const password = document.getElementById('password').value;
        const confirmation = document.getElementById('password_confirmation').value;
        const terms = document.getElementById('terms').checked;
        
        if (!name || !email || !phone || !password || !confirmation || !terms) {
            e.preventDefault();
            
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-warning alert-mobile';
            alertDiv.innerHTML = '<i class="bi bi-exclamation-triangle me-2"></i>Please fill in all required fields and accept the terms.';
            
            const form = document.querySelector('form');
            form.insertBefore(alertDiv, form.firstChild);
            
            setTimeout(() => {
                alertDiv.remove();
            }, 3000);
            
            return;
        }
        
        if (password !== confirmation) {
            e.preventDefault();
            
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-warning alert-mobile';
            alertDiv.innerHTML = '<i class="bi bi-exclamation-triangle me-2"></i>Passwords do not match.';
            
            const form = document.querySelector('form');
            form.insertBefore(alertDiv, form.firstChild);
            
            setTimeout(() => {
                alertDiv.remove();
            }, 3000);
            
            return;
        }
        
        // Show loading state
        const submitBtn = document.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>Creating Account...';
        submitBtn.disabled = true;
        
        showLoading();
    });
    
    // Auto-focus on name field for desktop, but not mobile to avoid keyboard popup
    document.addEventListener('DOMContentLoaded', function() {
        if (!window.matchMedia('(max-width: 768px)').matches) {
            setTimeout(() => {
                document.getElementById('name').focus();
            }, 500);
        }
    });
    
    // Add haptic feedback for form submission
    document.querySelector('button[type="submit"]').addEventListener('click', function() {
        if ('vibrate' in navigator) {
            navigator.vibrate(100);
        }
    });
    
    // Real-time validation feedback
    document.querySelectorAll('input').forEach(input => {
        input.addEventListener('input', function() {
            if (this.value.trim()) {
                this.classList.remove('is-invalid');
                this.classList.add('is-valid');
            } else {
                this.classList.remove('is-valid');
            }
        });
    });
    
    // Password strength indicator
    document.getElementById('password').addEventListener('input', function() {
        const password = this.value;
        const strength = {
            0: 'Very Weak',
            1: 'Weak', 
            2: 'Fair',
            3: 'Good',
            4: 'Strong'
        };
        
        let score = 0;
        if (password.length >= 8) score++;
        if (password.match(/[a-z]/)) score++;
        if (password.match(/[A-Z]/)) score++;
        if (password.match(/[0-9]/)) score++;
        if (password.match(/[^a-zA-Z0-9]/)) score++;
        
        // Remove existing strength indicator
        const existingIndicator = document.querySelector('.password-strength');
        if (existingIndicator) {
            existingIndicator.remove();
        }
        
        if (password.length > 0) {
            const indicator = document.createElement('small');
            indicator.className = 'password-strength form-text';
            indicator.innerHTML = `<i class="bi bi-shield-${score >= 3 ? 'check text-success' : 'exclamation text-warning'} me-1"></i>Password Strength: ${strength[score]}`;
            
            this.parentNode.parentNode.appendChild(indicator);
        }
    });
    
    // Auto-hide alerts after 5 seconds
    document.querySelectorAll('.alert').forEach(alert => {
        setTimeout(() => {
            alert.style.opacity = '0';
            alert.style.transform = 'translateY(-20px)';
            setTimeout(() => {
                alert.remove();
            }, 300);
        }, 5000);
    });

    // CAPTCHA logic
    (function() {
        const canvas = document.getElementById('captchaCanvas');
        const ctx = canvas ? canvas.getContext('2d') : null;
        const tokenInput = document.getElementById('captchaToken');
        const input = document.getElementById('captchaInput');
        const btnRefresh = document.getElementById('refreshCaptcha');
        const btnAudio = document.getElementById('audioCaptcha');

        let currentChallenge = null;

        function randInt(min, max) {
            const range = max - min + 1;
            const array = new Uint32Array(1);
            window.crypto.getRandomValues(array);
            return min + (array[0] % range);
        }

        function randFloat() {
            const array = new Uint32Array(1);
            window.crypto.getRandomValues(array);
            return array[0] / 2**32;
        }

        function drawNoise() {
            if (!ctx) return;
            for (let i = 0; i < 12; i++) {
                ctx.strokeStyle = `rgba(${randInt(0,255)}, ${randInt(0,255)}, ${randInt(0,255)}, 0.35)`;
                ctx.beginPath();
                ctx.moveTo(randInt(0, canvas.width), randInt(0, canvas.height));
                ctx.lineTo(randInt(0, canvas.width), randInt(0, canvas.height));
                ctx.stroke();
            }
            for (let i = 0; i < 40; i++) {
                ctx.fillStyle = `rgba(${randInt(0,255)}, ${randInt(0,255)}, ${randInt(0,255)}, 0.25)`;
                ctx.beginPath();
                ctx.arc(randInt(0, canvas.width), randInt(0, canvas.height), randInt(1, 3), 0, Math.PI * 2);
                ctx.fill();
            }
        }

        function drawText(text) {
            if (!ctx) return;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#f8f9fa';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            drawNoise();
            const xStart = 18;
            for (let i = 0; i < text.length; i++) {
                const ch = text[i];
                const fontSize = randInt(26, 34);
                const angle = (randFloat() - 0.5) * 0.6; // radians
                ctx.save();
                ctx.translate(xStart + i * 28, 42 + randInt(-6, 6));
                ctx.rotate(angle);
                ctx.font = `bold ${fontSize}px system-ui, -apple-system, Segoe UI, Roboto`;
                ctx.fillStyle = `hsl(${randInt(0,360)}, 60%, 25%)`;
                ctx.fillText(ch, 0, 0);
                ctx.restore();
            }
        }

        function drawMath(expr) {
            drawText(expr.replace(/\*/g, '×'));
        }

        async function fetchCaptcha(force = false) {
            try {
                const res = await fetch('/captcha' + (force ? `?t=${Date.now()}` : ''), { headers: { 'Accept': 'application/json' } });
                const data = await res.json();
                currentChallenge = data;
                tokenInput.value = data.token;
                input.value = '';
                if (data.type === 'text') {
                    drawText(data.text);
                } else if (data.type === 'math') {
                    drawMath(data.expr);
                }
            } catch (e) {
                console.error('Failed to load CAPTCHA', e);
            }
        }

        function playAudio() {
            if (!currentChallenge) return;
            const utterText = currentChallenge.type === 'text' ?
                `Please type the following characters: ${currentChallenge.text.split('').join(' ')}.` :
                `Please solve the following problem: ${currentChallenge.expr.replace(/\*/g, ' times ')}.`;
            if ('speechSynthesis' in window) {
                const utter = new SpeechSynthesisUtterance(utterText);
                utter.rate = 0.9;
                window.speechSynthesis.cancel();
                window.speechSynthesis.speak(utter);
            } else {
                const msg = document.createElement('div');
                msg.className = 'alert alert-info alert-mobile mt-2';
                msg.setAttribute('role', 'alert');
                msg.innerHTML = '<i class="bi bi-volume-mute me-2"></i>Audio not supported. Please use the visual CAPTCHA.';
                input.parentNode.appendChild(msg);
                setTimeout(() => msg.remove(), 4000);
            }
        }

        // Client-side check for math type for immediate feedback (UX only)
        function clientValidate() {
            if (!currentChallenge) return true;
            const val = (input.value || '').trim();
            if (!val) return false;
            if (currentChallenge.type === 'math') {
                try {
                    const parts = currentChallenge.expr.match(/(\d+)\s*([+\-*])\s*(\d+)/);
                    if (parts) {
                        const a = parseInt(parts[1], 10);
                        const op = parts[2];
                        const b = parseInt(parts[3], 10);
                        let sol = 0;
                        if (op === '+') sol = a + b;
                        if (op === '-') sol = a - b;
                        if (op === '*') sol = a * b;
                        return parseInt(val, 10) === sol;
                    }
                } catch (_) {}
            }
            // For text type, rely on server verification
            return true;
        }

        // Event bindings
        if (btnRefresh) btnRefresh.addEventListener('click', () => fetchCaptcha(true));
        if (btnAudio) btnAudio.addEventListener('click', playAudio);

        // Initialize on load; refresh automatically after server-side error
        const refreshOnLoad = {{ $errors->has('captcha_input') ? 'true' : 'false' }};
        fetchCaptcha(refreshOnLoad);

        // Pre-submit UX validation and haptics
        const form = document.querySelector('form[action="{{ route('register') }}"]');
        if (form) {
            form.addEventListener('submit', function(e) {
                // minimal client validation to prevent empty/obvious mistakes
                if (!tokenInput.value || !input.value.trim()) {
                    e.preventDefault();
                    const alertDiv = document.createElement('div');
                    alertDiv.className = 'alert alert-warning alert-mobile';
                    alertDiv.innerHTML = '<i class="bi bi-exclamation-triangle me-2"></i>Please complete the CAPTCHA.';
                    form.insertBefore(alertDiv, form.firstChild);
                    setTimeout(() => alertDiv.remove(), 3000);
                    fetchCaptcha(true);
                    return;
                }
                if (!clientValidate()) {
                    e.preventDefault();
                    const alertDiv = document.createElement('div');
                    alertDiv.className = 'alert alert-danger alert-mobile';
                    alertDiv.innerHTML = '<i class="bi bi-x-circle me-2"></i>Incorrect CAPTCHA. Try the new challenge.';
                    form.insertBefore(alertDiv, form.firstChild);
                    setTimeout(() => alertDiv.remove(), 3000);
                    fetchCaptcha(true);
                    return;
                }
            });
        }
    })();
</script>
@endpush