<template>
<div class="container mt-3">

    <div class="row justify-content-center">

        <div class="col-8">
            <div class="card">
                <div class="card-header bg-info">
                    <h4 class="text-white mt-2">Add Room Types</h4>
                </div>
                <div class="card-body">
                    <form action="#" method="post" @submit.prevent="addRoomType()">
                        <div class="row form-group">
                            <label for="name" class="col-form-label col-3 text-right">Name</label>
                            <div class="col-9">
                                <input v-model="name" v-bind:class="{'is-invalid': errors.name || sErrors.name}" type="text" class="form-control">
                                <div v-if="errors.name || sErrors.name" class="invalid-feedback">
                                    {{errors.name || sErrors.name[0]}}
                                </div>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-form-label col-3 text-right">Price (&#8358;)</label>
                            <div class="col-3">
                                <input v-model="price"  v-bind:class="{'is-invalid': errors.price || sErrors.price}"  type="text" class="form-control">
                                <div v-if="errors.price || sErrors.price" class="invalid-feedback">
                                    {{errors.price || sErrors.price[0]}}
                                </div>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-form-label col-3 text-right">Description</label>
                            <div class="col-9">
                                <textarea v-model="description" v-bind:class="{'is-invalid': errors.description || sErrors.description}" class="form-control"></textarea>
                                <div v-if="errors.description || sErrors.description" class="invalid-feedback">
                                    {{errors.description || sErrors.description[0]}}
                                </div>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label for="amenities" class="col-form-label col-3 text-right">Amenities</label>
                            <div class="col-9 mt-2">
                                <div v-for="(amenity) in allAmenities" v-bind:key="amenity.id" class="form-check form-check-inline">
                                <input v-model="amenities" class="form-check-input" type="checkbox" id="inlineCheckbox1" :value="amenity.id">
                                <label class="form-check-label" for="inlineCheckbox1">{{amenity.name}}</label>
                                </div>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label for="amenities" class="col-form-label col-3 text-right">Images</label>
                            <div class="col-9">
                                <input @change="onImageChange" :type="'file'" v-bind:class="{'is-invalid': errors.images || sErrors.images}" accept="image/*">
                                <div v-if="errors.images || sErrors.images" class="invalid-feedback">
                                    {{errors.images || sErrors.images[0]}}
                                </div>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-9 offset-3">
                                <input type="submit" value="Add Room Type" class="btn btn-outline-primary">
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>

    </div>

</div>
</template>
<script>
import axios from 'axios';
import roomTypeMixin from '../../mixins/common.mixins';

export default{
    mixins: [roomTypeMixin],
    data(){
        return {
            name: "",
            price: "",
            description: "",
            image: new FormData,
            attachment: '',
            amenities: [],
            allAmenities: {},
            roomTypes: {},
            errors: {},
            sErrors: {},
        }
    },
    methods: {
        onImageChange(e){
            this.attachment = e.target.files[0];
            console.log(this.attachment);
        },
        addRoomType: function(){


            axios.post('/admin/room-types',{
                name: this.name,
                price: this.price,
                description: this.description,
                amenities: this.amenities,
                image: this.attachment
            }, {
                header: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then((response)=>{
                this.errors = {};
                this.name = ""; this.price="";this.description="";this.sErrors={};this.amenities=[];
                this.roomTypes.push(response.data);
            }).catch((error)=>{
                this.sErrors = error.response.data.errors;
                console.error(error.response.data);
            });


        },

    },

    props: {

    },
    mounted(){
        this.getRoomTypes().then((response)=>{
            //console.log(response)
            this.roomTypes = response.data;
        });

        this.getAmenities().then((response)=>{
            this.allAmenities = response.data;
        });
    }
}
</script>
<style>

</style>