<?php
// Ensure this path jumps up from public/ to the root for config
require_once __DIR__ . '/../config/config.php';
require_once __DIR__ . '/includes/ad-display.php';

$settings_file = __DIR__ . '/../config/site-settings.json';
$site_name = 'Football Pred Pro';
if (file_exists($settings_file)) {
    $loaded = json_decode(file_get_contents($settings_file), true);
    if (!empty($loaded['site_name'])) $site_name = $loaded['site_name'];
}

// Determine VIP client portal status
$is_vip = isset($_SESSION['user_subscribed']) && $_SESSION['user_subscribed'] === true;

// Fetch active match fixtures from the database to populate the select options dynamically
$today = date('Y-m-d');
try {
    $stmt = $pdo->prepare("SELECT * FROM predictions WHERE match_date = ? ORDER BY match_time ASC");
    $stmt->execute([$today]);
    $fixtures = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $fixtures = [];
}
?>

<?php require_once __DIR__ . '/includes/header.php'; ?>

<div class="fixed inset-0 z-0 pointer-events-none opacity-20 bg-cover bg-center bg-no-repeat" style="background-image: url('https://images.unsplash.com/photo-1579952363873-27f3bade9f55?q=80&w=2000&auto=format&fit=crop');"></div>
<div class="fixed inset-0 z-0 bg-gradient-to-t from-[#020617] via-[#020617]/85 to-transparent pointer-events-none"></div>
<canvas id="neuralCanvas" class="fixed inset-0 w-full h-full pointer-events-none z-0 opacity-40"></canvas>

<main class="relative z-10 flex-1 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 pb-20 space-y-10">

    <div class="text-center space-y-4">
        <div class="inline-flex items-center space-x-2 bg-blue-500/10 border border-blue-500/20 px-3 py-1 rounded-full text-[9px] font-bold tracking-widest uppercase text-blue-400">
            <span class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse"></span>
            <span>Enterprise Multi-Market Simulator</span>
        </div>
        <h1 class="text-4xl md:text-6xl font-black text-white tracking-tight">AI Bet <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">Builder</span></h1>
        <p class="text-xs md:text-sm text-slate-400 max-w-xl mx-auto">Combine multiple machine-learning calculated outcomes into a single high-yielding, dynamically computed bet slip.</p>
    </div>

    <?php if (!$is_vip): ?>
        <div class="relative group max-w-5xl mx-auto bg-gradient-to-r from-rose-950/40 via-slate-900/80 to-slate-950/80 backdrop-blur-xl border border-rose-500/30 p-6 rounded-2xl flex flex-col md:flex-row items-center justify-between gap-4 shadow-2xl">
            <div class="flex items-center space-x-4">
                <div class="w-10 h-10 bg-rose-500/10 border border-rose-500/30 rounded-xl flex items-center justify-center shrink-0 text-lg">🚀</div>
                <div>
                    <h4 class="text-white text-xs font-black uppercase tracking-widest">Advanced Simulator Matrix Locked</h4>
                    <p class="text-[10px] text-slate-400 mt-1 max-w-xl leading-relaxed">Complex simulation bounds, multi-leg manual builders, and manual Admin pool overrides are restricted without an active subscription. <a href="login-register.php" class="text-cyan-400 font-bold hover:underline">Upgrade Access</a> to unlock the predictive terminal.</p>
                </div>
            </div>
            <a href="login-register.php" class="w-full md:w-auto bg-rose-600 hover:bg-rose-700 text-white font-black text-[10px] tracking-widest uppercase px-6 py-3 rounded-xl transition text-center shadow-lg shadow-rose-600/20">Upgrade Terminal</a>
        </div>
    <?php endif; ?>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 items-start max-w-6xl mx-auto">
        
        <div class="col-span-1 lg:col-span-1 bg-slate-900/60 backdrop-blur-xl border border-slate-800 rounded-3xl p-6 space-y-6">
            <h3 class="text-xs font-black tracking-widest uppercase text-white border-b border-slate-800 pb-3">Simulation Controls</h3>
            
            <div class="bg-slate-950/60 border border-slate-800/80 p-4 rounded-xl space-y-3">
                <span class="block text-[8px] font-black text-slate-400 uppercase tracking-widest">Data Mode Source</span>
                <div class="flex items-center space-x-2">
                    <span class="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-pulse"></span>
                    <span class="text-[10px] font-bold text-emerald-400 uppercase tracking-wider">Automated Online / Admin Pools</span>
                </div>
                <p class="text-[8px] text-slate-500 leading-relaxed">System retrieves automated lines across live internet databases. Manual VIP slips can be updated at Admin discretion.</p>
            </div>

            <div class="space-y-4">
                <div>
                    <div class="flex justify-between text-[9px] font-bold uppercase tracking-widest text-slate-400 mb-2">
                        <span>Total Slip Odds Capped</span>
                        <span class="text-cyan-400">2.00x</span>
                    </div>
                    <input type="range" class="w-full accent-cyan-400 h-1 bg-slate-800 rounded-lg appearance-none cursor-pointer" min="1" max="50" value="2">
                </div>
                
                <div class="space-y-2">
                    <span class="block text-[9px] font-bold uppercase tracking-widest text-slate-400">Configured Bet Market Types</span>
                    <div class="grid grid-cols-2 gap-2 text-[9px] text-slate-300 font-medium">
                        <label class="flex items-center space-x-2"><input type="checkbox" checked class="accent-emerald-500"> <span>Match Result (1X2)</span></label>
                        <label class="flex items-center space-x-2"><input type="checkbox" checked class="accent-emerald-500"> <span>Under 1.5</span></label>
                        <label class="flex items-center space-x-2"><input type="checkbox" checked class="accent-emerald-500"> <span>Under 2.5</span></label>
                        <label class="flex items-center space-x-2"><input type="checkbox" checked class="accent-emerald-500"> <span>Under 3.5</span></label>
                        <label class="flex items-center space-x-2"><input type="checkbox" checked class="accent-emerald-500"> <span>Over 1.5</span></label>
                        <label class="flex items-center space-x-2"><input type="checkbox" checked class="accent-emerald-500"> <span>Over 2.5</span></label>
                        <label class="flex items-center space-x-2"><input type="checkbox" checked class="accent-emerald-500"> <span>Both Teams Score</span></label>
                        <label class="flex items-center space-x-2"><input type="checkbox" checked class="accent-emerald-500"> <span>Double Chance</span></label>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-span-1 lg:col-span-2 bg-slate-900/60 backdrop-blur-xl border border-slate-800 rounded-3xl p-6 md:p-8 space-y-6">
            <h3 class="text-sm font-black tracking-widest uppercase text-white border-b border-slate-800 pb-3 flex items-center space-x-2">
                <span class="bg-cyan-500/10 text-cyan-400 border border-cyan-500/20 w-6 h-6 rounded-lg flex items-center justify-center text-[10px]">1</span>
                <span>Select Pool Matches</span>
            </h3>

            <div class="space-y-2">
                <label class="block text-[9px] font-bold tracking-widest uppercase text-slate-400">System / Admin Managed Fixture</label>
                <select id="bb-fixture" class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3.5 text-xs text-white focus:outline-none focus:border-cyan-500 transition cursor-pointer">
                    <option value="" disabled selected>Select active match feed...</option>
                    <?php if (empty($fixtures)): ?>
                        <option>Colombia vs Congo DR (System)</option>
                    <?php else: ?>
                        <?php foreach ($fixtures as $f): ?>
                            <option value="<?php echo htmlspecialchars($f['home_team'] . ' vs ' . $f['away_team']); ?>">
                                <?php echo htmlspecialchars($f['home_team'] . ' vs ' . $f['away_team']); ?>
                            </option>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </select>
                <span class="block text-[8px] text-slate-500">Matches automatically fetch via internet cron models or manually entered via the Administrative panel.</span>
            </div>

            <div class="grid grid-cols-2 gap-4 pt-2 border-t border-slate-800/60">
                <div class="space-y-2">
                    <label class="block text-[8px] font-bold tracking-widest uppercase text-slate-500">Leg 1: Outcome Matrix</label>
                    <select class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-[10px] text-slate-300">
                        <option>Select Outcome...</option>
                        <option>Home Win (1)</option>
                        <option>Away Win (2)</option>
                        <option>Draw (X)</option>
                    </select>
                </div>
                <div class="space-y-2">
                    <label class="block text-[8px] font-bold tracking-widest uppercase text-slate-500">Leg 2: Goals Market</label>
                    <select class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-[10px] text-slate-300">
                        <option>Select Line...</option>
                        <option>Over 1.5 Goals</option>
                        <option>Over 2.5 Goals</option>
                        <option>Under 3.5 Goals</option>
                    </select>
                </div>
            </div>

            <div class="space-y-2 border-t border-slate-800/60 pt-4">
                <label class="block text-[8px] font-bold tracking-widest uppercase text-slate-500">Leg 3: Specialized Admin Options (VIP Level)</label>
                <?php if (!$is_vip): ?>
                    <div class="relative flex items-center justify-between bg-slate-950 border border-slate-800 rounded-xl p-3.5 overflow-hidden">
                        <div class="absolute inset-0 bg-slate-950/70 backdrop-blur-[6px]"></div>
                        <span class="text-[9px] font-black tracking-[0.2em] text-amber-500 uppercase z-10 relative animate-bounce">👑 Advanced Admin Slips Masked</span>
                        <a href="login-register.php" class="bg-gradient-to-r from-amber-500 to-orange-500 text-slate-950 px-3.5 py-1.5 rounded-lg text-[8px] font-black tracking-widest uppercase z-10 relative hover:opacity-90 transition">Unlock Matrix</a>
                    </div>
                <?php else: ?>
                    <select class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-[10px] text-slate-300">
                        <option>BTTS - Yes @ 1.70</option>
                        <option>Correct Score Multi</option>
                    </select>
                <?php endif; ?>
            </div>

            <button id="run-ai-btn" class="w-full bg-gradient-to-r from-emerald-500 to-cyan-500 hover:from-emerald-400 hover:to-cyan-400 text-slate-950 font-black py-4 rounded-xl text-[10px] uppercase tracking-widest transition shadow-lg shadow-cyan-500/10">Simulate Configuration / Pool Entry</button>
        </div>
        
        <div class="col-span-1 lg:col-span-1 bg-slate-900/60 backdrop-blur-xl border border-slate-800 rounded-3xl p-6 space-y-6 relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-b from-cyan-500/5 to-transparent pointer-events-none"></div>
            
            <h3 class="text-sm font-black tracking-widest uppercase text-white border-b border-slate-800 pb-3 flex items-center space-x-2">
                <span class="bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 w-6 h-6 rounded-lg flex items-center justify-center text-[10px]">2</span>
                <span>Calculated AI Slip</span>
            </h3>

            <div class="space-y-3 text-[9px] font-bold text-slate-400 bg-slate-950/60 border border-slate-800/80 p-4 rounded-xl min-h-[140px] flex flex-col justify-center items-center">
                <span class="text-slate-600 tracking-widest uppercase font-black text-[8px] mb-2">Simulated Terminal Outlay</span>
                <div class="text-center text-slate-200">Leg 1: Match Winner – Demo Team @ <span class="text-cyan-400">1.80</span></div>
                <div class="text-center text-slate-200">Leg 2: Total Goals – Over 2.5 @ <span class="text-cyan-400">1.60</span></div>
                <div class="text-center text-slate-200">Leg 3: Both Teams To Score – Yes @ <span class="text-cyan-400">1.70</span></div>
            </div>

            <div class="bg-slate-950 border border-slate-800 p-4 rounded-xl flex items-center justify-between">
                <div>
                    <span class="block text-[8px] font-bold text-slate-500 uppercase tracking-widest">Calculated Multi-Odds</span>
                    <span class="text-xl font-black text-cyan-400 tracking-tight">4.89</span>
                </div>
                <div>
                    <span class="block text-[8px] font-bold text-slate-500 uppercase tracking-widest text-right">Payout Simulation</span>
                    <span class="text-lg font-black text-white tracking-tight">$48.90</span>
                </div>
            </div>

            <div class="bg-slate-950/40 border border-slate-800/60 p-4 rounded-xl flex items-center justify-between">
                <div>
                    <span class="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1">AI Engine Score</span>
                    <span class="text-xl font-black text-emerald-400 tracking-tight">89%</span>
                </div>
                <div class="w-20 bg-slate-800 rounded-full h-1.5 overflow-hidden">
                    <div class="bg-gradient-to-r from-emerald-400 to-cyan-400 h-1.5 rounded-full" style="width: 89%;"></div>
                </div>
            </div>

            <a href="login.php" class="block w-full bg-slate-800 hover:bg-slate-700 border border-slate-600 text-white font-bold py-3.5 rounded-xl text-[9px] uppercase tracking-widest transition text-center shadow-md">Fix Configuration to Terminal</a>
        </div>
    </div>

    <div class="w-full flex justify-center py-4">
        <?php display_ad_slot($pdo, 'in_content'); ?>
    </div>

</main>

<?php require_once __DIR__ . '/includes/footer.php'; ?>

<script>
    const canvas = document.getElementById("neuralCanvas");
    if(canvas) {
        const ctx = canvas.getContext("2d");
        let width, height;
        let particles = [];
        let mouse = { x: null, y: null, radius: 150 };
        window.addEventListener('mousemove', function(e) {
            mouse.x = e.x;
            mouse.y = e.y;
        });

        function initCanvas() {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
            particles = [];
            let particleCount = (width * height) / 15000;
            for (let i = 0; i < particleCount; i++) {
                particles.push({
                    x: Math.random() * width,
                    y: Math.random() * height,
                    vx: (Math.random() - 0.5) * 1.5,
                    vy: (Math.random() - 0.5) * 1.5,
                    radius: Math.random() * 1.5 + 0.5
                });
            }
        }

        function animateCanvas() {
            ctx.clearRect(0, 0, width, height);
            for (let i = 0; i < particles.length; i++) {
                let p = particles[i];
                p.x += p.vx;
                p.y += p.vy;
                if (p.x < 0 || p.x > width) p.vx *= -1;
                if (p.y < 0 || p.y > height) p.vy *= -1;
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                ctx.fillStyle = "rgba(56, 189, 248, 0.4)";
                ctx.fill();
                for (let j = i + 1; j < particles.length; j++) {
                    let p2 = particles[j];
                    let dist = Math.sqrt(Math.pow(p.x - p2.x, 2) + Math.pow(p.y - p2.y, 2));
                    if (dist < 100) {
                        ctx.beginPath();
                        ctx.moveTo(p.x, p.y);
                        ctx.lineTo(p2.x, p2.y);
                        ctx.strokeStyle = `rgba(16, 185, 129, ${1 - dist/100})`;
                        ctx.lineWidth = 0.5;
                        ctx.stroke();
                    }
                }
                if (mouse.x && mouse.y) {
                    let mouseDist = Math.sqrt(Math.pow(p.x - mouse.x, 2) + Math.pow(p.y - mouse.y, 2));
                    if (mouseDist < mouse.radius) {
                        ctx.beginPath();
                        ctx.moveTo(p.x, p.y);
                        ctx.lineTo(mouse.x, mouse.y);
                        ctx.strokeStyle = `rgba(56, 189, 248, ${0.8 - mouseDist/mouse.radius})`;
                        ctx.lineWidth = 1;
                        ctx.stroke();
                    }
                }
            }
            requestAnimationFrame(animateCanvas);
        }
        window.addEventListener("resize", initCanvas);
        initCanvas();
        animateCanvas();
    }
</script>
