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

{% block body %}


    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!--begin::Card-->
                    <div class="card card-custom">
                        <div class="card-header">
                            <h3 class="card-title">
                                پیام های سیستمی جدید
                            </h3>
                            <div class="card-toolbar">
                                <div class="example-tools justify-content-center">
                                </div>
                            </div>
                        </div>
                        <!--begin::Form-->
                        <div class="card-body">

                                <table class="table table-striped table-custom-border text-center table-rounded table-borderless table-thead-primary"
                                       id="table">
                                    <thead>
                                        <th>#</th>
                                        <th>کاربر</th>
                                        <th>عنوان</th>
                                        <th>تاریخ ایجاد</th>
                                        <th>باز بودن پیام سیستمی</th>
                                        <th>پیام های خوانده نشده</th>
                                        <th>{% trans "Action" %}</th>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>

                        </div>
                        <!--end::Form-->
                    </div>
                    <!--end::Card-->
                </div>
            </div>
        </div>
        <!--end::Container-->
    </div>




{% endblock %}

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

            window.data_table_cool_options["rowCallback"] = function (row, data) {
                for (let value in data) {
                    console.log(data[value]);
                    if (data[value].startsWith('switch-')){
                        var switch_data = data[value].split('-');
                        var elem = data[value];
                        if (switch_data[1] === 'true'){
                            elem = $(dynamic_switch).clone();
                            elem.find('input').prop('checked', true)
                        }
                        else if (switch_data[1] === 'false')
                            elem = elem = $(dynamic_switch).clone();
                        if (switch_data[2] === 'none')
                            elem.find('input').prop('disabled', true)
                        else
                            elem.change(function () {
                                switch_ajax(switch_data[2], data[0])
                            });

                        $(`td:eq(${value - 1})`, row).html('');
                        $(`td:eq(${value - 1})`, row).append(elem);

                    }
                    else if (data[value] === "False")
                        $(`td:eq(${value - 1})`, row).html(`<button type="button" class="btn btn-primary noHover btn-circle btn-icon btn-sm"><i class="fa fa-check"></i></button>`)
                    else if (data[value] === "True")
                        $(`td:eq(${value - 1})`, row).html(`<button type="button" class="btn btn-danger noHover btn-circle btn-icon btn-sm"><i class="fa fa-times"></i></button>`)
                    if (data[value] === "file-null")
                        $(`td:eq(${value - 1})`, row).html(`<label class="btn btn-secondary btn-sm btn-pill noHover btn-sm">ندارد</label>`)
                    else if (data[value].startsWith('/media/'))
                        $(`td:eq(${value - 1})`, row).html(`<a download href="${data[value]}" class="btn btn-primary btn-circle btn-icon btn-sm" title="جهت دریافت فایل کلیک کنید"><i class="fa fa-download"></i></a>`)
                }
                $(`td:eq(4)`, row).html('<label class="label label-danger label-circle mr-2">' + data[5] + '</a>')
                $(`td:eq(5)`, row).html(`<a href="/user/admin_ticket/${data[0]}" class="btn btn-icon btn-light-primary btn-sm btn-circle mr-2"><i class="fa fa-eye"></i></a>`)
                $(`td:eq(5)`, row).append(`<a href="/user/close_ticket/${data[0]}" class="btn btn-icon btn-light-primary btn-sm btn-circle mr-2"><i class="fa fa-times"></i></a>`)
            }
            var table = datatable_simple_show({
                url: "{% url 'admin_tickets_datatable' %}",
                real_cols: 6,
                hide_id: true,
                loading_all: true,
                responsive: true,
                datable_id: '#table',

                    not_delete_able: true,

                    not_edit_able: true,

                extra_del_params: {
                    ajax: true,
                },
                extra_filters: function (d) {
                    d.filter_type = true;
                },
            });

            function switch_ajax(url, pk) {
                console.log(url + pk);
                $.ajax({
                    url: url + pk,
                    method: 'GET',
                    success: function (result) {
                        swalFireSuccess(result.message);
                        table.draw()
                    },
                    error:function (result) {
                        swalFireError();
                        table.draw()
                    }

                });
        }


        $('.modal select').select2({
            dir: "rtl"
        });
    </script>
    <script>


    </script>
{% endblock %}