@extends('layouts.app')

@section('title', $config['service_title'] ?? 'Cars POP')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-500 via-red-600 to-blue-700 relative overflow-hidden">
    <!-- Animated background elements -->
    <div class="absolute inset-0 overflow-hidden">
        <div class="absolute top-20 left-10 w-32 h-32 bg-white/5 rounded-full blur-3xl animate-pulse"></div>
        <div class="absolute bottom-20 right-10 w-40 h-40 bg-yellow-400/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
    </div>

    <!-- Language Switcher -->
    <div class="language-switcher fixed top-4 right-4 z-50">
        <div class="flex items-center space-x-2 bg-white/90 backdrop-blur-md rounded-lg shadow-lg px-3 py-2 border border-white/20">
            <a href="{{ route('lang.switch', 'ar') }}" 
               class="px-2 py-1 rounded text-sm font-semibold transition-colors {{ app()->getLocale() === 'ar' ? 'bg-blue-500 text-white' : 'text-white hover:text-blue-300' }}">
                عربي
            </a>
            <span class="text-white/50">|</span>
            <a href="{{ route('lang.switch', 'en') }}" 
               class="px-2 py-1 rounded text-sm font-semibold transition-colors {{ app()->getLocale() === 'en' ? 'bg-blue-500 text-white' : 'text-white hover:text-blue-300' }}">
                EN
            </a>
        </div>
    </div>

    <div class="container mx-auto px-4 sm:px-6 w-full py-8 relative z-10">
        <div class="max-w-2xl mx-auto">
            <!-- Game Header -->
            <div class="text-center mb-6 sm:mb-8">
                <h1 class="text-3xl sm:text-4xl font-extrabold text-white mb-4 drop-shadow-2xl">
                    <span class="bg-gradient-to-r from-yellow-300 to-red-300 bg-clip-text text-transparent">
                        {{ __('landing.cars.title') }}
                    </span>
                </h1>
                <div class="flex items-center justify-center mb-4">
                    <img src="{{ asset('images/Cars POP/icon.png') }}"
                         alt="{{ __('landing.cars.title') }}"
                         class="w-24 h-24 sm:w-32 sm:h-32 object-contain">
                </div>
                <p class="text-xl sm:text-2xl text-white/90 mb-4 font-semibold drop-shadow-lg">
                    {{ __('landing.cars.hero_subtitle') }}
                </p>
                <p class="text-base sm:text-lg text-white/80 max-w-2xl mx-auto mb-4">
                    {{ __('landing.cars.hero_description') }}
                </p>
                <p class="text-white/90 text-sm sm:text-base">{{ __('landing.otp.subscribe_to_start') }}</p>
            </div>

            <!-- Phone Number Section -->
            <div class="bg-white rounded-2xl shadow-2xl p-6 sm:p-8 border-4 border-blue-400/30 relative z-10" id="phoneSection">
                <div class="text-center mb-6">
                    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-2">{{ __('landing.otp.get_started') }}</h2>
                    <p class="text-gray-600 text-sm sm:text-base">{{ __('landing.otp.enter_phone_description') }}</p>
                </div>

                <div id="alertMessage" class="hidden mb-4 p-4 rounded-lg"></div>
                <form id="phoneForm">
                    <div class="mb-6">
                        <label class="block text-gray-700 font-semibold mb-2 text-sm sm:text-base">
                            <i class="fas fa-phone mr-2 text-blue-600"></i>{{ __('landing.otp.enter_phone_number') }}
                        </label>
                        <div class="flex phone-input-container">
                            <span class="country-code inline-flex items-center px-3 sm:px-4 bg-gradient-to-r from-blue-500 to-red-600 text-white border border-r-0 border-blue-600 rounded-l-lg font-semibold text-sm sm:text-base">
                                +964
                            </span>
                            <input type="tel"
                                   id="msisdn"
                                   name="msisdn"
                                   placeholder="7xxxxxxxxx"
                                   required
                                   pattern="7[0-9]{9}"
                                   maxlength="10"
                                   class="flex-1 px-4 sm:px-6 py-3 sm:py-4 rounded-r-lg border-2 border-gray-300 focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-500/20 text-base sm:text-lg">
                        </div>
                    </div>

                    <button type="submit"
                            id="sendOtpBtn"
                            class="w-full bg-gradient-to-r from-blue-500 via-red-600 to-blue-600 text-white py-3 sm:py-4 rounded-xl text-lg sm:text-xl font-bold hover:shadow-2xl transform hover:scale-105 transition-all duration-200 border-2 border-blue-400/50 relative overflow-hidden group">
                        <span class="relative z-10 flex items-center justify-center">
                            <i class="fas fa-car mr-2"></i>
                            {{ __('landing.otp.get_otp_code') }}
                        </span>
                        <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-red-500 opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    </button>
                </form>
                
                <!-- Disclaimer -->
                <hr class="my-4 sm:my-6 border-gray-300" id="disclaimerSection">
                <p class="text-base sm:text-lg text-gray-700 leading-relaxed text-center">
                    {{ __('landing.disclaimer.text') }}
                </p>
            </div>

            <!-- OTP Section -->
            <div class="bg-white rounded-2xl shadow-2xl p-6 sm:p-8 border-4 border-blue-400/30 hidden relative z-10" id="otpSection">
                <div class="text-center mb-6">
                    <div class="flex items-center justify-center mb-3">
                        <i class="fas fa-sms text-4xl text-blue-600"></i>
                    </div>
                    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-2">{{ __('landing.otp.enter_otp_code') }}</h2>
                    <p class="text-gray-600 text-sm">{{ __('landing.otp.enter_code_sent') }}</p>
                </div>

                <div id="otpAlertMessage" class="hidden mb-4 p-4 rounded-lg"></div>

                <form id="otpForm">
                    <div class="mb-6">
                        <label class="block text-gray-700 font-semibold mb-2 text-sm sm:text-base">
                            <i class="fas fa-key mr-2 text-blue-600"></i>{{ __('landing.otp.enter_code_sent') }}
                        </label>
                        <input type="text"
                               id="pincode"
                               name="pincode"
                               placeholder="{{ str_replace(':length', $config['pin_length'], __('landing.otp.enter_digit_code')) }}"
                               required
                               maxlength="{{ $config['pin_length'] }}"
                               inputmode="numeric"
                               class="w-full px-4 sm:px-6 py-3 sm:py-4 rounded-lg border-2 border-gray-300 focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-500/20 text-base sm:text-lg text-center text-xl sm:text-2xl tracking-widest font-bold">
                        <p class="text-xs text-gray-500 mt-2 text-center">
                            <i class="fas fa-info-circle mr-1"></i>
                            Check your SMS for the {{ $config['pin_length'] }}-digit code
                        </p>
                    </div>

                    <button type="submit"
                            id="verifyOtpBtn"
                            class="w-full bg-gradient-to-r from-blue-500 via-red-600 to-blue-600 text-white py-3 sm:py-4 rounded-xl text-lg sm:text-xl font-bold hover:shadow-2xl transform hover:scale-105 transition-all duration-200 border-2 border-blue-400/50 relative overflow-hidden group">
                        <span class="relative z-10 flex items-center justify-center">
                            <i class="fas fa-car mr-2"></i>
                            {{ __('landing.otp.verify_subscribe') }}
                        </span>
                        <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-red-500 opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    </button>
                </form>

                <button onclick="backToPhone()" class="text-blue-600 mt-4 text-center w-full hover:text-blue-700 font-semibold transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>{{ __('landing.otp.back_to_phone') }}
                </button>
            </div>

            <!-- Game Preview (shown on phone section) -->
            <div class="mt-6 sm:mt-8 grid grid-cols-2 gap-4 sm:gap-6" id="gamePreview">
                <div class="rounded-xl overflow-hidden shadow-lg border-2 border-white/20 hover:scale-105 transition-transform">
                    <img src="{{ asset('images/Cars POP/1.png') }}"
                         alt="Game Screenshot 1"
                         class="w-full h-auto object-cover">
                </div>
                <div class="rounded-xl overflow-hidden shadow-lg border-2 border-white/20 hover:scale-105 transition-transform">
                    <img src="{{ asset('images/Cars POP/2.png') }}"
                         alt="Game Screenshot 2"
                         class="w-full h-auto object-cover">
                </div>
                <div class="rounded-xl overflow-hidden shadow-lg border-2 border-white/20 hover:scale-105 transition-transform">
                    <img src="{{ asset('images/Cars POP/3.png') }}"
                         alt="Game Screenshot 3"
                         class="w-full h-auto object-cover">
                </div>
                <div class="rounded-xl overflow-hidden shadow-lg border-2 border-white/20 hover:scale-105 transition-transform">
                    <img src="{{ asset('images/Cars POP/4.png') }}"
                         alt="Game Screenshot 4"
                         class="w-full h-auto object-cover">
                </div>
            </div>

            <!-- Disney Copyright Notice -->
            <div class="text-center mt-8">
                <p class="text-white/60 text-xs sm:text-sm" dir="ltr">© 2026 Disney∙Pixar</p>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Translations
const translations = {
    getOtpCode: '{{ __('landing.otp.get_otp_code') }}',
    verifySubscribe: '{{ __('landing.otp.verify_subscribe') }}',
    sending: '{{ __('landing.otp.sending') }}',
    verifying: '{{ __('landing.otp.verifying') }}',
};

// Configuration from backend
const config = {
        serviceName: '{{ $config['service_name'] }}',
        pinLength: {{ $config['pin_length'] }},
        enableEvinaFraud: {{ $config['enable_evina_fraud'] ? 'true' : 'false' }},
        subscriptionType: '{{ $config['subscription_type'] }}',
        @if($evina_config)
        evinaConfig: {!! json_encode($evina_config) !!},
        @endif
    };

    // Evina state
    let evinaState = {
        ti: null,
        ts: null
    };

    // Function to generate transaction ID
    function generateTransactionId(prefix) {
        const timestamp = Math.floor(Date.now() / 1000);
        const random = Math.floor(Math.random() * 9000) + 1000;
        return `${prefix}-${timestamp}-${random}`;
    }

    // Function to generate timestamp
    function generateTimestamp() {
        return Math.floor(Date.now() / 1000);
    }

    // Function to append Evina script correctly
    function append_script(returnedScript) {
        var scriptElement = document.createElement("script");
        scriptElement.type = "text/javascript";
        scriptElement.innerHTML = returnedScript;
        $('head').append(scriptElement);

        var event = new Event('DCBProtectRun');
        document.dispatchEvent(event);
    }

    // Load Evina script from API
    async function loadEvinaScript() {
        if (!config.enableEvinaFraud || !config.evinaConfig) {
            return;
        }

        try {
            // Generate TI and TS
            evinaState.ti = generateTransactionId(config.evinaConfig.transaction_prefix);
            evinaState.ts = generateTimestamp();

            // Build script URL
            const scriptUrl = config.evinaConfig.base_url.replace(/\/$/, '') + '/' +
                config.evinaConfig.get_script_endpoint.replace(/^\//, '');

            const scriptParams = new URLSearchParams({
                action: 'script',
                servicename: config.evinaConfig.service_name,
                merchantname: config.evinaConfig.merchant_name,
                type: 'pin',
                ti: evinaState.ti,
                ts: evinaState.ts,
                te: '#sendOtpBtn'
            });

            const fullScriptUrl = scriptUrl + '?' + scriptParams.toString();

            // Fetch and append script
            const response = await fetch(fullScriptUrl);
            if (response.ok) {
                const scriptContent = await response.text();
                append_script(scriptContent);
                console.log('Evina anti-fraud script loaded successfully');
            } else {
                console.error('Failed to load Evina script:', response.status);
            }
        } catch (error) {
            console.error('Error loading Evina script:', error);
        }
    }

    // Load Evina script on page load
    if (config.enableEvinaFraud && config.evinaConfig) {
        loadEvinaScript();
    }

    let currentMsisdn = '';

    // Send OTP via Laravel API
    document.getElementById('phoneForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const msisdnInput = document.getElementById('msisdn').value;
        const msisdn = '964' + msisdnInput;

        // Validate phone number
        if (!msisdnInput.match(/^7[0-9]{9}$/)) {
            showAlert('Please enter a valid Zain Iraq number starting with 7', 'error');
            return;
        }

        currentMsisdn = msisdn;
        const btn = document.getElementById('sendOtpBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> ' + translations.sending;

        try {
            const response = await fetch('/api/dcb/send-pincode', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    msisdn: msisdn,
                    service: config.serviceName
                })
            });

            const data = await response.json();
            console.log('DCB Send PIN Response:', data);

            if (data.success) {
                // Check if user is already subscribed
                if (data.already_subscribed || (data.data && data.data.portal_url)) {
                    const portalUrl = data.data?.portal_url;
                    showAlert('You are already subscribed! Redirecting to content...', 'success');

                    // Redirect to portal after short delay
                    setTimeout(() => {
                        if (portalUrl) {
                            console.log('Redirecting to portal:', portalUrl);
                            window.location.href = portalUrl;
                        } else {
                            console.error('No portal URL found in response:', data);
                            window.location.href = '/success';
                        }
                    }, 1500);
                } else {
                    showAlert('OTP sent successfully! Check your SMS', 'success');
                    // Show OTP form
                    setTimeout(() => {
                        document.getElementById('phoneSection').classList.add('hidden');
                        document.getElementById('otpSection').classList.remove('hidden');
                        document.getElementById('pincode').focus();
                    }, 1500);
                }
            } else {
                showAlert(data.message || 'Failed to send OTP. Please try again.', 'error');
                btn.disabled = false;
                btn.innerHTML = translations.getOtpCode;
            }
        } catch (error) {
            console.error('Error:', error);
            showAlert('Network error. Please check your connection.', 'error');
            btn.disabled = false;
            btn.innerHTML = translations.getOtpCode;
        }
    });

    // Verify OTP via Laravel API
    document.getElementById('otpForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const pincode = document.getElementById('pincode').value;

        const pinRegex = new RegExp(`^[0-9]{${config.pinLength}}$`);
        if (!pincode.match(pinRegex)) {
            showOtpAlert(`Please enter a valid ${config.pinLength}-digit code`, 'error');
            return;
        }

        const btn = document.getElementById('verifyOtpBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> ' + translations.verifying;

        try {
            const response = await fetch('/api/dcb/verify-pincode', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    msisdn: currentMsisdn,
                    pincode: pincode,
                    service: config.serviceName,
                    ti: evinaState.ti || null,
                    ts: evinaState.ts || null,
                })
            });

            const data = await response.json();
            console.log('DCB Verify Response:', data);

            if (data.success) {
                showOtpAlert('Subscription activated successfully! Redirecting to content...', 'success');
                // Redirect to portal if URL is provided, otherwise fallback
                setTimeout(() => {
                    const portalUrl = data.data?.portal_url || data.portal_url;
                    console.log('Portal URL:', portalUrl);

                    if (portalUrl) {
                        console.log('Redirecting to portal:', portalUrl);
                        window.location.href = portalUrl;
                    } else {
                        console.error('No portal URL found in response:', data);
                        window.location.href = '/success';
                    }
                }, 1500);
            } else {
                showOtpAlert(data.message || 'Invalid code. Please try again.', 'error');
                btn.disabled = false;
                btn.innerHTML = translations.verifySubscribe;
                document.getElementById('pincode').value = '';
                document.getElementById('pincode').focus();
            }
        } catch (error) {
            console.error('Error:', error);
            showOtpAlert('Network error. Please try again.', 'error');
            btn.disabled = false;
            btn.innerHTML = translations.verifySubscribe;
        }
    });

    // Show alert message
    function showAlert(message, type) {
        const alert = document.getElementById('alertMessage');
        alert.className = `mb-4 p-4 rounded-lg ${type === 'error' ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}`;
        alert.textContent = message;
        alert.classList.remove('hidden');

        setTimeout(() => {
            alert.classList.add('hidden');
        }, 5000);
    }

    function showOtpAlert(message, type) {
        const alert = document.getElementById('otpAlertMessage');
        alert.className = `mb-4 p-4 rounded-lg ${type === 'error' ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}`;
        alert.textContent = message;
        alert.classList.remove('hidden');

        setTimeout(() => {
            alert.classList.add('hidden');
        }, 5000);
    }

    // Back to phone number
    function backToPhone() {
        document.getElementById('otpSection').classList.add('hidden');
        document.getElementById('phoneSection').classList.remove('hidden');
        document.getElementById('pincode').value = '';
        document.getElementById('sendOtpBtn').disabled = false;
        document.getElementById('sendOtpBtn').innerHTML = translations.getOtpCode;
    }

    // Auto-format phone number input (only numbers)
    document.getElementById('msisdn').addEventListener('input', (e) => {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');
    });

    // Auto-format PIN input (only numbers)
    document.getElementById('pincode').addEventListener('input', (e) => {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');
    });
</script>
@endsection