{% extends "layout.html.twig" %}

{% block title %}Job group - Self service{% endblock %}

{% block body %}
<div id="app" class="container-fluid no-padding" v-cloak>
    <div class="row b-margin">
        <div class="col-sm-12">
            <form name="forecast" class="right-side" action="#" method="post">
                <div class="row">
                    <div class="form-group">
                        <label for="mode">Mode</label>
                        <select class="form-control combo-selected" name="mode" id="mode" v-model="mode">
                            <option value="budget">Budget</option>
                            <option value="applies">Applies</option>
                        </select>
                    </div>
                    <div class="form-group" v-if="mode === 'budget'">
                        <label for="applies">Number applies</label>
                        <input v-model.number="applies" class="form-control" type="text" name="applies" id="applies" required="required">
                    </div>
                    <div class="form-group" v-if="mode === 'applies'">
                        <label for="budget">Budget</label>
                        <input v-model.number="budget" class="form-control" type="text" name="budget" id="budget" required="required">
                    </div>
                    {#<div class="form-group">#}
                        {#<label for="contract">Contract Type</label>#}
                        {#<select class="form-control combo-selected" name="contract" id="contract" v-model="contract">#}
                            {#<option value="cdi">CDI</option>#}
                            {#<option value="cdd">CDD</option>#}
                            {#<option value="alternance">ALTERNANCE</option>#}
                            {#<option value="interim">INTERIM</option>#}
                        {#</select>#}
                    {#</div>#}
                    {#<div class="form-group">#}
                        {#<label for="category">Category</label>#}
                        {#<select class="form-control combo-selected" name="category" id="category" v-model="category">#}
                            {#<option value="0">Accueil - Secrétariat - Fonctions Administratives</option>#}
                            {#<option value="1">Achats - Juridique - Qualité - RH - Direction</option>#}
                            {#<option value="2">Agriculture - Viticulture - Pêche - Espaces Verts</option>#}
                            {#<option value="3">Automobile</option>#}
                            {#<option value="4">Banque - Finance - Gestion Comptabilité - Assurance</option>#}
                            {#<option value="5">Bureaux d'Etudes - Méthodes</option>#}
                            {#<option value="6">Bâtiment - Travaux Publics - Architecture - Immobilier</option>#}
                            {#<option value="7">Commerce - Vente - Grande Distribution</option>#}
                            {#<option value="8">Environnement - Nettoyage - Sécurité</option>#}
                            {#<option value="9">Hôtellerie - Restauration - Métiers de Bouche</option>#}
                            {#<option value="10">Industrie</option>#}
                            {#<option value="11">Informatique - Technologie de l'Information</option>#}
                            {#<option value="12">Logistique - Manutention - Transport</option>#}
                            {#<option value="13">Marketing - Communication - Imprimerie - Edition</option>#}
                            {#<option value="14">Médical - Paramédical - Esthétique</option>#}
                            {#<option value="15">Pharmacie (Industrie, Officine) - Recherche clinique</option>#}
                            {#<option value="16">Tourisme - Loisirs - Spectacle - Audiovisuel</option>#}
                            {#<option value="17">Télémarketing - Téléservices</option>#}
                            {#<option value="18">Puériculture</option>#}
                        {#</select>#}
                    {#</div>#}
                    <div class="form-group">
                        <label for="contract">Job group</label>
                        <select class="form-control combo-selected" name="jobgroup" id="jobgroup" v-model="jobgroup">
                            {% for jobgroup in jobgroups %}
                                <option value="{{ jobgroup.id }}">{{ jobgroup.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    {#<div class="form-group">#}
                        {#<label for="jobs">Number of jobs</label>#}
                        {#<input v-model.number="jobs" class="form-control" type="text" name="jobs" id="jobs">#}
                    {#</div>#}
                    <div class="form-group">
                        <label for="days">Number days campaign</label>
                        <input v-model.number="days" type="text" class="form-control" name="days" id="days">
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-block" @click.prevent="submit()">Submit</button>
                    </div>
                </div>
            </form>
            <div class="well" v-if="result.clicks">
                <h2 v-if="result.budget">Budget : <% numberFormat(result.budget, 2) %>&euro;</h2>
                <h2 v-if="result.applies">Applies : <% numberFormat(parseInt(result.applies), 0) %></h2>
                <h2>Clicks : <% numberFormat(parseInt(result.clicks), 0) %></h2>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block specificJS %}
<script>
    var app = new Vue({
        delimiters: ['<%', '%>'],
        el: '#app',
        data: {
            applies: 0,
            budget: 0,
            category: 0,
            contract: "cdi",
            days: 0,
            jobs: 0,
            mode: "budget",
            jobgroup: null,
            result: {}
        },
        methods: {
            forecast: function () {
                var self = this;
                $('.loader-container').fadeIn(150);
                self.loading = true;
                $.ajax({
                    url: "{{ path('ajax_self_advertiser_forecast' , {id: advertiser.id}) }}",
                    method: "post",
                    data: {
                        applies: this.applies,
                        budget: this.budget,
                        jobgroup: this.jobgroup,
                        days: this.days,
                        jobs: this.jobs,
                        mode: this.mode
                    }
                }).done(function (data) {
                    self.result = data;
                }).always(function () {
                    $('.loader-container').fadeOut(150);
                    self.loading = false;
                });
            },
            submit: function () {
                this.forecast();
            },
            numberFormat: function (number, digits) {
                number = parseFloat(number);
                digits = digits || 2;
                return number.toLocaleString('en-GB', { maximumFractionDigits: digits });
            }
        }
    });
</script>
{% endblock %}