<?php
session_start();
$guest = true;
require_once '../config.php';
$query_slide = mysqli_query($db, "SELECT * FROM slider WHERE posisi = 'Guest'");
require_once '../layouts/header.php'; ?>
<style>
    .btn-category {
        color: #ffffff !important;
        background-color: #B19973 !important;
    }

    .btn-category.active {
        color: #ffffff !important;
        background-color: #77684e !important;
    }
     .btn-category:hover {
    color: #ffffff !important;
        background-color: #ddc49c !important;
     }
</style>
<div class="row justify-content-center">
    <div class="col-lg-9 mx-auto p-0">
        <?php if ($query_slide->num_rows !== 0) : ?>
            <div class="carousel slide shadow" id="carousels_promo-d" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <?php $no = 1;
                    while ($fetch_slide = $query_slide->fetch_assoc()) : ?>
                        <div class="carousel-item <?= $no == 1 ? 'active' : ''; ?>">
                            <a href="<?= base_url(); ?>">
                                <img src="<?= base_url('assets/slide/' . $fetch_slide['img']); ?>" alt="Whyzu" class="d-lg-none d-block w-100">
                                <img src="<?= base_url('assets/slide/' . $fetch_slide['img']); ?>" alt="Whyzu" style="border-radius:12px;" class="d-lg-block d-none w-100">
                            </a>
                        </div>
                    <?php $no++;
                    endwhile; ?>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carousels_promo-d" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carousels_promo-d" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        <?php endif; ?>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-12 mx-auto">
            <div class="row">
                <div class="col-lg-9 mx-auto">
                    <div class="nav-item col-lg-12 dropdown d-lg-inline-block mx-auto d-none">
                        <div class="row h-100">
                            <div class="col-sm mt-3">
                                <ul class="nav nav-pills justify-content-left horitab-scroll" id="myTab" role="tablist">
                                    <?php $menu = $db->query("SELECT DISTINCT * FROM games_kategori WHERE kategori_id='0' ORDER BY urutan ASC");
                                    while ($kat = $menu->fetch_assoc()) :
                                        $cuk = mysqli_query($db, "SELECT * FROM games_guest WHERE category = '" . $sub['sub_kategori'] . "' ORDER BY urutan DESC"); ?>
                                        <?php $te = str_replace(' ', '', $kat['kategori']); ?>
                                        <?php if ($cuk->num_row !== 0) : ?>
                                            <?php if ($kat['kategori'] == 'Games') : ?>
                                                <li class="nav-item ms-1 nav-tab" role="presentation">
                                                    <button class="btn-sm btn-category nav-link active" id="Games-tab" data-bs-toggle="tab" data-bs-target="#Games" type="button" role="tab" aria-controls="game" aria-selected="true"><small>Games</small></button>
                                                </li>
                                            <?php else : ?>
                                                <li class="nav-item ms-1 nav-tab" role="presentation">
                                                    <button class="btn-sm btn-category nav-link " id="<?= $te; ?>-tab" data-bs-toggle="tab" data-bs-target="#<?= $te; ?>" type="button" role="tab" aria-controls="game" aria-selected="true"><small><?= $kat['kategori']; ?></small></button>
                                                </li>
                                            <?php endif ?>
                                        <?php endif; ?>
                                    <?php endwhile; ?>
                                </ul>
                            </div>
                            <div class="col-sm mt-3">
                                <form action="" method="get" onsubmit="return false;">
                                    <div class="input-group me-3 search-bar" aria-haspopup="true" id="dropsearchdown">
                                        <input type="text" name="product" placeholder="Search products..." id="searchProds" class="form-control search_input" autocomplete="off">
                                        <button type="submit" class="btn btn-primary" id="btnSearchProds"><i class="fas fa-search"></i></button>
                                    </div>
                                    <ul class="dropdown-menu dropdown-menu-dark position-absolute shadow navbar-nav-scroll" aria-labelledby="dropsearchdown" id="dropDownSearchResults" style=""></ul>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="d-lg-none mt-2 mb-0 d-block dropdown">
                        <form action="" method="get" onsubmit="return false;">
                            <div class="input-group me-3 search-bar" aria-haspopup="true" id="dropsearchdowns">
                                <input type="text" name="product" placeholder="Search products..." id="searchProds" class="form-control search_iinput" autocomplete="off">
                                <button type="submit" class="btn btn-primary" id="btnSearchProds"><i class="fas fa-search"></i></button>
                            </div>
                            <ul class="dropdown-menu dropdown-menu-dark position-absolute shadow navbar-nav-scroll" aria-labelledby="dropsearchdowns" id="dropDownSearchResult" style=""></ul>
                        </form>
                        <ul class="nav nav-pills justify-content-left mt-2 horitab-scroll" id="myTab" role="tablist">
                            <?php $menu = $db->query("SELECT DISTINCT * FROM games_kategori WHERE kategori_id='0' ORDER BY urutan ASC");
                            while ($kat = $menu->fetch_assoc()) :
                                $cuk = mysqli_query($db, "SELECT * FROM games_guest WHERE category = '" . $sub['sub_kategori'] . "' ORDER BY urutan DESC"); ?>
                                <?php $te = str_replace(' ', '', $kat['kategori']); ?>
                                <?php if ($cuk->num_row !== 0) : ?>
                                    <?php if ($kat['kategori'] == 'Games') : ?>
                                        <li class="nav-item me-1 nav-tab" role="presentation">
                                            <button class="btn-sm btn-category nav-link active" id="Games-tab" data-bs-toggle="tab" data-bs-target="#Games" type="button" role="tab" aria-controls="game" aria-selected="true"><small>Games</small></button>
                                        </li>
                                    <?php else : ?>
                                        <li class="nav-item ms-1 nav-tab" role="presentation">
                                            <button class="btn-sm btn-category nav-link " id="<?= $te; ?>-tab" data-bs-toggle="tab" data-bs-target="#<?= $te; ?>" type="button" role="tab" aria-controls="game" aria-selected="true"><small><?= $kat['kategori']; ?></small></button>
                                        </li>
                                    <?php endif ?>
                                <?php endif; ?>
                            <?php endwhile; ?>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-content" id="myTabContent">
        <?php $query_games_kategori = mysqli_query($db, "SELECT DISTINCT * FROM games_kategori WHERE kategori_id='0' ORDER BY urutan DESC");
        while ($cat = mysqli_fetch_assoc($query_games_kategori)) : ?>
            <?php $te = str_replace(' ', '', $cat['kategori']); ?>
            <?php if ($cat['kategori'] == 'Games') : ?>
                <div class="tab-pane active" id="Games" role="tabpanel" aria-labelledby="Games-tab">
                <?php else : ?>
                    <div class="tab-pane fade" id="<?= $te ?>" role="tabpanel" aria-labelledby="<?= $te; ?>-tab">
                    <?php endif; ?>
                    <div class="row">
                        <div class="col-lg-12 mx-auto">
                            <div class="row mb-3">
                                <div class="col-lg-9 mx-auto">
                                    <?php $sub = $db->query("SELECT * FROM games_kategori WHERE kategori_id='" . $cat['id'] . "' ORDER BY urutan ASC");
                                    while ($subs = $sub->fetch_assoc()) : ?>
                                        <?php if ($subs['urutan'] == "1") : ?>
                                            <h5 class="category-title"><?= $subs['kategori']; ?></h5>
                                        <?php else : ?>
                                            <h5 class="category-title mt-5"><?= $subs['kategori']; ?></h5>
                                        <?php endif; ?>
                                        <div class="row row-cols-3 row-cols-sm-4 row-cols-md-5 row-cols-lg-6 mt-sm-2 g-2 mb-3 px-lg-3">
                                            <?php $query_games = mysqli_query($db, "SELECT * FROM games_guest WHERE category = '" . $subs['kategori'] . "' ORDER BY urutan ASC");
                                            while ($fetch_games = mysqli_fetch_assoc($query_games)) : ?>
                                                <?php if ($fetch_games['status'] == 'On') : ?>
                                                    <div class="col pt-1 mt-5">
                                                        <div class="card bg-dark shadow h-100" onclick="window.location='<?= base_url('id/product/' . $fetch_games['slug']); ?>'">
                                                            <div class="row h-100">
                                                                <div class="col mt-4 mb-lg-2 text-center">
                                                                    <img src="/assets/games/<?= $fetch_games['img']; ?>" class="card-img-top rounded-img-buy size-img-buy position-absolute start-50 translate-middle" alt="LynchStore">
                                                                </div>
                                                                <div class="col card-body mt-4 mt-sm-4 py-md-0 d-md-none text-center">
                                                                    <div class="card-title-publisher-wrap">
                                                                        <div class="card-game-publisher cut-text"><?= $fetch_games['sub_name']; ?></div>
                                                                        <div class="card-game-title"><?= $fetch_games['name']; ?></div>
                                                                    </div>
                                                                </div>
                                                                <div class="col card-body py-md-0 mt-md-5 mt-lg-3 mb-3 d-none d-md-block text-center">
                                                                    <div class="card-title-publisher-wrap">
                                                                        <div class="card-game-publisher cut-text"><?= $fetch_games['sub_name']; ?></div>
                                                                        <div class="card-game-title"><?= $fetch_games['name']; ?></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-hp mb-2 text-center">
                                                                <a href="<?= base_url('id/product/' . $fetch_games['slug']); ?>" class="btn btn-topup rounded-pill btn-sm">BUY</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                <?php endif; ?>
                                            <?php endwhile; ?>
                                        </div>
                                    <?php endwhile; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                <?php endwhile; ?>
                </div>
    </div>
</div>

<?php include_once '../layouts/footer.php'; ?>
<script>
    $(document).ready(function() {
        $(".search_input").focusout(function() {
            setTimeout(() => {
                $(this).parent().dropdown("hide");
            }, 300);
            let $parent = $(this).parent(".mini").parent().parent().parent().parent();
            setTimeout(() => {
                $parent.find(".form-check").fadeIn(50);
            }, 300);
            $parent.parent().parent().find(".navbar-toggler").toggle("slide:left");
        });
        $(".search_input").focusin(function() {
            let $parent = $(this).parent(".mini").parent().parent().parent().parent();
            $parent.find(".form-check").fadeOut(50);
            $parent.parent().parent().find(".navbar-toggler").toggle("slide:left");

        });
        $(".search_input").keyup(function(e) {
            if (e.keyCode == 13) {
                $(this).parent().parent().submit();
            }
            var search = $(this).val();
            $.ajax({
                url: "<?= base_url('id/search'); ?>",
                type: "POST",
                data: {
                    product: search,
                },
                success: function(data) {
                    $("#dropsearchdown").addClass('show');
                    $('#dropsearchdown').innerHTML = "aria-expanded = true";
                    $("#dropDownSearchResults").addClass('show');
                    $("#dropDownSearchResults").html(data);
                }
            })
        })
    })
    $(document).ready(function() {
        $(".search_iinput").focusout(function() {
            setTimeout(() => {
                $(this).parent().dropdown("hide");
            }, 300);
            let $parent = $(this).parent(".mini").parent().parent().parent().parent();
            setTimeout(() => {
                $parent.find(".form-check").fadeIn(50);
            }, 300);
            $parent.parent().parent().find(".navbar-toggler").toggle("slide:left");
        });
        $(".search_iinput").focusin(function() {
            let $parent = $(this).parent(".mini").parent().parent().parent().parent();
            $parent.find(".form-check").fadeOut(50);
            $parent.parent().parent().find(".navbar-toggler").toggle("slide:left");

        });
        $(".search_iinput").keyup(function(e) {
            if (e.keyCode == 13) {
                $(this).parent().parent().submit();
            }
            var search = $(this).val();
            $.ajax({
                url: "<?= base_url('id/search'); ?>",
                type: "POST",
                data: {
                    product: search,
                },
                success: function(data) {
                    $("#dropsearchdowns").addClass('show');
                    $('#dropsearchdowns').innerHTML = "aria-expanded = true";
                    $("#dropDownSearchResult").addClass('show');
                    $("#dropDownSearchResult").html(data);
                }
            })
        })
    })
</script>
<?php if (opt_get('cG9wdXBfZ3Vlc3Rfc3RhdHVz') == 'On') : ?>
    <div class="modal fade" id="modal-info" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content card bg-dark shadow">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalScrollableTitle"><i class="fas fa-info-circle" aria-hidden="true"></i> Pengumuman</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true style=" text:="" none;>×</span>
                    </button>
                </div>
                 <div class="modal-body">                                            
             <img src="<?= opt_get('cG9wdXBfZ3Vlc3RfbGluaw=='); ?>" class="w-100">
            <?= opt_get('cG9wdXAtbmV3cw==');?>
            </div>
               <div class="modal-footer">
                <button type="button" class="btn btn-danger text-right" data-dismiss="modal" style="background-color: #B19973 !important;border-color: #B19973 !important;">Tutup</button>
             </div> 
            </div>
        </div>
    </div>
    <script>
        $("#modal-info").modal('show');
    </script>
<?php endif; ?>