{% extends "main.html" %}
{%load static%}
{% block title %}My Projects{% endblock %}
{% block content %}


<div class="w-full xxlg1:w-[75%] bg-white h-fit rounded-md shadow-md p-5">
    {% if customer.status == 'Active' %}
    <div class="w-full bg-green-700 rounded-t-md flex flex-col justify-center items-center py-3">
        <h1 class="text-2xl text-white font-semibold">{{customer.user.first_name}} {{customer.user.last_name}}</h1>
        <p class="text-white text-base">{{customer.customer_id}}</p>
    </div>
    {% endif %}
    {% if customer.status == 'Suspended' %}
    <div class="w-full bg-red-500 rounded-t-md flex flex-col justify-center items-center py-3">
        <h1 class="text-2xl text-white font-semibold">{{customer.user.first_name}} {{customer.user.last_name}}</h1>
        <p class="text-white text-base">{{customer.customer_id}}</p>
    </div>
    {% endif %}
    {% if customer.status == 'Terminated' %}
    <div class="w-full bg-gray-500 rounded-t-md flex flex-col justify-center items-center py-3">
        <h1 class="text-2xl text-white font-semibold">{{customer.user.first_name}} {{customer.user.last_name}}</h1>
        <p class="text-white text-base">{{customer.customer_id}}</p>
    </div>
    {% endif %}

    <div class="w-full h-fit flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-3 mt-3">
        <div class="w-full md:w-fit flex flex-col md:flex-row justify-end items-center gap-3">
            <button
                class="w-full md:w-fit text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300 editCustomerStatusButton"
                data-modal-url="{% url 'editcustomerstatusmodal' customer.id %}">Update
                Status</button>

            <a href="{% url 'addproject' %}" class="w-full md:w-fit">
                <button
                    class="w-full md:w-fit text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">Add
                    Project</button>
            </a>

            <a href="{% url 'addcustomerticket' customer.id %}" class="w-full md:w-fit">
                <button
                    class="w-full md:w-fit text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">Add
                    Ticket</button>
            </a>

            <a href="{% url 'addorder' customer.id %}" class="w-full md:w-fit">
                <button
                    class="w-full md:w-fit text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">Add
                    Order</button>
            </a>

            <a href="{% url 'editcustomer' customer.customer_id %}" class="w-full md:w-fit">
                <button
                    class="w-full md:w-fit text-base px-3 py-2 bg-fifthosiblue text-white outline-none border border-fifthosiblue rounded-md cursor-pointer hover:bg-white hover:text-fifthosiblue duration-300">Edit
                    Customer</button>
            </a>
        </div>
    </div>

    <div class="w-full flex flex-col gap-4 mt-5">
        <div>
            <p class="text-gray-500 text-xl">First Name: <span
                    class="text-slate-800 text-xl font-semibold">{{customer.user.first_name}}</span></p>
        </div>

        <div>
            <p class="text-gray-500 text-xl">Last Name: <span
                    class="text-slate-800 text-xl font-semibold">{{customer.user.last_name}}</span></p>
        </div>

        <div>
            <p class="text-gray-500 text-xl">Email: <span
                    class="text-slate-800 text-xl font-semibold">{{customer.user.email}}</span></p>
        </div>

        <div>
            <p class="text-gray-500 text-xl">Mobile Number: <span
                    class="text-slate-800 text-xl font-semibold">{{customer.mobile_number}}</span></p>
        </div>


        {% if customer.personal_website %}
        <div>
            <p class="text-gray-500 text-xl">Personal Website: <span
                    class="text-slate-800 text-xl font-semibold">{{customer.personal_website}}</span></p>
        </div>
        {% endif %}


        {% if customer.status == 'Active' %}
        <div>
            <p class="text-gray-500 text-xl">Status: <span
                    class="text-green-700 text-xl font-semibold">{{customer.status}}</span></p>
        </div>
        {% endif %}


        {% if customer.status == 'Suspended' %}
        <div>
            <p class="text-gray-500 text-xl">Status: <span
                    class="text-red-500 text-xl font-semibold">{{customer.status}}</span></p>
        </div>
        {% endif %}


        {% if customer.status == 'Terminated' %}
        <div>
            <p class="text-red-500 text-xl">Status: <span
                    class="text-gray-500 text-xl font-semibold">{{customer.status}}</span></p>
        </div>
        {% endif %}

        <div>
            <p class="text-gray-500 text-xl">Reference: <span
                    class="text-slate-800 text-xl font-semibold">{{customer.reference}}</span></p>
        </div>
    </div>


    <!-- BUSINESS -->
    <div class="mt-10 relative">
        <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">Businesses</p>
            </div>

            <a href="{% url 'addbusiness' %}" class="h-full">
                <button
                    class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center">
                    <i class="fa fa-plus"></i>
                </button>
            </a>
        </div>

        <div class="overflow-x-auto border border-gray-300 rounded-b-md 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">
                            Name
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                            Business Type
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                            Financial Number
                        </th>
                        <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
                            Actions
                        </th>
                    </tr>
                </thead>

                <!-- TABLE BODY -->
                <tbody class="bg-white divide-y divide-gray-200">
                    <!-- 1st row -->
                    {% for business in customer.business_set.all %}
                    <tr>
                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            <p class="text-slate-800">{{ business.name }}</p>
                        </td>

                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            <p class="text-slate-800">{{ business.business_type }}</p>
                        </td>

                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            <p class="text-slate-800">{{ business.financial_number }}</p>
                        </td>

                        <td class="px-6 py-4 text-center text-sm">
                            <div class="flex justify-center items-center gap-3">
                                <a href="{% url 'businessdetails' business.business_id %}">
                                    <div class="text-[15px] text-blue-500 cursor-pointer">
                                        <i class="fa fa-eye"></i>
                                    </div>
                                </a>

                                <a href="{% url 'editbusiness'  business.business_id %}">
                                    <div class="text-[15px] text-blue-500 cursor-pointer">
                                        <i class="fa fa-edit"></i>
                                    </div>
                                </a>

                                <div class="text-[15px] text-red-500 cursor-pointer">
                                    <i class="fa fa-trash"></i>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>



    <!-- PROJECTS -->
    <div class="mt-10 relative">
        <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">Projects</p>
            </div>

            <a href="{% url 'addproject' %}" class="h-full">
                <button
                    class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center">
                    <i class="fa fa-plus"></i>
                </button>
            </a>
        </div>

        <div class="grid grid-cols-1 l:grid-cols-2 gap-3 mt-3">
            {% for project in customer_projects %}
            <a href="{% url 'detailed-project' project.project_id %}">
                <div class="w-full h-fit bg-white rounded-md shadow-md p-3 projectContainer">
                    <div class="w-full bg-white h-fit rounded-md border border-gray-200">
                        <div class="w-full px-5 pt-4 pb-1 flex flex-col gap-1 justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 relative 
                            {% if project.projectstatus_set.all.last.status == 'Completed' %}bg-green-700{% endif %}
                            {% if project.projectstatus_set.all.last.status == 'Cancelled' %}bg-red-500{% endif %}
                            {% if project.projectstatus_set.all.last.status == 'In Progress' %}bg-orange-500{% endif %}
                            {% if project.projectstatus_set.all.last.status == 'Pending' %}bg-yellow-500{% endif %}">
                            <p>{{project.name}}</p>
                            <p id="projectId" class="hidden">{{project.id}}</p>

                            <div
                                class="w-full flex justify-between items-center gap-3 text-white text-[12px] opacity-80">
                                <p>{{project.start_date|date:'d-m-Y' }}</p>
                                <p>{{project.end_date|date:'d-m-Y' }}</p>
                            </div>
                        </div>


                        <div class="w-full flex flex-col justify-between">
                            <!-- Details -->
                            <div class="w-full flex flex-col gap-3 p-5">
                                <div class="w-full flex justify-start items-center gap-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-secondosiblue">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122" />
                                    </svg>

                                    <p class="text-secondosiblue"><span class="font-poppinsBold">{{open_tasks}}</span>
                                        Open
                                        {% if project.open_tasks == 1 %} Task {% else %} Tasks {% endif %}</p>
                                </div>

                                <div class="w-full flex justify-start items-center gap-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                        class="w-6 h-6 text-secondosiblue" color="#000000" fill="none">
                                        <path
                                            d="M2.46433 9.34375C2.21579 9.34375 1.98899 9.14229 2.00041 8.87895C2.06733 7.33687 2.25481 6.33298 2.78008 5.53884C3.08228 5.08196 3.45765 4.68459 3.88923 4.36468C5.05575 3.5 6.70139 3.5 9.99266 3.5H14.0074C17.2986 3.5 18.9443 3.5 20.1108 4.36468C20.5424 4.68459 20.9177 5.08196 21.2199 5.53884C21.7452 6.33289 21.9327 7.33665 21.9996 8.87843C22.011 9.14208 21.7839 9.34375 21.5351 9.34375C20.1493 9.34375 19.0259 10.533 19.0259 12C19.0259 13.467 20.1493 14.6562 21.5351 14.6562C21.7839 14.6562 22.011 14.8579 21.9996 15.1216C21.9327 16.6634 21.7452 17.6671 21.2199 18.4612C20.9177 18.918 20.5424 19.3154 20.1108 19.6353C18.9443 20.5 17.2986 20.5 14.0074 20.5H9.99266C6.70139 20.5 5.05575 20.5 3.88923 19.6353C3.45765 19.3154 3.08228 18.918 2.78008 18.4612C2.25481 17.667 2.06733 16.6631 2.00041 15.1211C1.98899 14.8577 2.21579 14.6562 2.46433 14.6562C3.85012 14.6562 4.97352 13.467 4.97352 12C4.97352 10.533 3.85012 9.34375 2.46433 9.34375Z"
                                            stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
                                        <path d="M9 3.5L9 20.5" stroke="currentColor" stroke-width="1.5"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <p class="text-secondosiblue"><span
                                            class="font-poppinsBold">{{project.ticket_set.all.count}}</span> Open
                                        {% if project.ticket_set.all.count == 1 %} Ticket {% else %} Tickets {% endif %}
                                    </p>
                                </div>



                                <div class="w-full flex justify-start items-center gap-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-secondosiblue">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                    </svg>

                                    <p class="text-secondosiblue">Total Time: <span
                                            class="font-poppinsBold">{{total_time_worked.hours}}hr
                                            {{total_time_worked.minutes}}min
                                            {{total_time_worked.seconds}}sec</span>
                                    </p>
                                </div>

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


        <!-- SUBSCRIPTIONS -->
        {% if customer_active_subscriptions %}
        <div class="mt-10 relative">
            <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">Subscriptions</p>
                </div>

            </div>

            <div class="grid grid-cols-1 s:grid-cols-2 l:grid-cols-3 gap-3 mt-3">
                {% for subscription in customer_active_subscriptions %}
                    <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">
                            {% elif  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-base">Expires:{% if subscription.end_at %} <span
                                    class="font-semibold">{{subscription.end_at}} {% else %} <span class="font-semibold">No
                                        Expiry {% endif %}</span> 
                            </p>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}


        <!-- PAYMENTS -->
        {% if customer_payments %}
            <div class="mt-10 relative">
                <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">Payments</p>
                    </div>
        
                    <!--   <button
                        class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addPaymentButton">
                        <i class="fa fa-plus"></i>
                    </button>  -->
                </div>
        
                <div class="overflow-x-auto border border-gray-300 rounded-b-md 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">
                                    Order
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                    Amount
                                </th>
                                <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap ">
                                Date Due
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                    Date Paid
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                    Payment Method
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                    Comment
                                </th>
                                <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
                                    Actions
                                </th>
                            </tr>
                        </thead>
        
                        <!-- TABLE BODY -->
                        {% for payment in customer_payments %}
                            <tbody class="bg-white divide-y divide-gray-200">
                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                    <p class="text-secondosiblue">{{payment.order.order_id}}</p>
                                </td>
        
                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                    <p class="text-secondosiblue">${{payment.amount}}</p>
                                </td>

                                    
                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                    <p class="text-secondosiblue">{{payment.date_due}}</p>
                                </td>
        
                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                    {% if payment.date_paid %}
                                    <p class="text-secondosiblue">{{payment.date_paid}}</p>
                                    {% else %}
                                    <p class="text-red-500">UNPAID</p>
                                    {% endif %}
                                </td>
        
                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                    {% for type in payment.type.all %}
                                        <div
                                            class="flex items-center gap-2 justify-center cursor-pointer text-secondosiblue hover:text-gray-400 duration-300">
                                            <img src="{{type.image.url}}" class="w-[30px] rounded-md shadow-sm">
                                            <p class="underline">{{type.name}}</p>
                                        </div>
                                    {% endfor %}
                                </td>
        
                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                    <div class="w-full flex justify-center items-center">
                                        <div class="w-[30px] h-[30px] bg-gray-100 rounded-full flex justify-center items-center p-1 text-secondosiblue cursor-pointer hover:bg-secondosiblue hover:text-gray-100 duration-300 addPaymentCommentButton"
                                            title="Add Comment" data-modal-url="{% url 'add_payment_comment_modal' %}">
                                            <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">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                            </svg>
                                        </div>
                                    </div>
                                    <!-- <p class="text-secondosiblue">Comment</p> -->
                                </td>
        
                                <td class="px-6 py-4 text-center text-sm">
                                    <div class="flex justify-center items-center gap-3">
                                        <div data-modal-url="{% url 'edit_payment_modal' %}" class="editPaymentButton">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor"
                                                class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform cursor-pointer">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                                            </svg>
                                        </div>
        
                                        <div data-modal-url="{% url 'deletepaymentmodal' %}" class="deletePaymentButton">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor"
                                                class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform cursor-pointer">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                                            </svg>
                                        </div>
                                    </div>
                                </td>
                            </tbody>
                        {% endfor %}
                    </table>
                </div>
            </div>
        {% endif %}


    <button
        class="w-full text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500 duration-300 mt-5 deleteCustomerButton"
        data-modal-url="{% url 'deletecustomermodal' customer.id %}">Delete
        Customer</button>
</div>


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

{% endblock content %}