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


{% 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">
								List
								{{ model_name }}
							</h3>
							<div class="card-toolbar">
								<div class="example-tools justify-content-center">
									<button data-skin="dark" data-toggle="modal" data-target="#modal_here"
											title=" Create "
											class="btn btn-icon btn-primary btn-sm mr-2">
										<span class="svg-icon svg-icon-white svg-icon-md">
											{% include 'svg/plus.html' %}
										</span>
									</button>
								</div>
							</div>
						</div>
						<!--begin::Form-->
						<div class="card-body">
							{% if not disableTable %}
								<table class="table table-striped table-custom-border text-center table-rounded table-borderless table-thead-primary"
									   id="table">
									<thead>
									{% for field in cols %}
										<th>{{ field }}</th>
									{% endfor %}
									<th>Action</th>
									</thead>
									<tbody>

									</tbody>
								</table>
							{% endif %}
						</div>
						<!--end::Form-->
					</div>
					<!--end::Card-->
				</div>
			</div>
		</div>
		<!--end::Container-->
	</div>

	<div class="modal fade" id="modal_here" tabindex="-1" role="dialog"
		 aria-labelledby="exampleModalLabel"
		 aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content border-modal">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">{% trans "Create" %} {{ model_name }}</h5>
				</div>
				<form class="kt-form" method="post">
					{% csrf_token %}
					<div class="modal-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="modal-footer p-1">
						<button type="button" class="btn btn-secondary" data-dismiss="modal">
							Close
						</button>
						<button type="submit" id="submitter" class="btn btn-primary">
							Submit
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>

{% endblock %}

{% block script %}
	<script src="{% static 'assets/plugins/custom/datatables/datatables.bundle.js' %}" type="text/javascript"></script>
	<script src="{% static 'badi_utils/js/datatable.js' %}" type="text/javascript"></script>
	<script src="{% static 'badi_utils/js/vue.js' %}" type="text/javascript"></script>
	<script src="{% static 'badi_utils/js/vue.js' %}" type="text/javascript"></script>
	<script>

        {% if not disableTable %}
            window.data_table_cool_options["rowCallback"] = function (row, data) {
                defaultDrawCallBack(row, data)
                breakCol(1, row, data[2])
            }
            var table = datatable_simple_show({
                url: "{{ api_url }}datatable/",
                real_cols: {{cols|length}},
                hide_id: true,
                loading_all: true,
                responsive: true,
                datable_id: '#table',
                {#ac_url: 'send_sms/',#}
                {% if not deleteShow %}
                    not_delete_able: true,
                    del_url: '',
                {% else %}
                    del_url: '{{ api_url }}0',
                {% endif %}
                {% if not editShow %}
                    not_edit_able: true,
                    up_url: '',
                {% else %}
                    up_url: "update/0",
                {% endif %}
                {% if not deleteShow and not editShow %}
                    no_action_nutton: true,
                {% endif %}
                extra_del_params: {
                    ajax: true,
                },
                extra_filters: function (d) {
                    d.filter_type = true;
                },
            });
        {% endif %}

        $('.modal select').select2({
            dir: "rtl"
        });
	</script>
	<script>
        console.log('{{ api_url }}')
        $('#modal_here').on('submit', function (e) {
            e.preventDefault()
            const button = document.getElementById('submitter');
            ApiAjax({
                url: '{{ api_url }}',
                form: 'form',
                method: 'POST',
                button: button,
                table: table,
                modal: '#modal_here',
                success_message: '{{ model_name }} Created Successfully!'
            })
        })

	</script>
	<script>
        const vueApp = new Vue({
            delimiters: ['[[', ']]'],
            el: '#vue-app',
            data() {
                return {
                    permissions: [],
                    selected_permissions: [],
                    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: '{{ api_url }}permissions',
                        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)
                    }
                },
            },
        });


	</script>
{% endblock %}
