{% extends request.user.is_admin|yesno:"base.html,base-ui.html" %}
{% load static %}
{% load widget_tweaks %}
{% load i18n %}
{% block body %}
	<div class="d-flex flex-column-fluid">
		<!--begin::Container-->
		<div class="{% if request.user.is_admin %}container-fluid{% else %}container{% endif %}">
			<div class="row">
				<div class="col-md-12">
					<!--begin::Card-->
					<div class="card card-custom">
						<div class="card-header">
							<h3 class="card-title">
								{% trans "List" %}
								{{ model_name }}
							</h3>
							<div class="modal fade card-border" id="ticketModal" tabindex="-1" role="dialog"
								 aria-labelledby="exampleModalLabel" aria-hidden="true">
								<div class="modal-dialog" role="document">
									<div class="modal-content">
										<div class="modal-header">
											<h5 class="modal-title"
												id="exampleModalLabel">{% trans "Create" %} {% trans "Ticket" %}</h5>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<i aria-hidden="true" class="ki ki-close"></i>
											</button>
										</div>
										<form id="form_ticket">
											<div class="modal-body">
												{% csrf_token %}
												<div class="form-group">
													<label class="col-form-label font-weight-bolder">{% trans "Title" %}:</label>
													<input type="text" class="form-control"
														   placeholder="{% trans 'Title' %}..." name="title"
														   id="ticket-name">
												</div>
												<label class="d-none">
													<input type="hidden" value="{{ object.writer }}" name="writer">
												</label>
												{% if request.user.is_admin %}
													{% include 'component/input.html' with input=form.writer %}
												{% endif %}
												{% include 'component/input.html' with input=form.category %}
											</div>
											<div class="card-footer p-2">
												<button type="button"
														class="btn mx-2 btn-light-primary font-weight-bold"
														data-dismiss="modal">{% trans "Cancel" %}
												</button>
												<button class="btn btn-primary">
													{% trans "Submit" %} {% trans "Ticket" %}
												</button>
											</div>
										</form>
									</div>
								</div>
							</div>
							<div class="card-toolbar">
								<button type="button" class="btn btn-primary" data-toggle="modal"
										data-target="#ticketModal">
									{% trans "Submit" %} {% trans "Ticket" %}
								</button>
							</div>

						</div>
						<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>{% trans "Action" %}</th>
									</thead>
									<tbody>
									</tbody>
								</table>
							{% endif %}
						</div>
					</div>
					<!--end::Card-->
				</div>
			</div>
		</div>
		<!--end::Container-->
	</div>
	<script>
        document.getElementById('id_writer').classList.add('no-select2');
	</script>

{% 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>
        window.data_table_cool_options['columnDefs'].push({
            "targets": [1],
            "visible": false,
            "searchable": false
        })
        var table = datatable_simple_show({
            url: '{{ api_url }}datatable/',
            real_cols: {{cols|length}},
            hide_id: true,
            loading_all: true,
            responsive: true,
            datable_id: '#table',
            del_url: '{{ api_url }}0',
            up_url: 'update/0',
            extra_del_params: {
                ajax: true,
            },
            extra_filters: function (d) {
                d.filter_type = true;
            },

        }, {
            rowCallback: function (row, data) {
                {% if request.user.is_admin %}
                    $('td:eq(0)', row).prepend(data[1] + ' - ')
                {%endif%}
                $(`td:last`, row)
                {% if request.user.is_admin %}
                    .prepend(
                    {% else %}
                    .html(
                {% endif %}
                `
    <a href="messages/${data[0]}" data-skin="dark" data-toggle="tooltip" data-placement="top" title="" data-original-title="{% trans 'Messages' %}" class="btn btn-sm btn-light-primary btn-icon"><span class="svg-icon svg-icon-md">{% include 'svg/message.html' %}</span></button>
                `)
                console.log('DATA', data)
                const status_list = data[4]
                const is_closed = status_list[0]
                const count = status_list[1]
                let last_message = status_list[2]
                let color = 'dark'
                if (last_message === -1) {
                    last_message = '{% trans "empty ticket" %}'
                } else if (last_message === 0) {
                    last_message = '{% trans "waiting to answer" %}'
                    color = 'danger'
                } else if (last_message === 1) {
                    last_message = '{% trans "answered" %}'
                    color = 'success'
                }
                $(`td:eq(2)`, row).html(
                    `<label class="label label-xl label-inline font-weight-bold label-light-${color}">
						<span class="label label-xl mr-2 label-dot label-${color}"></span> {% trans "Ticket" %}: ${is_closed ? '{% trans "close" %}' : '{% trans "open" %}'} - ${last_message}
					</label>
`
                )

            },

        });

        $('#form_ticket').on('submit', function (e) {
            e.preventDefault();
            const button = document.querySelector('#form_ticket button');
            ApiAjax({
                url: '{{api_url}}',
                form: '#form_ticket',
                method: 'POST',
                button: button,
                table: table,
                modal: '#ticketModal',
                success_message: '{% trans "Done Successfully" %}',
                file: true,
                success: (res) => {
                    open('/dashboard/ticket/messages/' + res.id, '_self')
                }
            })
        });
        $('#id_writer').select2({
            dir: "rtl",
            ajax: {
                url: "{{ api_url }}select2/",
                data: function (params) {
                    var query = {
                        search: params.term,
                        page: params.page || 1
                    };

                    // Query parameters will be ?search=[term]&page=[page]
                    return query;
                }
            }
        });
	</script>
{% endblock %}
