{% extends "main.html" %}
{%load static%}
{% block content %}
<!-- NOTES SECTION -->
<div class="w-full h-fit flex justify-between items-center px-10 pb-5">
    <div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
        <div class="w-full flex justify-between items-center">
            <div>
                <p class="text-base text-gray-500">Recent Note:</p>
                <p class="text-slate-700">Send an Email to Salim.</p>
            </div>
            <div class="flex justify-end items-center gap-4">
                <button
                    class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                    id="showNotesButton">Show
                    Notes</button>
                <button
                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
                    id="addNoteButton">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>

        <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
        <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
            id="notesContainer">
            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
                <p class="text-base text-slate-800">Send an Email to Salim.</p>
            </div>

            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
                <p class="text-base text-slate-80">Contact the client.</p>
            </div>

            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
            </div>

            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
            </div>

            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
            </div>

            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
            </div>
        </div>
    </div>
</div>

<!-- DAILY REPORTS USERS ACTIVITY SECTION -->
<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
    <!-- LEFT SIDE / USERS SECTION -->
    <div class="w-[74.5%]">
        <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
            <h1 class="text-slate-800 text-[30px] font-semibold">Daily Report</h1>

            <!-- FILTERING -->
            <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center">
                <div class="flex justify-start items-center gap-5">
                    <div class="relative h-fit w-fit flex items-center">
                        <input type="text" placeholder="Enter Staff Username"
                            class="py-2 px-3 border border-gray-300 rounded-md outline-none 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>
                </div>
                <div>
                    <a href="{% url 'adddailyreport' %}">
                        <button
                            class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Add
                            Daily Report</button>
                    </a>
                </div>
            </div>

            <!-- DAILY REPORTS -->
            <div class="mt-5 w-full h-fit">
                <div class="w-full border-x border-t border-gray-300 rounded-t-md ">
                    <!-- TABLE HEADER -->
                    <div
                        class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md">
                        <div class="w-full h-full flex justify-start items-center px-4">
                            <p class="text-slate-800 text-xl">Report By <span
                                    class="text-blue-500 font-semibold">Nataly.aw</span> On <span
                                    class="text-blue-500 font-semibold">22-9-2023</span></p>
                        </div>
                    </div>

                    <!-- TABLE BODY -->
                    <div class="w-full">
                        <!-- 1st row -->
                        <div class="w-full h-fit flex justify-between items-center border-b border-gray-300">
                            <div
                                class="w-full h-full flex justify-start items-center p-4">
                                <p class="text-gray-600 font-light">
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni possimus esse ipsa
                                    repellat quia velit ducimus temporibus omnis quibusdam inventore ea, consequuntur
                                    exercitationem molestias. Repellat architecto a laboriosam debitis natus?
                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem amet dicta
                                    repudiandae possimus? Natus, possimus quae numquam nostrum corporis quidem vitae
                                    necessitatibus perferendis tempore. Praesentium, omnis? Animi non enim sint!
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="mt-5 w-full h-fit">
                <div class="w-full border-x border-t border-gray-300 rounded-t-md ">
                    <!-- TABLE HEADER -->
                    <div
                        class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md">
                        <div class="w-full h-full flex justify-start items-center px-4">
                            <p class="text-slate-800 text-xl">Report By <span
                                    class="text-blue-500 font-semibold">Aya.rf</span> On <span
                                    class="text-blue-500 font-semibold">25-9-2023</span></p>
                        </div>
                    </div>

                    <!-- TABLE BODY -->
                    <div class="w-full">
                        <!-- 1st row -->
                        <div class="w-full h-fit flex justify-between items-center border-b border-gray-300">
                            <div
                                class="w-full h-full flex justify-start items-center p-4">
                                <p class="text-gray-600 font-light">
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni possimus esse ipsa
                                    repellat quia velit ducimus temporibus omnis quibusdam inventore ea, consequuntur
                                    exercitationem molestias. Repellat architecto a laboriosam debitis natus?
                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem amet dicta
                                    repudiandae possimus? Natus, possimus quae numquam nostrum corporis quidem vitae
                                    necessitatibus perferendis tempore. Praesentium, omnis? Animi non enim sint!
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- RIGHT SIDE / USERS ACTIVITY -->
    <div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5">
        <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
        <div class="w-full h-fit mt-2">


            {% for latest in latest_statuses %}
            <!-- 1ST ROW -->
            <div class="w-full flex flex-col py-3">
                <div class="w-full flex flex-col justify-center items-start gap-2">
                    <div class="w-full flex justify-between items-center gap-2">
                        <div class="flex justify-start gap-2">
                            <div class="w-[45px] h-[45px] rounded-full">
                                <img src='{{latest.staff.image.url}}' alt="user profile"
                                    class="w-full h-full object-cover rounded-full">
                            </div>
                            <div class="flex flex-col">
                                <h1 class="text-sm text-slate-700 font-semibold">{{latest.staff.first_name}}
                                    {{latest.staff.last_name}}</h1>
                                <p class="text-sm text-gray-500">{{latest.time}}</p>
                            </div>
                        </div>
                        <div class="cursor-pointer">
                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="w-full">
                        <p class="text-sm text-gray-500">{{latest.text}}</p>
                    </div>

                    <!-- Add comment section -->
                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
                        <input type="text" placeholder="Add Comment..."
                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
                        </button>
                    </div>
                </div>
            </div>
            {% endfor %}


        </div>
    </div>
</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>
</div>

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

<!-- TO SHOW ALL THE ADDED NOTES BY THE USER WHEN CLICKING ON THE SHOW NOTES BUTTON -->
<script type="text/javascript" src='{% static "js/show-notes.js" %}'></script>

{% endblock content %}