const template = html`
<div>
    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#HolidayRequestnew">
    Request a holiday
    </button>

    <!-- Modal -->
    <div class="modal fade" id="HolidayRequestnew" tabindex="-1" role="dialog" aria-labelledby="HolidayRequestnewLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="HolidayRequestnewLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="col-sm-3 control-label" for="inputStart">Description:</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" required=""  v-model="newRequest.description">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="inputStart">start:</label>
                <div class="col-sm-9">
                    <input type="date" class="form-control" required="" v-model="newRequest.start">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="inputStart" >end:</label>
                <div class="col-sm-9">
                    <input type="date"  class="form-control" required="" v-model="newRequest.end">
                </div>
            </div>
            <div class="form-group">
			<label class="col-sm-3 control-label" for="inputStart">Paid holiday:</label>
			<div class="col-sm-9">
				<label class="radio-inline">
					<input type="radio" name="paid" required=""  v-model="newRequest.Paid" :value="true"> Yes
				</label>
				<label class="radio-inline">
					<input type="radio" name="paid" required=""  v-model="newRequest.Paid" :value="false"> No
				</label>
                {{newRequest.Paid}}
				<span class="help-block"><small>You have <strong><em>{{daysAllowed.daysLeft}}</em></strong> paid holiday days left.</small></span>
			</div>
		</div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" @click="save()">Save changes</button>
        </div>
        </div>
    </div>
    </div>
</div>
`


import api from "../../api.js";
export default {
    props:['daysAllowed'],
    data(){
        return {
            newRequest:{
                description:'',
                start:moment().format('DD/MM/YYYY'), 
                end:moment().format('DD/MM/YYYY'),
                Paid:true
            }
        }
    },
    mounted(){

    },
    methods:{
        save(){
        const newRequest = {
            start:moment(this.newRequest.start).format('YYYY-MM-DD'),
            end:moment(this.newRequest.end).format('YYYY-MM-DD'),
            description: this.newRequest.description,
            isPayed: this.newRequest.Paid
        }
            api.post.jophielHoliday({},newRequest)
        }
    },
    template
};