newosinadjango/osinaweb/osinacore/templates/details_templates/staff-details.html

{% 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">
    <div class="w-full bg-osiblue rounded-t-md flex flex-col justify-center items-center py-2 gap-3 mt-[50px]">
        <div class="w-[70px] s:w-[100px] h-[70px] s:h-[100px] rounded-full mt-[-50px] border border-gray-300">
            <img src="{{staff.image.url}}" alt="" class="w-full h-full object-cover rounded-full">
        </div>
        <h1 class="text-2xl text-white font-semibold">{{staff.user.first_name}} {{staff.user.last_name}}</h1>
    </div>
    <div class="w-full h-fit flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-3 mt-4">
        <div class="w-full s:w-fit flex flex-col s:flex-row justify-end items-center gap-3">
            <button
                class="w-full s:w-fit 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 deleteStaffButton"
                data-modal-url="{% url 'deletestaffmodal' staff.id %}">Delete
                User</button>
            <a href="{% url 'editstaff' staff.staff_id %}" class="w-full s:w-fit">
                <button
                    class="w-full s: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
                    User</button>
            </a>
        </div>
    </div>
    <div class="w-full flex flex-col gap-4 mt-5">

        <div>
            <p class="text-gray-500 text-xl">Username: <span
                    class="text-slate-800 text-xl font-semibold">{{staff.user.username}}</span></p>
        </div>
        <div>
            <p class="text-gray-500 text-xl">First Name: <span
                    class="text-slate-800 text-xl font-semibold">{{staff.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">{{staff.user.last_name}}</span></p>
        </div>

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

        <div>
            <p class="text-gray-500 text-xl">Active: <span
                    class="text-slate-800 text-xl font-semibold">{{staff.active}}</span></p>
        </div>
        <div>
            <p class="text-gray-500 text-xl">Intern: <span
                    class="text-slate-800 text-xl font-semibold">{{staff.intern}}</span></p>
        </div>


        <div class="w-full">
            <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">Positions</p>
                </div>
            </div>

            <div class="w-full flex flex-col gap-3 mt-3">
                {% for position in positions %}
                <div
                    class="w-full p-3 bg-gray-50 border border-gray-100 rounded-md flex justify-between items-center gap-3">
                    <div class="flex flex-col">
                        <p class="text-gray-500">Position: <span class="text-secondosiblue">{{position.position}}</span>
                        </p>
                        <p class="text-gray-500">Start Date: <span
                                class="text-secondosiblue">{{position.start_date}}</span></p>
                                 {% if not position.end_date %} - Present {% endif %}
                        {% if position.end_date %}
                        <p class="text-gray-500">End Date: <span class="text-secondosiblue">{{position.end_date}}</span>
                        </p>
                        {% endif %}
                    </div>

                    <div class="w-[30px] h-[30px] rounded-full bg-secondosiblue border border-secondosiblue flex justify-center items-center gap-1 text-white cursor-pointer hover:bg-transparent hover:text-secondosiblue duration-300 delete"
                        data-modal-url="{% url 'deletestaffpositionmodal' %}">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                        </svg>
                    </div>
                </div>
                {% endfor %}
            </div>

            <form method="POST">
                {% csrf_token %}
                <div class="w-full flex flex-col gap-3 mt-3" id="positionsContainer">
                    <div class="w-full bg-gray-50 border border-gray-100 rounded-md flex items-center gap-3 p-3 initialPositionContainer"
                        style="display: none;">
                        <div class="w-full grid grid-cols-1 md:grid-cols-3 gap-3">
                            <div>
                                <label class="text-gray-500">Position:</label>
                                <select 
                                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
                                    <option disabled selected>Select Position</option>
                                    {% for position in jobpositions %}
                                    <option value="{{position.id}}">{{position.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div>
                                <label class="text-gray-500">Start Date:</label>
                                <input type="date" 
                                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
                            </div>

                            <div>
                                <label class="text-gray-500">End Date:</label>
                                <input type="date" 
                                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
                            </div>
                        </div>

                        <div
                            class="w-[30px] h-[30px] rounded-full bg-secondosiblue border border-secondosiblue flex justify-center items-center gap-1 text-white cursor-pointer hover:bg-transparent hover:text-secondosiblue duration-300 removePositionOption">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                            </svg>
                        </div>
                    </div>
                </div>

                <div class="w-full bg-gray-50 shadow-md rounded-md p-3 flex justify-start items-center gap-1 cursor-pointer mt-3"
                    id="addNewPosition">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-7 text-secondosiblue">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                    </svg>
                    <p class="text-secondosiblue hover:underline duration-300">Add New Position</p>
                </div>

                <div class="w-full flex justify-center items-center mt-3 hidden" id="submitButton">
                    <button type="submit"
                        class="w-fit py-1 px-5 bg-osiblue rounded-md outline-none text-white border border-osiblue text-xl cursor-pointer hover:bg-white hover:text-osiblue duration-300">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>



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


<script type="text/javascript" src='{% static "js/add-staffs-position-in-staffs-details.js" %}'></script>

{% endblock content %}