{% extends "frontend/base.html" %}
{% load i18n %}
{% block html_title %}
    {% block page_title %}
        {% translate "Create a new organization" %}
    {% endblock page_title %}
{% endblock html_title %}
{% block content %}
    <section class="section">
        <form method="post" class="form form-vertical">
            <div class="card">
                <div class="card-content">
                    <div class="form-body card-body">
                        <div class="row">
                            {% include "frontend/forms/errors.html" %}
                            {% csrf_token %}
                            {{ form.name.as_field_group }}
                        </div>
                    </div>
                </div>
            </div>
            {% if form.billing_processing_choice %}
                <div class="card">
                    <div class="card-content">
                        <div class="card-header">
                            <h4 class="card-title">{% translate "Billing Information" %}</h4>
                        </div>
                        <div class="form-body card-body">
                            <div class="row">
                                {{ form.billing_processing_choice.as_field_group }}
                                <div id="existing_billing_address_section" class="mt-3">{{ form.existing_odoo_address_id.as_field_group }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
            <div id="new_billing_address_section">
                <div class="card">
                    <div class="card-content">
                        <div class="card-header">
                            <h4 class="card-title">{% translate "Invoice Address" %}</h4>
                        </div>
                        <div class="form-body card-body">
                            <div class="row">
                                {{ form.invoice_street.as_field_group }}
                                {{ form.invoice_street2.as_field_group }}
                                <div class="col-md-2">{{ form.invoice_zip.as_field_group }}</div>
                                <div class="col-md-10">{{ form.invoice_city.as_field_group }}</div>
                                {{ form.invoice_country.as_field_group }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="card-header">
                            <h4 class="card-title">{% translate "Invoice Contact" %}</h4>
                        </div>
                        <div class="form-body card-body">
                            <div class="row">
                                {{ form.invoice_email.as_field_group }}
                                {{ form.invoice_phone.as_field_group }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-content">
                <div class="card-body">
                    <div class="col-sm-12 d-flex justify-content-end">
                        <button class="btn btn-primary me-1 mb-1" type="submit">{% translate "Create Organization" %}</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const choiceRadios = document.querySelectorAll('[name="billing_processing_choice"]')
            const existingSection = document.getElementById('existing_billing_address_section')
            const newSection = document.getElementById('new_billing_address_section')
            const existingAddressField = document.querySelector('[name="existing_odoo_address_id"]')

            const toggleSections = () => {
                let selectedValue = 'new'
                const checkedRadio = document.querySelector('[name="billing_processing_choice"]:checked')
                if (checkedRadio) {
                    selectedValue = checkedRadio.value
                }

                if (selectedValue === 'existing') {
                    if (existingSection) existingSection.style.display = '';
                    if (newSection) newSection.style.display = 'none';
                } else {
                    if (existingSection) existingSection.style.display = 'none';
                    if (newSection) newSection.style.display = '';
                }
            }

            if (choiceRadios.length > 0 && existingSection && newSection) {
                toggleSections()
                choiceRadios.forEach((radio) => {
                    radio.addEventListener('change', toggleSections)
                })
            } else {
                // No existing addresses found, a new address has to be entered.
                if (existingSection) existingSection.style.display = 'none'
                if (newSection) newSection.style.display = '' // Ensure newSection is not null
            }
        });
    </script>
{% endblock content %}
