@extends('layouts.app')

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

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600">
    <header class="bg-white/10 backdrop-blur-md">
        <div class="container mx-auto px-6 py-4">
            <div class="text-white text-2xl font-bold">{{ $config['service_title'] ?? 'Media World Premium' }}</div>
        </div>
    </header>

    <div class="container mx-auto px-6 py-20">
        <div class="max-w-2xl mx-auto">
            <div class="text-center text-white mb-12">
                <h1 class="text-6xl font-bold mb-6">Premium Entertainment</h1>
                <p class="text-2xl mb-8">Unlimited Movies, Music & More</p>
{{--                <div class="bg-yellow-400 text-black px-6 py-3 rounded-full inline-block font-bold text-xl mb-8">--}}
{{--                    @if($config['subscription_type'] === 'daily')--}}
{{--                        Only 1 JOD/Day--}}
{{--                    @elseif($config['subscription_type'] === 'weekly')--}}
{{--                        Only 7 JOD/Week--}}
{{--                    @elseif($config['subscription_type'] === 'monthly')--}}
{{--                        Only 30 JOD/Month--}}
{{--                    @endif--}}
{{--                </div>--}}
                @if($evina_config)
                <div class="bg-green-400 text-black px-4 py-2 rounded-full inline-block font-semibold text-sm ml-2">
                    🔒 Protected by Anti-Fraud
                </div>
                @endif
            </div>

            <!-- Subscribe Section -->
            <div class="bg-white rounded-2xl shadow-2xl p-8" id="subscribeSection">
                <h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">Subscribe Now</h2>

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

                <!-- Subscribe Button -->
                <form id="subscribeForm">
                    <input type="hidden" name="service_name" value="{{ $config['service_name'] }}">

                    <button type="submit"
                            id="subscribe_btn"
                            class="w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white py-4 rounded-lg text-xl font-bold hover:shadow-2xl transform hover:scale-105 transition-all duration-200">
                        <i class="fas fa-check-circle mr-2"></i>
                        Subscribe Now
                    </button>
                </form>

                <p class="text-sm text-gray-600 mt-6 text-center">
                    By subscribing, you agree to our terms and conditions
                </p>
            </div>

            <!-- Features Grid -->
            <div class="grid md:grid-cols-3 gap-6 mt-12">
                <div class="bg-white/10 backdrop-blur-lg rounded-xl p-6 text-white text-center">
                    <i class="fas fa-film text-4xl mb-3"></i>
                    <h3 class="text-xl font-bold">Movies & Shows</h3>
                </div>
                <div class="bg-white/10 backdrop-blur-lg rounded-xl p-6 text-white text-center">
                    <i class="fas fa-music text-4xl mb-3"></i>
                    <h3 class="text-xl font-bold">Unlimited Music</h3>
                </div>
                <div class="bg-white/10 backdrop-blur-lg rounded-xl p-6 text-white text-center">
                    <i class="fas fa-mobile-alt text-4xl mb-3"></i>
                    <h3 class="text-xl font-bold">Any Device</h3>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/uuidv4.min.js"></script>
<script>
// Configuration from backend
const config = {
    serviceName: '{{ $config['service_name'] }}',
    enableEvinaFraud: {{ $config['enable_evina_fraud'] ? 'true' : 'false' }},
    @if($evina_config)
    evinaConfig: {!! json_encode($evina_config) !!},
    @endif
};

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

// Function to generate transaction ID using UUID (matching example)
function generateTransactionId() {
    return uuidv4();
}

// Function to generate timestamp
function generateTimestamp() {
    return new Date().getTime();
}

// Function to build HE redirect URL
function buildHeRedirectUrl(evinaConfig, ti, ts) {
    const baseUrl = evinaConfig.base_url;
    const endpoint = evinaConfig.he_redirect_endpoint;
    const url = baseUrl.replace(/\/$/, '') + '/' + endpoint.replace(/^\//, '');

    const params = new URLSearchParams({
        serviceId: evinaConfig.service_id,
        spId: evinaConfig.sp_id,
        shortcode: evinaConfig.shortcode,
        ti: ti,
        ts: ts,
        servicename: evinaConfig.service_name,
        merchantname: evinaConfig.merchant_name
    });

    return url + '?' + params.toString();
}

// 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 (matching example flow)
function exec_anti_fraud() {
    if (!config.enableEvinaFraud || !config.evinaConfig) {
        return;
    }

    // Generate TI and TS
    evinaState.ti = generateTransactionId();
    evinaState.ts = generateTimestamp();

    // Build HE redirect URL
    evinaState.heRedirectUrl = buildHeRedirectUrl(config.evinaConfig, evinaState.ti, evinaState.ts);

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

    // CSS selector for the button - pass raw, URLSearchParams will encode it
    const css_selector = '#subscribe_btn';

    // Build query parameters - URLSearchParams will handle encoding
    const scriptParams = new URLSearchParams({
        action: 'script',
        ti: evinaState.ti,
        ts: evinaState.ts.toString(),
        te: css_selector, // Pass raw selector, URLSearchParams encodes it
        servicename: config.evinaConfig.service_name,
        merchantname: config.evinaConfig.merchant_name || 'MediaWorld',
        type: 'he'
    });

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

    // Use jQuery AJAX to match example (expects JSON response with 's' property)
    $.ajax({
        url: fullScriptUrl,
        method: 'GET',
        success: function(response) {
            let script_data = response.s;
            append_script(script_data);
            console.log('Evina anti-fraud script loaded successfully');
        },
        error: function(xhr, status, error) {
            console.error('Error loading Evina script:', status, error);
            // Fallback: try as plain text if JSON fails
            fetch(fullScriptUrl)
                .then(response => response.text())
                .then(scriptContent => {
                    append_script(scriptContent);
                    console.log('Evina anti-fraud script loaded (fallback)');
                })
                .catch(err => {
                    console.error('Failed to load Evina script:', err);
                });
        }
    });
}

// Load Evina script on page load
window.onload = () => {
    if (config.enableEvinaFraud && config.evinaConfig) {
        exec_anti_fraud();
    }
}

// Handle subscribe button click - direct redirect (matching example)
$('#subscribeForm').on('submit', function(e) {
    e.preventDefault();

    // Redirect to HE API directly
    if (evinaState.heRedirectUrl) {
        window.location.href = evinaState.heRedirectUrl;
    } else {
        console.error('HE redirect URL not available');
        showAlert('Error: Unable to redirect. Please try again.', 'error');
    }
});

// Show alert message
function showAlert(message, type) {
    const alert = document.getElementById('alertMessage');
    const bgColor = type === 'error' ? 'bg-red-100 text-red-700' :
                    type === 'success' ? 'bg-green-100 text-green-700' :
                    'bg-blue-100 text-blue-700';

    alert.className = `mb-4 p-4 rounded-lg ${bgColor}`;
    alert.textContent = message;
    alert.classList.remove('hidden');

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

// Handle Evina anti-fraud script events (if enabled)
if (config.enableEvinaFraud) {
    document.addEventListener('DCBProtectRun', function() {
        console.log('Evina anti-fraud script loaded and running');
    });
}
</script>
@endsection