<template>
  <div class="row">
    <div class="col-xs-12 col-md-4">
      <div class="input-group">
        <span class="input-group-prepend">
          <button v-if="pagination.current_page > 1" class="btn btn-secondary" @click="changePage(pagination.current_page - 1)">&laquo;</button>
          <button v-else class="btn btn-secondary disabled" disabled type="button">&laquo;</button>
        </span>
        <div class="input-group-prepend"><span class="input-group-text">Página</span></div>
        <input @keyup.enter="changePageInput($event.target.value)" type="number" class="form-control" :value="pagination.current_page">
        <div class="input-group-append"><span class="input-group-text">de {{pagination.last_page}}</span></div>
        <span class="input-group-append">
          <button v-if="pagination.current_page < pagination.last_page" class="btn btn-secondary" @click="changePage(pagination.current_page + 1)">&raquo;</button>
          <button v-else disabled class="btn btn-secondary disabled">&raquo;</button>
        </span>

      </div>
    </div>
  </div>
</template>
<script>
  export default{
      props: {
      pagination: { // Al invocar el componente se debe pasar esta propiedad obligatoriamente
          type: Object,
          required: true
      }
    },
    methods : {
      changePage(page) {
        this.pagination.current_page = page;
        this.$emit('paginate');
      },
      changePageInput(page){
          if(page >= 1){
            if(page > this.pagination.last_page){
              toastr.warning(`Solo hay ${this.pagination.last_page} páginas para mostrar`);
            }else{
              this.changePage(page);
            }
          }else{
            toastr.warning('Ingrese números válidos');
          }
      },
    }
  }
</script>