<template>
    <AdminHeader />
   <div>
    <div class="container m-3">
        
    <div class="rounded-card row">
        <H1>Направления</H1>
        <input 
             type="text"
             class="form-control"
             id="name"
             placeholder="Название направления"
             name="name"
             v-model="search_value"
         />
         <button class="btn-secondary border border-transparent rounded shadow-sm " @click="search">Поиск</button>
         <div style="min-width:max-content;" class="m-2">
            <div class="row">
                <button class="btn-success border border-transparent rounded shadow-sm " @click="showModal">Добавить</button>
            </div>
        <table class="table table-hover table-bordered">
          <tbody>
            <tr>
                <td>Номер</td>
                <td>Зазвание</td>
                <td>Места обычные</td>
                <td>Места льготные</td>
                <td></td>
            </tr>
            <tr v-for="row in trainings" :key="row.id" style="min-width:max-content;" >
              <td @click="clickOnTraining(row.id)">{{ row.num }}</td>
              <td @click="clickOnTraining(row.id)">{{ row.title }}</td>
              <td @click="clickOnTraining(row.id)">{{ row.basic_places }}</td>
              <td @click="clickOnTraining(row.id)">{{ row.benefit_places }}</td>
              <td><button class="btn btn-outline-danger" @click="deleteTrain(row.id)">Удалить</button></td>
            </tr>
          </tbody>
        </table>
       </div>
    </div>
    
       </div>   
   </div>
   <ModalCreateTraining ref="modal"></ModalCreateTraining>
</template>
<script scoped>
import TrainingSevice from '@/services/TrainingSevice';
import AdminHeader from '@/elemets/adminHeader.vue';
import ModalCreateTraining from './ModalCreateTraining.vue';
export default{
    name:"trainings",
    data(){
        return{
            trainings: [],
            myOrder: null,
            search_value: ""
        }
    },
    components: {
    AdminHeader,
    ModalCreateTraining
},
    beforeCreate(){
        TrainingSevice.getAll().then(response =>{
            this.trainings = response.data
        })
        
    },
    methods:{
        search(){
            if(this.search_value.length > 0){
                TrainingSevice.search(this.search_value).then(response =>{
                this.trainings = response.data
            })
            }else{
                TrainingSevice.getAll().then(response =>{
            this.trainings = response.data
        })
            }
            
        },
        clickOnTraining(id){
            this.$router.push({ name: 'training', params: { id: id} })
        },
        showModal() {
                this.$refs.modal.show = true;
                
            },
            deleteTrain(id){
                TrainingSevice.delete(id).then(response =>{
                    console.log(response.data)    
                    TrainingSevice.getAll().then(response =>{
                        this.trainings = response.data
                    })
                }).catch(e => {
                    console.log(e.data)
                })
            }

        
    }
}
</script>
<style scoped>
.container
{ 
position:absolute ;
min-width:calc(205vh);
background-color: #6ec0d9e9 ;
border: 5px solid #3f8ba2;
padding:12px;
align-items: center;
border-radius:8px;
}

.rounded-card{
  border: 5px solid #3f8ba2;
  padding:6px;
  margin:6px;
  border-radius:8px;
  align-items: center;
}
</style>