<?php
session_start();

include "../../function/connect.php";
include "config.php";
include "functions.php";

/* ===============================
   HELPER
================================ */
function fetchOne($koneksi, $sql){
    $q = mysqli_query($koneksi, $sql);
    return $q ? mysqli_fetch_assoc($q) : [];
}

/* ===============================
   WEB CONFIG
================================ */
$web    = fetchOne($koneksi, "SELECT * FROM tb_web");
$urlweb = $web['url']  ?? '';
$logo   = $web['logo'] ?? '';

$query1010 = mysqli_query($koneksi, "SELECT * FROM tb_contact");
$ssa = mysqli_fetch_array($query1010);

$whatsapp    = $ssa['no_whatsapp'];
$id_livechat = $ssa['id_livechat'];

/* ===============================
   VALIDASI PARAM
================================ */
$provider  = $_GET['provider']  ?? '';
$gameCode  = $_GET['game_code'] ?? '';
$extplayer = $_SESSION['extplayer'] ?? '';
$lang      = $_GET['ln'] ?? 'id';

if ($provider === '' || $gameCode === '' || $extplayer === '') {
    goerror();
}

$provider = strtoupper($provider);
$hideClaimProviders = ['PRAGMATICLIVE'];

?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Play Game</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
</head>
<body>

<div class="game-wrapper">

<!-- HEADER -->
<div class="game-header">
    <div class="header2-left">
        <i class="fa-solid fa-chevron-left" onclick="exitGame()"></i>
        <?php if($logo): ?>
        <img src="../assets/img/<?= htmlspecialchars($logo) ?>" class="header2-logo">
        <?php endif; ?>
    </div>

    <div class="header2-right">
        <?php if (!in_array($provider, $hideClaimProviders)): ?>
        <a href="#" class="btn-claimsc" onclick="openScaterModal();return false;">
            <i class="fas fa-crown"></i> Claim Scater
        </a>
        <?php endif; ?>
        <div class="header2-btn" onclick="openDepositSheet()">
            <i class="fa-solid fa-wallet"></i>
        </div>

        <a href="javascript:void(0)" onclick="openLiveChat()" class="header2-btn">
            <i class="fas fa-headset"></i>
        </a>
    </div>
</div>

<div class="game-container">

<!-- INTRO -->
<div id="gameIntro">
    <div class="intro-content">
        <div class="intro-ring"></div>
        <div class="intro-logo">
            <img src="../assets/img/koi_ico_notext.png">
        </div>
       <div class="intro-text">Redy to play</div>
       <button id="btnStartGame">▶ START GAME</button>
    </div>
</div>

<!-- IFRAME (KOSONG) -->
<iframe
    id="gameFrame"
    src=""
    class="game-frame"
    allowfullscreen
    sandbox="allow-scripts allow-same-origin allow-forms allow-popups">
</iframe>

</div>
</div>

<script>
document.getElementById('btnStartGame').addEventListener('click', function () {

    const btn   = this;
    const intro = document.getElementById('gameIntro');
    const frame = document.getElementById('gameFrame');

    btn.disabled = true;
    btn.innerText = 'connecting...';

    fetch('../../play/game/ajax-main.php', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: new URLSearchParams({
            provider: '<?= $provider ?>',
            game_code: '<?= $gameCode ?>',
            ln: '<?= $lang ?>'
        })
    })
    .then(r => r.json())
    .then(res => {
        if (res.status !== 1) {
            alert(res.msg || 'Gagal membuka game');
            btn.disabled = false;
            btn.innerText = '▶ START GAME';
            return;
        }

        frame.src = res.url;
        intro.remove();
    })
    .catch(() => {
        alert('Server error');
        btn.disabled = false;
        btn.innerText = '▶ START GAME';
    });
});

function exitGame(){
    fetch('wd.php').finally(() => {
        window.location.href = '/main/index.php?page=home';
    });
}
</script>

</body>
</html>

<link
  rel="stylesheet"
  type="text/css"
  href="../../main/luxury-them/custom/css/style.css?v=2.6.0.0"
/>

<style>
*{
    box-sizing:border-box;
}

html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden; /* PENTING: hilangkan scroll */
    background:#111;
    font-family:Arial, sans-serif;
}

/* WRAPPER */
.game-wrapper{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column;
}

/* HEADER */
.game-header{
    height:48px;
    min-height:48px;
    background:#1f1f1f;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 8px;
    box-shadow:0 2px 4px rgba(0,0,0,.5);
}
.header2-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header2-logo {
    height: 45px;
    max-width: 125px;
}
/* ICON LEFT */
.header2-left i{
    font-size:18px;
    color:#fff;
}

/* ICON RIGHT */
.header2-right{
    display:flex;
    gap:10px;
}

.header2-btn{
    width:32px;        /* DIPERKECIL */
    height:32px;
    background:#2a2a2a;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.header2-btn i{
    font-size:18px;    /* DIPERKECIL */
    color:#ddd;
}

/* STRIP HIJAU */
.header2-strip{
    height:3px;
    min-height:3px;
    background:#0a7a55;
}

/* GAME CONTAINER */
.game-container{
    flex:1;            /* INI KUNCI FULL */
    width:100%;
    background:#000;
}

/* IFRAME */
.game-frame{
    width:100%;
    height:100%;
    border:none;
}

.btn-claimsc {
  background: #2a2a2a;
  padding: 6px 10px;
  border-radius: 8px;
  color: #B9B9B9C9;
  font-size: 14px;
  display: flex;          /* agar ikon dan teks sejajar */
  align-items: center;
  gap: 4px;               /* jarak antara ikon dan teks */
  text-decoration: none;  /* hilangkan underline */
  
}



</style>
<style>
/* INTRO OVER IFRAME */
#gameIntro {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5); /* Warna hitam transparan */
    backdrop-filter: blur(13px); /* Efek blur */
    -webkit-backdrop-filter: blur(8px); /* Support Safari */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}


.game-container{
    flex:1;
    width:100%;
    background:#000;
    position:relative; /* 🔥 KUNCI UTAMA */
}

/* CONTENT */
.intro-content{
    text-align:center;
    color:#fff;
    position:relative;
}

/* RING ANIMATION */
.intro-ring {
    pointer-events:none;
    position: absolute;
    width: 160px;
    height: 160px;
    border: 2px solid rgba(245, 193, 108, .5);
    border-radius: 50%;
    animation: ringPulse 2s infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* LOGO */
.intro-logo {
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    animation: logoFloat 1.6s ease-in-out infinite;
}

.intro-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* TEXT */
.intro-text{
    margin-top:10px;
    font-size:18px;
    animation:textBlink 1.4s infinite;
}

/* BUTTON */
#btnStartGame{
    margin-top:18px;
    padding:12px 34px;
    border:none;
    border-radius:30px;
    background:linear-gradient(45deg,#f5c16c,#ff9900);
    color:#000;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 0 18px rgba(245,193,108,.6);
    transition:.2s;
    z-index:4;
}

#btnStartGame:hover{
    transform:scale(1.08);
}

/* ANIMATIONS */
@keyframes ringPulse{
    0%{transform:translate(-50%,-50%) scale(.8);opacity:.4}
    50%{transform:translate(-50%,-50%) scale(1);opacity:1}
    100%{transform:translate(-50%,-50%) scale(1.3);opacity:0}
}

@keyframes logoFloat{
    0%{transform:translateY(0)}
    50%{transform:translateY(-8px)}
    100%{transform:translateY(0)}
}

@keyframes textBlink{
    0%,100%{opacity:.4}
    50%{opacity:1}
}


</style>
