<form name="consultationForm" novalidate="novalidate" class="form-overflow-scroll">
    <div class="modal-header">
        <h3><span translate>consultations.newConsultation.consultationTitle</span></h3>
    </div>
    <div class="modal-body">
        <div id="accordion" class="panel-group">
            <div class="row">
                <div class="col-sm-2 form-group">
                    <label for="subject" translate>consultations.newConsultation.receivedDate.label</label>
                </div>
                <div class="col-sm-4 form-group">
                    <div class="input-group">
                        <date-time-picker data="config.data.receivedDate" show-time="true"
                                max-date="maxReceivedDate" on-date-select="receivedDateChanged"></date-time-picker>
                    </div>
                </div>
            </div>
            <div class="panel panel-default" id="topSection1">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <span translate>consultations.newConsultation.section1</span></h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-12 form-group">
                            <div class="col-sm-4">
                                <label>
                                    <input type="radio" ng-model="isPickExistingPerson" ng-value="false" ng-change="pickExistingUserChange()">
                                    <translate>consultations.newConsultation.addNewPerson</translate>
                                </label>
                            </div>
                            <div class="col-sm-4">
                                <label>
                                    <input type="radio" ng-model="isPickExistingPerson" ng-value="true" ng-change="pickExistingUserChange()">
                                    <translate>consultations.newConsultation.useExistingPerson</translate>
                                </label>
                            </div>
                            <div class="col-sm-4">
                                <label>
                                    <div class="pull-right" ng-if="isPickExistingPerson">
                                        <button class="btn btn-primary btn-sm" ng-click="searchPerson()" translate>
                                            consultations.newConsultation.searchPerson
                                        </button>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div ng-show="isExistingPerson || !isPickExistingPerson">
                        <div class="row form-group">
                            <div class="col-sm-2">
                                <label for="prefix" translate>consultations.newConsultation.prefix.label</label>
                                <span class="required-asterisk">*</span>
                            </div>
                            <div class="col-sm-4">
                                <select ng-model="config.data.originator.person.title" id="prefix" name="prefix"
                                        ng-options="prefix.key as prefix.value | translate for prefix in prefixes"
                                        class="form-control input-md" required ng-disabled="isExistingPerson && existingPerson.title">
                                    <option value='' selected ng-value="null" translate>core.lookups.personTitles.selectPrefix</option>
                                </select>
                                <span class="text-danger" ng-if="!config.data.originator.person.title && formInvalid" translate>
                            consultations.newConsultation.prefix.validation.error</span>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-sm-2">
                                <label for="firstName" translate>consultations.newConsultation.firstName.label</label>
                                <span class="required-asterisk">*</span>
                            </div>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="firstName" name="firstName"
                                        ng-model="config.data.originator.person.givenName"
                                        placeholder="{{'consultations.newConsultation.firstName.placeholder' | translate}}" required="required"
                                        ng-disabled="isExistingPerson && existingPerson.givenName">
                                <span class="text-danger" ng-if="!config.data.originator.person.givenName && formInvalid" translate>
                                consultations.newConsultation.firstName.validation.error</span>
                            </div>
                            <div class="col-sm-2">
                                <label for="middleName" translate>consultations.newConsultation.middleName.label</label>
                            </div>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="middleName" ng-model="config.data.originator.person.middleName"
                                        placeholder="{{'consultations.newConsultation.middleName.placeholder' | translate}}" name="middleName"
                                        ng-disabled="isExistingPerson">
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-sm-2">
                                <label for="lastName" translate>consultations.newConsultation.lastName.label</label>
                                <span class="required-asterisk">*</span>
                            </div>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="lastName" ng-model="config.data.originator.person.familyName"
                                        placeholder="{{'consultations.newConsultation.lastName.placeholder' | translate}}" name="lastName"
                                        required="required" ng-disabled="isExistingPerson && existingPerson.familyName">
                                <span class="text-danger" ng-if="!config.data.originator.person.familyName && formInvalid" translate>
                                consultations.newConsultation.lastName.validation.error</span>
                            </div>
                            <div class="col-sm-2">
                                <label for="position" translate>consultations.newConsultation.position.label</label>
                            </div>
                            <div class="col-sm-4">
                                <select id="personPosition" class="form-control"
                                        ng-model="personPosition" ng-disabled="true">
                                    <option ng-repeat="option in positions" value="{{option.key}}">
                                        {{option.value | translate}}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-sm-2 form-group">
                                <label for="phone" translate>consultations.newConsultation.phone.label </label>
                            </div>
                            <div class="col-sm-4 form-group">
                                <input type="text" class="form-control" id="phone" pattern="^\d{3}[\-]\d{3}[\-]\d{4}"
                                        ng-model="config.data.originator.person.defaultPhone.value"
                                        placeholder="{{'consultations.newConsultation.phone.placeholder' | translate}}" name="phone"
                                        ng-disabled="isExistingPerson && existingPerson.defaultPhone.value">
                                <span class="text-danger"
                                        ng-if="!config.data.originator.person.defaultPhone.value && formInvalid && !phoneEmpty" translate>
                                consultations.newConsultation.phone.validation.errorInvalid</span>
                            </div>
                            <div class="col-sm-2 form-group">
                                <label for="organization" translate>consultations.newConsultation.organization.label </label>
                            </div>
                            <div class="col-sm-4 form-group">
                                <input type="text" id="organization" ng-model="organizationValue" readonly ng-click="searchOrganization()"
                                        class="input-md form-control" placeholder="{{'consultations.newConsultation.organization.placeholder' | translate}}"
                                        name="organization">
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-sm-2">
                                <label for="email" translate>consultations.newConsultation.email.label </label>
                                <span class="required-asterisk">*</span>
                            </div>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="email" ng-model="config.data.originator.person.defaultEmail.value"
                                        placeholder="{{'consultations.newConsultation.email.placeholder' | translate}}" name="email"
                                        pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$"
                                        required="required"
                                        ng-disabled="isExistingPerson && existingPerson.defaultEmail.value">
                                <span class="text-danger"
                                        ng-if="!config.data.originator.person.defaultEmail.value && formInvalid"
                                        translate>
                                consultations.newConsultation.email.validation.error</span>
                                <span class="text-danger"
                                        ng-if="!config.data.originator.person.defaultEmail.value && formInvalid && !emailEmpty" translate>
                                consultations.newConsultation.email.validation.errorInvalid</span>
                            </div>
                            <div class="col-sm-2">
                                <label for="confirmationEmail" translate>consultations.newConsultation.confirmationEmail.label </label>
                                <span class="required-asterisk-confirm-email">*</span>
                            </div>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="confirmationEmail" ng-model="confirmationEmail"
                                       placeholder="{{'consultations.newConsultation.confirmationEmail.placeholder' | translate}}" name="confirmationEmail"
                                       ng-blur="checkExistingEmail()" required="required"
                                       ng-disabled="isExistingPerson && existingPerson.defaultEmail.value">
                                <span class="text-danger"
                                        ng-if="confirmationEmail !== config.data.originator.person.defaultEmail.value && formInvalid"
                                        translate>
                                consultations.newConsultation.confirmationEmail.validation.errorInvalid</span>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-sm-2">
                                <label for="country" translate>consultations.newConsultation.country.label</label>
                                <span ng-if="checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                      class="required-asterisk">*</span>
                            </div>
                            <div class="col-sm-4">
                                <select id="country" class="form-control"
                                        ng-model="config.data.originator.person.addresses[primaryAddressIndex].country"
                                        ng-disabled="isExistingPerson && existingPerson.addresses[primaryAddressIndex].country"
                                        ng-required="checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                        ng-change="changeStates(config.data.originator.person.addresses[primaryAddressIndex].country)">
                                    <option ng-repeat="option in countries" value="{{option.key}}">
                                        {{option.value | translate}}
                                    </option>
                                </select>
                                <span class="text-danger" ng-if="!config.data.originator.person.addresses[primaryAddressIndex].country &&
                                    checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                      translate>
                            consultations.newConsultation.country.validation.error</span>
                            </div>
                            <div class="col-sm-2">
                                <label for="addressType" translate>consultations.newConsultation.address.type.label</label>
                                <span ng-if="checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                      class="required-asterisk-state-label">*</span>
                            </div>
                            <div class="col-sm-4">
                                <select id="addressType" class="form-control"
                                        ng-model="config.data.originator.person.addresses[primaryAddressIndex].type"
                                        ng-required="checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                        ng-disabled="isExistingPerson && existingPerson.addresses[primaryAddressIndex].type && existingPerson.addresses[primaryAddressIndex].streetAddress">
                                    <option ng-repeat="option in addressTypes" value="{{option.key}}">
                                        {{option.value | translate}}
                                    </option>
                                </select>
                                <span class="text-danger" ng-if="!config.data.originator.person.addresses[primaryAddressIndex].type &&
                                    checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                      translate>
                            consultations.newConsultation.address.type.validation.error</span>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-sm-2">
                                <label for="address1" translate>consultations.newConsultation.address.label </label>
                                <span ng-if="checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                      class="required-asterisk">*</span>
                            </div>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="address1"
                                        ng-model="config.data.originator.person.addresses[primaryAddressIndex].streetAddress"
                                        ng-required="checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                        placeholder="{{'consultations.newConsultation.address.placeholder' | translate}}" name="address1"
                                        ng-disabled="isExistingPerson && existingPerson.addresses[primaryAddressIndex].streetAddress">
                                <span class="text-danger" ng-if="!config.data.originator.person.addresses[primaryAddressIndex].streetAddress &&
                                    checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                      translate>
                            consultations.newConsultation.address.validation.error</span>
                            </div>
                            <div class="col-sm-2">
                                <label for="address2" translate>consultations.newConsultation.address2.label</label>
                            </div>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="address2"
                                        ng-model="config.data.originator.person.addresses[primaryAddressIndex].streetAddress2"
                                        placeholder="{{'consultations.newConsultation.address2.placeholder' | translate}}" name="address2"
                                        ng-disabled="isExistingPerson &&
                                    (existingPerson.addresses[primaryAddressIndex].streetAddress || existingPerson.addresses[primaryAddressIndex].streetAddress2)">
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-sm-2">
                                <label for="city" translate>consultations.newConsultation.city.label</label>
                                <span ng-if="checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                      class="required-asterisk">*</span>
                            </div>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="city"
                                        ng-model="config.data.originator.person.addresses[primaryAddressIndex].city"
                                        ng-required="checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                        placeholder="{{'consultations.newConsultation.city.placeholder' | translate}}" name="city"
                                        ng-disabled="isExistingPerson && existingPerson.addresses[primaryAddressIndex].city">
                                <span class="text-danger" ng-if="!config.data.originator.person.addresses[primaryAddressIndex].city &&
                                    checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                      translate>
                            consultations.newConsultation.city.validation.error</span>
                            </div>
                            <div class="col-sm-2">
                                <label for="state" translate>consultations.newConsultation.state.label</label>
                                <span ng-if="checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                      class="required-asterisk">*</span>
                            </div>
                            <div class="col-sm-4">
                                <div ng-if="config.data.originator.person.addresses[primaryAddressIndex].country == 'US'
                            || config.data.originator.person.addresses[primaryAddressIndex].country == 'CA'
                            || config.data.originator.person.addresses[primaryAddressIndex].country == 'JP'">
                                    <select id="state" name="state"
                                            ng-model="config.data.originator.person.addresses[primaryAddressIndex].state"
                                            ng-required="checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                            ng-options="state.key as state.value | translate for state in states"
                                            class="form-control input-md"
                                            ng-disabled="isExistingPerson && existingPerson.addresses[primaryAddressIndex].state">
                                    </select>
                                    <span class="text-danger" ng-if="!config.data.originator.person.addresses[primaryAddressIndex].state &&
                                    checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                          translate>
                            consultations.newConsultation.state.validation.error</span>
                                </div>
                                <div ng-if="config.data.originator.person.addresses[primaryAddressIndex].country != 'US' && config.data.originator.person.addresses[primaryAddressIndex].country != 'CA' && config.data.originator.person.addresses[primaryAddressIndex].country != 'JP'">
                                    <input id="txtState" type="text"
                                            ng-model="config.data.originator.person.addresses[primaryAddressIndex].state"
                                            ng-required="checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                            class="input-md form-control"
                                            placeholder="{{ 'consultations.newConsultation.state.placeholder' | translate }}"
                                            ng-disabled="isExistingPerson && existingPerson.addresses[primaryAddressIndex].state">
                                    <span class="text-danger" ng-if="!config.data.originator.person.addresses[primaryAddressIndex].state &&
                                    checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                          translate>
                            consultations.newConsultation.state.validation.error</span>
                                </div>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-sm-2">
                                <label for="zip" translate>consultations.newConsultation.zip.label</label>
                                <span ng-if="checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                      class="required-asterisk">*</span>
                            </div>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="zip" name="zip"
                                        ng-model="config.data.originator.person.addresses[primaryAddressIndex].zip"
                                        ng-required="checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                        placeholder="{{'consultations.newConsultation.zip.placeholder' | translate}}"
                                        ng-disabled="isExistingPerson && existingPerson.addresses[primaryAddressIndex].zip">
                                <span class="text-danger" ng-if="!config.data.originator.person.addresses[primaryAddressIndex].zip &&
                                    checkLocationRules(config.data.originator.person.addresses[primaryAddressIndex])"
                                      translate>
                            consultations.newConsultation.zip.validation.error</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <span translate>consultations.newConsultation.section2</span>
                </h4>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-3 form-group">
                        <label for="externalAgency" translate>consultations.newConsultation.externalAgency.label</label>
                        <span class="required-asterisk">*</span>
                    </div>
                    <div class="col-sm-9 form-group">
                        <input id="externalAgency" name="externalAgency" class="form-control" ng-model="config.data.externalRequestingAgency" maxlength="50"
                                placeholder="{{'consultations.newConsultation.externalAgency.placeholder' | translate}}" required="required" />
                        <span class="text-danger" ng-if="!config.data.externalRequestingAgency && formInvalid" translate>
                                consultations.newConsultation.externalAgency.validation.error</span>
                    </div>
                </div>
                <div class="row" ng-if="enableTitle">
                    <div class="col-sm-3 form-group">
                        <label for="title" translate>consultations.newConsultation.title.label</label>
                        <span class="required-asterisk">*</span>
                    </div>
                    <div class="col-sm-9 form-group">
                        <input id="title" name="title" class="form-control" ng-model="config.data.title" maxlength="50"
                                placeholder="{{'consultations.newConsultation.title.placeholder' | translate}}" required="required" />
                        <span class="text-danger" ng-if="!config.data.title && formInvalid" translate>
                                consultations.newConsultation.title.validation.error</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 form-group">
                        <label for="subject" translate>consultations.newConsultation.subject.label</label>
                        <span class="required-asterisk">*</span>
                    </div>
                    <div class="col-sm-9 form-group">
                        <textarea rows=5 id="subject" name="subject" class="form-control" ng-model="config.data.details"
                                placeholder="{{'consultations.newConsultation.subject.placeholder' | translate}}" required="required"></textarea>
                        <span class="text-danger" ng-if="!config.data.details && formInvalid" translate>
                                consultations.newConsultation.subject.validation.error</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 form-group">
                        <label translate>consultations.newConsultation.dueDate.label</label>
                    </div>
                    <div class="col-sm-6 form-group">
                        <div class="input-group">
                            <date-time-picker data="config.data.dueDate" show-time="true"
                                    min-date="minDueDate"></date-time-picker>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3 form-group">
                        <label translate>consultations.newConsultation.addFile.label</label>
                    </div>
                    <div class="col-sm-3 form-group">
                        <button class="btn btn-default" ngf-select="addFile($files)" multiple>
                            <span translate>consultations.newConsultation.chooseFiles</span>
                        </button>
                    </div>
                </div>
                <div class="row">
                    <ul ng-repeat="file in uploadFiles">
                        <li>
                            {{file.name}}
                            <button type="button" class="btn btn-link" ng-click="removeFile($index)">
                                <i class="fa fa-minus text-danger"></i><span translate>consultations.newConsultation.remove</span>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-toggle="tooltip" data-title="Cancel" ng-click="cancelModal()">
            <span translate>consultations.newConsultation.cancelButton</span>
        </button>
        <button type="button" class="btn btn-primary btn-sm" data-toggle="tooltip" ng-click="validateForm(consultationForm)" title="Submit"
                id="saveButton">
            <i class="{{loadingIcon}}"></i>
            <span translate>consultations.newConsultation.saveButton</span>
        </button>
    </div>
</form>
