You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

157 lines
7.9 KiB
HTML

{% extends "main.html" %}
{%load static%}
{% block content %}
<div class="w-full px-5 s:px-9 mb-4">
<div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
<h1 class="text-3xl text-slate-800 text-center font-semibold">
Edit Staff
</h1>
<form method="POST" action="{% url 'editstaff' staff.staff_id %}" enctype="multipart/form-data">
{% csrf_token %}
<div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
<div class="w-[70px] s:w-[100px] h-[70px] s:h-[100px] rounded-full border border-gray-200 mt-2" id="image-container">
{% if staff.image %}
<img src="{{staff.image.url}}" alt="" srcset="" id="" class="rounded-full w-full h-full">
{% else %}
<img src="{% static 'images/default-user.png' %}" alt="" srcset="" id="" class="rounded-full w-full h-full">
{% endif %}
</div>
<div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md">
<div class="flex items-center justify-between">
<input name="image" type="file" id="actual-btn" accept="image/*" hidden />
<span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
New Profile Picture</span>
<label for="actual-btn"
class="bg-transparent text-gray-500 border border-white px-4 py-2 h-14 cursor-pointer flex items-center"><i
class="fa fa-upload" style="font-size: 20px;"></i></label>
</div>
</div>
<!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN AND THE UPLOADED IMAGE WILL APPEAR IN THE USER PROFILE IMAGE CONTAINER -->
<script>
const fileInput = document.getElementById('actual-btn');
const fileNameSpan = document.getElementById('file-name');
const imageContainer = document.getElementById('image-container');
fileInput.addEventListener('change', (event) => {
const selectedFiles = event.target.files;
if (selectedFiles.length > 0) {
const file = selectedFiles[0];
const fileReader = new FileReader();
fileReader.onload = function () {
const imgElement = document.createElement('img');
imgElement.src = fileReader.result;
imgElement.alt = 'Uploaded Image';
imgElement.classList.add('w-full', 'h-full', 'rounded-full', 'object-cover');
// Clear any previous images and append the new one
imageContainer.innerHTML = '';
imageContainer.appendChild(imgElement);
// Update the text in the file input
fileNameSpan.textContent = file.name;
};
// Read the selected file as a data URL
fileReader.readAsDataURL(file);
} else {
fileNameSpan.textContent = 'Upload Profile Picture';
imageContainer.innerHTML = ''; // Clear the container if no file is selected
}
});
</script>
<div class="w-full mt-4">
<label class="text-gray-500 text-xl">First Name:</label>
<input name="first_name" type="text" placeholder="First Name"
value="{{staff.user.first_name}}"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2" required>
</div>
<div class="w-full mt-4">
<label class="text-gray-500 text-xl">Last Name:</label>
<input name="last_name" type="text" placeholder="Last Name"
value="{{staff.user.last_name}}"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2" required>
</div>
<div class="w-full mt-4">
<label class="text-gray-500 text-xl">Email:</label>
<input name="email" type="email" placeholder="Email"
value="{{staff.user.email}}"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2" required>
</div>
<div class="w-full mt-4">
<label class="text-gray-500 text-xl">Mobile Number:</label>
<input name="mobile_number" type="number" placeholder="Mobile Number"
value="{{staff.mobile_number}}"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2" required>
</div>
<div class="w-full mt-4">
<label class="text-gray-500 text-xl">Position:</label>
<select name="staff_position" id=""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-2">
{% for position in positions %}
<option {% if current_position and current_position.id == position.id %}selected{% endif %} value="{{position.id}}"> {{position.name}}</option>
{% endfor %}
</select>
</div>
{% if staff.active %}
<div class="w-full flex justify-start items-center gap-2 mt-2">
<input checked type="checkbox" name="active">
<p class="text-gray-500 text-xl">Active</p>
</div>
{% else %}
<div class="w-full flex justify-start items-center gap-2 mt-2">
<input type="checkbox" name="active">
<p class="text-gray-500 text-xl">Active</p>
</div>
{% endif %}
{% if staff.intern %}
<div class="w-full flex justify-start items-center gap-2 mt-2">
<input checked type="checkbox" name="intern">
<p class="text-gray-500 text-xl">Intern</p>
</div>
{% else %}
<div class="w-full flex justify-start items-center gap-2 mt-2">
<input type="checkbox" name="intern">
<p class="text-gray-500 text-xl">Intern</p>
</div>
{% endif %}
<div class="w-full flex justify-center items-center mt-3">
<button type="submit"
class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Save</button>
</div>
</div>
</form>
</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>
{% endblock content %}