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.
114 lines
5.4 KiB
HTML
114 lines
5.4 KiB
HTML
{% extends "main.html" %}
|
|
{%load static%}
|
|
{% block content %}
|
|
|
|
<div class="w-full px-5 s:px-9 mb-5">
|
|
<div class="w-full h-full shadow-md rounded-md py-5 px-3 bg-white">
|
|
<h1 class="text-3xl text-secondosiblue text-center font-semibold">
|
|
Add Contact
|
|
</h1>
|
|
|
|
<form method="POST" action="{% url 'addaddressbook' %}">
|
|
{% csrf_token %}
|
|
<div class="w-full flex flex-col gap-5 justify-center items-center mt-5">
|
|
|
|
<div class="w-full">
|
|
<label class="text-gray-500">First Name:</label>
|
|
<input name="first_name" type="text"
|
|
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1" required>
|
|
</div>
|
|
<div class="w-full">
|
|
<label class="text-gray-500">Middle Name:</label>
|
|
<input name="middle_name" type="text"
|
|
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1" required>
|
|
</div>
|
|
<div class="w-full">
|
|
<label class="text-gray-500">Last Name:</label>
|
|
<input name="last_name" type="text"
|
|
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1" required>
|
|
</div>
|
|
<div class="w-full">
|
|
<label class="text-gray-500">Country:</label>
|
|
<select name="country" class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
|
|
<option value="">Select Country</option>
|
|
{% for country in countries %}
|
|
<option value="{{ country.id }}">{{ country.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="w-full">
|
|
<label class="text-gray-500">Groups:</label>
|
|
<select name="groups" multiple
|
|
class="w-full h-[150px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
|
|
{% for group in groups %}
|
|
<option value="{{ group.id }}">{{ group.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<p class="text-sm text-gray-400 mt-1">Hold down Ctrl (Windows) or Command (Mac) to select multiple groups.</p>
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<label class="text-gray-500">Contacts:</label>
|
|
<div id="contact-fields" class="flex flex-col gap-3">
|
|
<!-- One contact field block (template for duplication) -->
|
|
<div class="flex gap-3 contact-block">
|
|
<select name="contact_type[]" class="border border-gray-300 rounded-md px-2 py-1">
|
|
<option value="Email">Email</option>
|
|
<option value="Mobile">Mobile</option>
|
|
<option value="Phone">Phone</option>
|
|
<option value="Whatsapp">Whatsapp</option>
|
|
</select>
|
|
<input type="text" name="contact_value[]" placeholder="Enter contact"
|
|
class="flex-1 border border-gray-300 rounded-md px-2 py-1" />
|
|
<button type="button" class="remove-contact text-red-500">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" id="add-contact"
|
|
class="mt-2 text-osiblue underline hover:text-blue-800">+ Add another contact</button>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-full flex justify-center items-center mt-3">
|
|
<button type="submit"
|
|
class="w-fit py-1 px-3 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>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-------------- JS SCRIPTS --------------->
|
|
<script type="text/javascript" src='{% static "js/inputs/upload-input-tag.js" %}'></script>
|
|
|
|
<script>
|
|
document.getElementById('add-contact').addEventListener('click', function () {
|
|
const container = document.getElementById('contact-fields');
|
|
|
|
const newBlock = document.createElement('div');
|
|
newBlock.classList.add('flex', 'gap-3', 'contact-block', 'mt-2');
|
|
newBlock.innerHTML = `
|
|
<select name="contact_type[]" class="border border-gray-300 rounded-md px-2 py-1">
|
|
<option value="Email">Email</option>
|
|
<option value="Mobile">Mobile</option>
|
|
<option value="Phone">Phone</option>
|
|
<option value="Whatsapp">Whatsapp</option>
|
|
</select>
|
|
<input type="text" name="contact_value[]" placeholder="Enter contact"
|
|
class="flex-1 border border-gray-300 rounded-md px-2 py-1" />
|
|
<button type="button" class="remove-contact text-red-500">✕</button>
|
|
`;
|
|
container.appendChild(newBlock);
|
|
});
|
|
|
|
// Handle removing contact blocks
|
|
document.addEventListener('click', function (e) {
|
|
if (e.target.classList.contains('remove-contact')) {
|
|
e.target.closest('.contact-block').remove();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
{% endblock content %} |