{% 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">
            Edit Contact
        </h1>

        <form method="POST" action="{% url 'editaddressbook' address.id %}">
            {% 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" value="{{ address.first_name }}"
                        class="w-full h-[50px] py-1 px-3 border border-gray-300 rounded-md mt-1" required>
                </div>

                <div class="w-full">
                    <label class="text-gray-500">Middle Name:</label>
                    <input name="middle_name" type="text" value="{{ address.middle_name }}"
                        class="w-full h-[50px] py-1 px-3 border border-gray-300 rounded-md mt-1">
                </div>

                <div class="w-full">
                    <label class="text-gray-500">Last Name:</label>
                    <input name="last_name" type="text" value="{{ address.last_name }}"
                        class="w-full h-[50px] py-1 px-3 border border-gray-300 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 rounded-md mt-1">
                        <option value="">Select Country</option>
                        {% for country in countries %}
                            <option value="{{ country.id }}"
                                {% if address.country and country.id == address.country.id %}selected{% endif %}>
                                {{ 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 }}"
                                {% if group in address.group.all %}selected{% endif %}>
                                {{ group.name }}
                            </option>
                        {% endfor %}
                    </select>
                    <p class="text-sm text-gray-400 mt-1">Hold down Ctrl (Windows) or Cmd (Mac) to select multiple groups.</p>
                </div>
                <!-- Contacts -->
                <div class="w-full">
                    <label class="text-gray-500">Contacts:</label>
                    <div id="contact-fields" class="flex flex-col gap-3">
                        {% for contact in address.contact_set.all %}
                        <div class="flex gap-3 contact-block">
                            <select name="contact_type[]" class="border border-gray-300 rounded-md px-2 py-1">
                                {% for type, label in contact.TYPE_CHOICES %}
                                    <option value="{{ type }}"
                                        {% if contact.type == type %}selected{% endif %}>{{ label }}</option>
                                {% endfor %}
                            </select>
                            <input type="text" name="contact_value[]" value="{{ contact.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>
                        {% endfor %}
                    </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-4">
                    <button type="submit"
                        class="w-fit bg-osiblue border border-osiblue rounded-md text-white text-xl px-5 py-1 hover:bg-white hover:text-osiblue duration-300">Save</button>
                </div>

            </div>
        </form>
    </div>
</div>

<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);
    });

    document.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-contact')) {
            e.target.closest('.contact-block').remove();
        }
    });
</script>

{% endblock content %}