newosinadjango/osinaweb/support/templates/details_templates/ticket-settings.html

{% extends "main.html" %}
{%load static%}
{% block content %}


<div class="w-full xxlg1:w-[75%] bg-white h-fit rounded-md shadow-md p-5 flex flex-col gap-10">
    <h1 class="text-3xl text-secondosiblue text-center font-semibold">
        Settings
    </h1>


    <!-- DEPARTMENTS -->
    <div class="w-full">
        <div class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
            <div class="px-3">
                <p class="text-secondosiblue uppercase font-bold">Departments</p>
            </div>

            <button
                class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center xsmallPopupButton"
                data-modal-url="{% url 'addticketdepartmentmodal' ticket.ticket_number %}">
                <i class="fa fa-plus"></i>
            </button>
        </div>


        <div class="w-full flex flex-col gap-3 mt-3">
            {% for department in ticket_departments %}
            <div
                class="w-full rounded-md py-5 px-3 {% if forloop.first %} bg-secondosiblue border border-secondosiblue text-gray-50 {% else %}  bg-gray-50 border border-gray-100 text-secondosiblue {% endif %} flex justify-between items-center gap-3">
                <p class="text-sm sm:text-[17px]">{{department.department.name}}</p>

                <p class="text-sm sm:text-base">{{department.date_added}}</p>
            </div>
            {% endfor %}
        </div>
    </div>


    <!-- MEMBERS -->
    <div class="w-ful">
        <div class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
            <div class="px-3">
                <p class="text-secondosiblue uppercase font-bold">Members</p>
            </div>

            <button
                class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center smallPopupButton"
                data-modal-url="{% url 'addticketmembermodal' ticket.ticket_number %}">
                <i class="fa fa-plus"></i>
            </button>
        </div>


        <div class="w-full grid grid-cols-1 l:grid-cols-2 xl:grid-cols-3 gap-3 mt-3">
            <a href="{% url 'customerdetails' ticket.customer.customer_id  %}">
                <div
                    class="w-full h-full flex flex-col gap-1 px-3 py-3 bg-secondosiblue rounded-md shadow-md cursor-pointer hover:scale-105 duration-500">
                    <div class="w-full flex justify-between items-center gap-1">
                        <div class="flex justify-start items-center gap-2">
                            <div class="w-[45px] h-[45px] rounded-full bg-white">
                                <div
                                class="w-full h-full border border-white bg-white text-secondosiblue uppercase rounded-full flex justify-center items-center p-1 shadow-md">
                                {{ ticket.customer.user.first_name.0 }}{{ ticket.customer.user.last_name.0 }}
                                </div>
                            </div>


                            <div>
                                <p class="text-white font-light">{{ticket.customer.user.first_name}} {{ticket.customer.user.last_name}}</p>
                                <div class="text-xs text-white py-1">
                                    <p>{{customer_last_seen}}</p>
                                </div>
                            </div>
                        </div>

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


            {% for member in ticket_members %}
                <a href="{% url 'userdetails' member.staff.staff_id %}">
                    <div
                        class="w-full h-full flex flex-col gap-1 px-3 py-3 bg-gray-100 rounded-md shadow-md cursor-pointer hover:scale-105 duration-500">
                        <div class="w-full flex justify-between items-center gap-1">
                            <div class="flex justify-start items-center gap-2">
                                <div class="w-[45px] h-[45px] rounded-full bg-white">
                                    {% if member.staff.image %}
                                    <img src="{{member.staff.image.url}}" class="w-full h-full rounded-full object-cover">
                                    {% else %}
                                    <img src="{% static 'images/default-user.png' %}"
                                        class="w-full h-full rounded-full object-cover">
                                    {% endif %}
                                </div>


                                <div>
                                    <p class="text-secondosiblue font-light">{{member.staff.user.first_name}} {{member.staff.user.last_name}}</p>
                                    <div class="text-xs text-secondosiblue py-1">
                                        <p>{{member.get_last_seen}}</p>
                                    </div>
                                </div>
                            </div>

                            <div
                                class="w-[30px] h-[30px] rounded-md shadow-md text-white bg-secondosiblue border border-osiblue flex justify-center items-center cursor-pointer hover:bg-transparent hover:text-secondosiblue duration-300">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4" fill="none">
                                    <path d="M19.0005 4.99988L5.00045 18.9999M5.00045 4.99988L19.0005 18.9999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </a>
            {% endfor %}
        </div>
    </div>
</div>


{% endblock %}