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" id="positionsContainer">

                {% 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">Junior Software Engineer</span></p>
                        <p class="text-gray-500">Start Date: <span
                                class="text-secondosiblue">20-1-2020</span></p>
                        <p class="text-gray-500">End Date: <span
                                class="text-secondosiblue">20-1-2020</span></p>
                    </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 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>
    </div>
</div>

<script>
    document.getElementById('addNewPosition').addEventListener('click', function () {
    const container = document.getElementById('positionsContainer');
    const initialPositionContainer = document.querySelector('.initialPositionContainer');
    
    const newPositionContainer = initialPositionContainer.cloneNode(true);
    newPositionContainer.classList.remove('hidden');
    newPositionContainer.style.display = 'flex';

    const selectElement = newPositionContainer.querySelector('select');
    selectElement.name = 'position[]';

    const dateInputElement = newPositionContainer.querySelector('input[type="date"]');
    dateInputElement.name = 'date[]';

    const removeButton = newPositionContainer.querySelector('.removePositionOption');
    removeButton.addEventListener('click', function() {
        newPositionContainer.remove();
    });

    container.appendChild(newPositionContainer);
});
</script>


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


<!-- THE SCRIPT FOR THE EPICS BAR -->
<script type="text/javascript" src='{% static "js/epics.js" %}'></script>

{% endblock content %}