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

{% block content %}

<div class="w-full px-5 s:px-9 flex flex-col gap-3">
    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
        <div class="w-full h-fit flex flex-col gap-2 bg-gray-100 shadow-md rounded-md px-3 py-3">
            <p class="text-secondosiblue text-xl">Ticket <span class="font-semibold">{{ticket.ticket_number}}</span></p>

            <div class="flex justify-start items-center gap-1">
                <div class="w-[16px] h-[16px] rounded-full bg-red-200 shadow-md"></div>
                <p class="text-secondosiblue font-light">Closed by Linode at 20-4-24 16:30</p>
            </div>


            <div class="w-full mt-3">
                <p class="text-gray-500 font-light text-sm leading-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis, risus id sollicitudin
                    maximus, diam velit tempus est, pulvinar cursus arcu nisi nec ligula. Nunc eleifend, est eget
                    lacinia semper, ligula purus scelerisque nunc, a molestie elit magna quis sem. Curabitur eget auctor
                    mi, vel sodales purus. Nullam odio erat, convallis sit amet feugiat molestie, fermentum sit amet
                    purus. Proin eget nunc eget risus tristique tempus. Donec egestas bibendum ligula sit amet porta.
                </p>
            </div>

            <div class="w-full flex flex-wrap justify-end items-center gap-3">
                <a>
                    <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>       
                        <p>Filename.docx</p>               
                    </div>
                </a>
            </div>
        </div>


        <div class="w-full flex flex-col gap-8 mt-5 s:mt-10">
            <!-- REPLY 1 -->

            {% for update in ticket_updates %}
            <div class="flex gap-3">
                <div>
                    <div class="w-[45px] s:w-[60px] h-[45px] s:h-[60px] rounded-full shadow-md border border-gray-100">
                        {% if update.added_by.customerprofile %}
                        {% if update.added_by.customerprofile.image %}
                        <img src="{{update.added_by.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">
                            {{ update.added_by.first_name.0 }}{{ update.added_by.last_name.0 }}
                        </div>
                        {% endif %}
                        {% elif update.added_by.staffprofile %}
                        {% if update.added_by.staffprofile.image %}
                        <img src="{{update.added_by.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">
                            {{ update.added_by.first_name.0 }}{{ update.added_by.last_name.0 }}
                        </div>
                        {% endif %}
                        {% endif %}
                    </div>
                </div>


                <div class="w-full replyContainer shadow-md">
                    <div
                        class="w-full bg-gray-100 flex justify-between items-center gap-3 px-3 py-3 cursor-pointer rounded-t-md toggleReply">
                        <p class="text-secondosiblue font-light text-sm s:text-base"><span
                                class="font-semibold">{{update.added_by.first_name}}</span>
                            replied {{update.date_added}}</p>

                        <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 arrowUp">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
                        </svg>


                        <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 arrowDown hidden">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                        </svg>
                    </div>

                    <div class="w-full bg-white p-5 flex flex-col gap-3 reply">
                        <p class="text-gray-500 font-light leading-8 text-[15px]">
                            {{update.description}}
                        </p>

                        <div class="w-full flex flex-wrap justify-end items-center gap-3">
                            <a>
                                <div class="flex items-center gap-1 text-secondosiblue hover:text-gray-500 duration-300 cursor-pointer text-sm">
                                    <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>       
                                    <p>Filename.docx</p>               
                                </div>
                            </a>
                        </div>

                    </div>

                    {% if update.added_by.staffprofile %}
                    <div class="w-full border-t border-gray-200 pt-5 flex justify-start items-center gap-3 p-5">
                        <a class="text-secondosiblue font-light cursor-pointer hover:text-gray-500 duration-300">How
                            did I do?</a>

                        <div class="flex justify-start items-center gap-2">
                            <div class="w-fit h-fit rounded-full border-2 border-secondosiblue">
                                <img src="{% static 'images/icons/happy-icon.png' %}"
                                    class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform">
                            </div>

                            <div class="w-fit h-fit rounded-full">
                                <img src="{% static 'images/icons/neutral-icon.png' %}"
                                    class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform">
                            </div>

                            <div class="w-fit h-fit rounded-full">
                                <img src="{% static 'images/icons/unhappy-icon.png' %}"
                                    class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform">
                            </div>
                        </div>
                    </div>
                    {% endif %}


                </div>
            </div>
            {% endfor %}


            <!-- REPLYING SECTION -->
            <form class="flex gap-3" method="POST" action="{% url 'customeraddticketupdate' ticket.id %}"
                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">
                    <textarea name="description"
                        class="w-full bg-white px-3 py-3 border border-gray-200 rounded-md outline-none text-gray-500 resize-none"
                        rows="8" placeholder="Add Comment..."></textarea>


                    <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">
                            <input type="file" name="file" id="fileInput" class="opacity-0">

                            <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>
                        </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>
                    </div>

                </div>

            </form>
        </div>
    </div>
</div>


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

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



{% endblock %}