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


<div class="w-full flex flex-col gap-5">
    <!-- PROJECTS -->
    {% if customer_projects %}
    <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
        <h1 class="text-secondosiblue text-[25px]">Projects</h1>

        <div class="w-full grid grid-cols-1 s:grid-cols-2 gap-5 mt-3">
            {% for customer_project in customer_projects %}
            <a href="{% url 'customerprojectdetails' customer_project.project_id %}">
                <div
                    class="w-full rounded-md flex flex-col justify-between items-center gap-3 px-5 py-9 h-[250px] bg-gray-50 shadow-md relative hover:bg-gray-100 duration-300 projectContainer">
                    <div class="flex flex-col justify-center items-center gap-5">
                        <div class="w-[70px] h-[70px] rounded-full shadow-md">
                            {% if customer_project.logo %}
                            <img src="{{customer_project.logo.url}}" class="w-full h-full rounded-full object-cover">
                            {% else %}
                            <img src="{% static 'images/ositcom_logos/logobluebg-o.jpg' %}"
                                class="w-full h-full rounded-full object-cover">
                            {% endif %}

                        </div>

                        <div>
                            <p class="text-secondosiblue font-poppinsBold text-center text-xl">{{customer_project.name}}</p>
                            <p class="text-sm uppercase font-light text-secondosiblue text-center">
                                {{customer_project.project_id}}</p>
                        </div>
                    </div>

                    <div
                        class="{% if customer_project.projectstatus_set.all.last.status == 'In Progress' %} bg-orange-500 {% elif project.projectstatus_set.all.last.status == 'Completed' %} bg-green-700 {% elif project.projectstatus_set.all.last.status == 'Cancelled' %} bg-red-500 {% endif %} px-3 py-2 rounded-r-md text-xs text-white font-light uppercase absolute top-5 left-0">
                        <p>{{customer_project.projectstatus_set.all.last.status}}</p>
                    </div>


                    <div class="w-full mt-5 flex flex-col gap-2">
                        <div class="w-full flex justify-between items-center gap-3 text-gray-500 font-light text-xs">
                            <p class="startDate">{{customer_project.start_date}}</p>
                            <p class="endDate">{{customer_project.end_date}}</p>
                        </div>

                        <p id="projectId" class="hidden">{{customer_project.id}}</p>

                        <div class="w-full rounded-md bg-white shadow-md h-[8px] mainBar">
                            <div class=" rounded-md h-full progressBar"></div>
                        </div>
                    </div>

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



    <!-- 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-[130px]">
                        {% 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-full  bg-white border border-gray-100 shadow-md flex justify-start items-center p-3">
                        <p class="text-secondosiblue text-[17px]">Expires:{% if subscription.end_at %} <span
                                class="font-semibold">{{subscription.end_at}} {% else %} <span class="font-semibold">No
                                    Expiry {% endif %}</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 relative h-[130px]">
                        {% if subscription.item.item_type.name == 'OSICARD' %}
                        <img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[80%] h-auto">
                        {% endif %}

                    </div>
                    <div class="w-full  bg-white border border-gray-100 shadow-md flex justify-start items-center p-3">
                        <p class="text-secondosiblue text-[17px]">Expires:{% if subscription.end_at %} <span
                                class="font-semibold">{{subscription.end_at}} {% else %} <span class="font-semibold">No
                                    Expiry {% endif %}</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 tableContainer">
            <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 uppercase whitespace-nowrap">
                            Last Updated
                        </th>
                    </tr>
                </thead>

                <!-- TABLE BODY -->
                <tbody class="bg-white divide-y divide-gray-200" id="tickets">
                    {% for ticket in customer_open_tickets %}
                        {% include 'details_templates/partials/customer-ticket-display.html' %}
                    {% endfor %}
                </tbody>
            </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 hover:bg-gray-100 duration-300">
                <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 hover:bg-gray-100 duration-300">
                <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 hover:bg-gray-100 duration-300">
                <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>

            <a href="{% url 'contact' %}">
                <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 hover:bg-gray-100 duration-300">
                    <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>
            </a>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var rows = document.querySelectorAll('table tbody tr');
        rows.forEach(function (row) {
            row.addEventListener('click', function () {
                window.location.href = row.getAttribute('data-href');
            });
        });
    });
</script>

<script>
    // WebSocket connection for new tickets
    const newTicketsSocket = new WebSocket('ws://' + window.location.host + '/ws/new-tickets/');

    newTicketsSocket.onopen = () => {
        console.log('WebSocket connection to new tickets established');
    };

    newTicketsSocket.onmessage = function(e) {
        const data = JSON.parse(e.data);
        if (data.event_type === 'new_ticket') {
            const html = data.html;
            document.getElementById('tickets').insertAdjacentHTML('afterbegin', html);
        }
    };

    newTicketsSocket.onclose = () => {
        console.log('WebSocket connection to new tickets closed');
    };

    newTicketsSocket.onerror = (error) => {
        console.log('WebSocket error:', error);
    };


    // WebSocket connection for new ticket updates
    const newTicketUpdatesSocket = new WebSocket('ws://' + window.location.host + '/ws/new-ticket-updates/');

    newTicketUpdatesSocket.onopen = () => {
        console.log('WebSocket connection to new ticket updates established');
    };

    newTicketUpdatesSocket.onmessage = function(e) {
        const data = JSON.parse(e.data);
        if (data.event_type === 'new_ticket_update') {
            const html = data.html;
            const ticketId = data.ticket_id;
            console.log(ticketId);
            
            // Remove the existing ticket row if it exists
            const existingTicketRows = document.querySelectorAll(`.ticket-${ticketId}`);
            existingTicketRows.forEach(row => row.remove());

            // Insert the updated ticket row at the top
            document.getElementById('tickets').insertAdjacentHTML('afterbegin', html);
        }
    };

    newTicketUpdatesSocket.onclose = () => {
        console.log('WebSocket connection to new ticket updates closed');
    };

    newTicketUpdatesSocket.onerror = (error) => {
        console.log('WebSocket error:', error);
    };
</script>

<script type="module" src='{% static "js/projects/calculate-all-projects-time.js" %}'></script>
{% endblock %}