{% 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'>
      <div id='mainContent'>
        <div class="full-container" style="overflow: 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="scrollable pos-r ov-h bdT layer w-100 fxg-1 bg-body">
                    <ul id="filterSidebar" class="p-20 nav flex-column">

                    {% if priorities %}

                        <li class="nav-item mT-10 filter-priority">
                            <h6 class="peers ai-c jc-sb mb-2 px-3">
                                <span class="peer-greed">Priorities</span>
                                <label for="filterPriority-all" class="nav-link text-reset actived p-0 cur-p" style="display: none">
                                    <input type="radio" id="filterPriority-all" name="filterPriorities" class="btn-check deselect-radio-filters" checked="checked" value="all">
                                    <span class="text-body badge small bg-none border-none py-0">
                                        <i class="ti-close"></i>
                                    </span>
                                </label>
                            </h6>
                        </li>

                        {% for priority in priorities %}

                            <li class="nav-item filter-priority">
                                <label for="filterPriority-{{ priority.uuid }}" class="nav-link text-reset 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="peer dropdown">
                                <span class="text-body badge small bg-none border-none py-0 cur-p" data-bs-toggle="dropdown">
                                    <i class="ti-more-alt"></i>
                                </span>
                                <div class="dropdown-menu prevent-click-close mT-5">
                                    <li class="px-3 py-2">
                                        <label for="strictTags" class="form-check-label small mb-2 fw-normal">Only show tickets matching all selected tags?</label>
                                        <div class="form-switch flex-wrap">
                                            <input type="checkbox" name="strictTags" id="strictTags" class="form-check-input" checked="checked">
                                        </div>
                                    </li>
                                </div>
                            </div>
                        </h6>
                    </li>

                        {% for tag in tags %}

                            <li class="nav-item filter-tags">
                                <label for="filterTag-{{ tag.uuid }}" class="nav-link text-reset 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 id="filterDepartmentAll" class="nav-item filter-department">
                            <h6 class="peers ai-c jc-sb mb-2 px-3">
                                <span class="peer-greed">Departments</span>
                                <label for="filterDepartment-all" class="nav-link text-reset actived p-0 cur-p" style="display: none">
                                    <input type="radio" id="filterDepartment-all" name="filterDepartment" class="btn-check deselect-radio-filters" checked="checked" value="all">
                                    <span class="text-body badge small bg-none border-none py-0">
                                        <i class="ti-close"></i>
                                    </span>
                                </label>
                            </h6>
                        </li>

                        {% for department in departments %}

                            <li class="nav-item filter-department">
                                <label for="filterDepartment-{{ department.uuid }}" class="nav-link text-reset 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" style="color: {{ department.colour }}; background-color: {{ department.backgroundcolour }};">0</span>
                                        </div>
                                    </div>
                                </label>
                            </li>

                        {% endfor %}

                    {% endif %}

                    </ul>
                </div>
                </div>
            </div>
            <div class="email-wrapper row remain-height bg-body">
                <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-2">
                            <div class="btn-group" role="group">
                                <button type="button" class="email-side-toggle d-n@md+ btn bg-body bdrs-2 mR-3">
                                    <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 bg-body bdrs-2 mR-3" onclick="javascript:loadTicketItems();">
                                    <i class="ti-reload"></i>
                                </button>
                                <button type="button" class="btn bg-body bdrs-2 mR-3" onclick="javascript: toggleComplexItems();">
                                    <i class="ti-layout-media-left"></i>
                                </button>
                            </div>
                        </div>
                        <!-- <div class="peer me-2">
                            <div class="btn-group" role="group">

                            </div>
                        </div> -->
                        <div class="peer ms-auto">
                            <div class="btn-group bg-body mX-3" role="group">
                                <button type="button" id="ticketItemsPrevPage" class="btn bg-body bdrs-2" onclick="javascript: changeItemsPage(false);" disabled>
                                    <i class="ti-angle-left"></i>
                                </button>
                                <div id="paginationCounts" class="bg-body pX-3 small d-flex ai-c">
                                    <span class="current">-</span>/<span class="total">-</span>
                                </div>
                                <button type="button" id="ticketItemsNextPage" class="btn bg-body bdrs-2" onclick="javascript: changeItemsPage(true);" disabled>
                                    <i class="ti-angle-right align-center"></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 scrollable pos-r ov-h">
                    <div class="content"></div>
                    <div class="none-found p-20" style="display: none;">
                        <div class="pos-a top-50 start-50 translate-middle text-center">
                            <div class="fs-1 fw-bolder">404</div>
                            <div class="fs-4 fw-bold text-body-tertiary">No Tickets Found</div>
                        </div>
                    </div>
                    <div class="loading bg-body-tertiary 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="bg-body-tertiary 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 bg-body bdrs-2 mR-3">
                                    <i class="ti-angle-left"></i>
                                </button>
                                <button type="button" class="btn bg-body bdrs-2 mR-3" onclick="javascript:reloadCurrentTicket();">
                                    <i class="ti-reload"></i>
                                </button>
                                <button type="button" class="btn bg-body bdrs-2 mR-3">
                                    <i class="ti-more-alt"></i>
                                </button>
                            </div>
                        </div>
                        <div class="peer">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn bg-body bdrs-2 mR-3" onclick="javascript:changeTicket(false);">
                                    <i class="ti-angle-left"></i>
                                </button>
                                <button type="button" class="btn bg-body bdrs-2 mR-3" onclick="javascript:changeTicket(true);">
                                    <i class="ti-angle-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="ticketContent" class="email-content-wrapper">
                        <div class="content"></div>
                        <div class="loading" style="display: none;">

                            <!-- Header -->
                            <div class="ticket-content placeholder-glow">
                                <div class="peers ai-c jc-sb pX-40 pY-30">
                                    <div class="peers peer-greed">
                                        <div class="peer mR-20">
                                            <span class="ticket-content-icon placeholder me-2"></span>
                                        </div>
                                        <div class="peer-greed">
                                            <div >
                                                <span class="placeholder rounded col-4"></span>
                                            </div>
                                            <div class="mY-5">
                                                <span class="placeholder rounded col-5"></span>
                                            </div>
                                            <div class="row g-0 ">
                                                {% for i in "x"|rjust:"12" %}
                                                    <div class="col pe-3">
                                                        <div class="placeholder rounded w-100"></div>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        
                                <!-- Content -->
                                <div class="bdT pX-40 pY-30">
                                    <span class="placeholder rounded col-6 mB-30"></span>
                                    <div class="row g-3">
                                        <div class="placeholder rounded col-12 px-3"></div>
                                        <div class="placeholder rounded col-7"></div>
                                        <div class="col-1"></div>
                                        <div class="placeholder rounded col-4"></div>
                                        <div class="placeholder rounded col-3"></div>
                                    </div>
                                </div>
                            </div>

                        </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" action="/tickets/new/">

                {% 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 fxw-nw bdB peers fxw-nw p-20 w-100" data-uuid="-1">
        <div class="ticket-item-complex peer mR-20 d-flex flex-column align-items-center align-self-stretch pos-r">
            <img src="" alt="" class="ticket-item-icon">
            <div class="mt-auto">
                <div class="ticket-item-department badge rounded mb-2" data-bs-toggle="tooltip">
                    <i class="fa fa-users"></i>
                </div>
                <div class="ticket-item-priority badge rounded" data-bs-toggle="tooltip">
                    <i class="fa fa-folder"></i>
                </div>
            </div>
        </div>
        <div class="peer peer-greed ov-h">
            <div class="peers ai-c mb-2">
                <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 mb-0"></h5>
            <div class="ticket-item-desc mt-2"></div>
            <div class="peers">
                <div class="ticket-item-tags peer d-flex flex-wrap mw-100"></div>
            </div>
        </div>
    </div>
</script>

<!-- Ticket Content Template -->
<script id="ticketContentTemplate" type="text/template">
    <!-- Header -->
    <div class="ticket-content">
        <div class="peers ai-c jc-sb pX-40 pY-30">
            <div class="peers peer-greed">
                <div class="peer mR-20">
                    <img class="ticket-content-icon" src="" alt="">
                </div>
                <div class="peer">
                    <!-- <small class="ticket-content-datetime"></small> -->
                    <h5 class="ticket-content-author mb-0"></h5>
                    <div class="peers mt-2">
                        <div class="ticket-content-department peer badge bgc-orange-100 c-orange-700" data-bs-toggle="tooltip">
                            <i class="fa fa-users"></i>
                        </div>
                        <div class="ticket-content-priority peer badge rounded" data-bs-toggle="tooltip">
                            <i class="fa fa-folder"></i>
                        </div>
                    </div>
                    <div class="ticket-content-badges"></div>
                </div>
            </div>
        </div>
    
        <!-- Content -->
        <div class="bdT pX-40 pY-30">
            <h4 class="ticket-content-title"></h4>
            <div class="ticket-content-desc w-100"></div>
        </div>
    </div>
</script>

<!-- Ticket Content Badge Template -->
<script id="ticketContentBadgeTemplate" type=text/template>
    <div class="ticket-content-badge badge rounded mt-2 me-2">
        <span class="ticket-content-badge-text"></span>
        <i class="ticket-content-badge-icon"></i>
    </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 %}