<form name="complaintForm" ng-submit="save()">
    <div class="modal-header">
        <h3><span translate>complaints.comp.closeComplaint.title</span></h3>
    </div>
    <div class="modal-body">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion45" href="#collapseInfo" translate>complaints.comp.closeComplaint.information.title</a>
                </h4>
            </div>
            <div id="collapseInfo" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="row form-group">
                        <div class="col-sm-6">
                            <label translate>complaints.comp.closeComplaint.information.close.date</label>
                            <date-time-picker data="closeComplaintRequest.disposition.closeDate"></date-time-picker>
                        </div>
                        <div class="col-sm-6">
                            <label translate>complaints.comp.closeComplaint.information.complaint.number</label>
                            <input type="text" ng-model="modalParams.info.complaintNumber" class="input-md form-control" disabled>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-sm-6">
                            <label translate>complaints.comp.closeComplaint.information.complaint.disposition</label>
							<span class="required-asterisk">*</span>
                            <p class="input-group">
                                <select ng-model="closeComplaintRequest.disposition.dispositionType" ng-change="dispositionTypeChanged()"
                                        class="form-control input-md" required>
                                    <option ng-repeat="option in complaintDispositions" ng-value="option.key">
                                        {{option.value}}
                                    </option>
                                </select>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default" ng-if="showExistingCase">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion46" href="#collapseExistingCase" translate>complaints.comp.closeComplaint.add.existing.case.title</a>
                </h4>
            </div>
            <div id="collapseExistingCase" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="row form-group">
                        <div class="col-sm-6">
                            <label translate>complaints.comp.closeComplaint.add.existing.case.case.number</label>
                            <span class="required-asterisk">*</span>
                            <div class="input-group">
                                <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required"
                                        ng-model="closeComplaintRequest.disposition.existingCaseNumber" required>
                                <div class="input-group-btn">

                                    <button type="button" class="btn btn-primary">
                                        <i class="fa fa-search"></i>
                                        <span translate="" class="ng-scope" ng-click="searchCase()">Search</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-sm-6">
                            <label translate>complaints.comp.closeComplaint.add.existing.case.case.title</label>
                            <input type="text" class="form-control" ng-model="closeComplaintRequest.disposition.existingCaseTitle"
                                    disabled />
                        </div>
                        <div class="col-sm-4">
                            <label translate>complaints.comp.closeComplaint.add.existing.case.case.date</label>
                            <p class="input-group">
                                <input type="text" class="form-control" ng-model="closeComplaintRequest.disposition.existingCaseCreatedFormatted"
                                        disabled />
                                <span class="input-group-btn">
                                     <button type="button" class="btn btn-default" disabled>
                                             <i class="fa fa-calendar"></i>
                                     </button>
                                </span>
                            </p>
                        </div>
                        <div class="col-sm-2">
                            <label translate>complaints.comp.closeComplaint.add.existing.case.case.priority</label>
                            <input type="text" class="form-control" ng-model="closeComplaintRequest.disposition.existingCasePriority"
                                    disabled />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default" ng-if="showReferExternal">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion47" href="#collapseReferExternal" translate>complaints.comp.closeComplaint.refer.external.title</a>
                </h4>
            </div>
            <div id="collapseReferExternal" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-4">
                            <label translate>complaints.comp.closeComplaint.refer.external.name </label>
                            <span class="required-asterisk">*</span>
                            <input type="text" class="input-md form-control" ng-model="closeComplaintRequest.disposition.referExternalOrganizationName"
                                   ng-click="addOrganization()" required />
                        </div>
                        <div class="col-sm-4">
                            <label translate>complaints.comp.closeComplaint.refer.external.date</label>
                            <date-time-picker data="closeComplaintRequest.disposition.referExternalDate"></date-time-picker>
                        </div>
                        <div class="col-sm-4">
                            <label translate>complaints.comp.closeComplaint.refer.external.contact.name </label>
                            <span class="required-asterisk">*</span>
                            <input type="text" class="input-md form-control" ng-model="closeComplaintRequest.disposition.referExternalContactPersonName"
                                   ng-click="addPerson()" required/>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <span translate>complaints.comp.closeComplaint.refer.external.contact.title</span>
                                </h4>
                            </div>
                            <div class="panel-body">
                                <div class="row form-group">
                                    <div class="col-sm-6">
                                        <label translate>complaints.comp.closeComplaint.refer.external.contact.type </label>
                                        <span class="required-asterisk">*</span>
                                        <select ng-model="closeComplaintRequest.contactType" class="form-control input-md" ng-change="updateReferExternalContactMethod(closeComplaintRequest.contactType)"
                                                ng-options="contact.value | translate for contact in contactTypes" required>
                                        </select>
                                    </div>
                                    <div class="col-sm-6">
                                        <label translate>complaints.comp.closeComplaint.refer.external.contact.value</label>
                                        <span class="required-asterisk">*</span>
                                        <input class="input-md form-control" ng-disabled="true" ng-model="closeComplaintRequest.disposition.referExternalContactMethod.value">
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default" ng-if="showApprover == 'true'">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion4" href="#collapseApprovers" translate>complaints.comp.closeComplaint.approver.label</a>
                </h4>
            </div>
            <div id="collapseApprovers" class="panel-collapse">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <label class="control-label">&nbsp;</label>
                            <span class="required-asterisk">*</span>
                            <input type="text" ng-model="approverName" class="input-md form-control"
                                   placeholder="{{'complaints.comp.closeComplaint.approver.placeholder' | translate}}"
                                   ng-click="userOrGroupSearch()" readonly required>
                        </div>
                        <div class="col-sm-6 form-group">
                            <label for="owningGroup" translate>complaints.comp.closeComplaint.approver.owningGroup</label>
                            <input type="text" id="owningGroup" ng-disabled="true" ng-model="groupName" class="input-md form-control">
                        </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="#collapseDesc" translate>complaints.comp.closeComplaint.description.label</a>
                </h4>
            </div>
            <div id="collapseDesc" class="panel-collapse">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-12 form-group">
                            <span class="required-asterisk" ng-show="isDescriptionRequired">*</span>
                            <summernote id="complaintDesc" config="options" ng-model="description" ng-required="isDescriptionRequired"></summernote>
                        </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.closeComplaint.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.closeComplaint.saveButton</span>
        </button>
    </div>
</form>
