<?php
require_once "../app/headl.php";
?>
<?php
	if (isset($_SESSION['user'])) {
		$user = mysqli_query($conn, "SELECT * FROM `tb_user` WHERE user = '" . $_SESSION['user'] . "'") or die(mysqli_error());
		$u = mysqli_fetch_array($user);
		$users = $u['user'];
		$userid = $u['user'];
		$id_user = $u['cuid'];
		$userID = $u['cuid'];
		$token_id = isset($u['token_id']) ? $u['token_id'] : false;
		$level = isset($u['level']) ? $u['level'] : false;
		
		$sql_balance = mysqli_query($conn, "SELECT * FROM `tb_balance` WHERE userID = '$userID'") or die(mysqli_error());
		$sb = mysqli_fetch_array($sql_balance);
	?>
	
	<body>
		
		<?php require_once "../app/menul.php" ?>
		
        <div class="clearfix"></div>
        <style>
            body {
			font-size: 12px;
			color: #FFFFFF;
			background-color: #1b1b1b;
            }
			
            .btn {
			margin-bottom: 2px;
			font-size: 12px;
			font-weight: bold;
            }
			
            .container {
			width: 100%;
            }
			
            .glyphicon {
			margin-right: 5px;
            }
			
            .no-gutter>[class*='col-'] {
			padding-right: 5px;
			padding-left: 5px;
			padding-top: 5px;
			padding-bottom: 5px;
            }
			
            .tengahBaris {
			vertical-align: middle;
            }
			
            table {
			padding-bottom: 0px;
            }
			
            .panel {
			box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
			}
			
            input[readonly] {
			background-color: #fff0c4 !important;
			/* any other styles */
            }
			
			
            .panel-danger>.panel-heading,
            .panel-warning>.panel-heading,
            .btn-warning {
			color: #000000;
			font-weight: bold;
			border-color: rgba(0, 0, 0, 0.6);
			background-image: -webkit-linear-gradient(#eee791, #9d8b3d 60%, #9f8435);
			background-image: -o-linear-gradient(#eee791, #9d8b3d 60%, #9f8435);
			background-image: -webkit-gradient(linear, left top, left bottom, from(#eee791), color-stop(60%, #9d8b3d), to(#9f8435));
			background-image: linear-gradient(#eee791, #9d8b3d 60%, #9f8435);
			background-repeat: no-repeat;
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0);
			-webkit-filter: none;
			filter: none
            }
			
            .btn-warning:hover {
			color: #000000;
			font-weight: bold;
			border-color: rgba(0, 0, 0, 0.6);
			background-image: -webkit-linear-gradient(#d7a001, #d7a001 60%, #d7a001);
			background-image: -o-linear-gradient(#d7a001, #d7a001 60%, #d7a001);
			background-image: -webkit-gradient(linear, left top, left bottom, from(#d7a001), color-stop(60%, #d7a001), to(#d7a001));
			background-image: linear-gradient(#d7a001, #d7a001 60%, #d7a001);
			background-repeat: no-repeat;
            }
			
            .login {
			color: #000000;
			font-weight: bold;
			border-color: rgba(0, 0, 0, 0.6);
			background-image: -webkit-linear-gradient(#eee791, #9d8b3d 60%, #9f8435);
			background-image: -o-linear-gradient(#eee791, #9d8b3d 60%, #9f8435);
			background-image: -webkit-gradient(linear, left top, left bottom, from(#eee791), color-stop(60%, #9d8b3d), to(#9f8435));
			background-image: linear-gradient(#eee791, #9d8b3d 60%, #9f8435);
			background-repeat: no-repeat;
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0);
			-webkit-filter: none;
			filter: none
            }
			
			
            .panel-default>.panel-heading {
			color: #ffffff;
			border-color: rgba(0, 0, 0, 0.6)
            }
			
            .navbar-default {
			background-color: #000000;
			border-color: #2b2e32
            }
			
            .well {
			background: #111 !important;
            }
			
			
            input[readonly] {
			background-color: #eeeecd !important;
			/* any other styles */
            }
			
            textarea[readonly] {
			background-color: #eeeecd !important;
			/* any other styles */
            }
			
            .form-control {
			height: 40px !important;
			border-radius: 3px !important;
            }
			
            .form-control#validasi {
			height: 50px !important;
			border-radius: 3px !important;
            }
			
            .form-control-login {
			height: 40px !important;
			border-radius: 3px !important;
            }
			
            .form-control#reg_username,
            #reg_pass,
            #reg_passcon,
            #reg_email,
            #reg_telpon,
            #reg_bank,
            #reg_rek,
            #reg_nama,
            #reg_ref,
            #reg_dari,
            #reg_lain {
			height: 45px !important;
			border-radius: 3px !important;
            }
			
			
            textarea {
			height: 100px !important;
			width: 100%;
			padding: 10px;
			border-radius: 5px !important;
            }
			
            td {
			padding-top: 5px !important;
			padding-bottom: 5px !important;
            }
			
            .borderbottom {
			border-bottom: 2px solid #c2c2c2;
			border-top: 2px solid #c2c2c2;
            }
			
            @media (max-width: 1200px) {
			.navbar {
			background: #32363b;
			}
			
			.navbar-header {
			float: none;
			}
			
			.navbar-left,
			.navbar-right {
			float: none !important;
			}
			
			.navbar-toggle {
			display: block;
			}
			
			.navbar-collapse {
			border-top: 1px solid transparent;
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
			}
			
			.navbar-fixed-top {
			top: 0;
			border-width: 0 0 1px;
			}
			
			.navbar-collapse.collapse {
			display: none !important;
			}
			
			.navbar-nav {
			float: none !important;
			margin-top: 7.5px;
			}
			
			.navbar-nav>li {
			float: none;
			}
			
			.navbar-nav>li>a {
			padding-top: 10px;
			padding-bottom: 10px;
			}
			
			.collapse.in {
			display: block !important;
			}
			
			
			@media (min-width: 320px) {
			
			/* iPhone SE,6/7/8/X, Galaxy S5,  */
			.fadein {
			position: relative;
			width: 100%;
			height: 160px;
			}
			
			.fadein img {
			position: absolute;
			left: 0;
			top: 0;
			}
			
			}
			
			@media (min-width: 400px) {
			
			/* iPhone 6/7/8 Plus, Pixel 2,Pixel 2 XL,  */
			.fadein {
			position: relative;
			width: 100%;
			height: 200px;
			}
			
			.fadein img {
			position: absolute;
			left: 0;
			top: 0;
			}
			
			
			}
			
			@media (min-width: 700px) {
			
			/* iPad  */
			.fadein {
			position: relative;
			width: 100%;
			height: 380px;
			}
			
			.fadein img {
			position: absolute;
			left: 0;
			top: 0;
			}
			
			}
			
			@media (min-width: 1000px) {
			.fadein {
			position: relative;
			width: 100%;
			height: 480px;
			}
			
			.fadein img {
			position: absolute;
			left: 0;
			top: 0;
			}
			
			}
			
            }
			
            textarea {
			height: 100px !important;
			width: 100%;
			padding: 10px;
			border-radius: 5px !important;
            }
			
            .form-control {
			height: 25px !important;
			border-radius: 3px !important;
            }
			
            td {
			padding-top: 5px !important;
			padding-bottom: 5px !important;
			padding-left: 3px !important;
			padding-right: 3px !important;
            }
			
            .grabgtab {
			font-weight: bold;
			border-color: rgba(0, 0, 0, 0.6);
			background-image: -webkit-linear-gradient(#1b1b1b, #1b1b1b 60%, #10100e);
			background-image: -o-linear-gradient(#1b1b1b, #1b1b1b 60%, #10100e);
			background-image: -webkit-gradient(linear, left top, left bottom, from(#1b1b1b), color-stop(60%, #1b1b1b), to(#10100e));
			background-image: linear-gradient(#1b1b1b, #1b1b1b 60%, #10100e);
			background-repeat: no-repeat;
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b1b1b', endColorstr='#10100e', GradientType=0);
			-webkit-filter: none;
			filter: none
            }
			
            .grabgtabbottom {
			font-weight: bold;
			border-color: rgba(0, 0, 0, 0.6);
			background-image: -webkit-linear-gradient(#3e444c, #1b1b1b 60%, #1b1b1b);
			background-image: -o-linear-gradient(#3e444c, #1b1b1b 60%, #1b1b1b);
			background-image: -webkit-gradient(linear, left top, left bottom, from(#3e444c), color-stop(60%, #1b1b1b), to(#1b1b1b));
			background-image: linear-gradient(#3e444c, #1b1b1b 60%, #1b1b1b);
			background-repeat: no-repeat;
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b1b1b', endColorstr='#1b1b1b', GradientType=0);
			-webkit-filter: none;
			filter: none
            }
			
            .abel {
			font-family: 'Abel';
            }
            
    .game-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

.game-card {
    width: calc(33.33% - 10px) !important; /* Paksa 3 kolom */
    min-width: 100px !important;           /* Supaya tidak collapse */
    text-align: center !important;
    margin-bottom: 15px !important;
}

.game-img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
}

.game-name {
    margin-top: 5px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* Matikan semua responsive bawaan */
@media (max-width: 6000px) {
    .game-card {
        width: calc(33.33% - 10px) !important;
    }
}

		</style>
		<!-- MAIN TAB -->
		
        <?php require_once "../app/game.php" ?>
        
<div style="height:10px; background-color:#FFF" class="grabgtabbottom"></div>
<div class="tab-content">
    <div id="games_wrap" class="tab-pane fade in active">
        
        <div id="launch_window" style="position:absolute; left:0px; top:0px; width:100%; height:100%; display:none">
            <iframe id="embedgameIframe" name="embedgameIframe" scrolling="no" width="100%" height="100%" src="pleaseWait.html" allowfullscreen="" frameborder="0" style="margin: 0; padding: 0; border: 0; background-color:#272b30">
            </iframe>
        </div>

        <div id="game_window" style="width:100%;">
            <ul class="nav nav-pills grabgtab" style="padding-bottom:0px; font-size:16px; font-weight:normal;">
                <?php
                    $sql_providers = mysqli_query($conn, "SELECT * FROM `tb_provider` WHERE jenis = 2 ORDER BY cuid ASC") or die(mysqli_error($conn));
                    while ($prov = mysqli_fetch_array($sql_providers)) { ?>
                        <li class="<?= (isset($_GET['provider']) && $_GET['provider']==$prov['slug'])?'active':'' ?>" style="width:32.78%; margin-left:2px; margin-bottom:2px; font-weight:normal" onclick="location.href='?provider=<?= $prov['slug']; ?>'">
                            <a data-toggle="tab" href="#games_window_<?= $prov['slug']; ?>" style="padding-left:5px">
                                <span>
                                    <img src="<?= $urlweb; ?>/upload/provider_pic/<?= $prov['slug']; ?>.png" height="25" alt="<?= $prov['slug']; ?>" style="vertical-align:bottom">
                                    &nbsp;<?= $prov['providername']; ?>
                                </span>
                            </a>
                        </li>
                <?php } ?>
            </ul>

            <div style="height:10px; background-color:#FFF" class="grabgtabbottom"></div>

            <div class="tab-content">
                <div id="games_window_<?= isset($_GET['provider'])?$_GET['provider']:'all' ?>" class="tab-pane fade in active">
                    
                    <div style="margin-top:10px; margin-right:6px">
                        <form method="GET" style="width:200px; float:right;">
                            <div class="input-group">
                                <input type="text" class="form-control" name="s" placeholder="Search Game" value="<?= isset($_GET['s'])?$_GET['s']:'' ?>">
                                <input type="hidden" name="provider" value="<?= isset($_GET['provider'])?$_GET['provider']:'' ?>">
                                <div class="input-group-btn">
                                    <button type="submit" class="btn btn-sm btn-danger" style="height:27px; padding-top:4px; margin-top:-1px">
                                        <i class="glyphicon glyphicon-search"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div style="clear:both;"></div>

                    <?php
                    // Filter provider
                    if (isset($_GET['provider'])) {
                        $providerSlug = $_GET['provider'];
                        $sql_provider = mysqli_query($conn, "SELECT * FROM `tb_provider` WHERE slug = '$providerSlug'") or die(mysqli_error($conn));
                        $sp = mysqli_fetch_array($sql_provider);
                        $providerID = $sp['providerid'];
                        $where = "`provider` = '$providerID' AND";
                    } else {
                        $where = "`provider` IS NOT NULL AND";
                    }

                    // Filter search
                    $search = isset($_GET['s']) ? $_GET['s'] : '';
                    if ($search != '') {
                        $where .= " `gamename` LIKE '%$search%' AND";
                    }

                    $sql_games = mysqli_query($conn, "SELECT * FROM `tb_gamelist` WHERE $where `datatype` = 'SB' ORDER BY cuid ASC") or die(mysqli_error($conn));

                    if (mysqli_num_rows($sql_games) == 0) {
                        echo "<div style='color:#fff;'>Tidak ada game live casino tersedia.</div>";
                    } else {
                        ?>
                        <div class="game-container"> <!-- Container Flexbox -->
                     <?php
                        while ($game = mysqli_fetch_array($sql_games)) {
                            if (isset($_SESSION['user'])) {
                                $playUrl = $urlweb . '/gameplay/Play.php?gamecode=' . $game['gameid'] . '&p=' . $game['provider'];
                            } else {
                                $playUrl = $urlweb . '/login/';
                            }
                    ?>
                        <div class="game-card">
    <a href="<?= $playUrl ?>">
        <img src="<?= $game['image'] ?>" alt="<?= $game['gamename'] ?>" class="game-img">
        <div class="game-name"><?= $game['gamename'] ?></div>
    </a>
</div>
                    <?php
                        }
                    }
                    ?>
                    <div style="clear:both;"></div>
                </div>
            </div>

        </div>
    </div>
</div>

<?php require_once "../app/footer.php"; ?>

<script>
function GameAlert() {
    document.body.innerHTML = `
        <div style="
            display:flex;
            justify-content:center;
            align-items:center;
            flex-direction:column;
            height:100vh;
            background:#000;
            padding:20px;
            text-align:center;
        ">
            <img src="https://i.imghippo.com/files/IWd3799ay.jpg" 
                 alt="Maintenance" 
                 style="max-width:90%; border-radius:10px;">
            
            <a href="javascript:history.back();" 
               style="
                    margin-top:20px;
                    padding:12px 20px;
                    background:#5e1914;
                    color:#fff;
                    text-decoration:none;
                    font-size:18px;
                    border-radius:10px;
                    font-weight:bold;
               ">
               Kembali
            </a>
        </div>
    `;
}
</script>

</body>

</html>
<?php } ?>
