{% load static %}

<style>
    .select2-selection__clear {
        display: none !important;
    }

    .btn-clear {
        text-decoration: none !important;
        border: none !important;
        box-shadow: none !important;
    }
</style>

<div class="row g-0">
    <div class="card mb-3">
        <div class="card-header">
            <h5 class="mb-0">Email Setup</h5>
        </div>

        <form action="{% url 'email_setup' master_id %}" method="POST" id="email-setup-form" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="card-body bg-body-tertiary">
                {% if user.is_superuser %}
                    <div class="row g-3">
                        <!-- Loop for different email categories -->
                        {% for category, label in categories.items %}
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div>
                                    <div class="d-flex justify-content-between">
                                        <label class="form-label fs-5" for="{{ category }}">{{ label }}</label>
                                        <button class="btn btn-sm btn-link btn-clear text-danger pe-0 fs-6" type="button">Clear Selection</button>
                                    </div>
                                    <select class="form-select select2"
                                            name="{{ category }}[]"
                                            id="{{ category }}"
                                            multiple
                                            data-placeholder="-- Select Email --">
                                        {% if user_emails %}
                                            <option value="">-- Select Email --</option>
                                            {% for email in user_emails %}
                                                <option value="{{ email.secret }}"
                                                    {% if category in email_settings and email.secret in email_settings[category] %}
                                                        selected
                                                    {% endif %}>
                                                    {{ email.secret }}
                                                </option>
                                            {% endfor %}
                                        {% else %}
                                            <option value="">No Email Found</option>
                                        {% endif %}
                                    </select>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <div class="card-footer text-end">
                <button type="submit" class="btn btn-primary me-2">Update</button>
                <button type="button" class="btn btn-secondary" onclick="window.location.href='{% url 'dashboard' %}'">Cancel</button>
            </div>
        </form>
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#email-setup-form").validate({
            submitHandler: function(_form) {
                $('#email-setup-form').find('button[type=submit]').attr('disabled', 'disabled');
                _form.submit();
            }
        });

        $('.btn-clear').on('click', function() {
            const $select = $(this).closest('div').next('select');
            $select.val(null).trigger('change'); // Clear selection and update Select2 UI
        });
    });
</script>