@extends('layouts.app')

@section('title', $config['service_title'] ?? 'Premium Entertainment')

@section('content')
<div class="min-h-screen bg-white flex items-center justify-center py-4">
    <div class="container mx-auto px-4 sm:px-6 w-full">
        <div class="max-w-2xl mx-auto">
            <!-- Phone Number Section -->
            <div class="bg-white rounded-2xl shadow-2xl p-6 sm:p-8" id="phoneSection">
                <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">Enter Your Phone Number</label>
                        <div class="flex">
                            <span class="inline-flex items-center px-3 sm:px-4 bg-gray-200 border border-r-0 border-gray-300 rounded-l-lg text-gray-700 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 text-base sm:text-lg">
                        </div>
                    </div>

                    <button type="submit"
                            id="sendOtpBtn"
                            class="w-full bg-blue-600 text-white py-3 sm:py-4 rounded-lg text-lg sm:text-xl font-bold hover:bg-blue-700 hover:shadow-2xl transform hover:scale-105 transition-all duration-200">
                        Get OTP Code
                    </button>
                </form>
            </div>

            <!-- OTP Section -->
            <div class="bg-white rounded-2xl shadow-2xl p-6 sm:p-8 hidden" id="otpSection">
                <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-6 text-center">Enter OTP Code</h2>

                <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">Enter the code sent to your phone</label>
                        <input type="text"
                               id="pincode"
                               name="pincode"
                               placeholder="Enter {{ $config['pin_length'] }}-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 text-base sm:text-lg text-center text-xl sm:text-2xl tracking-widest">
                        <p class="text-xs text-gray-500 mt-1">Check your SMS for the {{ $config['pin_length'] }}-digit code</p>
                    </div>

                    <button type="submit"
                            id="verifyOtpBtn"
                            class="w-full bg-blue-600 text-white py-3 sm:py-4 rounded-lg text-lg sm:text-xl font-bold hover:bg-blue-700 hover:shadow-2xl transform hover:scale-105 transition-all duration-200">
                        Verify & Subscribe
                    </button>
                </form>

                <button onclick="backToPhone()" class="text-blue-600 mt-4 text-center w-full hover:text-blue-700">
                    ← Back to Phone Number
                </button>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 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> 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 = 'Get OTP Code';
        }
    } catch (error) {
        console.error('Error:', error);
        showAlert('Network error. Please check your connection.', 'error');
        btn.disabled = false;
        btn.innerHTML = 'Get OTP Code';
    }
});

// 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> 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 = 'Verify & Subscribe';
            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 = 'Verify & Subscribe';
    }
});

// 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 = 'Get OTP Code';
}

// 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