{% extends "main.html" %}
{%load static%}
{% block title %}My Projects{% endblock %}
{% 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-[30px] font-semibold">My Projects</h1>

        <!-- PROJECT FILTERING -->
        <div
            class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col md:flex-row justify-between items-center gap-3">
            <div class="w-full md:w-fit flex flex-col md:flex-row justify-start items-center gap-3">
                <div class="relative h-fit w-full md: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 md: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 md: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>
            </div>
            <div class="w-full md:w-fit">
                <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">Create
                        Project</button>
                </a>
            </div>
        </div>
    </div>



    <div class="w-full flex flex-col gap-5 mt-5">
        {% for project in projects %}
        <div class="w-full h-fit bg-white rounded-md shadow-md p-3">
            <p id="projectId" class="hidden">{{project.id}}</p>
            <div class="w-full bg-white h-fit rounded-md border border-gray-200">


                <div class="w-full rounded-t-md relative">
                    {% if project.status == 'Completed' %}
                    <div
                        class="flex justify-center items-center border-r border-b border-gray-200 bg-green-700 rounded-t-md text-[18px] text-white font-semibold text-center p-3">
                        <p>{{project.name}}</p>
                    </div>
                    {% endif %}

                    {% if project.status == 'Cancelled' %}
                    <div
                        class="flex justify-center items-center border-r border-b border-gray-200 bg-red-500 rounded-t-md text-[18px] text-white font-semibold text-center p-3">
                        <p>{{project.name}}</p>
                    </div>
                    {% endif %}

                    {% if project.status == 'Active' %}
                    <div
                        class="flex justify-center items-center border-r border-b border-gray-200 bg-orange-500 rounded-t-md text-[18px] text-white font-semibold text-center p-3">
                        <p>{{project.name}}</p>
                    </div>
                    {% endif %}


                    {% if project.status == 'Pending' %}
                    <div
                        class="flex justify-center items-center border-r border-b border-gray-200 bg-yellow-500 rounded-t-md text-[18px] text-white font-semibold text-center p-3">
                        <p>{{project.name}}</p>
                    </div>
                    {% endif %}
                </div>

                <p class="hidden startDate">{{project.start_date}}</p>
                <p class="hidden endDate">{{project.end_date}}</p>

                <div class="w-full h-[8px] bg-gray-100 mainBar rounded-md xll:rounded-none">
                    <div class="h-full rounded-md xll:rounded-none progressBar">
                    </div>
                </div>

                <div class="w-full grid grid-cols-2 border-b border-gray-200">
                    <div
                        class="border-r border-gray-200 flex justify-center items-center gap-3 text-center p-3 text-secondosiblue">
                        <img src="{% static 'images/icons/tasks.png' %}" class="w-[35px]">
                        <p>Open Tasks: <span class="font-semibold">6</span></p>
                    </div>

                    <div class="flex justify-center items-center gap-3 text-center p-3 text-secondosiblue">
                        <img src="{% static 'images/icons/time.png' %}" class="w-[35px]">
                        <p>Total Time: <span class="font-semibold">{{project.total_time_worked_hours}}hr
                                {{project.total_time_worked_hours}}min {{project.total_time_worked_seconds}}sec</span>
                        </p>
                    </div>
                </div>

                <div
                    class="p-3 flex justify-center items-center text-center text-secondosiblue font-light border-b border-gray-200">
                    {% if project.note_set.exists %}
                    {% with last_note=project.note_set.last %}
                    <p>{{ last_note.text }}</p>
                    {% endwith %}
                    {% else %}
                    <p>No recent note</p>
                    {% endif %}
                </div>

                <div class="w-full grid grid-cols-4">
                    <a href="{% url 'detailed-project' project.project_id %}"
                        class="p-3 border-r border-gray-200 text-base bg-gray-50 text-secondosiblue flex justify-center items-center">View</a>

                    <a href="{% url 'editproject' project.project_id %}"
                        class="p-3 border-r border-gray-200 text-base bg-gray-50 text-secondosiblue flex justify-center items-center">Edit</a>

                    <button
                        class="p-3 border-r border-gray-200 text-base bg-gray-50 text-secondosiblue deleteProjectButton"
                        data-modal-url="{% url 'deleteprojectmodal' project.id %}">Delete</button>

                    <button class="p-3 text-base bg-gray-50 text-secondosiblue">Update Status</button>
                </div>
            </div>

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


<!-- POPUP MODAL -->
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
            id="closeModalButton">
            <i class="fa fa-close"></i>
        </button>
        <iframe id="popupModalFrame" frameborder="0"></iframe>
    </div>
</div>

<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>


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

<!-- TO DISPLAY THE PROJECT PROGRESS BAR BASED ON ITS REMAINING TIME -->
<script type="text/javascript" src='{% static "js/calculate-project-time.js" %}'></script>

{% endblock content %}