{% extends "layouts/base.html" %}
{% load static %}

{% block title %} Tickets {% endblock title %}

<!-- Specific CSS goes HERE  -->
{% block stylesheets %}
    <link rel="stylesheet" href="{% static '/css/select2-bootstrap.min.css' %}">
{% endblock stylesheets %}

{% block content %}

    <!-- ### $App Screen Content ### -->
    <main class='main-content bgc-grey-100'>
      <div id='mainContent'>
        <div class="full-container" style="overflow-x: hidden;">
          <div class="email-app">
            <div class="email-side-nav remain-height ov-h">
                <div class="h-100 layers">
                <div class="p-20 bg-body-tertiary layer w-100">
                    <button type="button" class="btn btn-danger c-white w-100" data-bs-toggle="modal" data-bs-target="#ticketModal">New Ticket</button>
                </div>
                <div class="pos-r bdT layer w-100 fxg-1 bg-body overflow-y-auto">
                    <ul id="filterSidebar" class="p-20 nav flex-column">

                    {% if priorities %}

                        <li class="nav-item mT-10">
                            <h6 class="mx-3">Priorities</h6>
                        </li>

                        <li id="filterPriorityAll" class="nav-item filter-priority">
                            <label for="filterPriority-all" class="nav-link c-grey-800 cH-blue-500 actived">
                                <div class="peers ai-c jc-sb">
                                    <div class="peer peer-greed">
                                        <input type="radio" id="filterPriority-all" name="filterPriorities" class="form-check-input me-2" checked="checked" value="all">
                                        <span>All</span>
                                    </div>
                                    <div class="peer">
                                        <span class="badge rounded-pill bgc-green-50 c-green-700">0</span>
                                    </div>
                                </div>
                            </label>
                        </li>

                        {% for priority in priorities %}

                            <li class="nav-item filter-priority">
                                <label for="filterPriority-{{ priority.uuid }}" class="nav-link c-grey-800 cH-blue-500 actived">
                                    <div class="peers ai-c jc-sb">
                                        <div class="peer peer-greed">
                                            <input type="radio" id="filterPriority-{{ priority.uuid }}" name="filterPriorities" class="form-check-input me-2" value="{{ priority.uuid }}">
                                            <span>{{ priority.title }}</span>
                                        </div>
                                        <div class="peer">
                                            <span class="badge rounded-pill" style="color: {{ priority.colour }}; background-color: {{ priority.backgroundcolour }};">0</span>
                                        </div>
                                    </div>
                                </label>
                            </li>

                        {% endfor %}

                    {% endif %}

                    <li class="nav-item">
                        <hr class="mY-30 border-secondary">
                    </li>

                    {% if tags %}

                        <li class="nav-item">
                            <h6 class="peers ai-c jc-sb mb-2 px-3">
                                <span class="peer-greed">Tags</span>
                                <div class="dropdown">
                                    <button type="button" class="peer text-body bg-none border-none" data-bs-toggle="dropdown">
                                        <i class="ti-more-alt"></i>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <span class="dropdown-item-text">Tag Filtering</span>
                                        </li>
                                        <li>
                                            <label for="ticketTags-AND" class="dropdown-item">
                                                <div class="form-check form-check-switch">
                                                    <span class="form-check-label">Strict</span>
                                                    <input type="radio" name="ticketTags" id="ticketTags-AND" class="form-check-input" checked="checked" value="AND">
                                                </div>
                                            </label>
                                        </li>
                                        <li>
                                            <label for="ticketTags-OR" class="dropdown-item">
                                                <div class="form-check form-check-switch">
                                                    <span class="form-check-label">Loose</span>
                                                    <input type="radio" name="ticketTags" id="ticketTags-OR" class="form-check-input" value="OR">
                                                </div>
                                            </label>
                                        </li>
                                    </ul>
                                </div>
                            </h6>
                        </li>

                        {% for tag in tags %}

                            <li class="nav-item filter-tags">
                                <label for="filterTag-{{ tag.uuid }}" class="nav-link c-grey-800 cH-blue-500 actived">
                                    <div class="peers ai-c jc-sb">
                                        <div class="peer peer-greed">
                                            <input type="checkbox" id="filterTag-{{ tag.uuid }}" class="form-check-input me-2" value="{{ tag.uuid }}">
                                            <span>{{ tag.title }}</span>
                                        </div>
                                        <div class="peer">
                                            <span class="badge rounded-pill" style="color: {{ tag.colour }}; background-color: {{ tag.backgroundcolour }};">0</span>
                                        </div>
                                    </div>
                                </label>
                            </li>

                        {% endfor %}

                    {% endif %}

                    <li class="nav-item">
                        <hr class="mY-30 border-secondary">
                    </li>

                    {% if departments %}

                        <li class="nav-item">
                            <h6 class="px-3">Departments</h6>
                        </li>

                        <li id="filterDepartmentAll" class="nav-item filter-department">
                            <label for="filterDepartment-all" class="nav-link c-grey-800 cH-blue-500 actived">
                                <div class="peers ai-c jc-sb">
                                    <div class="peer peer-greed">
                                        <input type="radio" id="filterDepartment-all" name="filterDepartment" class="form-check-input me-2" checked="checked" value="all">
                                        <span>All</span>
                                    </div>
                                    <div class="peer">
                                        <span class="badge rounded-pill bgc-green-50 c-green-700">0</span>
                                    </div>
                                </div>
                            </label>
                        </li>

                        {% for department in departments %}

                            <li class="nav-item filter-department">
                                <label for="filterDepartment-{{ department.uuid }}" class="nav-link c-grey-800 cH-blue-500 actived">
                                    <div class="peers ai-c jc-sb">
                                        <div class="peer peer-greed">
                                            <input type="radio" id="filterDepartment-{{ department.uuid }}" name="filterDepartment" class="form-check-input me-2" value="{{ department.uuid }}">
                                            <span>{{ department.title }}</span>
                                        </div>
                                        <div class="peer">
                                            <span class="badge rounded-pill bgc-green-50 c-green-700">0</span>
                                        </div>
                                    </div>
                                </label>
                            </li>

                        {% endfor %}

                    {% endif %}

                    </ul>
                </div>
                </div>
            </div>
            <div class="email-wrapper row remain-height bg-body overflow-y-auto">
                <div class="email-list h-100 layers">
                <div class="layer w-100">
                    <div class="bg-body-tertiary peers ai-c p-20 fxw-nw">
                        <div class="peer me-auto">
                            <div class="btn-group" role="group">
                                <button type="button" class="email-side-toggle d-n@md+ btn bgc-white bdrs-2 mR-3 cur-p">
                                    <i class="ti-menu"></i>
                                </button>
                                <!-- <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
                                    <i class="ti-tag"></i>
                                </button> -->
                                <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:loadAllTickets();">
                                    <i class="fa fa-refresh"></i>
                                </button>
                            </div>
                        </div>
                        <div class="peer">
                            
                            <div class="btn-group" role="group">
                                <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:changeTicket(false);">
                                    <i class="ti-angle-left"></i>
                                </button>
                                <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:changeTicket(true);">
                                    <i class="ti-angle-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layer w-100">
                    <div class="bdT bdB peers d-flex flex-nowrap">
                        <label for="searchTickets" class="peer my-auto mX-15">
                            <i class="ti-search"></i>
                        </label>
                        <input type="text" id="searchTickets" class="form-control m-0 bdw-0 pY-15 pR-20 pL-0 bdrs-0 peer-greed shadow-none" placeholder="Search...">
                        <label for="searchTickets" id="ticketCounts" class="peer my-auto mX-15 small">
                            <span class="current"></span>/<span class="total"></span>
                        </label>
                    </div>
                </div>

                <div id="ticketsContainer" class="layer w-100 fxg-1 overflow-y-auto">
                    <div class="content"></div>
                    <div class="none-found pos-a top-50 start-50 translate-middle" style="display: none;">
                        <h6 class="fw-bold">No Tickets Found</h6>
                        <ul class="text-body-tertiary small">
                            <li>Try clearing your search</li>
                            <li>Try removing your filters</li>
                            <li>Try using the refresh button</li>
                        </ul>
                    </div>
                    <div class="loading bgc-grey-50 h-100" style="display: none;">
                        {% for i in "x"|rjust:"3" %}
                            <div class="email-list-item peers fxw-nw p-20 bdB placeholder-glow" >
                                <div class="peer mR-10">
                                    <span class="placeholder w-2r h-2r bdrs-50p me-2"></span>
                                </div>
                                <div class="peer peer-greed ov-h">
                                    <div class="peers ai-c">
                                        <div class="peer peer-greed">
                                            <span class="placeholder col-5 rounded"></span>
                                        </div>
                                        <div class="peer peer-greed d-flex jc-fe">
                                            <span class="placeholder col-4 rounded"></span>
                                        </div>
                                    </div>
                                    <span class="placeholder rounded col-7 mT-10"></span>
                                    <div class="row">
                                        <span class="col-1"></span>
                                        <span class="placeholder rounded col-7 mT-10"></span>
                                    </div>
                
                                </div>
                            </div>
                            <div class="email-list-item peers fxw-nw p-20 bdB placeholder-glow" >
                                <div class="peer mR-10">
                                    <span class="placeholder w-2r h-2r bdrs-50p me-2"></span>
                                </div>
                                <div class="peer peer-greed ov-h">
                                    <div class="peers ai-c">
                                        <div class="peer peer-greed">
                                            <span class="placeholder col-6 rounded"></span>
                                        </div>
                                        <div class="peer peer-greed d-flex jc-fe">
                                            <span class="placeholder col-4 rounded"></span>
                                        </div>
                                    </div>
                                    <span class="placeholder rounded col-8 mT-10"></span>
                                    <span class="placeholder rounded col-7 mT-10"></span>                
                                </div>
                            </div>
                            <div class="email-list-item peers fxw-nw p-20 bdB placeholder-glow" >
                                <div class="peer mR-10">
                                    <span class="placeholder w-2r h-2r bdrs-50p me-2"></span>
                                </div>
                                <div class="peer peer-greed ov-h">
                                    <div class="peers ai-c">
                                        <div class="peer peer-greed">
                                            <span class="placeholder col-5 rounded"></span>
                                        </div>
                                        <div class="peer peer-greed d-flex jc-fe">
                                            <span class="placeholder col-4 rounded"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <span class="col-1"></span>
                                        <span class="placeholder rounded col-7 mT-10"></span>
                                    </div>
                                    <span class="placeholder rounded col-7 mT-10"></span>                
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                </div>
                <div class="email-content h-100 bg-body">
                <div class="h-100 scrollable pos-r">
                    <div class="bgc-grey-100 peers ai-c jc-sb p-20 fxw-nw d-n@md+">
                    <div class="peer">
                        <div class="btn-group" role="group">
                            <button type="button" class="back-to-mailbox btn bgc-white bdrs-2 mR-3 cur-p">
                                <i class="ti-angle-left"></i>
                            </button>
                            <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:reloadCurrentTicket();">
                                <i class="fa fa-refresh"></i>
                            </button>
                            <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
                                <i class="ti-more-alt"></i>
                            </button>
                        </div>
                    </div>
                    <div class="peer">
                        <div class="btn-group" role="group">
                            <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:changeTicket(false);">
                                <i class="ti-angle-left"></i>
                            </button>
                            <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:changeTicket(true);">
                                <i class="ti-angle-right"></i>
                            </button>
                        </div>
                    </div>
                    </div>
                    <div class="email-content-wrapper">
                    <!-- Header -->
                    <div class="peers ai-c jc-sb pX-40 pY-30">
                        <div class="peers peer-greed">
                        <div class="peer mR-20">
                            <img id="ticketAuthorImg" class="bdrs-50p w-3r h-3r" alt="" src="" style="display: none; object-fit: cover;">
                        </div>
                        <div class="peer">
                            <small id="ticketTimestamp"></small>
                            <h5 id="ticketAuthor" class="c-grey-900 mB-5"></h5>
                            <div id="ticketBadges" style="display: none;"></div>
                        </div>
                        </div>
                        <!-- <div class="peer">
                            <div class="btn-group" role="group">
                                <button id="btnGroupDrop2" class="btn btn-danger c-white bdrs-50p p-15 lh-0" style="display: none;" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="ti-menu"></i>
                                </button>
                                <ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop2">
                                    test
                                </ul>
                            </div>
                        </div> -->
                    </div>

                    <!-- Content -->
                    <div class="bdT pX-40 pY-30">
                        
                        <h4 id="ticketTitle"></h4>
                        <div id="ticketDesc"></div>
                        <!-- <h4>Title of this email goes here</h4>
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        </p>
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
                        </p> -->
                    </div>
                    </div>
                </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <div id="ticketModal" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <form method="post">

                {% csrf_token %}

                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title fs-5">New Ticket</h3>
                        <button type="button" class="btn-close" data-bs-toggle="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="newTitle" class="form-label">Subject</label>
                            <input type="text" name="newTitle" id="newTitle" class="form-control" placeholder="Subject">
                            <small class="text-muted">Briefly describe the subject of the ticket.</small>
                        </div>
                        <div class="mb-3">
                            <label for="newDesc" class="form-label">Description</label>
                            <div id="newDesc" class="form-control"></div>
                            <small class="text-muted">Describe your issue in detail here.</small>
                            <!-- class="form-control" -->
                        </div>
                        <div class="mb-3">
                            <label for="newPriority" class="form-label">Priority</label>
                            <select name="newPriority" id="newPriority" class="select-2">
                                {% for priority in priorities %}
                                    <option value="{{ priority.uuid }}">{{ priority.title }}</option>
                                {% endfor %}
                            </select>
                            <small class="text-muted">How important is this ticket?</small>
                        </div>
                        <div class="mb-3">
                            <label for="newTags" class="form-label">Tags</label>
                            <select name="newTags" id="newTags" class="select-2" multiple="multiple">
                                {% for tag in tags %}
                                    <option value="{{ tag.uuid }}">{{ tag.title }}</option>
                                {% endfor %}
                            </select>
                            <small class="text-muted">Use tags to categorize this ticket.</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger c-white">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

{% endblock content %}

{% block javascripts %}
<!-- Ticket Item Template -->
<script id="ticketItemTemplate" type="text/template">
    <div class="ticket-item peers fxw-nw p-20 bdB bgcH-grey-100" data-uuid="-1">
            <div class="peer mR-10">
                <img src="" alt="" class="ticket-item-icon me-2">
            </div>
            <div class="peer peer-greed ov-h">
                <div class="peers ai-c">
                    <div class="peer peer-greed">
                        <h6 class="ticket-item-author"></h6>
                    </div>
                    <div class="peer">
                        <small class="ticket-item-datetime"></small>
                    </div>
                </div>
                <h5 class="ticket-item-title c-grey-900"></h5>
                <div class="ticket-item-desc"></div>
            </div>
        </div>
</script>
<!-- Define Variables -->
<script>
    const URL_Tickets = "{% url 'api:tickets' %}";
    const URL_NewTicket = "{% url 'ticket-new' %}";
    const URL_FilterCounts = "{% url 'api:filter-counts' %}";
    const CSRFMiddlewareToken = "{{ csrf_token }}";
    const CurrentUserID = "{{ request.user.uuid }}";
</script>
<script src="{% static '/js/tickets.js' %}"></script>
{% endblock javascripts %}
