<div id="change-order-steps-message" ng-if="!isMyOrder(ordersInfo)">
    <div class="alert alert-warning">
        {{ 'orders.messages.NO_RIGHTS_FOR_ORDER' | translate }}
    </div>
</div>
<div id="change-orders-steps-layer" ng-if="isMyOrder(ordersInfo)">
    <div id="order-info" class="order-info col-md-12">
        <h3>
            {{ 'orders.headers.CHANGE_ORDERS_STEPS' | translate }}
            {{'orders.headers.STEP_ORDER' | translate}} {{ordersInfo.orderNumber}} {{'orders.headers.STEP_ORDER_FROM' | translate}} {{ordersInfo.orderDate}}
            <div class="step-order-status order-status-{{ordersInfo.status}}"><span class="{{getOrderStatusIcon(ordersInfo.status)}}"></span>{{getStatusText(ordersInfo.status)}}</div>
            <span class="order-info-toggle glyphicon glyphicon-plus-sign" ng-click="toggleInfo($event)"></span>
        </h3>
        <div id="order-info-description" class="col-md-12 order-description order-toggle-info">
            <div class="col-md-4">
                <div id="order-info-all" class="col-md-6 order-info-container">
                    <div class="order-big-label">{{'orders.tables.headers.generalInfo' | translate}}:</div>
                    <div ng-if="ordersInfo.estimatedDeliveryDate" class="order-info-box">
                        <div class="order-label">{{'orders.tables.headers.estimatedDeliveryDate' | translate}}: </div>
                        <div class="order-estimated order-text">{{ordersInfo.estimatedDeliveryDate}}</div>
                    </div>
                    <div class="order-info-box">
                        <div class="order-label">{{'orders.tables.headers.reference' | translate}}: </div>
                        <div class="order-reference order-text">{{ordersInfo.reference}}</div>
                    </div>
                    <div class="order-info-box">
                        <div class="order-label">{{'orders.tables.headers.tender' | translate}}: </div>
                        <div class="order-tender order-text">{{ordersInfo.tender}}</div>
                    </div>
                    <div class="order-info-box">
                        <div class="order-label">{{'orders.tables.headers.soldBy' | translate}}: </div>
                        <div class="order-cl order-text">{{ordersInfo.commercialLead}}</div>
                    </div>
                </div>
                <div id="order-info-customer" class="col-md-6 order-info-container">
                    <div class="order-big-label">{{'orders.tables.headers.customer' | translate}}:</div>
                    <div class="order-info-box">
                        <div class="order-customer-info order-text">
                            <span class="order-icon glyphicon glyphicon-user"></span>
                            {{ordersInfo.customer}}
                        </div>
                    </div>
                    <div class="order-info-box">
                        <div class="order-customer-info order-text">
                            <span class="order-icon glyphicon glyphicon-earphone"></span>
                            {{ordersInfo.phone}}
                        </div>
                    </div>
                    <div class="order-info-box">
                        <div class="order-customer-info order-text">
                            <span class="order-icon glyphicon glyphicon-envelope"></span>
                            {{ordersInfo.mail}}
                        </div>
                    </div>
                </div>
                <div ng-if="orderDocuments[0]" id="order-other-documents" class="col-md-12">
                    <br/>
                    <div class="order-big-label">Other documents:</div>
                    <div class="order-document" ng-repeat="document in orderDocuments[0]">
                        <a href="utils/api/downloadFile?idDocument={{document.idDocument}}&fileName={{document.documentName}}.{{document.extension}}">
                            <span class="glyphicon glyphicon-file"></span> {{document.documentName}}.{{document.extension}} ({{document.documentType}})
                        </a>
                    </div>
                </div>
            </div>
            <div id="order-info-items" class="order-info-all-items col-md-6">
                <div class="order-big-label">{{'orders.tables.headers.orderItems' | translate}}:</div>
                <div id="order-package-info-{{package.idPackage}}" class="order-info-item" ng-repeat="package in packages">
                    <div class="order-info-item-name">{{package.units}} x {{package.packageName}}</div>
                    <div class="order-info-item-info">
                        <div class="order-info-box">
                            <div class="order-label">{{'orders.tables.headers.price' | translate}}:</div>
                            <div class="order-text">
                                {{calculatePrice([package.packageFixedPrice], package.units)}}
                                ( {{calculatePrice([package.packageRecuringPrice, package.packageServicePrice], package.units)}} / {{package.periodUnit}} )
                            </div>
                            <div class="prices-info alert-info">
                                <div class="glyphicon glyphicon-info-sign"></div>
                                <div class="order-text">
                                    <span ng-if="package.packagePayPeriod > 0">
                                        {{'orders.tables.extra.PACKAGE_RECURENT' | translate}}
                                        {{package.units}} x {{package.packageRecuringPrice}} / {{package.periodUnit}}
                                        {{'orders.tables.extra.FOR' | translate}} {{package.packagePayPeriod}} {{package.periodUnit}}
                                    </span>
                                </div>
                                <div class="order-text">
                                    {{'orders.tables.extra.SERVICE_AND_SUPPORT' | translate}}
                                    {{package.units}} x {{package.packageServicePrice}} / {{package.periodUnit}}
                                    <span ng-if="package.servicesContractPeriod > 0">{{'orders.tables.extra.FOR' | translate}} {{package.servicesContractPeriod}} {{package.periodUnit}}</span>
                                    {{'orders.tables.extra.EXTEND' | translate}} {{package.periodUnit}} (Max {{package.maxContractPeriod}})
                                </div>
                            </div>
                        </div>
                        <div class="order-info-box" ng-if="orderOptions[package.idPackage]">
                            <div class="order-label">{{'orders.headers.OPTIONS' | translate}}:</div>
                            <div class="order-text">
                                <div class="order-option" ng-repeat="option in orderOptions[package.idPackage]">
                                    <div>
                                        {{option.groupName}} : {{option.packageName}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="order-info-box" ng-if="additionalPackages[package.idPackage]">
                            <div class="order-label">{{'orders.headers.ADDIITONAL_PACKAGES' | translate}}:</div>
                            <div class="order-text">
                                <div class="order-option" ng-repeat="additionalPackage in additionalPackages[package.idPackage]">
                                    <div>
                                        {{additionalPackage.packageName}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="order-info-box">
                            <div class="order-label">{{'orders.tables.headers.documents' | translate}}:</div>
                            <div class="order-document" ng-repeat="document in orderDocuments[package.idPackage]">
                                <a href="utils/api/downloadFile?idDocument={{document.idDocument}}&fileName={{document.documentName}}.{{document.extension}}">
                                    <span class="glyphicon glyphicon-file"></span> {{document.documentName}}.{{document.extension}} ({{document.documentType}})
                                </a>
                            </div>
                        </div>
                        <div class="order-info-box">
                            <div class="order-label">{{'orders.tables.headers.products' | translate}}:</div>
                            <div class="order-product-category" ng-repeat="(category, categoryProducts) in products[package.idPackage]">
                                <span class="order-category">{{category}}:</span>
                                <div ng-if="selections[package.idPackage][category]" class="selected-category">
                                     <span  class="selected-product" ng-repeat="categSelection in selections[package.idPackage][category]">
                                        {{categSelection.productName}} <span class="my-selection">(selected)</span>,
                                    </span>
                                </div>
                                <div ng-if="!selections[package.idPackage][category]" class="containing-products">
                                    <span  ng-repeat="product in categoryProducts">
                                        {{product.productName}},
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div ng-if="hasAgreement(package.packagePayPeriod, package.servicesContractPeriod)" class="order-info-box">
                            <div class="order-label">{{'orders.tables.headers.agreement' | translate}}</div>
                            <div class="order-info-box" ng-if="package.packagePayPeriod > 0">
                                {{'orders.tables.extra.PACKAGE_AGREEMENT' | translate}}
                                {{package.packagePayPeriod}} {{package.periodUnit}}
                            </div>
                            <div class="order-info-box" ng-if="package.servicesContractPeriod > 0">
                                {{'orders.tables.extra.SERVICES_AGREEMENT' | translate}}
                                {{package.servicesContractPeriod}} {{package.periodUnit}}
                            </div>
                        </div>
                    </div>
                    <div class="order-info-item-status order-status-{{package.status}}">
                        <span class="{{getOrderStatusIcon(package.status)}}"></span>
                    </div>
                </div>
            </div>
            <div class="terms-layer col-md-12">
                <a target="_blank" href="terms/html/pdfTerms">{{'orders.headers.TERMS' | translate}}</a>
            </div>
        </div>
        <div id="order-estimated-delivery-date" class="col-md-2">
            <?php
                if($user->getUserType() === USER_TYPES['BROKER']){
                    require_once('ChangeOrderEstimationDate.html');
                }else{
                    require_once('OrderEstimationDate.html');
                }
            ?>
        </div>
        <?php
            if($user->getUserType() === USER_TYPES['BROKER']){
                require_once('AssignBrokerLayer.html');
                require_once('CancelOrderButton.html');
            }
        ?>
    </div>
    <?php
        if($user->getUserType() === USER_TYPES['BROKER']){
            require_once('SetProcessForPackage.html');
        } else {
            require_once('ShowPackageUnassignedProcess.html');
        }
    ?>
    <div id="package-layer-{{process.idProcess}}" class="package-steps col-md-10" ng-repeat="process in processSteps">
        <div class="col-md-6">
            <h4>{{process.processName}}</h4>
            <div class="order-steps-layer">
                <div ng-if="isStepVisible(position, process.steps, process)" class="order-step-layer" ng-repeat="(position, step) in process.steps">
                    <div ng-if="hasMoreSteps(position, process.steps, process, 'start')" class="col-md-12 order-seps-more">
                        <div class="more-steps-start order-seps-more-icon glyphicon glyphicon-option-horizontal"></div>
                        <div class="ordere-step-show-all-icon glyphicon glyphicon-plus-sign" ng-click="showAllSteps(process)"></div>
                    </div>
                    <div class="col-md-12">
                        <div class="order-step-link"></div>
                    </div>
                    <div id-step="{{step.idProcessStep}}" class="col-md-10 order-step {{getStatusClass(step.status)}}">
                        <div class="order-step-number">
                            <div>{{position + 1}}</div>
                            <div class="glyphicon {{stepVisibleForCustomer(step.isVisibleForCustomer)}}"></div>
                        </div>
                        <div class="order-step-info">
                            <div class="order-step-description">
                                {{step.shortDesc}}
                                <div class="order-step-status-text">
                                    {{'orders.statuses.' + formatStepText(step.status) | translate}}
                                </div>
                                <?php
                                    if($user->getUserType() === USER_TYPES['BROKER']){
                                        require_once('OrderStepFullDescriptionButton.html');
                                    }
                                ?>
                            </div>
                            <?php
                                if($user->getUserType() === USER_TYPES['BROKER']){
                                    require_once('OrdersStepEditInfo.html');
                                }else{
                                    require_once('OrdersStepInfo.html');
                                }
                            ?>
                            <div ng-if="hasExtraAction(step)" class="step-extra-action">
                                <div id="extra-action-{{step.idProcess}}" class="extra-action-layer" ng-init="extraActionDirective(step)"></div>
                            </div>
                        </div>
                    </div>
                    <?php
                        if($user->getUserType() === USER_TYPES['BROKER']){
                            require_once('GoToNextStepButton.html');
                        }
                    ?>
                    <div ng-if="hasMoreSteps(position, process.steps, process, 'end')" class="col-md-12 order-seps-more">
                        <div class="order-seps-more-icon glyphicon glyphicon-option-horizontal"></div>
                        <div class="more-steps-end ordere-step-show-all-icon glyphicon glyphicon-plus-sign" ng-click="showAllSteps(process)"></div>
                    </div>
                    <div ng-if="isExpandedAndFirstStepInactive(process, step, position)" class="col-md-12 ordere-step-show-all-icon hide-steps glyphicon glyphicon-minus-sign" ng-click="showAllSteps(process)"></div>
                </div>
                <div ng-if="isExpanded(process)" class="col-md-12 ordere-step-show-all-icon hide-steps glyphicon glyphicon-minus-sign" ng-click="showAllSteps(process)"></div>
            </div>
        </div>
        <?php
                if($user->getUserType() === USER_TYPES['BROKER']){
                    require_once('AddDocumentsToOrderLayer.html');
                    require_once('SetDeliveryDatesTemplate.php');
                    require_once('InstallationSchedulerBrokerTemplate.php');
                } else if($user->getUserType() === USER_TYPES['COMMERCIAL_LEAD']){
                    require_once('ShowDeliveryDatesCLTemplate.php');
                } else if($user->getUserType() === USER_TYPES['CUSTOMER']){
                    require_once('InstallationSchedulerCustomerTemplate.php');
                }
        ?>
    </div>
    <div id="order-comments" class="col-md-6">
        <div class="order-comments row">
            <h4 class="col-md-12">{{'orders.headers.ORDER_COMMENTS' | translate}}</h4>
            <div class="alert alert-info col-md-12">
                <span class="glyphicon glyphicon-exclamation-sign"></span>
                <span>{{allowedLanguagesDescription}}</span>
            </div>
            <div class="order-step-comments-container" class="col-md-12">
                <div id="order-comment-textarea" class="order-step-comment-textarea ">
                    <textarea
                        ui-tinymce="tinymceOptions"
                        ng-model="ordersInfo.orderCommentText"></textarea>
                </div>
                <div id="add-order-comment" class="add-order-comment btn btn-primary col-md-4" ng-click="updateOrderComment()">
                    {{ 'orders.buttons.SUBMIT' | translate }}
                </div>
            </div>
            <div class="order-added-comments" class="col-md-12">
                <div class="order-comment-layer" ng-repeat="commentObj in orderComments">
                    <div class="order-comment-date">
                        {{commentObj.username}} - {{commentObj.addDate}}
                    </div>
                    <div class="order-comment-label" ng-bind-html="renderHtml(commentObj.comment)"></div>
                </div>
            </div>
            <div id="send-support-mail-btn" ng-if="isSendSupportMailBtnAvailable">
                <div class="send-support-mail btn btn-info col-md-4" ng-click="showHideSupportDialog()">
                    {{ 'orders.buttons.SUPPORT_MAIL' | translate }}
                </div>
                <div id="send-mail-to-support-dialog"
                     dialog
                     ng-if="isSupportMailBtnVisible"
                     on-confirmation="sendSupportMail"
                     on-close="showHideSupportDialog"
                     is-modal="true"
                     has-buttons="true"
                     parameters="supportMailText"
                     buttons-names="supportBtnNames"
                     title="{{'orders.buttons.SUPPORT_MAIL' | translate}}">
                     <p>
                         <div support-mail
                               orders-details="ordersInfo"
                               packages="packages"
                               support-mail-text="supportMailText">
                         </div>
                     </p>
                </div>
            </div>
        </div>
    </div>
</div>
