<template>
    <div class="container">
        <div class="narrow-container">
            <div class="normal-box rounded">
                <div class="position">
                    <div class="position-overview">
                        <div class="position-title">
                            <div class="title-bar"></div>
                            <h1>{{ job.JobName }}</h1>
                        </div>
                        <div class="position-location">
                            <div class="region">
                                {{ job.CityName }}, {{ job.CountryName}}
                            </div>
                            <div class="address">
                                {{ job.AddressDetail }}
                            </div>
                        </div>
                    </div>
                    <div class="position-status">
                        <h2>Number of Applicants</h2>
                        <p class="applicant-amount">{{ job.ApplicantCount }}</p>
                    </div>
                </div>
                <div class="applicants">
                    <div v-for="(entry,n) in entries" :key="entry.EntryID" class="normal-box applicant row">
                        <div class="applicant-no">
                            {{ n +1}}
                        </div>
                        <div class="applicant-detail">
                            <div class="applicant-name">
                                <h1>{{ entry.UserName }}</h1>
                            </div>
                            <div class="applicant-data row">
                                <div class="w-50">
                                    <div class="detail-item">
                                        <h2>Email</h2>
                                        <p>{{ entry.Email }}</p>
                                    </div>
                                    <div class="detail-item">
                                        <h2>Phone</h2>
                                        <p>{{ entry.Phone}} </p>
                                    </div>
                                </div>
                                <div class="w-50">
                                    <div class="detail-item">
                                        <h2>Previous Company Name</h2>
                                        <p>{{ entry.PrevCompanyName }}</p>
                                    </div>
                                    <div class="detail-item">
                                        <h2>Previous Position</h2>
                                        <p>{{ entry.PrevPosition }}</p>
                                    </div>
                                    <div class="detail-item">
                                        <h2>University Name</h2>
                                        <p>{{ entry.UniversityName }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="applicant-data">
                                <div class="detail-item">
                                    <h2>CV URL</h2>
                                    <p>{{ entry.CvLink}}</p>
                                </div>
                                <div class="detail-item">
                                    <h2>Portfolio URL</h2>
                                    <p>{{ entry.PortofolioLink }}</p>
                                </div>
                            </div>
                            <div class="applicant-fate">
                                <button class="button plain medium w-25" @click="rejectEntry(entry)">
                                    Reject Applicant
                                </button>
                                <button class="button medium w-25" @click="acceptEntry(entry)">
                                    Approve
                                </button>
                            </div>                         
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import API from "../../lib/API";

export default {
    data() {
        return {
            job: {},
            entries: [],
        }
    },
    mounted() {
        var id = this.$route.params.id;
        API.get("/getJob?jobId="+id).then(({data}) => {
            this.job = data[0];
        })
        API.get("/getEntries").then( ({ data }) => {
            this.entries = data.filter(x => x.JobID == id && x.StatusEntry == "pending" );
        })
    },
    methods: {
        rejectEntry(entry) {
            var formData = new FormData();
            formData.append("id",entry.EntryID);
            API.post("/denyEntry",formData,{
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            }).then(() => {
                this.entries = this.entries.filter(x => x.EntryID != entry.EntryID);
            })
        },
        acceptEntry(entry) {
            var formData = new FormData();
            formData.append("id",entry.EntryID);
            API.post("/acceptEntry",formData,{
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            }).then(() => {
                this.entries = this.entries.filter(x => x.EntryID != entry.EntryID);
            })
        },
    }
    
}
</script>
<style>

</style>