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


<div class="w-full px-5 s:px-9 flex flex-col gap-5">
    <!-- SUBSCRIPTION -->
    <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
        <h1 class="text-secondosiblue text-[25px]">Subscriptions</h1>
        <div class="w-full grid grid-cols-1 md:grid-cols-2 l:grid-cols-3 xxlg1:grid-cols-4 gap-x-5 gap-y-14 mt-3 mb-10">

            {% for subscription in active_subscriptions %}
            {% if subscription.item.item_type.name == 'OSIMENU' %}
                <a href="{% url 'redirectosimenu' %}">
                    <div class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300 relative">
                        <div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md relative h-[150px]">
                            {% if subscription.item.item_type.name == 'OSIMENU' %}
                            <img src="{% static 'images/ositcom_logos/osimenublue.png' %}" class="w-[80%] h-auto">
                            {% endif %}

                        </div>
                        <div class="w-[80%] absolute bottom-[-35px] left-1/2 -translate-x-1/2 bg-white border border-gray-100 shadow-md flex justify-center items-center p-3">
                            <p class="text-secondosiblue text-[17px]">Expires: <span class="font-semibold">{{subscription.end_at}}</span>
                            </p>
                        </div>
                    </div>
                </a>

            {% elif subscription.item.item_type.name == 'OSICARD' %}
            <a href="{% url 'redirectosicard' %}">
                    <div class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300 relative">
                        <div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md">
                            <img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[80%] h-auto">
                        </div>
                        <div class="w-[80%] absolute bottom-[-35px] left-1/2 -translate-x-1/2 bg-white border border-gray-100 shadow-md flex justify-center items-center p-3">
                            <p class="text-secondosiblue text-[17px]">Expires: <span class="font-semibold">{{subscription.end_at}}</span>
                            </p>
                        </div>
                    </div>
                </a>
            {% endif %}
            {% endfor %}


            <a href="{% url 'products' %}" class="w-full h-full">
                <div class="w-full h-full bg-gray-50 rounded-md flex justify-center items-center py-10 px-5 shadow-md border border-gray-100 cursor-pointer hover:bg-secondosiblue duration-300 group zoom">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-secondosiblue group-hover:text-white duration-300">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                    </svg>
                </div>
            </a>
        </div>
    </div>


    <!-- TICKETS -->
    <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
        <h1 class="text-secondosiblue text-[25px]">Tickets</h1>
        <div class="overflow-x-auto border border-gray-300 rounded-md mt-3">
            <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 border-r border-gray-300 uppercase whitespace-nowrap">
                            Last Updated
                        </th>
                        <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
                            Updated By
                        </th>
                        <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
                           Unread
                        </th>
                    </tr>
                </thead>

                <!-- TABLE BODY -->
                {% for ticket in customer_open_tickets %}
                <tbody class="bg-white divide-y divide-gray-200">
                    <tr>
                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            <a href="{% url 'customerticketdetails' ticket.ticket_number %}">
                                <p class="text-secondosiblue cursor-pointer hover:text-gray-500 duration-300">{{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.last_update_date_added}}</p>
    
                        </td>

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

                        <td class="px-6 py-4 text-center items-center text-sm">
                            <div class="w-full flex justify-center items-center">
                                <div class="w-[40px] h-[40px] rounded-full border-2 border-secondosiblue flex justify-center items-center">
                                    <p class="text-secondosiblue">{{ticket.unread_updates_count}}</p>
                                </div>
                            </div>  
                        </td>
                    </tr>
                </tbody>
                {% endfor %}
            </table>
        </div>
    </div>

    

    <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
        <h1 class="text-secondosiblue text-[25px]">Ways to Get Help</h1>

        <div class="w-full grid grid-cols-1 s:grid-cols-2 gap-5 mt-5">
            <div class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
                <div class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-secondosiblue">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
                      </svg>
                </div>

                <p class="font-poppinsBold text-secondosiblue text-center text-xl">Guides & Tutorials</p>

                <p class="text-gray-500 font-light text-center">View Osina guides and tutorials for all experience levels.</p>
            </div>

            <div class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
                <div class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-secondosiblue">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
                    </svg>
                </div>

                <p class="font-poppinsBold text-secondosiblue text-center text-xl">Community Q&A</p>

                <p class="text-gray-500 font-light text-center">Ask questions, find answers, and connect with other members of the Ositcom community.</p>
            </div>


            <div class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
                <div class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-secondosiblue">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
                    </svg>  
                </div>

                <p class="font-poppinsBold text-secondosiblue text-center text-xl">Ositcom Status Page</p>

                <p class="text-gray-500 font-light text-center">Get Updates on Ositcom incidents and maintenance.</p>
            </div>

            <div class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
                <div class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-secondosiblue">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51-4.66-2.51m0 0-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98V19.5Z" />
                      </svg>
                      
                </div>

                <p class="font-poppinsBold text-secondosiblue text-center text-xl">Customer Support</p>

                <p class="text-gray-500 font-light text-center">View or open Ositcom Support tickets.</p>
            </div>
        </div>
    </div>
</div>



{% endblock %}