{% 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">#2226663535</span></p>

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


        <div class="w-full flex flex-col gap-8 mt-5 s:mt-10">
            <!-- REPLY 1 -->
            <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">
                        <img src="{% static 'images/ositcom_logos/full-logo.png' %}"
                            class="w-full h-full rounded-full object-cover">
                    </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">Ositcom
                                Ltd</span>
                            commented 2024-04-17 12:19</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]">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non purus consectetur
                            magna sodales fringilla. Suspendisse non imperdiet metus. Curabitur feugiat tristique
                            varius. Curabitur fermentum sapien nisi, sed suscipit odio luctus sed. Mauris pretium risus
                            a tincidunt facilisis. Aliquam quis odio in mi aliquet scelerisque et ut urna. Ut ultrices
                            turpis odio, id hendrerit lectus dignissim in. Donec at tortor quis dui auctor sodales porta
                            et purus. Aliquam at nunc sit amet tortor lacinia porttitor. Proin auctor, eros ac
                            sollicitudin iaculis, felis quam vulputate ante, eu varius dolor arcu non enim. Vestibulum
                            ornare dapibus risus, id eleifend ipsum. Aliquam metus urna, bibendum quis cursus vitae,
                            placerat sit amet felis. Aliquam tellus ex, pretium id gravida id, vulputate et velit.
                            Phasellus leo felis, lobortis ut dolor eget, viverra aliquet ligula. Aliquam molestie ac
                            eros et fermentum.
                        </p>

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


            <!-- CUSTOMER SUPPORT REPLY 2 -->
            <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">
                        <img src="{% static 'images/netcommerce-logo.png' %}"
                            class="w-full h-full rounded-full object-cover">
                    </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">Scott</span>
                            Customer Support commented 2024-04-17 12:19</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 flex flex-col gap-5 p-5 reply">
                        <p class="text-gray-500 font-light leading-8 text-[15px]">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non purus consectetur
                            magna sodales fringilla. Suspendisse non imperdiet metus. Curabitur feugiat tristique
                            varius. Curabitur fermentum sapien nisi, sed suscipit odio luctus sed. Mauris pretium risus
                            a tincidunt facilisis. Aliquam quis odio in mi aliquet scelerisque et ut urna. Ut ultrices
                            turpis odio, id hendrerit lectus dignissim in. Donec at tortor quis dui auctor sodales porta
                            et purus.
                        </p>

                        <div class="w-full border-t border-gray-200 pt-5 flex justify-start items-center gap-3">
                            <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-4 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>
                    </div>
                </div>
            </div>



            <!-- REPLYING SECTION -->
            <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">
                        <img src="{% static 'images/ositcom_logos/full-logo.png' %}"
                            class="w-full h-full rounded-full object-cover">
                    </div>
                </div>


                <div class="w-full flex flex-col gap-3">
                    <textarea
                        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="Reply to Ositcom Ltd..."></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>

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


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

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



{% endblock %}