{% extends 'base.html' %}
{% load static %}

{% block body %}


    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <!--begin::Card-->
                    <div class="card card-custom">
                        <div class="card-header">
                            <h3 class="card-title">
                                Update
                                {{ object.name }}
                            </h3>
                        </div>
                        <form class="kt-form" method="post">
                            <!--begin::Form-->
                            <div class="card-body" id="vue-app">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="col-form-label">{{ form.name.label }}:</label>
                                            {{ form.name }}
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="col-form-label">{{ form.permissions.label }}:</label>
                                            <div class="d-none">
                                                {{ form.permissions }}
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-4">
                                                    <div class="" v-for="(group,app) in permissions" :key="app">
                                                        <button @click.prevent="selected_group = app"
                                                                :class="[selected_group === app ? 'bg-light-primary' : 'btn-light', hasSelectedClass(app)]"
                                                                class="btn text-right w-100 font-weight-bolder border px-2 mb-2 rounded py-3">
                                                            <i class="fa fa-circle"
                                                               :class="[hasSelectedClass(app)]"></i>
                                                            [[app]]
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="col-sm-8">
                                                    <div class="row">
                                                        <div
                                                                v-for="(permission,index) in permissions[selected_group]"
                                                                :key="index"
                                                                class="col-lg-6">
                                                            <button @click.prevent="togglePermission(permission.id)"
                                                                    :class="[isSelected(permission.id) ? 'btn-success' : 'btn-danger']"
                                                                    class="btn w-100 font-weight-bolder px-2 mb-2 rounded py-3">
                                                                [[permission.name]]
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary">
                                    Update
                                    {{ model_name }}
                                </button>
                                <a href="../create" class="btn mr-2 btn-secondary">Back to List</a>
                            </div>
                            <!--end::Form-->
                        </form>
                    </div>
                    <!--end::Card-->
                </div>
            </div>
        </div>
        <!--end::Container-->
    </div>

{% endblock %}

{% block script %}
    <script>
        const vueApp = new Vue({
            delimiters: ['[[', ']]'],
            el: '#vue-app',
            data() {
                return {
                    permissions: [],
                    selected_permissions: [{% for x in object.permissions.all %}{{ x.id }}, {% endfor %}],
                    selected_group: 'Blog',
                }
            },
            watch: {
                // whenever question changes, this function will run
                selected_permissions(newVal, oldVal) {
                    console.log('ASF')
                    $('#id_permissions').val(newVal)
                }
            },
            created: function () {
                this.getTransactions()
            },
            methods: {
                getTransactions: function (pk) {
                    ApiAjaxReader({
                        method: 'GET',
                        url: ROLE_PERMISSIONS_API_URL,
                        pk,
                        success: (data) => {
                            this.permissions = data;
                        },
                    });
                },
                isSelected: function (perm) {
                    return this.selected_permissions.includes(perm)
                },
                hasSelectedClass: function (group) {
                    group = this.permissions[group]
                    let selected_count = 0;
                    for (const perm of group)
                        if (this.isSelected(perm.id))
                            selected_count++;
                    if (selected_count === group.length)
                        return 'text-success'
                    if (selected_count === 0)
                        return 'text-danger'
                    return 'text-warning'
                },
                togglePermission: function (perm) {
                    if (this.selected_permissions.includes(perm)) {
                        this.selected_permissions = removeItemAll(this.selected_permissions, perm)
                    } else {
                        this.selected_permissions.push(perm)
                    }
                },
            },
        });

        $('form').submit(function (e) {
            e.preventDefault();
            ApiAjax({
                url: '{{ api_url }}',
                pk: getUrlPk(),
                form: 'form',
                method: 'PUT',
                success_url: '../create',
                success_message: '{{ model_name }} Updated Successfully!',
                error: function (e) {
                    console.log(e)
                }
            })
        })


    </script>
{% endblock %}