<?= $this->extend('Mobile/Layouts/App') ?>
<?= $this->section('content') ?>

<div class="page-content-wrapper py-3">
  <div class="container">
    <div v-if="$store.state.config.pengumuman.length<1" class="alert custom-alert-2 alert-info alert-dismissible fade show" role="alert"><i class="bi bi-info-circle"></i>Belum ada pengumuman !
      <button class="btn btn-close btn-close-white position-relative p-1 ms-auto" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div v-else>
      <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner" id="pencar" style="border-radius:1rem">
        </div>
      </div>
    </div>
  </div>
  <pengumuman></pengumuman>
</div>

<?= $this->endSection() ?>

<?= $this->section('js') ?>
<script>
  let VPP = (function() {
    return {
      name: 'pengumuman',
      mounted() {
        this.$store.dispatch('config/loadPengumuman');
      },
      computed: {
        pengumuman() {
          return this.$store.state.config.pengumuman;
        }
      },
      watch: {
        pengumuman() {
          this.build();
        }
      },
      methods: {
        build() {
          let temp = ``;
          this.pengumuman.forEach((elem, i) => {
            temp += this.buildItem(elem, i == 0)
          });
          setTimeout(() => {
            document.getElementById('pencar').innerHTML = this.pengumuman.length > 0 ? temp : '';
          }, 100)
        },
        buildItem(p, active = false) {
          return `<div class="carousel-item ${active ? 'active' : ''}">
                    <div class="single-hero-slide bg-img bg-overlay p-3">
                        <div class="h-100 d-flex align-items-center">
                            <div class="slide-text">
                                <h3 class="text-white"><i class="bi bi-bell"></i> ${p.judul}</h3>
                                <small><span class="text-white text-muted"><i class="bi bi-bookmark"></i> ${p.time}</span></small>
                                <div class="text-white">${p.body}</div>
                            </div>
                        </div>
                    </div>
                </div>`;
        },
      }
    }
  })();
  VAPP.component(VPP.name, VPP);
</script>
<?= $this->endSection() ?>