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

            <!-- Confirmation Modal -->
            <div id="confirmModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
                <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 transform transition-all">
                    <div class="text-center">
                        <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 mb-4">
                            <i class="fas fa-question text-white text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-800 mb-4">Confirm Subscription</h3>
                        <p class="text-gray-600 mb-6">
                            Are you sure you want to subscribe to
                            <span class="font-bold text-purple-600">{{ $config['service_title'] ?? 'Premium Entertainment' }}</span>?
                        </p>
                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
                            <p class="text-sm text-gray-700">
                                <span class="font-semibold">Subscription Plan:</span><br>
                                @if($config['subscription_type'] === 'daily')
                                    1 JOD per Day
                                @elseif($config['subscription_type'] === 'weekly')
                                    7 JOD per Week
                                @elseif($config['subscription_type'] === 'monthly')
                                    30 JOD per Month
                                @endif
                            </p>
                        </div>
                        <div class="flex gap-4">
                            <button type="button"
                                    id="cancelBtn"
                                    class="flex-1 bg-gray-200 text-gray-800 py-3 rounded-lg font-semibold hover:bg-gray-300 transition-all duration-200">
                                Cancel
                            </button>
                            <button type="button"
                                    id="confirmBtn"
                                    class="flex-1 bg-gradient-to-r from-purple-600 to-pink-600 text-white py-3 rounded-lg font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200">
                                <i class="fas fa-check-circle mr-2"></i>
                                Confirm
                            </button>
                        </div>
                    </div>
                </div>
            </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>
// 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
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 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
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 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(/^\//, '');

        const scriptParams = new URLSearchParams({
            action: 'script',
            servicename: config.evinaConfig.service_name,
            merchantname: config.evinaConfig.merchant_name,
            type: 'he',
            ti: evinaState.ti,
            ts: evinaState.ts,
            te: '%23subscribe_btn'
        });

        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();
}

// Handle subscribe button click - show confirmation popup
document.getElementById('subscribeForm').addEventListener('submit', function(e) {
    e.preventDefault();

    // Show confirmation modal
    document.getElementById('confirmModal').classList.remove('hidden');
});

// Handle cancel button
document.getElementById('cancelBtn').addEventListener('click', function() {
    document.getElementById('confirmModal').classList.add('hidden');
});

// Handle confirm button - execute the redirect
document.getElementById('confirmBtn').addEventListener('click', function() {
    const confirmBtn = document.getElementById('confirmBtn');
    const subscribeBtn = document.getElementById('subscribe_btn');

    // Disable buttons and show loading state
    confirmBtn.disabled = true;
    subscribeBtn.disabled = true;
    confirmBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...';

    // Hide modal
    document.getElementById('confirmModal').classList.add('hidden');

    // Show loading message
    showAlert('Redirecting to subscription service...', 'info');

    // Wait a moment for anti-fraud script to complete (if enabled)
    setTimeout(() => {
        // Redirect to HE API
        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');
            confirmBtn.disabled = false;
            subscribeBtn.disabled = false;
            confirmBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Confirm';
        }
    }, 500);
});

// Close modal when clicking outside
document.getElementById('confirmModal').addEventListener('click', function(e) {
    if (e.target === this) {
        document.getElementById('confirmModal').classList.add('hidden');
    }
});

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