<div class="position-relative d-none if-edit ml-3 pl-3 border-left">
    <a href="#" onclick="$(this).siblings('.embed-section, .embed-mask').removeClass('d-none'); return false;">Current Allergies</a>
    <div class="embed-section min-width-300px bg-white position-absolute d-none current-allergy-form">
        <div>
            @include('app/patient/partials/allergies', ['selectable' => true])
        </div>
        <div class="m-2">
            <form url="/no-op">
                <button class="btn btn-primary btn-sm mr-1" type="button" onclick="return applySelectedAllergy()">Apply</button>
                <button class="btn btn-default border btn-sm" type="button" onclick="return cancelAllergyPopup()">Cancel</button>
            </form>
        </div>
    </div>
</div>

<script>
    function applySelectedAllergy() {
        let html = [];
        $('.allergy-item-checkbox:checked').each(function() {
            html.push('<p style="white-space: normal;">' + $.trim($(this).closest('.allergy-item').find('.content-html').first().html()) + '</p>');
        });
        $('.embed-section, .embed-mask').addClass('d-none');
        $('.ql-editor[contenteditable]:visible').first().html(html.join('')).focus();
        return false;
    }
    function cancelAllergyPopup() {
        $('.embed-section, .embed-mask').addClass('d-none');
        hideMask();
        hideMoeFormMask();
        $('.ql-editor[contenteditable]:visible').first().focus();
        return false;
    }
</script>

