{% component_block "modal" id="modal_invoices_to_destination" start_open="true" title="Update TO info" %}
{% fill "content" %}
<form class="py-4" id="modal_invoices_to_destination-form">
    {% csrf_token %}
    <div class="form-control">
        <div class="label">Use existing client</div>
        <select data-selection="client"
                class="select select-bordered select-primary join-item peer"
                hx-get="{% url "core:api:clients:fetch dropdown" %}"
                hx-swap="innerHTML"
                hx-trigger="load"
                name="selected_client"
                hx-vals='{"existing_client_id": "{{ existing_client_id }}"}'>
            <option selected disabled>Loading clients...</option>
        </select>
        <button data-button="existing_Client"
                onclick="document.getElementById('modal_invoices_to_destination').close();"
                type="submit"
                name="use_existing"
                value="true"
                hx-swap="innerHTML"
                hx-target="#to_destination"
                hx-post="{% url "core:api:finance:invoices:create:set_destination to" %}"
                class="mt-3 btn btn-primary">Use existing client</button>
    </div>
    <div class="divider">OR</div>
    <div class="form-control">
        <label class="label">
            Single
            <input type="checkbox"
                   name="is_representative"
                   class="toggle toggle-primary"
                   {% if is_representative %}checked{% endif %} />
            Representative
        </label>
    </div>
    <div class="form-control">
        <label class="label">Name</label>
        <input type="text"
               name="name"
               placeholder="John Smith"
               value="{{ to_name | default_if_none:"" }}"
               class="input input-bordered max-w-full">
    </div>
    <div class="form-control">
        <label class="label">Company</label>
        <input type="text"
               name="company"
               placeholder="Google"
               value="{{ to_company | default_if_none:"" }}"
               class="input input-bordered max-w-full">
    </div>
    <div class="form-control">
        <label class="label">Email Address</label>
        <input type="email"
               name="email"
               placeholder="j.smith@example.com"
               value="{{ to_email | default_if_none:"" }}"
               class="input input-bordered max-w-full">
    </div>
    <div class="form-control">
        <label class="label">Address</label>
        <input type="text"
               name="address"
               placeholder="128 Road"
               value="{{ to_address | default_if_none:"" }}"
               class="input input-bordered max-w-full">
    </div>
    <div class="form-control">
        <label class="label">City</label>
        <input type="text"
               name="city"
               placeholder="Oxford"
               value="{{ to_city | default_if_none:"" }}"
               class="input input-bordered max-w-full">
    </div>
    <div class="form-control">
        <label class="label">County</label>
        <input type="text"
               name="county"
               placeholder="Oxfordshire"
               value="{{ to_county | default_if_none:"" }}"
               class="input input-bordered max-w-full">
    </div>
    <div class="form-control">
        <label class="label">Country</label>
        <input type="text"
               name="country"
               placeholder="England"
               value="{{ to_country | default_if_none:"" }}"
               class="input input-bordered max-w-full">
    </div>
    <div class="modal-action">
        <button type="submit"
                onclick="document.getElementById('modal_invoices_to_destination').close();"
                id="modal_invoices_to_destination-action-btn"
                class="btn btn-primary"
                hx-post="{% url 'core:api:finance:invoices:create:set_destination to' %}"
                hx-swap="innerHTML"
                hx-target="#to_destination">Save</button>
        <button type="reset" class="btn btn-error">Reset</button>
        <button type="button"
                onclick="document.getElementById('modal_invoices_to_destination').close();"
                class="btn">Close</button>
    </div>
</form>
<script>
    var existing_button = document.querySelector('button[data-button="existing_Client"]')
    var client_dropdown = document.querySelector('select[data-selection="client"]')

    function check_selected_client() {
        console.log(`check running: ${client_dropdown.value}`)
        if (client_dropdown.value !== 'View Clients' && client_dropdown.value !== 'Loading clients...') {
            existing_button.disabled = false
        } else {
            existing_button.disabled = true
        }
    }

    client_dropdown.addEventListener('change', check_selected_client);
    client_dropdown.addEventListener('htmx:afterProcessNode', check_selected_client);
    check_selected_client()
</script>
{% endfill %}
{% endcomponent_block %}
