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

{% block title %}Daf Admin{% endblock %}

{% block pageheader %}Daf Admin{% endblock %}

{% block body %}
    <div id="app" class="container-fluid no-padding" v-cloak>
        <div class="row">
            <div class="header-daf">
                <h1 class="b-margin">DAF's list</h1>
                <button class="btn btn-primary b-margin" title="New Daf Instance" data-toggle="modal" data-target="#daf_newInstance">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;New Daf Instance
                </button>
            </div>
            <div class="col-md-2"></div>
            <div class="col-md-8 t-margin">
                {% if dafSub > 0 %}
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover table-condensed table-striped">
                            <thead>
                                <th>Instance</th>
                                <th>Number of applies</th>
                                <th>Action</th>
                            </thead>
                            <tbody>
                                <tr v-for="(instance, i) in userInstances" :name="instance.id">
                                    <td><a :href="instance.link">Instance <% instance.nameInstance %></a></td>
                                    <td><% instance.nb %></td>
                                    <td>
                                        <a :href="instance.link" class="btn btn-primary btn-xs">
                                            <i class="glyphicon glyphicon-zoom-in"></i>
                                        </a>&nbsp;
                                        <button class="btn btn-primary btn-xs" title="Edit daf instance" data-toggle="modal" @click="showModalEdit(i)">
                                            <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                                        </button>&nbsp;
                                        <a :href="instance.editOptions" class="btn btn-primary btn-xs">
                                            <i class="glyphicon glyphicon-cog"></i>
                                        </a>&nbsp;
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div style="text-align: center">
                        <span style="font-style: italic">You didn't subscribe to any DAF yet.</span>
                    </div>
                {% endif %}
            </div>
            <div class="col-md-2"></div>
        </div>

        <div class="modal fade" id="daf_newInstance" tabindex="-1" role="dialog" aria-labelledby="newInstance" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="newInstance">New daf instance</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body modal-newInstance">
                        <div class="form-group">
                            <label for="nameInstance">Name</label>
                            <input type="text" class="form-control" name="nameInstance" id="nameInstance">
                        </div>
                        <div class="form-group">
                            <label for="jobgroup">Jobgroup</label>
                            <select class="input-sm form-control" id="jobgroup" v-model="selected">
                                <option value="null">None</option>
                                {% for jg in jobgroups %}
                                    <option value="{{ jg.id }}">{{ jg.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="automaticSub">Automatically subscribe to this DAF</label>
                            <input type="checkbox" name="autoSub" id="automaticSub">
                        </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" id="submitNewInstance" @click="newDafInstance">Submit</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="editInstance" tabindex="-1" role="dialog" :aria-labelledby="editInstance.modalTitle" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" :id="editInstance.modalTitle">Edit daf instance: <% editInstance.nameInstance %></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body modal-editInstance">
                        <div class="form-group">
                            <label for="editNameInstance">Name</label>
                            <input type="text" class="form-control" name="editNameInstance" id="editNameInstance" v-model="editInstance.nameInstance">
                        </div>
                        <div class="form-group">
                            <label for="jobgroup">Jobgroup</label>
                            <select class="input-sm form-control" id="editJobgroup" v-model="editInstance.idJobgroup">
                                <option value="null" selected>None</option>
                                {% for jg in jobgroups %}
                                    <option value="{{ jg.id }}">{{ jg.name }}</option>
                                {% endfor %}
                            </select>
                        </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" id="submitEditInstance" @click="editDafInstance(editInstance.edit)">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block specificJS %}
    <script>
        var app = new Vue({
            delimiters: ['<%', '%>'],
            el: "#app",
            data: {
                userInstances: [],
                checked: false,
                selected: null,
                nameInstance: '',
                editInstance: {}
            },
            mounted: function() {
                var self = this;

                this.getUserInstances();

                var autoSub = $('#automaticSub');
                autoSub.on('click', function() {
                    if (autoSub.is(':checked')) {
                        self.checked = true;
                    } else {
                        self.checked = false;
                    }
                });

                $('#nameInstance').on('keyup', function() {
                    self.nameInstance = this.value;
                });

                $('#daf_newInstance').on('hidden.bs.modal', function() {
                    autoSub.prop('checked', false);
                    self.checked = false;
                    self.selected = null;
                    $('#nameInstance').val('');
                    self.nameInstance = '';
                });
            },
            methods: {
                getUserInstances: function () {
                    var self = this;
                    $('.loader-container').fadeIn(150);
                    $.ajax({
                        url: "{{ path('ajax_daf_user_instances') }}",
                        method: "POST",
                        data: { advertiserId: {{ advertiser.id }} }
                    }).done(function (data) {
                        self.userInstances = data.userInstances;
                    }).always(function () {
                        $('.loader-container').fadeOut(150);
                    });
                },
                newDafInstance: function () {
                    var self = this;
                    $('.loader-container').fadeIn(150);
                    $.ajax({
                        method: "POST",
                        url: "{{ path('ajax_new_daf_instance', {'id': advertiser.id}) }}",
                        dataType: 'json',
                        data: { checkbox: self.checked, selected: self.selected, nameInstance: self.nameInstance }
                    }).done(function(data) {
                        self.userInstances = data;
                    }).always(function() {
                        $('.loader-container').fadeOut(150);
                    });
                },
                editDafInstance: function (link) {
                    var self = this;
                    $('.loader-container').fadeIn(150);
                    $.ajax({
                        method: "POST",
                        url: link,
                        dataType: 'json',
                        data: self.editInstance
                    }).done(function(data) {
                        self.userInstances = data;
                    }).always(function() {
                        $('.loader-container').fadeOut(150);
                    });
                },
                onChangeJobgroup: function (e) {
                    this.selected = e.target.value;
                },
                showModalEdit: function(i) {
                    this.editInstance = this.userInstances[i];
                    $('#editInstance').modal('show');
                }
            }
        });
    </script>
{% endblock %}