{% extends base_template %}
{%load static%}
{% block content %}


<!-- TEXT EDITOR -->
<style>
    @import url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.3.45/css/materialdesignicons.min.css);
</style>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
<script src="https://unpkg.com/htmx.org/dist/htmx.js"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script>
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>



<p id="ticketId" class="hidden">{{ticket.id}}</p>
<p id="userId" class="hidden">{{request.user.id}}</p>

<div class="{% if request.user.customerprofile %} w-full {% else %}w-full xxlg1:w-[75%] {% endif %} bg-white h-fit rounded-md shadow-md p-5 relative">
    <div class="w-full h-fit flex flex-col gap-2 bg-gray-100 shadow-md rounded-md px-3 py-3" id="ticketHeader">
        <div class="w-full flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-5 md:mb-0">
            <p class="text-secondosiblue text-[20px] flex items-center gap-1">Ticket <span
                    class="font-semibold">#{{ticket.ticket_number}}</span> - <span class="ticket-department font-semibold text-base">{% include 'details_templates/partials/ticket-department.html' %}</span></p>


            <div class="w-full s:w-fit flex flex-col s:flex-row justify-end items-center gap-2">

                {% if request.user.staffprofile %}
                    <a href="{% url 'ticketsettings' ticket.ticket_number %}" class="w-full s:w-fit">
                        <button
                            class="w-full s:w-fit px-3 py-2 bg-transparent border border-osiblue text-osiblue cursor-pointer duration-300 hover:bg-osiblue hover:text-white rounded-md flex justify-center items-center gap-1">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5" fill="none">
                                <path
                                    d="M21.3175 7.14139L20.8239 6.28479C20.4506 5.63696 20.264 5.31305 19.9464 5.18388C19.6288 5.05472 19.2696 5.15664 18.5513 5.36048L17.3311 5.70418C16.8725 5.80994 16.3913 5.74994 15.9726 5.53479L15.6357 5.34042C15.2766 5.11043 15.0004 4.77133 14.8475 4.37274L14.5136 3.37536C14.294 2.71534 14.1842 2.38533 13.9228 2.19657C13.6615 2.00781 13.3143 2.00781 12.6199 2.00781H11.5051C10.8108 2.00781 10.4636 2.00781 10.2022 2.19657C9.94085 2.38533 9.83106 2.71534 9.61149 3.37536L9.27753 4.37274C9.12465 4.77133 8.84845 5.11043 8.48937 5.34042L8.15249 5.53479C7.73374 5.74994 7.25259 5.80994 6.79398 5.70418L5.57375 5.36048C4.85541 5.15664 4.49625 5.05472 4.17867 5.18388C3.86109 5.31305 3.67445 5.63696 3.30115 6.28479L2.80757 7.14139C2.45766 7.74864 2.2827 8.05227 2.31666 8.37549C2.35061 8.69871 2.58483 8.95918 3.05326 9.48012L4.0843 10.6328C4.3363 10.9518 4.51521 11.5078 4.51521 12.0077C4.51521 12.5078 4.33636 13.0636 4.08433 13.3827L3.05326 14.5354C2.58483 15.0564 2.35062 15.3168 2.31666 15.6401C2.2827 15.9633 2.45766 16.2669 2.80757 16.8741L3.30114 17.7307C3.67443 18.3785 3.86109 18.7025 4.17867 18.8316C4.49625 18.9608 4.85542 18.8589 5.57377 18.655L6.79394 18.3113C7.25263 18.2055 7.73387 18.2656 8.15267 18.4808L8.4895 18.6752C8.84851 18.9052 9.12464 19.2442 9.2775 19.6428L9.61149 20.6403C9.83106 21.3003 9.94085 21.6303 10.2022 21.8191C10.4636 22.0078 10.8108 22.0078 11.5051 22.0078H12.6199C13.3143 22.0078 13.6615 22.0078 13.9228 21.8191C14.1842 21.6303 14.294 21.3003 14.5136 20.6403L14.8476 19.6428C15.0004 19.2442 15.2765 18.9052 15.6356 18.6752L15.9724 18.4808C16.3912 18.2656 16.8724 18.2055 17.3311 18.3113L18.5513 18.655C19.2696 18.8589 19.6288 18.9608 19.9464 18.8316C20.264 18.7025 20.4506 18.3785 20.8239 17.7307L21.3175 16.8741C21.6674 16.2669 21.8423 15.9633 21.8084 15.6401C21.7744 15.3168 21.5402 15.0564 21.0718 14.5354L20.0407 13.3827C19.7887 13.0636 19.6098 12.5078 19.6098 12.0077C19.6098 11.5078 19.7888 10.9518 20.0407 10.6328L21.0718 9.48012C21.5402 8.95918 21.7744 8.69871 21.8084 8.37549C21.8423 8.05227 21.6674 7.74864 21.3175 7.14139Z"
                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                <path
                                    d="M15.5195 12C15.5195 13.933 13.9525 15.5 12.0195 15.5C10.0865 15.5 8.51953 13.933 8.51953 12C8.51953 10.067 10.0865 8.5 12.0195 8.5C13.9525 8.5 15.5195 10.067 15.5195 12Z"
                                    stroke="currentColor" stroke-width="1.5" />
                            </svg>
                            Settings
                        </button>
                    </a>
                {% endif %}


                <button
                    class="w-full s:w-fit px-3 py-2 bg-osiblue border border-osiblue text-white cursor-pointer duration-300 hover:bg-white hover:text-osiblue rounded-md updateTicketStatusButton"
                    data-modal-url="{% url 'edit-ticket-status-modal' ticket.id %}">
                    Update Status
                </button>

                <button
                    class="w-full s:w-fit px-3 py-2 bg-osiblue border border-osiblue text-white cursor-pointer duration-300 hover:bg-white hover:text-osiblue rounded-md">
                    Add Task
                </button>
            </div>
        </div>

        <div class="ticket-status">
            {% include 'details_templates/partials/ticket-status.html' %}
        </div>
        <div class="w-full">
            <p class="text-gray-500 font-light text-sm leading-7">{{ticket.description}}
            </p>
        </div>

        <div class="w-full flex items-center gap-1">
            <p class="text-secondosiblue">Online:</p>
            
    
            <div class="flex items-center" id="top-online-users">
                {% include 'details_templates/partials/ticket-online-users.html' %}
            </div>
    
        </div>

        {% if ticket.ticketattachment_set.all %}
        <div class="w-full flex flex-wrap justify-end items-center gap-3">
            {% for file in ticket.ticketattachment_set.all %}
            <div class="flex items-center gap-1 text-secondosiblue hover:text-gray-500 duration-300 cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="w-4 h-4 text-secondosiblue">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
                </svg>
                <a href="https://osina.ositcom.com/{{file.file_path}}" target="_blank" class="text-sm">
                    {{ file.file_path | cut:"static/images/uploaded_ticket_files/" }}{% if not forloop.last %}, {% endif %}
                </a>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>


    <div id="fixedTicketHeader" class="w-full flex flex-col gap-3 bg-gray-100 shadow-md rounded-b-md px-3 py-3 hidden z-10">
        <div class="w-full flex flex-col md:flex-row justify-between items-start md:items-center gap-3">
            <p class="text-secondosiblue text-[17px] flex items-center gap-1">Ticket <span
                    class="font-semibold">#{{ticket.ticket_number}}</span> -  <span class="ticket-department font-semibold text-base">{% include 'details_templates/partials/ticket-department.html' %}</span></span>
            </p>
    
            <div class="ticket-status">
                {% include 'details_templates/partials/ticket-status.html' %}
            </div>

        </div>
    
        <div class="w-full flex items-center gap-1">
            <p class="text-secondosiblue">Online:</p>
            
    
            <div class="flex items-center" id="fixed-online-users">
                {% include 'details_templates/partials/ticket-online-users.html' %}
            </div>
    
        </div>
    </div>


    <div class="w-full flex flex-col mt-5 s:mt-10">
        <!-- REPLY 1 -->
        <div id="messages">
            {% for update in ticket_updates %}
            {% include 'details_templates/partials/ticket-message.html' %}
            {% endfor %}
        </div>

        <div id="typing-notification"></div>


        <!-- REPLYING SECTION -->
        <form id="ticketForm" class="flex gap-3 duration-500" enctype="multipart/form-data">
            {% csrf_token %}
            <div>
                <div class="w-[45px] s:w-[60px] h-[45px] s:h-[60px] rounded-full shadow-md border border-gray-100">
                    {% if request.user.customerprofile %}
                    {% if request.user.customerprofile.image %}
                    <img src="{{request.user.customerprofile.image.url}}"
                        class="w-full h-full rounded-full object-cover">
                    {% else %}
                    <div
                        class="w-full h-full border border-secondosiblue bg-secondosiblue text-white uppercase rounded-full flex justify-center items-center p-1 shadow-md">
                        {{ request.user.first_name.0 }}{{ request.user.last_name.0 }}
                    </div>
                    {% endif %}
                    {% elif request.user.staffprofile %}
                    {% if request.user.staffprofile.image %}
                    <img src="{{request.user.staffprofile.image.url}}" class="w-full h-full rounded-full object-cover">
                    {% else %}
                    <div
                        class="w-full h-full border border-osiblue bg-osiblue text-white uppercase rounded-full flex justify-center items-center p-1 shadow-md">
                        {{ request.user.first_name.0 }}{{ request.user.last_name.0 }}
                    </div>
                    {% endif %}
                    {% endif %}
                </div>
            </div>


            <div class="w-full flex flex-col gap-3">
                <div class="w-full rounded-md text-black" x-data="app()" x-init="init($refs.wysiwyg)">
                    <div class="border border-gray-200 overflow-hidden rounded-md">
                        <div class="w-full border-b border-gray-200 flex flex-wrap text-xl text-gray-600">
                            <button type="button"
                                class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
                                @click="format('bold')">
                                <i class="mdi mdi-format-bold"></i>
                            </button>
                            <button type="button"
                                class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
                                @click="format('italic')">
                                <i class="mdi mdi-format-italic"></i>
                            </button>
                            <button type="button"
                                class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
                                @click="format('underline')">
                                <i class="mdi mdi-format-underline"></i>
                            </button>
                            <button type="button"
                                class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
                                @click="format('formatBlock','P')">
                                <i class="mdi mdi-format-paragraph"></i>
                            </button>
                            <button type="button"
                                class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
                                @click="format('formatBlock','H1')">
                                <i class="mdi mdi-format-header-1"></i>
                            </button>
                            <button type="button"
                                class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
                                @click="format('formatBlock','H2')">
                                <i class="mdi mdi-format-header-2"></i>
                            </button>
                            <button type="button"
                                class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
                                @click="format('formatBlock','H3')">
                                <i class="mdi mdi-format-header-3"></i>
                            </button>
                            <button type="button"
                                class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
                                @click="format('insertUnorderedList')">
                                <i class="mdi mdi-format-list-bulleted"></i>
                            </button>
                            <button type="button"
                                class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
                                @click="format('insertOrderedList')">
                                <i class="mdi mdi-format-list-numbered"></i>
                            </button>

                            <button type="button"
                                class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
                                id="rightToLeft" @click="setDirection('rtl')">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-[18px] h-[18px]"
                                    fill="none">
                                    <path d="M15 3.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M15 9.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M3 15.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M3 21.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path
                                        d="M3.58579 9.91421C4.17157 10.5 5.11438 10.5 7 10.5C8.88562 10.5 9.82843 10.5 10.4142 9.91421C11 9.32843 11 8.38562 11 6.5C11 4.61438 11 3.67157 10.4142 3.08579C9.82843 2.5 8.88562 2.5 7 2.5C5.11438 2.5 4.17157 2.5 3.58579 3.08579C3 3.67157 3 4.61438 3 6.5C3 8.38562 3 9.32843 3.58579 9.91421Z"
                                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>
                            </button>

                            <button type="button"
                                class="w-[40px] h-[40px] border-r border-gray-200 flex justify-center items-center text-gray-400 duration-300 cursor-pointer hover:text-customGold"
                                id="leftToLeft" @click="setDirection('ltr')">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-[18px] h-[18px]"
                                    fill="none">
                                    <path d="M3 3.5H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M3 9.5H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M3 15.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M3 21.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path
                                        d="M13.5858 9.91421C14.1716 10.5 15.1144 10.5 17 10.5C18.8856 10.5 19.8284 10.5 20.4142 9.91421C21 9.32843 21 8.38562 21 6.5C21 4.61438 21 3.67157 20.4142 3.08579C19.8284 2.5 18.8856 2.5 17 2.5C15.1144 2.5 14.1716 2.5 13.5858 3.08579C13 3.67157 13 4.61438 13 6.5C13 8.38562 13 9.32843 13.5858 9.91421Z"
                                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>
                            </button>
                        </div>
                        <div class="w-full">
                            <iframe x-ref="wysiwyg" class="w-full h-[300px] overflow-y-auto"></iframe>
                        </div>
                    </div>
                </div>

                <textarea name="description" rows="8" id="textEditor"
                    class="w-full bg-white px-3 py-3 border border-gray-200 rounded-b-md outline-none text-gray-500 resize-none hidden"
                    placeholder="Add Comment..." required></textarea>

                <div class="w-full flex flex-col items-end gap-3">
                    <div class="w-full flex flex-col s:flex-row justify-end items-center gap-3">
                        <div
                            class="w-full s:w-[50px] h-[50px] rounded-md bg-gray-50 shadow-md border border-gray-100 flex justify-center items-center p-2 cursor-pointer relative hover:scale-105 duration-300 transition-transform">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor"
                                class="w-5 h-5 text-secondosiblue z-10 absolute pointer-events-none">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
                            </svg>
                            <input type="file" id="fileupload" name="" placeholder="Select file" multiple
                                class="opacity-0 absolute top-1/2 left-1/2 w-[25px] -translate-x-1/2 -translate-y-1/2 z-10">
                            <select id="filePathInput" name="filePath" multiple hidden></select>
                        </div>
                            

                        <button
                            class="w-full s:w-fit bg-secondosiblue border border-secondosiblue text-white rounded-md cursor-pointer hover:bg-white hover:text-secondosiblue duration-300 px-9 py-3">
                            Send
                        </button>

                        <button
                            class="w-full s:w-fit bg-white border border-secondosiblue text-secondosiblue rounded-md cursor-pointer hover:bg-secondosiblue hover:text-white duration-300 px-9 py-3">
                            Send as Note
                        </button>
                    </div>

                    <div id="uploaded_files" class="w-full flex flex-col gap-3"></div>
                </div>
            </div>
        </form>
    </div>


    <div class="w-full mt-5">
        <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">Task</p>
            </div>
        </div>
        <div class="w-full flex flex-col gap-3">
            {% if points %}
            {% for point in points %}
            <p class="pointId" data-point-id="{{ point.id }}" style="display: none;">{{ point.id }}</p>
            <div class="w-full flex flex-col gap-1 
                        {% if point.status == 'Completed' %}
                            bg-green-700
                        {% elif point.status == 'Working On' %}
                                bg-orange-500
                        {% elif point.status == 'Paused' %}
                                bg-red-500
                        {% else %}
                                bg-slate-700
                        {% endif %}
                         bg-opacity-50 rounded-md shadow-md p-3 mt-4">
                <div class="w-full flex justify-between items-end pb-2 border-b border-gray-200">
                    <div class="w-[380px]">
                        {% if point.status == 'Completed' %}
                        <p class="text-white line-through">{{point.text}}</p>
                        {% else %}
                        <p class="text-white">{{point.text}}</p>
                        {% endif %}
                    </div>

                    <div class="flex justify-end items-center gap-2">
                        {% if point.status == 'Not Completed' or point.status == 'Paused' and not point.status == 'Completed' %}
                        <a href="{% url 'mark_point_working_on_task_page' point.id task.id %}">
                            <button
                                class="w-[40px] h-[40px] rounded-full bg-transparent shadow-md text-white border border-white flex justify-center items-center hover:scale-105 transition-transform duration-300"
                                id="startPointButton">
                                <i class="fa fa-play"></i>
                            </button>
                        </a>
                        {% endif %}

                        {% if point.status == 'Working On' and not point.status == 'Completed' %}
                        <a href="{% url 'mark_point_paused_task_page' point.id task.id %}">
                            <button
                                class="w-[40px] h-[40px] rounded-full bg-transparent shadow-md text-white border border-white justify-center items-center hover:scale-105 transition-transform duration-300"
                                id="pausePointButton">
                                <i class="fa fa-pause"></i>
                            </button>
                        </a>
                        {% endif %}

                        {% if not point.status == 'Completed' and not point.status == 'Paused' %}
                        <a href="{% url 'mark_point_completed_task_page' point.id task.id %}">
                            <button
                                class="w-[40px] h-[40px] rounded-full bg-transparent shadow-md text-white border border-white flex justify-center items-center hover:scale-105 transition-transform duration-300">
                                <i class="fa fa-check"></i>
                            </button>
                        </a>
                        {% endif %}


                        {% if point.status == 'Completed' %}
                        <button
                            class="w-[40px] h-[40px] rounded-full bg-transparent shadow-md text-white border border-white flex justify-center items-center opacity-30 cursor-default">
                            <i class="fa fa-check"></i>
                        </button>
                        {% endif %}

                        {% if not point.status == 'Completed' %}
                        <form method="post" action="{% url 'deletepointmodal' point.id task.id %}">
                            {% csrf_token %}
                            <button type="submit"
                                class="w-[40px] h-[40px] bg-transparent border border-white rounded-full text-white flex justify-center items-center shadow-md hover:scale-105 transition-transform duration-300">
                                <i class="fa fa-trash"></i>
                            </button>
                        </form>
                        {% endif %}
                    </div>
                </div>

                <div class="flex justify-between items-center gap-3 pt-2">
                    <div class="text-white text-sm">
                        <p>Total Time:
                            <span class="font-semibold pointTotalTime">
                                <span class="hours">{{ point.total_activity_time.0 }}</span> hours,
                                <span class="minutes">{{ point.total_activity_time.1 }}</span> minutes,
                                <span class="seconds">{{ point.total_activity_time.2 }}</span> seconds
                            </span>
                        </p>
                    </div>

                    <div class="w-fit py-1 px-2 bg-white text-secondosiblue text-xs rounded-md shadow-md">
                        {% if point.status == 'Completed' %}
                        <p class="text-green-700 opacity-50">Completed</p>
                        {% elif point.status == 'Working On' %}
                        <p class="text-orange-500 opacity-50">Working On</p>
                        {% elif point.status == 'Paused' %}
                        <p class="text-red-500 opacity-50">Paused</p>
                        {% else %}
                        <p class="text-secondosiblue opacity-50">Created</p>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
            {% else %}
            <div class="w-full flex justify-center items-center p-5 text-secondosiblue text-center">
                <p>No Available Points</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>





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

<script type="text/javascript" src="{% static 'js/tickets/ticket-details.js' %}"></script>

<script type="text/javascript" src="{% static 'js/tickets/scroll-bottom-in-ticket.js' %}"></script>

<script type="text/javascript" src="{% static 'js/tickets/tickets-room.js' %}"></script>

<script type="text/javascript" src="{% static 'js/tickets/fixed-ticket-header.js' %}"></script>

<script type="text/javascript" src='{% static "js/inputs/file-uploader.js" %}'></script>





{% endblock %}