<div id="validate-questionaire" ng-controller="validateQuestionnaireCtrl" ng-init="getDocumentsAndQuestionnaireComments()">
    <div class="document-package-layer" ng-repeat="(key, packageDocuments) in customerDocuments">
        <div class="document-layer" ng-repeat="document in packageDocuments">
            <a href="utils/api/downloadFile?idDocument={{document.idDocument}}&fileName={{document.documentName}}.{{document.extension}}">
                <div class="btn btn-primary document-name">
                    {{document.documentName}}.{{document.extension}}
                </div>
            </a>
            <div class="document-status">
                <span class="invalid" ng-if="getValidationStatus('invalid', document.validation)">
                    <span class="glyphicon glyphicon-remove"></span>
                    {{'orders.tables.extra.INVALID' | translate}}
                </span>
            </div>
            <div class="validation-buttons">
                <div class="btn btn-success"
                    ng-disabled="waitingResponseFromCustomer[document.idDocument]"
                    ng-click="showHideValidationDialog({idDocument: document.idDocument, validationStatus: 'validated'})">
                    {{'orders.tables.extra.VALID' | translate}}
                </div>

                <div id="dialog-validation-confirm"
                     dialog
                     ng-if="isValidationDialogVisible.validated[document.idDocument]"
                     on-confirmation="validateQuestionaire"
                     on-close="showHideValidationDialog"
                     is-modal="true"
                     has-buttons="true"
                     parameters="{idPackage:document.idPackage, idDocument: document.idDocument, validationStatus: 'validated'}"
                     title="{{'orders.headers.VALIDATE_QUESTIONAIER' | translate}}">
                  <p><span class="glyphicon glyphicon-warning-sign"></span>{{'orders.messages.VALIDATE_QUESTIONAIER' | translate}} {{'orders.tables.extra.VALID' | translate}}?</p>
                </div>

                <div class="btn btn-warning"
                    ng-disabled="waitingResponseFromCustomer[document.idDocument]"
                    ng-click="showInvalidTextbox(document.idDocument)">
                    {{'orders.tables.extra.INVALID' | translate}}
                </div>
            </div>
            <div class="document-status">
                <span class="not-validated" ng-if="getValidationStatus('not-validated', document.validation)">
                    <span class="glyphicon glyphicon-time"></span>
                    {{'orders.tables.extra.NOT_VALIDATED' | translate}}
                </span>
                <span class="validated" ng-if="getValidationStatus('validated', document.validation)">
                    <span class="glyphicon glyphicon-ok"></span>
                    {{'orders.tables.extra.VALIDATED' | translate}}
                </span>
            </div>
            <div class="invalid-questionaire-comment-container" ng-if="isQuestionaireInvalid[document.idDocument]">
                <div class="row">{{'orders.tables.extra.INVALID_QUESTIONAIRE_COMMENT' | translate}}:</div>
                <textarea id="invalid-questionaire-comment" class="invalid-questionaire-text col-md-12" ng-model="$parent.$parent.$parent.invalidQuestionaireReason"></textarea>
                <div class="row">
                    <div class="save-invalid-doc-btn btn btn-warning col-md-offset-10 col-md-2"
                        ng-click="showHideValidationDialog({idDocument: document.idDocument, validationStatus: 'invalid'})">{{'orders.tables.extra.SAVE' | translate}}</div>
                        <div id="dialog-invalidation-confirm"
                             dialog
                             ng-if="isValidationDialogVisible.invalid[document.idDocument]"
                             on-confirmation="validateQuestionaire"
                             on-close="showHideValidationDialog"
                             is-modal="true"
                             has-buttons="true"
                             parameters="{idPackage:document.idPackage, idDocument: document.idDocument, validationStatus: 'invalid'}"
                             title="{{'orders.headers.VALIDATE_QUESTIONAIER' | translate}}">
                          <p><span class="glyphicon glyphicon-warning-sign"></span>{{'orders.messages.VALIDATE_QUESTIONAIER' | translate}} {{'orders.tables.extra.INVALID' | translate}}?</p>
                        </div>
                </div>
            </div>
            <div class="order-added-comments" class="col-md-12" ng-if="invalidQuestionaireComments[key]">
                <h4>{{getInvalidReasonsHeader()}}</h4>
                <div class="order-comment-layer reason-comment" ng-repeat="commentObj in invalidQuestionaireComments[key]">
                    <div class="order-comment-date">
                        {{commentObj.user}} - {{commentObj.addDate}}
                    </div>
                    <div class="order-comment-label">
                        {{commentObj.comment}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
