<?php
// Query mengambil data dari tb_banner
$query_banner = mysqli_query($koneksi, "SELECT * FROM tb_banner WHERE aktif='Y' ORDER BY id_banner DESC");
?>

<?php if ($mobile): ?>
    <div style="margin-top: 50px;">
        <div class="slider">
            <table width="100%" style="margin: 0 auto;">
                <tbody>
                    <tr id="slides">
                        <td colspan="2">
                            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner" role="listbox">
                                    <?php
                                    $no = 0;
                                    while ($row = mysqli_fetch_assoc($query_banner)):
                                        $active = ($no === 0) ? 'active' : '';
                                    ?>
                                        <div class="item <?= $active ?>">
                                            <img src="<?= $base_url ?>/upload/banner/<?= $row['gambar_banner'] ?>"
                                                alt="<?= htmlspecialchars($row['judul_banner']) ?>" style="margin: 0 auto;">
                                        </div>
                                    <?php $no++; endwhile; ?>
                                </div>
                                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                </a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="announcement-container" style="display: flex; padding: 8px 0; background-color: var(--secondary-color);">
            <div data-section="date"><img src="./asset/images/broadcast.png" alt="broadcast" style="width: 20px; margin: 0 8px;"></div>
            <div data-section="announcements">
                <ul class="announcement-list newsticker" id="announcement_list" style="color: rgb(235, 235, 235);">
                    <?php for ($i = 1; $i <= 3; $i++): ?>
                        <li><?= htmlspecialchars($web["teks_berjalan_$i"]) ?></li>
                    <?php endfor; ?>
                </ul>
            </div>
        </div>
    </div>
<?php else: ?>
    <div style="margin-top:200px">
        <div class="slider">
            <table width="100%" style="margin: 0 auto;">
                <tbody>
                    <tr id="slides">
                        <td colspan="2">
                            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner" role="listbox">
                                    <?php
                                    // Reset pointer query untuk blok desktop
                                    mysqli_data_seek($query_banner, 0);
                                    $no = 0;
                                    while ($row = mysqli_fetch_assoc($query_banner)):
                                        $active = ($no === 0) ? 'active' : '';
                                    ?>
                                        <div class="item <?= $active ?>">
                                            <img src="<?= $base_url ?>/upload/banner/<?= $row['gambar_banner'] ?>"
                                                alt="<?= htmlspecialchars($row['judul_banner']) ?>" style="max-width:50%;margin: 0 auto;">
                                        </div>
                                    <?php $no++; endwhile; ?>
                                </div>
                                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                </a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="announcement-container" style="width: 95%; margin: 0 auto; display: flex; padding: 8px 0; max-width: 1280px; background-color: var(--secondary-color);">
            <div data-section="date"><img src="./asset/images/broadcast.png" alt="broadcast" style="width: 24px; margin: 0 8px;"></div>
            <div data-section="announcements">
                <ul class="announcement-list newsticker" id="announcement_list" style="color: rgb(235, 235, 235);">
                    <?php for ($i = 1; $i <= 3; $i++): ?>
                        <li><?= htmlspecialchars($web["teks_berjalan_$i"]) ?></li>
                    <?php endfor; ?>
                </ul>
            </div>
        </div>
    </div>
<?php endif; ?>