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

{% block help_content %}
<div class="row no-gutters text-uppercase">
  <h1>
    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>                       
      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"> 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">
          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="#">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>New Help Ticket</b>
	</h3>
	<p> 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="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">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>Manage Tickets</th>
          <th></th>
          <th></th>
        </tr>
      </thead>
      <tbody>
	{% for ticket in object_list %}
        <tr>
          <td>
	    <small> Created: {{ ticket.created.date }} </small>
	    <div class="mt-1">
	      {% if support %}
	      <a type="button" href="{% url 'helpme_admin:ticket-detail' ticket.uuid %}">
	      {{ ticket }}
	      {% else %}
	      <a type="button" href="" data-toggle="modal" data-target="#detail-{{ticket.pk}}">
	      {{ ticket.subject }}
	      {% endif %}
	    </a>
	    </div>
	  </td>
          <td class="align-middle">
	    Status:
	    {% if ticket.status in negative_status %}
	    <span class="text-danger">
	    {% else %}
	    <span class="text-success">
	    {% endif %}
	      <b>
	        {{ticket.get_status_display}}
	      </b>
	    </span>
	  </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 %}
	    You replied {{ comment.created.date }}
	    {% else %}
	    {{ comment.user }} replied {{ comment.created.date }}
	    {% endif %}
	    {% endwith %}
	    
	    {% else %}
	    Waiting for a reply
	    {% endif %}
	  </td>
        </tr>
	
	{% empty %}
	<tr>
	  <td> You have no active tickets. </td>
	  <td></td>
	  <td></td>
	</tr>
        {% endfor %}
      </tbody>
    </table>

    {% if paginator.num_pages > 1 or object_list.count > 1 %}
    <div>
      Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {% multiply object_list.count paginator.num_pages %} entries
    </div>
    <nav aria-label="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; First</a>
	</li>
        <li class="page-item">
	  <a class="page-link" href="?{% url_replace request 'page' page_obj.previous_page_number %}">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 %}">Next</a>
	</li>
        <li class="page-item">
	  <a class="page-link" href="?{% url_replace request 'page' paginator.num_pages %}">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 %}