<template>
    <div class="select-car sticky-lg-top py-4">
        <div class="select-car-form p-3 rounded">
            <div class="close_select-car d-flex justify-content-end my-3">
                <button type="button" class="btn-close" aria-label="Close" v-on:click="closeSelectCar"></button>
            </div>
            <h3 class="d-flex justify-content-center">Select a year to get started</h3>
            <h5 class="d-flex justify-content-center">What year is your vehicle?</h5>
            <form :class="carView" class="list-view">
                <div class="car_list car_years">
                    <div v-for="car in cars" :key="car.year" class="mb-3">
                        <input type="text" v-on:click="selectBrand(car.brands)" class="form-control" id="year" :value="car.year" readonly >
                    </div>
                </div>
                <div class="car_list car_brands">
                    <div v-for="brand in brands" :key="brand.brand" class="mb-3">
                        <input type="text" class="form-control" id="brand" :value="brand.brand" readonly >
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'SelectCar',
  data() {
      return {
          cars: [],
          brands: [],
          carView: 'show_years'
      }
  },
  mounted() {
      axios.get("https://mockey.qa.sagaws.net/service/'car_select'").then((response) => {
          this.cars = response.data.cars;
          console.log(this.cars);
      });
  },
  methods: {
      closeSelectCar() {
          const selectCar = document.getElementById('car-select-col');
          selectCar.style.transform = 'translateY(100%)';
          document.body.classList.remove('no-scroll_mobile');
          setTimeout(function(){
            selectCar.style.opacity = '0';
          }, 310);
      },
      selectBrand(brands) {
          this.brands = brands;
          this.carView = 'show_brands'
      }
  }
}
</script>