<template>
   <form v-on:submit.prevent="createdEvent" class="form-horizontal">
     <div class="form-group row">
       <label>Titulo</label>
       <input type="text" name="title" maxlength="25" v-model="title">
     </div>
     <div class="form-group row">
       <label>*Cryptodivisas</label>
       <multiselect v-model="coinvalue" :options="coins"
                    :multiple="true" label="name"
                    track-by="id" placeholder="Seleccione">
       </multiselect>
     </div>
     <div class="form-group row">
       <label>*Categoría</label>
       <multiselect v-model="categoryvalue" :options="categories"
                    :multiple="true" label="name"
                    track-by="id" placeholder="Seleccione">
       </multiselect>
     </div>
     <div class="col-sm-12">
       <button class="btn" type="submit">Crear evento</button>
     </div>
   </form>
 </template>
 <script>
    import Multiselect from 'vue-multiselect';
    export default {
      components: {
        Multiselect,
      },
      props: ['auth'],
      data () {
        return {
            user:           {},
            title:          '',
            coins:          [],
            coinvalue:      [],
            categories:     [],
            categoryvalue:  [],
       }
      },
      created() {
        this.getCoins();
        this.getCategories();
      },
      mounted() {
        this.user = JSON.parse(this.auth);
      },
      methods: {
        getCoins(){
            let urlCoin = '/dashboard/coins';
            axios.get(urlCoin)
                .then((response) => {
                    this.coins = response.data;
                })
                .catch((err) => {

                })
        },
        getCategories(){
            let urlCategories = '/dashboard/categories';
            axios.get(urlCategories)
                .then((response) => {
                    this.categories = response.data;
                })
                .catch((err) => {

                })
        },
        createdEvent(){
            let urlEvent = '/dashboard/newEvent';
            const eventData = {
                'id'            : this.user.id,
                'title'         : this.title,
                'coin'          : this.coinvalue,
                'category'      : this.categoryvalue,
            }
            console.log(eventData);
            axios.post(urlEvent, eventData)
                .then((response) => {
                    console.log(ok);
                })
                .catch((err) => {
                    console.log(err.response.data);
                })
        }
 </script>

public function storeEvent(Request $request)
   {
      $this->validate($request, [
                    'title'    => 'required|max:25',
                    'coin'     => 'required',
                    'category' => 'required',
            ]);

            $userAuth = Auth::user()->id;
            $userEvent = $request->id;
            if($userAuth === $userEvent){
                $event = new Event;
                $event->user_id = $userEvent;
                $event->title = $request->title;
                if($event->save()){
                    $event->coins()->attach($request->coin);
                    $event->categories()->attach($request->category);
                    return response()->json([
                            'status' => 'Muy bien!',
                            'msg' => 'Tu evento ya fue creado con éxito.',
                            ], 200);
                }
                else {
                    return response()->json([
                                'status' => 'Error!',
                                'msg' => 'No pudimos crear tu evento.',
                            ], 401);
                }
           }
    }