{% extends "helpme/base.html" %}
{% load crispy_forms_tags %}
{% load helpme_extras %}
{% load i18n %}

{% block help_content %}
<div class="row no-gutters text-uppercase">
    <h1>
	{% trans "Help Desk" %}
    </h1>
</div>

<div class="row mb-3">
    <div class="col-sm text-center text-sm-right">
	<button class="btn btn-primary font-weight-bold rounded-pill px-4 py-2"  data-toggle="modal" data-target="#request">
	    <iconify-icon data-icon="ic-baseline-plus" style="font-size: 1.5rem; position: relative; bottom: 1px;"></iconify-icon>                       
	    {% trans "New Help Ticket" %}
	</button>
    </div>
</div>


<div class="row">
    <div class="col">
	<form id="pagination_form" action="" method="get" class="form form-inline float-right mx-2">
	    <div class="text-right mx-2"> {% trans "Show" %}: </div>
	    <select class="selectpicker custom-select" name="paginate_by" id="paginate_by">
		<option>10</option>
		<option>25</option>
		<option>50</option>
	    </select>
	</form>
    
	<div class="filter-wrapper text-right">
	    <div class="d-inline-block dropdown status-dropdown">
		<a class="small custom-select" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
		    {% trans "STATUS" %}
		</a>
		<div class="dropdown-menu">
		    {% for num, name in statuses %}
		    <div class="status dropdown-item small form-check" data-status="{{ num }}">
			<div class="check-status d-inline-block" id="check-{{ name }}" data-status="{{ num }}">
			    <iconify-icon class="status-checkbox text-primary d-block blank" data-icon="mdi:checkbox-blank-outline"></iconify-icon>
			    <iconify-icon class="status-checkbox text-primary d-none checked" data-icon="mdi:checkbox-marked"></iconify-icon>
			</div>
			<label class="form-check-label" for="check-{{ name }}">{{ name }}</label>
		    </div>
		    {% endfor %}
		    <div class="dropdown-item">
			<a class="clear-all small" href="#">{% trans "Clear All" %}</a>
		    </div>
		</div>
	    </div>
	</div>
    </div>
</div>

<div class="modal" id="request">
    <div class="modal-dialog">
	<div class="modal-content">

	    <!-- Modal body -->
	    <div class="modal-body">
		<button type="button" class="close" data-dismiss="modal">&times;</button>
		<h3 class="modal-title mt-3">
		    <b>{% trans "New Help Ticket" %}</b>
		</h3>
		<p> {% trans "Please provide clear details about how we can help you." %} </p>
		<form action="{% url 'helpme-api-create-ticket' %}" method="POST">
		    {% csrf_token %}
		    {{ ticket_form|crispy }}
		    <input type="submit" value="{% trans 'Create Ticket' %}" class="btn btn-primary font-weight-bold px-4 py-2 mr-3 rounded-pill">
		    <a href="" class="text-primary font-weight-bold" data-dismiss="modal">{% trans "Cancel" %}</a>
		</form>
	    </div>

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

<div class="row">
    <div class="col">
	<table class="table table-striped">
	    <thead>
		<tr class="bg-info text-white">
		    <th>{% trans "Manage Tickets" %}</th>
		    <th></th>
		    <th></th>
		</tr>
	    </thead>
	    <tbody>
		{% for ticket in object_list %}
		<tr>
		    <td>
			<small> {% trans "Created" %}: {{ ticket.created.date }} </small>
			<div class="mt-1">
			    {% if support %}
			    <a type="button" href="{% url 'helpme_admin:ticket-detail' ticket.uuid %}">
				{{ ticket }}
			    </a>
			    {% else %}
			    <a type="button" href="" data-toggle="modal" data-target="#detail-{{ticket.pk}}">
				{{ ticket.subject }}
			    </a>
			    {% endif %}
			</div>
		    </td>
		    <td class="align-middle">
			{% trans "Status" %}:
			{% if ticket.status in negative_status %}
			<span class="text-danger">
			    <b>
				{{ ticket.get_status_display }}
			    </b>
			</span>
			{% else %}
			<span class="text-success">
			    <b>
				{{ ticket.get_status_display }}
			    </b>
			</span>
			{% endif %}
		    </td>
		    <td class="align-middle">
			{% if ticket.comments.all|last_visible:comments %}

			{% with ticket.comments.all|last_visible:comments as comment %}
			{% if comment.user == user %}
			{% blocktrans with date=comment.created.date %}You replied {{ date }}{% endblocktrans %}
			{% else %}
			{% blocktrans with user=comment.user date=comment.created.date %}{{ user }} replied {{ date }}{% endblocktrans %}
			{% endif %}
			{% endwith %}
	    
			{% else %}
			{% trans "Waiting for a reply" %}
			{% endif %}
		    </td>
		</tr>
	
		{% empty %}
		<tr>
		    <td> {% trans "You have no active tickets." %} </td>
		    <td></td>
		    <td></td>
		</tr>
		{% endfor %}
	    </tbody>
	</table>

	{% if paginator.count > 1 %}
	<div>
	    {% blocktrans with start=page_obj.start_index end=page_obj.end_index entries=paginator.count %}Showing {{ start }} to {{ end }} of {{ entries }} entries{% endblocktrans %}
	</div>
	<nav aria-label="{% trans 'Support dashboard page navigation' %}">
	    <ul class="pagination float-right mt-3">
	  
		{% if page_obj.has_previous %}
		<li class="page-item">
		    <a class="page-link" href="?{% url_replace request 'page' 1 %}">&laquo; {% trans "First" %}</a>
		</li>
		<li class="page-item">
		    <a class="page-link" href="?{% url_replace request 'page' page_obj.previous_page_number %}">{% trans "Previous" %}</a>
		</li>
		{% endif %}

		{% if paginator.num_pages > 1 %}
		{% for i in paginator.page_range %}
		{% if page_obj.number == i %}
		<li class="active page-item">
		    <a class="page-link" href="?{% url_replace request 'page' i %}">{{ i }}</a>
		</li>
		{% else %}
		<li class="page-item">
		    <a class="page-link" href="?{% url_replace request 'page' i %}">{{ i }}</a>
		</li>
		{% endif %}
		{% endfor %}
		{% endif %}

		{% if page_obj.has_next %}
		<li class="page-item">
		    <a class="page-link" href="?{% url_replace request 'page' page_obj.next_page_number %}">{% trans "Next" %}</a>
		</li>
		<li class="page-item">
		    <a class="page-link" href="?{% url_replace request 'page' paginator.num_pages %}">{% trans "Last" %} &raquo;</a>
		</li>
		{% endif %}
	    </ul>
	</nav>
	{% endif %}
    
    </div>
</div>

{% endblock %}

{% block extra_js %}
    <!-- filter tickets by status -->
    <script>
        var statuses = [];

        var s = '{{ s }}';
        if (s) {
            statuses = s.split(',');
        }

        $('.check-status').each(function(idx, el) {
            if (statuses.includes(el.dataset.status)) {
                $(el).children('.blank').removeClass('d-block');
                $(el).children('.blank').addClass('d-none');
                $(el).children('.checked').addClass('d-block');
                $(el).children('.checked').removeClass('d-none');
            } else {
                $(el).children('.blank').addClass('d-block');
                $(el).children('.checked').removeClass('d-block');
                $(el).children('.blank').removeClass('d-none');
                $(el).children('.blank').addClass('d-none');
            }
        })

        function reloadPage() {
            var query = getUrlVars();
            query['s'] = statuses.join(',');
	    if (query['page']) {
	       query['page'] = 1;
	    };
            var queryString = $.param(query);
            var url = window.location.origin + window.location.pathname + '?' + queryString;
            window.location = url;
        }

        function statusClick(evt) {
            var status = evt.currentTarget.dataset.status;
            if (statuses.includes(status)) {
                statuses = $.grep(statuses, function(v) {
                    return v != status;
                })
            } else {
                statuses.push(status);
            }
            reloadPage();
        }

        $('.status').click(statusClick);

        $('.clear-all').click(function(evt) {
            statuses = [];
            reloadPage();
        });

        function getUrlVars() {
            var vars = {}, query;
            if (window.location.search) {
                var queries = window.location.search.slice(1).split('&');
                for (var i = 0; i < queries.length; i++) {
                    query = queries[i].split('=');
                    vars[query[0]] = query[1];
                }
            }
            return vars;
        }

    </script>

    <!-- change pagination -->
    <script>
      $(document).ready(function() {
      var select_pickers = document.querySelectorAll('.selectpicker');

      select_pickers.forEach(function(el) {
            var el_form = el.closest('form');
            el.addEventListener('change', function(evt) {
                el_form.submit();
            });
        });
      
      const params = new URLSearchParams(window.location.search)
        $('#paginate_by option').each((idx, option) => {
            if (option.value === params.get('paginate_by')) {
                option.selected = true;
            }
        })
	});
    </script>
{% endblock %}