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


<div class="w-full xxlg1:w-[75%]">
    <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
        <h1 class="text-secondosiblue text-[25px]">My Tasks</h1>

        <!-- TASK FILTERING -->
        <div
            class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col l:flex-row justify-between gap-3 items-center">
            <div class="w-full l:w-fit flex flex-col l:flex-row justify-start items-center gap-3">
                <div class="relative h-fit w-full l:w-fit flex items-center">
                    <input type="text" placeholder="Enter Project Name"
                        class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full l:w-[300px] h-[40px] relative">
                    <button
                        class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
                        <i class="fa fa-search"></i>
                    </button>
                </div>

                <select name="" id=""
                    class="border border-gray-300 p-2 rounded-md outline-none w-full l:w-[160px] text-gray-500 h-[40px]">
                    <option value="" disabled selected>Status</option>
                    <option value="">Open</option>
                    <option value="">Working On</option>
                    <option value="">Closed</option>
                </select>

                <select name="" id=""
                    class="border border-gray-300 p-2 rounded-md outline-none w-full l:w-[160px] text-gray-500 h-[40px]">
                    <option value="" disabled selected>Assigned To</option>
                    <option value="">Nataly</option>
                    <option value="">Salim</option>
                    <option value="">Emile</option>
                    <option value="">Arze</option>
                </select>
            </div>
            <div class="w-full l:w-fit">
                <a href="{% url 'addtask' %}" class="w-full l:w-fit">
                    <button
                        class="w-full l: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
                        Task</button>
                </a>
            </div>
        </div>

        <!-- TASKS ON DESKTOP -->
        <div class="hidden md:block mt-5">
            <!-- TASKS TABLE -->
            {% for task in page_obj %}
            <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mb-5">
                <div class="w-full bg-white h-fit rounded-md border border-gray-200">
                    <!-- TABLE HEADER -->
                    <div class="w-full h-[70px] rounded-t-md grid grid-cols-2">
                        <a href="{% url 'detailed-task' task.task_id %}" class="h-[70px]">
                            <div
                                class="flex h-full justify-center items-center border-r border-b border-gray-200 px-3 {% if task.status == 'Open' %}bg-secondosiblue{% endif %}  {% if task.status == 'Working On' %}bg-yellow-500{% endif %}  {% if task.status == 'Closed' %}bg-green-700{% endif %} rounded-tl-md text-[17px] text-white text-center bg-opacity-70 hover:bg-opacity-100 duration-300">
                                <p>{{task.name}}</p>
                            </div>
                        </a>

                        <div class="grid grid-cols-3">
                            <div
                                class="flex justify-center items-center border-r border-b border-gray-200 text-white {% if task.status == 'Open' %}bg-secondosiblue{% endif %}  {% if task.status == 'Working On' %}bg-yellow-500{% endif %}  {% if task.status == 'Closed' %}bg-green-700{% endif %} bg-opacity-70">
                                <p>{{task.status}}</p>
                            </div>

                            <div
                                class="flex justify-center items-center border-r border-b border-gray-200 text-white {% if task.status == 'Open' %}bg-secondosiblue{% endif %}  {% if task.status == 'Working On' %}bg-yellow-500{% endif %}  {% if task.status == 'Closed' %}bg-green-700{% endif %} bg-opacity-70">
                                <p>{{task.start_date|date:"d-m-Y"}}</p>
                            </div>

                            <div
                                class="flex justify-center items-center border-r border-b border-gray-200 text-white {% if task.status == 'Open' %}bg-secondosiblue{% endif %}  {% if task.status == 'Working On' %}bg-yellow-500{% endif %}  {% if task.status == 'Closed' %}bg-green-700{% endif %} rounded-tr-md bg-opacity-70">
                                <p>{{task.end_date|date:"d-m-Y"}}</p>
                            </div>
                        </div>
                    </div>

                    <!-- TABLE BODY -->
                    <div class="w-full h-fit grid grid-cols-2">
                        <!-- LEFT SIDE OF TABLE BODY -->
                        <div class="h-fit bg-white p-3 rounded-bl-md">
                            <!-- 1st row -->
                            <div class="w-full flex flex-col gap-2">
                                <div class="flex justify-start items-center gap-2">
                                    <p class="text-gray-400  text-base">Project:</p>
                                    <p class="text-secondosiblue text-base">{{task.project.name}}</p>
                                </div>

                                <div class="flex justify-start items-center gap-2">
                                    <p class="text-gray-400  text-base">Epic:</p>
                                    <p class="text-secondosiblue text-base">{{task.epic.title}}</p>
                                </div>

                                <div class="flex justify-start items-center gap-2">
                                    <p class="text-gray-400  text-base">Assigned To:</p>
                                    <p class="text-secondosiblue text-base">{{task.assigned_to.user.first_name}}
                                        {{task.assigned_to.user.last_name}}</p>
                                </div>

                                <div class="flex justify-start items-center gap-2">
                                    <p class="text-gray-400  text-base">Files:</p>
                                    <p class="text-secondosiblue text-base"></p>
                                </div>
                                <div class="flex justify-start items-center gap-2">
                                    <p class="text-gray-400  text-base">Tags:</p>
                                    <p class="text-secondosiblue text-base"></p>
                                </div>

                                <div class="flex justify-start items-center gap-2">
                                    <p class="text-gray-400  text-base">Extra:</p>
                                    <p class="text-secondosiblue text-base">{{task.extra}}</p>
                                </div>
                            </div>
                        </div>

                        <!-- RIGHT SIDE OF TABLE BODY -->
                        <div class="h-fit bg-white grid grid-cols-3 rounded-br-md">
                            <button
                                class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Close</button>

                            <button
                                class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 updateStatusButton"
                                data-modal-url="{% url 'edittaskstatusmodal' task.task_id %}">Update
                                Status</button>

                            <button class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 ">Add
                                Time</button>

                            <button
                                class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 deleteTaskButton"
                                data-modal-url="{% url 'deletetaskmodal' task.id %}">Delete</button>

                            <a href="{% url 'edittask' task.task_id %}">
                                <button
                                    class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Edit</button>
                            </a>

                            <button
                                class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 showPointsButton"
                                data-modal-url="{% url 'showpoints' task.task_id  %}">Show
                                Points</button>

                            <button
                                class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 addPointButton"
                                data-modal-url="{% url 'addpointmodal' task.task_id %}">Add
                                Point</button>

                            <a href="{% url 'detailed-task' task.task_id %}">
                                <button
                                    class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Details</button>
                            </a>

                            <button
                                class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 rounded-br-md timelineButton"
                                data-modal-url="{% url 'timeline' task.task_id %}">Timeline</button>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- TASKS ON MOBILE -->
        <div class="block md:hidden mt-5">
            {% for task in page_obj %}
            <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mb-5">
                <div class="border border-gray-200 rounded-t-md">
                    <div class="w-full rounded-t-md">
                        <a href="{% url 'detailed-task' task.task_id %}">
                            <div
                                class="text-white {% if task.status == 'Open' %}bg-secondosiblue{% endif %}  {% if task.status == 'Working On' %}bg-yellow-500{% endif %} {% if task.status == 'Closed' %}bg-green-700{% endif %} border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm bg-opacity-70 rounded-t-md hover:bg-opacity-100 duration-300">
                                <p>{{task.name}}</p>
                            </div>
                        </a>
                    </div>


                    <div class="grid grid-cols-3 border-t border-gray-200">
                        <div
                            class="text-white {% if task.status == 'Open' %} bg-secondosiblue {% endif %} {% if task.status == 'Working On' %} bg-yellow-500 {% endif %} {% if task.status == 'Closed' %} bg-green-700{% endif %} border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm bg-opacity-70">
                            <p>{{task.status}}</p>
                        </div>

                        <div
                            class="text-white {% if task.status == 'Open' %} bg-secondosiblue {% endif %} {% if task.status == 'Working On' %} bg-yellow-500 {% endif %} {% if task.status == 'Closed' %} bg-green-700{% endif %} border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm bg-opacity-70">
                            <p>{{task.start_date|date:"d-m-Y"}}</p>
                        </div>

                        <div
                            class="text-white {% if task.status == 'Open' %} bg-secondosiblue {% endif %} {% if task.status == 'Working On' %} bg-yellow-500 {% endif %} {% if task.status == 'Closed' %} bg-green-700{% endif %} border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm bg-opacity-70">
                            <p>{{task.end_date|date:"d-m-Y"}}</p>
                        </div>
                    </div>


                    <div class="w-full flex flex-col gap-2 p-3">
                        <div class="flex justify-start items-center gap-2">
                            <p class="text-gray-400  text-base">Project:</p>
                            <p class="text-secondosiblue text-base">{{task.project.name}}</p>
                        </div>

                        <div class="flex justify-start items-center gap-2">
                            <p class="text-gray-400  text-base">Epic:</p>
                            <p class="text-secondosiblue text-base">{{task.epic.title}}</p>
                        </div>

                        <div class="flex justify-start items-center gap-2">
                            <p class="text-gray-400  text-base">Assigned To:</p>
                            <p class="text-secondosiblue text-base">{{task.assigned_to.user.first_name}}
                                {{task.assigned_to.user.last_name}}</p>
                        </div>

                        <div class="flex justify-start items-center gap-2">
                            <p class="text-gray-400  text-base">Extra:</p>
                            <p class="text-secondosiblue text-base">{{task.extra}}</p>
                        </div>
                    </div>


                    <div
                        class="w-full bg-gray-100 flex justify-between items-center py-3 px-3 text-secondosiblue actionsButton">
                        <p>Actions</p>
                        <i class="fa fa-angle-down" style="font-size: 20px;"></i>
                        <i class="fa fa-angle-up" style="font-size: 20px; display: none;"></i>
                    </div>


                    <div class="grid-cols-3 actionsContainer hidden">
                        <button
                            class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500">Close</button>

                        <button
                            class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 updateStatusButton"
                            data-modal-url="{% url 'edittaskstatusmodal' task.task_id %}">Update
                            Status</button>

                        <button class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500">Add
                            Time</button>

                        <button
                            class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 deleteTaskButton"
                            data-modal-url="{% url 'deletetaskmodal' task.id %}">Delete</button>

                        <a href="{% url 'edittask' task.task_id %}">
                            <button
                                class="w-full p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500">Edit</button>
                        </a>

                        <button
                            class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 showPointsButton"
                            data-modal-url="{% url 'showpoints' task.task_id  %}">Show
                            Points</button>

                        <button
                            class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 addPointButton"
                            data-modal-url="{% url 'addpointmodal' task.task_id %}">Add
                            Point</button>

                        <a href="{% url 'detailed-task' task.task_id %}">
                            <button
                                class="w-full p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500">Details</button>
                        </a>

                        <button
                            class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 timelineButton"
                            data-modal-url="{% url 'timeline' task.task_id %}">Timeline</button>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>



        <!-- PAGINATION -->
        <div class="flex justify-center items-center mt-10">
            <div class="flex">
                {% if page_obj.has_previous %}
                <a href="?page={{ page_obj.previous_page_number }}" class="w-[40px] h-[40px] rounded-l-md border border-gray-200 flex justify-center items-center text-secondosiblue p-1 cursor-pointer hover:bg-gray-100 duration-300">
                    <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="M15.75 19.5 8.25 12l7.5-7.5" />
                    </svg>
                </a>
                {% endif %}
                {% for num in page_range %}
                <a href="?page={{ num }}" class="w-[40px] h-[40px] border border-gray-200 flex justify-center items-center text-secondosiblue p-1 cursor-pointer hover:bg-gray-100 duration-300 {% if page_obj.number == num %} bg-gray-200 {% endif %}">
                    <p>{{ num }}</p>
                </a>
                {% endfor %}
                {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}" class="w-[40px] h-[40px] rounded-r-md border border-gray-200 flex justify-center items-center text-secondosiblue p-1 cursor-pointer hover:bg-gray-100 duration-300">
                    <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="m8.25 4.5 7.5 7.5-7.5 7.5" />
                    </svg>
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>



{% endblock content %}