{% 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">
                                    <button data-skin="dark" data-toggle="modal" data-target="#modal_here"
        title=" افزودن "
        class="btn btn-icon btn-bg-primary btn-sm btn-hover-text-warning mr-2"><span
        class="svg-icon svg-icon-white svg-icon-md"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo10\dist/../src/media/svg/icons\Code\Plus.svg--><svg
        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px"
        viewBox="0 0 24 24" version="1.1">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect x="0" y="0" width="24" height="24"/>
        <circle fill="#000000" opacity="0.3" cx="12" cy="12" r="10"/>
        <path d="M11,11 L11,7 C11,6.44771525 11.4477153,6 12,6 C12.5522847,6 13,6.44771525 13,7 L13,11 L17,11 C17.5522847,11 18,11.4477153 18,12 C18,12.5522847 17.5522847,13 17,13 L13,13 L13,17 C13,17.5522847 12.5522847,18 12,18 C11.4477153,18 11,17.5522847 11,17 L11,13 L7,13 C6.44771525,13 6,12.5522847 6,12 C6,11.4477153 6.44771525,11 7,11 L11,11 Z"
              fill="#000000"/>
    </g>
</svg><!--end::Svg Icon--></span>
</button>
                                </div>
                            </div>
                        </div>
                        <!--begin::Form-->
                        <div class="card-body">
<div class="alert alert-custom alert-notice alert-light-primary fade show mb-5" role="alert">
															<div class="alert-icon">
																<i class="flaticon-questions-circular-button"></i>
															</div>
															<div class="alert-text">جهت ارتباط با مدیریت پس از ایجاد تیکت، در لیست تیکت ها روی دکمه "عملیات" کلیک کنید.</div>
															<div class="alert-close">
															</div>
														</div>
                                <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>{% trans "Action" %}</th>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>

                        </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" role="document">
        <div class="modal-content border-modal">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">افزودن پیام سیستمی</h5>
            </div>
            <form class="kt-form" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="kt-container  kt-container--fluid  kt-grid__item kt-grid__item--fluid">
                        <div class="kt-portlet__body pb-0 pt-0 pr-0 pl-0">
                            <div class="row">
                                <div class="col-md-12">
                                        <div class="form-group row">
                                            <label class="col-form-label col-lg-3 col-sm-12">{{ form.title.label }}:</label>
                                            <div class="col-lg-9 col-md-9 col-sm-12">
                                                {{ form.title }}
                                            </div>

                                        </div>


                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer p-1">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">بستن
                    </button>
                    <button type="submit" id="submitter" class="btn btn-primary">ثبت پیام سیستمی</button>
                </div>
            </form>
        </div>
    </div>
</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(3)`, row).html('<a href="#" class="btn btn-primary btn-circle mr-2">' + data[4] + '</a>')
                $(`td:eq(4)`, row).html(`<a href="/user/ticket/${data[0]}" class="btn btn-icon btn-light-primary btn-sm"><i class="fa fa-comments"></i></a>`)
            }
            var table = datatable_simple_show({
                url: "{% url 'my_tickets_datatable' %}",
                real_cols: 5,
                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 %}
