@if (isset($aviso) and $aviso)
  <div id="aviso">
    <div class="ui container">
      <div class="ui center aligned grid">
        <div class="ten wide column">
          <div class="ui header">
            BENEFICIOS COVID 19
          </div>
          Bono Pie 10%
        </div>
        <div class="row">
          @foreach ($avisos as $i => $av)
            <i class="circle outline tiny icon" data-id="{{$i + 1}}"></i>
          @endforeach
        </div>
      </div>
    </div>
  </div>
@endif

@push('scripts')
  <script type="text/javascript">
    var avisos = {
      avisos: [
        @foreach ($avisos as $av)
          {
            titulo: '{{$av->titulo}}',
            contenido: '{{$av->contenido}}'
          },
        @endforeach
      ],
      id: '#aviso',
      curr_page: 1,
      setup: () => {
        avisos.movePage(avisos.curr_page)
      },
      movePage: (page) => {
        var aviso = avisos.avisos[page - 1]
        $(avisos.id).find('.grid .column').html('').append(
          $('<div></div>').attr('class', 'ui header').html(aviso.titulo)
        ).append(aviso.contenido)
        $(avisos.id).find('.circle.icon').addClass('outline').css('cursor', 'pointer').click(function() {
          var id = $(this).attr('data-id')
          if (id == avisos.curr_page) {
            return
          }
          avisos.movePage(id)
        })
        $(avisos.id).find('.circle.icon:nth-child(' + page + ')').removeClass('outline').css('cursor', 'default')
        avisos.curr_page = page
      }
    }
    $(document).ready(function() {
      avisos.setup()
    })
  </script>
@endpush