<template>
    <div class="container">
        <div class="narrow-container">
            <div class="normal-form rounded">
                <form>
                    <div class="title-bar"></div>
                    <h1 class="normal-heading uppercase">Edit Job Details</h1>
                    <div class="form-space"></div>
                    <div class="form-input horizontal">
                       <label for="JobName">Job Name</label>
                       <input type="text" name="job_name" id="JobName" v-model="job_name">
                    </div>
                    <div class="form-input horizontal">
                        <label for="Country">Country</label>
                        <select class="w-100 bluefire-selector" id="Country" name="country" v-model="country">
                            <option value="0">Country</option>
                        <option v-for="country in $store.state.countries" :key="country.CountryID" :value="country.CountryID">{{ country.CountryName }}</option>
                        </select>
                    </div>
                    <div class="form-input horizontal">
                        <label for="City">City</label>
                        <select class="w-100 bluefire-selector" id="City" name="city" v-model="city">
                            <option value="0">City</option>
                            <option v-for="city in $store.state.cities" :key="city.CityID" :value="city.CityID">{{ city.CityName }}</option>
                        </select>
                    </div>
                    <div class="form-input horizontal">
                       <label for="JobLevel">Job Level</label>
                       <input type="text" name="job_level" id="JobLevel" v-model="job_level">
                    </div>
                    <div class="form-input horizontal">
                        <label>Deadline</label>
                        <div class="row w-100"> 
                            <select class="w-25 bluefire-selector" v-model="day">
                                <option value="0">Day</option>
                                <option v-for="n in 31" :key="n">{{ n }}</option>
                            </select>
                            <select class="w-50 bluefire-selector" v-model="month">
                                <option value="0">Month</option>
                                <option v-for="n in 12" :key="n">{{ n }}</option>
                            </select>
                            <select class="w-25 bluefire-selector" v-model="year">
                                <option value="0">Year</option>
                                <option v-for="(n,i) in 95" :key="n">{{ 2020-i }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-input horizontal">
                        <label for="JobDescription">Job Description</label>
                        <textarea class="noresize" id="JobDescription" v-model="job_description" />
                    </div>
                    <div class="form-input flex-center">
                        <button class="button w-50 medium" @click="insertJob">Post Job</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
import API from "../../lib/API";

export default {
    data() {
        return {
            job_name: "",
            country: 0,
            city: 0,
            job_level: "",
            day: 0,
            month: 0,
            year: 0,
            job_description: "",
        };
    },
    mounted() {
        API.get("/getJob?jobId="+this.$route.params.id).then(({ data }) => {
            var job = data[0];
            this.job_name = job.JobName;
            this.country = job.CountryID;
            this.city = job.CityID;
            this.job_level = job.JobLevel;
            this.day = new Date(job.Deadline).getDate();
            this.month = 1 + new Date(job.Deadline).getMonth(); // thanks JavaScript :)
            this.year = new Date(job.Deadline).getFullYear();
            this.job_description = job.JobDescription;
        });
    },
    methods: {
        insertJob(e) {
            e.preventDefault();
            var formData = new FormData();
            formData.append("jobId",this.$route.params.id);
            formData.append("jobName",this.job_name);
            formData.append("cityId",this.city);
            formData.append("deadline",this.year+"-"+this.month+"-"+this.day);
            formData.append("jobLevel",this.job_level);
            formData.append("jobDesc",this.job_description);
            API.post("/updateJob", formData,{
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(() => {
                this.$router.push("/admin");
            });
        }
    }
}
</script>
<style>

</style>