<template>
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-10 coopcard-list">
        <h1 class="title">Últimas cooperativas añadidas</h1>
        <p class="help">
          Si quieres que tu cooperativa forme parte de este gran proyecto
          registrate en el siguiente
          <NuxtLink to="/registro/cooperativa"><b>formulario</b></NuxtLink
          >.
        </p>
        <div class="form-container">
          <form class="search-container" @submit.prevent="search">
            <input
              v-model="searchText"
              class="search-text"
              type="text"
              autocomplete="off"
              placeholder="Buscar cooperativas"
            />
            <img
              class="search-icon"
              src="@/assets/img/latienda-search-blue.svg"
              alt="latienda.coop-search"
              @click="search"
            />
          </form>
        </div>
        <div v-for="coop in companyList" :key="coop.id">
          <CoopCard :coop="coop" />
        </div>
      </div>
    </div>
    <!-- <BPagination
      v-model="currentPage"
      class="pagination"
      :total-rows="rows"
      :per-page="perPage"
    /> -->
  </div>
</template>

<script>
export default {
  setup(){
    definePageMeta({
      layout: 'default',
    })
  },

  data() {
    return {
      currentPage: 1,
      perPage: 10,
      searchText: '',
      companyList: null
    }
  },
  // computed: {
  //   rows() {
  //     return this.companyList?.length
  //   },
  //   slicedCompanies() {
  //     const initial = (this.currentPage - 1) * this.perPage
  //     const final = this.currentPage * this.perPage
  //     const items = this.companyList ? this.companyList.slice(initial, final) : []
  //     return items
  //   },
  // },
  mounted() {
    this.getCompanies()
  },
  methods: {
    async getCompanies() {
      const config = useRuntimeConfig()
      try {
        const response = await $fetch(`/companies/sample/`, {
          baseURL: config.public.baseURL,
          method: 'GET'
        })
        this.companyList = response
      } catch (error) {
        console.error('Error fetching companies:', error)
      }
    },
    async search() {
      const config = useRuntimeConfig()
      if (this.searchText) {
        const response = await $fetch(`/search/companies/?search=${this.searchText}`, {
          baseURL: config.public.baseURL,
          method: 'GET'
        })
        this.companyList = response
      } else {
        const response = await $fetch(`/companies/sample/`, {
          baseURL: config.public.baseURL,
          method: 'GET'
        })
        this.companyList = response
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  margin-top: 80px;
  margin-bottom: 80px;
}

.title {
  margin-top: 60px;
  margin-bottom: 40px;
  font-size: $xxl;
  color: $color-navy;
}

.form-container {
  display: flex;
  justify-content: flex-start;
}

.coopcard-list {
  margin-bottom: 40px;
}

.pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.help {
  color: $color-navy;
  margin-bottom: 0px;
  font-size: $s;
}

.search-container {
  border: none;
  border-radius: 5px;
  background: $color-consumo-base-light;
  width: 50%;
  height: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 50px;

  @include mobile {
    width: 100%;
  }
}

.search-container img,
input,
select {
  padding: 6px 10px;
  margin-right: 16px;
  background: transparent;
  font-size: $xl;
  border: none;
}

.search-icon {
  float: right;
  height: 90%;
}

.search-text {
  outline: none;
  width: 100%;
  text-align: center;
  color: $color-navy;
  font-size: $s;
  font-weight: $regular;
}

::placeholder {
  color: $color-navy;
  font-size: $s;
}

select {
  --webkit-appearance: auto;
}
</style>
