<?php
ob_start();
session_start();
date_default_timezone_set("Asia/Jakarta");
include('../config/koneksi.php');

if (!function_exists('get_active_base_url')) {
    include(__DIR__ . '/../config/url_helper.php');
}

include "header.php";

/* =========================
   AMBIL DATA PROVIDER
========================= */
$providers = [];

$query = mysqli_query($conn, "
    SELECT * FROM tb_wprovider
    WHERE type='slot' AND status=1
    ORDER BY COALESCE(sort_order,0) ASC, cuid ASC
");

while ($row = mysqli_fetch_assoc($query)) {

    $mediaUrl = trim($row['image']);

    if (empty($mediaUrl)) {
        $mediaUrl = "https://files.sitestatic.net/GameImage/SlotsProviders/mobile/normal/slot_default.jpg";
    }

    $ext = strtolower(pathinfo($mediaUrl, PATHINFO_EXTENSION));

    $providers[] = [
        'name' => $row['name'],
        'code' => $row['code'],
        'media' => $mediaUrl,
        'ext' => $ext
    ];
}
?>

<style>

/* Hilangkan jarak container */
.container {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Hilangkan margin row bootstrap */
.row {
    margin-left: -4px !important;
    margin-right: -4px !important;
}

/* Kolom */
.box {
    padding: 4px;
}

/* Card */
.game-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #111;
    aspect-ratio: 1 / 1;
}

/* Media */
.game-wrapper img,
.game-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Judul */
.title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 2px;
    margin: 8px 0 12px 0;
}

/* Mobile biar fix 3 kolom */
@media (max-width: 768px) {
    .col-xs-4 {
        width: 33.3333%;
        float: left;
    }
}

</style>

<div class="container pt-1 games-category">
    <h2 class="title text-center">SLOTS</h2>

    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 image-grid">

            <?php foreach($providers as $p): ?>
                <div class="col-xs-4 col-sm-3 col-md-2 box">
                    <div class="game-wrapper">

                        <a href="<?= site_url('m/slots/game/?provider='.urlencode($p['code'])) ?>" class="game">

                            <?php if(in_array($p['ext'], ['mp4','webm','ogg'])): ?>

                                <video autoplay loop muted playsinline preload="auto">
                                    <source src="<?= htmlspecialchars($p['media']) ?>" type="video/mp4">
                                </video>

                            <?php else: ?>

                                <img class="img-fluid"
                                     src="<?= htmlspecialchars($p['media']) ?>"
                                     alt="<?= htmlspecialchars($p['name']) ?>">

                            <?php endif; ?>

                        </a>

                    </div>
                </div>
            <?php endforeach; ?>

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

<?php include "footer.php"; ?>