<div moe relative class="">
    <a href="#" start show class="col-2-button">
        + Create company client
    </a>
    <form url="/api/companyClient/create" class="mcp-theme-1">
        <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
        <div class="mb-2">
            <label class="text-sm text-secondary mb-1">Company</label>
            <input type="hidden" name="companyUid" value="">
            <input type="text" name="companyName" target-key="uid" target-field="companyUid" autocomplete="off" class="form-control form-control-sm" stag-suggest stag-suggest-ep="/company-suggest" value="{{@$company ? @$company->name : ''}}" {{@$company ? 'disabled readonly' : ''}} required>
        </div>
        <div class="mb-2">
            <label for="" class="control-label">Date Referred (Optional)</label>
            <input type="date" name="dateReferred" class="form-control">
        </div>
        <div>
            <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
            <button cancel class="btn btn-sm btn-default border">Cancel</button>
        </div>
    </form>
</div>

<script>
    function initCreateCompanyClient() {
        initStagSuggest();
        let parentSegment = $('body');
        parentSegment.find('input[stag-suggest][target-key][target-field]')
            .off('stag-suggest-selected')
            .on('stag-suggest-selected', (_e, _input, _data) => {
                _input = $(_input);
                _input.closest('form').find('input[name="' + _input.attr('target-field') + '"]').val(_data[_input.attr('target-key')]);
            });
    }
</script>

@if(request()->input('popupmode'))
<script>
    (function() {
        initCreateCompanyClient();
    })();
</script>
@else
<script>
    (function() {
        function init() {
            initCreateCompanyClient();
        }
        addMCInitializer('create-company-client', init)
    }).call(window);
</script>
@endif