<form name="complaintForm" ng-submit="save()">
    <div class="modal-header">
        <h3><span translate>complaints.comp.newComplaint.title</span></h3>
    </div>
    <div class="modal-body">
        <div style="margin-right: 6px; margin-left: 6px;">
            <div class="row well-sm">
                <div class="row">
                    <div class="col-sm-12 form-group">
                        <h3><span translate>complaints.comp.newComplaint.info</span></h3>
                        <span translate>complaints.comp.newComplaint.infoMessage</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 form-group" ng-if="enableTitle">
                        <label translate>complaints.comp.newComplaint.complaintTitle</label>
                        <span class="required-asterisk">*</span>
                        <mention-input ng-model="complaint.complaintTitle" params="params"
                                placeholder="{{ 'complaints.comp.newComplaint.complaintTitle.placeholder' | translate }}"></mention-input>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 form-group">
                        <label for="incidentCategory" translate>complaints.comp.newComplaint.incidentCategory</label>
                        <span class="required-asterisk">*</span>
                        <select id="incidentCategory" ng-model="complaint.complaintType" class="form-control input-md" required>
                            <option ng-repeat="option in incidentCategory" value="{{option.key}}">
                                {{option.value | translate}}
                            </option>
                        </select>
                    </div>
                    <div class="col-sm-6 form-group">
                        <label for="initiator" translate>complaints.comp.newComplaint.initiator</label>
                        <span class="required-asterisk">*</span>
                        <input id="initiator" type="text" ng-model="complaint.initiator" ng-click="addPersonInitiator()"
                                class="input-md form-control"
                                placeholder="{{ 'complaints.comp.newComplaint.initiator.placeholder' | translate }}" readonly required>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-sm-4">
                        <label for="priority" translate>complaints.comp.newComplaint.priority</label>
                        <select id="priority" ng-model="complaint.priority" class="form-control input-md">
                            <option ng-repeat="option in priorities" value="{{option.key}}">
                                {{option.value | translate}}
                            </option>
                        </select>
                    </div>
                    <div class="col-sm-4">
                        <label translate>complaints.comp.newComplaint.incidentDate</label>
                        <date-time-picker data="complaint.incidentDate"></date-time-picker>
                    </div>
                    <div class="col-sm-4">
                        <label translate>complaints.comp.newComplaint.complaintTag</label>
                        <input type="text" ng-model="complaint.tag" class="input-md form-control"
                                placeholder="{{ 'complaints.comp.newComplaint.complaintTag.placeholder' | translate }}">
                    </div>
                    <div class="col-sm-12">
                        <label translate>complaints.comp.newComplaint.frequency</label>
                        <select ng-model="complaint.frequency" class="form-control input-md">
                            <option ng-repeat="option in frequencies" value="{{option.key}}">
                                {{option.value | translate}}
                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion45" href="#collapseDesc" translate>complaints.comp.newComplaint.complaintDesc</a>
                </h4>
            </div>
            <div id="collapseDesc" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row remove-margin-bottom-from-summernote">
                        <mention-summernote ng-model="complaint.details" params="paramsSummernote"></mention-summernote>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion1" href="#collapseLocation" translate>complaints.comp.newComplaint.location.title</a>
                </h4>
            </div>
            <div id="collapseLocation" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row form-group">
                        <div class="col-sm-6 form-group">
                            <label for="country" translate>
                                complaints.comp.newComplaint.location.country</label>
                            <span ng-if="checkLocationRules(complaint.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <select id="country" class="form-control" ng-model="complaint.defaultAddress.country"
                                    ng-required="checkLocationRules(complaint.defaultAddress)"
                                    ng-change="changeStates(complaint.defaultAddress.country)">
                                <option ng-repeat="option in countries" value="{{option.key}}">
                                    {{option.value | translate}}
                                </option>
                            </select>
                            <span class="text-danger" ng-if="!complaint.defaultAddress.country &&
                                    checkLocationRules(complaint.defaultAddress)"
                                  translate>
                            complaints.comp.newComplaint.location.country.validation.error</span>
                        </div>
                        <div class="col-sm-6">
                            <label translate>complaints.comp.newComplaint.location.addressType</label>
                            <span ng-if="checkLocationRules(complaint.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <select ng-model="complaint.defaultAddress.type"
                                    ng-required="checkLocationRules(complaint.defaultAddress)"
                                    ng-change="selectChanged()" class="form-control input-md">
                                <option ng-repeat="option in addressTypes" value="{{option.key}}">
                                    {{option.value | translate}}
                                </option>
                            </select>
                            <span class="text-danger" ng-if="!complaint.defaultAddress.type &&
                                    checkLocationRules(complaint.defaultAddress)"
                                  translate>
                            complaints.comp.newComplaint.location.addressType.validation.error</span>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-sm-6">
                            <label translate>complaints.comp.newComplaint.location.streetAddress</label>
                            <span ng-if="checkLocationRules(complaint.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <input type="text"
                                   ng-required="checkLocationRules(complaint.defaultAddress)"
                                   ng-model="complaint.defaultAddress.streetAddress" class="input-md form-control"
                                    placeholder="{{ 'complaints.comp.newComplaint.location.streetAddress.placeholder' | translate }}">
                            <span class="text-danger" ng-if="!complaint.defaultAddress.streetAddress &&
                                    checkLocationRules(complaint.defaultAddress)"
                                  translate>
                            complaints.comp.newComplaint.location.streetAddress.validation.error</span>
                        </div>
                        <div class="col-sm-6">
                            <label translate>complaints.comp.newComplaint.location.streetAddress2 </label>
                            <input type="text" ng-model="complaint.defaultAddress.streetAddress2" class="input-md form-control"
                                    placeholder="{{ 'complaints.comp.newComplaint.location.streetAddress2.placeholder' | translate }}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <label translate>complaints.comp.newComplaint.location.city</label>
                            <span ng-if="checkLocationRules(complaint.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <input type="text"
                                   ng-required="checkLocationRules(complaint.defaultAddress)"
                                   ng-model="complaint.defaultAddress.city" class="input-md form-control"
                                    placeholder="{{ 'complaints.comp.newComplaint.location.city.placeholder' | translate }}">
                            <span class="text-danger" ng-if="!complaint.defaultAddress.city &&
                                    checkLocationRules(complaint.defaultAddress)"
                                  translate>
                            complaints.comp.newComplaint.location.city.validation.error</span>
                        </div>
                        <div class="col-sm-2"
                                ng-if="complaint.defaultAddress.country == 'US' || complaint.defaultAddress.country == 'CA' || complaint.defaultAddress.country == 'JP'">
                            <label translate>complaints.comp.newComplaint.location.state</label>
                            <span ng-if="checkLocationRules(complaint.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <select ng-model="complaint.defaultAddress.state"
                                    ng-required="checkLocationRules(complaint.defaultAddress)"
                                    class="form-control input-md">
                                <option ng-repeat="option in states" value="{{option.key}}">
                                    {{option.value | translate}}
                                </option>
                            </select>
                            <span class="text-danger" ng-if="!complaint.defaultAddress.state &&
                                    checkLocationRules(complaint.defaultAddress)"
                                  translate>
                            complaints.comp.newComplaint.location.state.validation.error</span>
                        </div>
                        <div class="col-sm-2 form-group"
                                ng-if="complaint.defaultAddress.country != 'US' && complaint.defaultAddress.country != 'CA' && complaint.defaultAddress.country != 'JP'">
                            <label for="txtState" translate>
                                complaints.comp.newComplaint.location.state
                            </label>
                            <span ng-if="checkLocationRules(complaint.defaultAddress)"
                                  class="required-asterisk-state-label">*</span>
                            <input id="txtState" type="text"
                                   ng-required="checkLocationRules(complaint.defaultAddress)"
                                   ng-model="complaint.defaultAddress.state" class="input-md form-control"
                                    placeholder="{{ 'complaints.comp.newComplaint.location.state.placeholder' | translate }}">
                            <span class="text-danger" ng-if="!complaint.defaultAddress.state &&
                                    checkLocationRules(complaint.defaultAddress)"
                                  translate>
                            complaints.comp.newComplaint.location.state.validation.error</span>
                        </div>
                        <div class="col-sm-2">
                            <label translate>complaints.comp.newComplaint.location.zip</label>
                            <span ng-if="checkLocationRules(complaint.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <input type="text"
                                   ng-required="checkLocationRules(complaint.defaultAddress)"
                                   ng-model="complaint.defaultAddress.zip" class="input-md form-control"
                                    placeholder="{{ 'complaints.comp.newComplaint.location.zip.placeholder' | translate }}">
                            <span class="text-danger" ng-if="!complaint.defaultAddress.zip &&
                                    checkLocationRules(complaint.defaultAddress)"
                                  translate>
                            complaints.comp.newComplaint.location.zip.validation.error</span>
                        </div>

                        <div class="col-sm-2 form-group">
                            <div class="pull-left">
                                <label for="" class="control-label">&nbsp;</label>
                                <button type="button" class="btn btn-link form-control" ng-click="addAddress();"
                                        ng-show="complaint.addresses.length < 1">
                                    <i class="fa fa-plus text-success"></i><span
                                        translate>AddAnother</span>
                                </button>
                            </div>
                        </div>

                    </div>

                    <!--AddAnother Button-->
                    <div ng-repeat="address in complaint.addresses">
                        <div class="row">
                            <div class="col-sm-6 form-group">
                                <label for="country" translate>
                                    complaints.comp.newComplaint.location.country</label>
                                <select id="country" class="form-control" ng-model="address.country"
                                        ng-change="changeStates(address.country)">
                                    <option ng-repeat="option in countries" value="{{option.key}}">
                                        {{option.value | translate}}
                                    </option>
                                </select>
                            </div>
                            <div class="col-sm-6 form-group">
                                <label for="locationType" translate>
                                    complaints.comp.newComplaint.location.addressType</label>
                                <select id="" class="form-control" ng-model="address.type">
                                    <option ng-repeat="option in addressTypes" value="{{option.key}}">
                                        {{option.value | translate}}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 form-group">
                                <label for="streetAddress" translate>
                                    complaints.comp.newComplaint.location.streetAddress</label>
                                <input id="streetAddress" type="text" ng-model="address.streetAddress" class="input-md form-control"
                                        placeholder="{{ 'complaints.comp.newComplaint.location.streetAddress.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-6 form-group">
                                <label for="streetAddress2" translate>
                                    complaints.comp.newComplaint.location.streetAddress2</label>
                                <input id="streetAddress2" type="text" ng-model="address.streetAddress2" class="input-md form-control"
                                        placeholder="{{ 'complaints.comp.newComplaint.location.streetAddress2.placeholder' | translate }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 form-group">
                                <label for="city" translate>
                                    complaints.comp.newComplaint.location.city</label>
                                <input id="city" type="text" ng-model="address.city" class="input-md form-control"
                                        placeholder="{{ 'complaints.comp.newComplaint.location.city.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-2 form-group"
                                    ng-if="address.country == 'US' || address.country == 'CA' || address.country == 'JP'">
                                <label for="state" translate>
                                    complaints.comp.newComplaint.location.state</label>
                                <select id="state" class="form-control" ng-model="address.state">
                                    <option ng-repeat="option in states" value="{{option.key}}">
                                        {{option.value | translate}}
                                    </option>
                                </select>
                            </div>
                            <div class="col-sm-2 form-group"
                                    ng-if="address.country != 'US' && address.country != 'CA' && address.country != 'JP'">
                                <label for="txtState" translate>
                                    complaints.comp.newComplaint.location.state
                                </label>
                                <input type="text" ng-model="address.state" class="input-md form-control"
                                        placeholder="{{ 'complaints.comp.newComplaint.location.state.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-2 form-group">
                                <label for="zip" translate>
                                    complaints.comp.newComplaint.location.zip</label>
                                <input id="zip" type="text" ng-model="address.zip" class="input-md form-control"
                                        placeholder="{{ 'complaints.comp.newComplaint.location.zip.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-2 form-group">
                                <div class="pull-left">
                                    <label class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control" ng-click="removeAddress(address)">
                                        <i class="fa fa-minus text-danger"></i><span translate>Remove</span>
                                    </button>
                                </div>
                                <div class="pull-left">
                                    <label class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control" ng-click="addAddress();" ng-show="$last">
                                        <i class="fa fa-plus text-success"></i><span translate>AddAnother</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion45" href="#collapsePeople" translate>complaints.comp.newComplaint.people.title</a>
                </h4>
            </div>
            <div id="collapsePeople" class="panel-collapse collapse">
                <div class="panel-body">
                    <div ng-repeat="personAssociation in complaint.personAssociations">
                        <div class="row">
                            <div class="col-sm-4 form-group">
                                <label for="searchExisting">&nbsp;</label>
                                <input id="searchExisting" type="text" ng-model="personAssociation.personFullName"
                                        ng-click="searchPerson($index, true)" class="input-md form-control" readonly
                                        placeholder="{{ 'complaints.comp.newComplaint.people.selectPerson.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-4 form-group">
                                <label translate>complaints.comp.newComplaint.people.personType</label>
                                <input class="form-control" readonly ng-model="personAssociation.personType">
                            </div>
                            <div class="col-sm-4 form-group">
                                <div class="pull-left">
                                    <label class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control" ng-click="removePerson(personAssociation)"
                                            ng-show="!$first">
                                        <i class="fa fa-minus text-danger"></i><span
                                            translate>complaints.comp.newComplaint.removeButton</span>
                                    </button>
                                </div>
                                <div class="pull-left">
                                    <label class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control" ng-click="addPerson();"
                                            ng-disabled="!personAssociation.personFullName" ng-show="$last">
                                        <i class="fa fa-plus text-success"></i><span translate>complaints.comp.newComplaint.addButton</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="accordion4" class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion4" href="#collapseParticipants" translate>complaints.comp.newComplaint.participants.title</a>
                    </h4>
                </div>
                <div id="collapseParticipants" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-12 form-group">
                                <label translate>complaints.comp.newComplaint.participants.owningGroup</label>
                                <i class="fa fa-info-circle"
                                        title="{{ 'complaints.comp.newComplaint.participants.owningGroup.info' | translate }}"></i>
                                <input class="form-control" readonly ng-model="owningGroup">
                            </div>
                        </div>
                        <div class="row" ng-repeat="participant in participantsWithoutOwningGroup">
                            <div class="col-sm-4 form-group">
                                <label for="searchParticipant">&nbsp;</label>
                                <input id="searchParticipant" type="text" ng-model="participant.participantFullName"
                                        ng-click="userOrGroupSearch($index, true)" class="input-md form-control" readonly
                                        placeholder="{{ 'complaints.comp.newComplaint.participants.selectParticipant.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-4 form-group">
                                <label translate>complaints.comp.newComplaint.participants.participantType</label>
                                <input style="text-transform: capitalize;" class="form-control" readonly
                                        ng-model="participant.participantTypeFormatted">
                            </div>
                            <div class="col-sm-4 form-group">
                                <div class="pull-left">
                                    <label class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control" ng-click="removeParticipant(participant)"
                                            ng-show="!$first">
                                        <i class="fa fa-minus text-danger"></i><span
                                            translate>complaints.comp.newComplaint.removeButton</span>
                                    </button>
                                </div>
                                <div class="pull-left">
                                    <label class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control" ng-click="addParticipant();"
                                            ng-disabled="!participant.participantFullName" ng-show="$last">
                                        <i class="fa fa-plus text-success"></i><span translate>complaints.comp.newComplaint.addButton</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </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>complaints.comp.newComplaint.cancelButton</span>
        </button>
        <button type="submit" ng-disabled="complaintForm.$invalid || loading" class="btn btn-primary btn-sm" data-toggle="tooltip"
                id="saveButton" data-title="Save">
            <i class="{{loadingIcon}}"></i>
            <span translate>complaints.comp.newComplaint.saveButton</span>
        </button>
    </div>
</form>
