{% extends "customer_main.html" %}
{%load static%}

{% block content %}

<div class="w-full flex flex-col gap-3">
    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
        <h1 class="text-secondosiblue text-[25px]">My Tickets</h1>


        <div class="w-full flex flex-col gap-3 mt-4">
            <div class="w-full bg-gray-200 rounded-md shadow-md h-fit p-3 flex items-center justify-between gap-5">
                <div class="flex items-center gap-5 text-[17px]">
                    <p class="text-secondosiblue font-semibold cursor-pointer" id="openTicketsLink">Open Tickets</p>
                    <p class="text-gray-500 cursor-pointer" id="closedTicketsLink">Closed Tickets</p>
                </div>

                <a href="{% url 'customeraddticket' %}">
                    <button
                        class="w-fit px-5 py-2 bg-osiblue border border-osiblue text-white rounded-md cursor-pointer hover:bg-white hover:text-secondosiblue duration-300">
                        Create Ticket
                    </button>
                </a>
            </div>


            <!-- OPEN TICKETS -->
            <div class="overflow-x-auto border border-gray-300 rounded-md tableContainer" id="openTickets">
                <table class="min-w-full divide-y">
                    <!-- TABLE HEADER -->
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                Subject
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                Ticket ID
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                Regarding
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                Date Created
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
                                Last Updated
                            </th>
                        </tr>
                    </thead>

                    <!-- TABLE BODY -->
                    <tbody class="bg-white divide-y divide-gray-200">

                        {% for ticket in open_tickets %}
                        <tr data-href="{% url 'ticketroom' ticket.ticket_number %}" class="hover:bg-gray-100 duration-300 cursor-pointer">
                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                <div class="w-full flex {% if ticket.unread_updates_count > 0 %} justify-between {% else %} justify-center {% endif %} items-center gap-3"> 
                                    <a href="{% url 'ticketroom' ticket.ticket_number %}">
                                        <p class="text-secondosiblue">{{ticket.title }}</p>
                                    </a>

                                    {% if ticket.unread_updates_count > 0 %}
                                    <div>
                                        <div class="w-[25px] h-[25px] rounded-full bg-green-700 text-white flex justify-center items-center text-sm">
                                            <p>{{ticket.unread_updates_count}}</p>
                                        </div>
                                    </div>
                                    {% endif %}
                                </div>
                            </td>

                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                <p class="text-secondosiblue">{{ ticket.ticket_number }}</p>
                            </td>

                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                <p class="text-secondosiblue">{{ ticket.regarding }}</p>
                            </td>

                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                <p class="text-secondosiblue">{{ ticket.opened_date }}</p>
                            </td>

                            <td class="px-6 py-4 text-center text-sm">
                                {% if ticket.ticketupdate_set.all %}
                                    <p class="text-secondosiblue">{{ticket.ticketupdate_set.last.date_added}} <br> by {{ticket.ticketupdate_set.last.added_by.first_name}}</p>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <!-- CLOSED TICKETS -->
            <div class="overflow-x-auto border border-gray-300 rounded-md tableContainer hidden" id="closedTickets">
                <table class="min-w-full divide-y">
                    <!-- TABLE HEADER -->
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                Subject
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                Ticket ID
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                Regarding
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                Date Created
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
                                Last Updated
                            </th>
                        </tr>
                    </thead>

                    <!-- TABLE BODY -->
                    <tbody class="bg-white divide-y divide-gray-200">

                        {% for ticket in closed_tickets %}
                        <tr data-href="{% url 'ticketroom' ticket.ticket_number %}" class="hover:bg-gray-100 duration-300 cursor-pointer">
                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                <a href="{% url 'ticketroom' ticket.ticket_number %}">
                                    <p class="text-secondosiblue cursor-pointer">{{ticket.title }}</p>
                                </a>
                            </td>

                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                <p class="text-secondosiblue">{{ ticket.ticket_number }}</p>
                            </td>

                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                <p class="text-secondosiblue">{{ ticket.regarding }}</p>
                            </td>

                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                <p class="text-secondosiblue">{{ ticket.opened_date }}</p>
                            </td>


                            <td class="px-6 py-4 text-center text-sm">
                                {% if ticket.ticketupdate_set.all %}
                                    <p class="text-secondosiblue">{{ticket.ticketupdate_set.last.date_added}} <br> by {{ticket.ticketupdate_set.last.added_by.first_name}}</p>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div> 
    </div>
</div>



<!---------------------- JS SCRIPTS -------------------->

<script type="text/javascript" src='{% static "js/tickets/tickets-filtering.js" %}'></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var rows = document.querySelectorAll('table tbody tr');
        rows.forEach(function (row) {
            row.addEventListener('click', function () {
                window.location.href = row.getAttribute('data-href');
            });
        });
    });
</script>

{% endblock %}