<div id="set-delivery-dates-container" ng-controller="setDeliveryDatesCtrl" ng-init="getEstimationsAndEarliestInstallDate()">
    <div ng-if="areProductsInOrder" class="col-md-5 outside-process-steps">
        <h3 class="additional-procurement-header">{{'orders.headers.SET_DELIVERY_DATES' | translate}}</h3>
        <hr />
        <fieldset ng-disabled="isSetDeliveryDatesDisabled()">
            <div class="delivery-dates-header row">
                <div class="supplier-header col-md-5">{{ 'orders.tables.extra.SUPPLIERS' | translate }}</div>
                <div class="supplier-header col-md-3">{{ 'orders.tables.headers.estimatedDate' | translate }}</div>
                <div class="supplier-header col-md-3">{{ 'orders.tables.headers.confirmedDate' | translate }}</div>
            </div>
            <div class="supplier-layer row" ng-repeat="supplierEstimation in supplierEstimations">
                <div class="product-layer col-md-12">
                    <div class="prdocut-name col-md-5">
                        <div class="col-md-12">
                            {{supplierEstimation.supplierName}}
                        </div>
                    </div>

                    <div class="prdocut-estimated col-md-3">
                        <div ng-if="!isDateEditable('estimatedDate', supplierEstimation)" class="display-date">
                            {{supplierEstimation.estimatedDate}}
                        </div>

                        <input class="date-input product-input"
                            ng-if="isDateEditable('estimatedDate', supplierEstimation)"
                            placeholder="{{ 'orders.tables.headers.estimatedDate' | translate }}"
                            element-data="supplierEstimation"
                            datepicker
                            on-date-selected="updateSupplierEstimation"
                            ng-model="supplierEstimation.estimatedDate" />
                        <span ng-if="!isDateEditable('estimatedDate', supplierEstimation)"
                            ng-click="openDatePicker('estimatedDate', supplierEstimation.idSupplier)"
                            class="edit-date glyphicon glyphicon-pencil"></span>
                        <div class="remove-date-icon-container">
                            <span ng-if="supplierEstimation.estimatedDate"
                                ng-click="showHideRemoveDatesDialog('estimated', supplierEstimation)"
                                class="remove-estiamted glyphicon glyphicon-remove"></span>
                            <div id="confirm-remove-estimation-date-{{idOrder}}-{{supplierEstimation.idSupplier}}"
                                 dialog
                                 ng-if="isRemoveDatesDialogVisible['estimated'][supplierEstimation.idSupplier]"
                                 on-confirmation="removeSupplierEstimation"
                                 on-close="showHideRemoveDatesDialog('estimated', supplierEstimation)"
                                 is-modal="true"
                                 has-buttons="true"
                                 parameters="{idSupplier: supplierEstimation.idSupplier, type: 'estimation'}"
                                 title="{{'orders.headers.REMOVE_DATES' | translate}}">
                                 <p><span class="glyphicon glyphicon-warning-sign"></span>{{'orders.messages.REMOVE_ESTIMATED_DATE' | translate}} <b>{{supplierEstimation.estimatedDate}}</b>?</p>
                            </div>
                        </div>
                    </div>

                    <div class="prdocut-confimrmed col-md-3">
                        <div ng-if="!isDateEditable('confirmedDate', supplierEstimation)" class="display-date">
                            {{supplierEstimation.confirmedDate}}
                        </div>

                        <input class="date-input product-input"
                            ng-if="isDateEditable('confirmedDate', supplierEstimation)"
                            placeholder="{{ 'orders.tables.headers.confirmedDate' | translate }}"
                            element-data="supplierEstimation"
                            datepicker
                            on-date-selected="updateSupplierEstimation"
                            ng-model="supplierEstimation.confirmedDate" />
                        <span ng-if="!isDateEditable('confirmedDate', supplierEstimation)"
                            ng-click="openDatePicker('confirmedDate', supplierEstimation.idSupplier)"
                            class="edit-date glyphicon glyphicon-pencil"></span>
                        <div class="remove-date-icon-container">
                            <span ng-if="supplierEstimation.confirmedDate"
                                ng-click="showHideRemoveDatesDialog('confirmed', supplierEstimation)"
                                class="remove-confirmed glyphicon glyphicon-remove"></span>
                            <div id="confirm-remove-estimation-date-{{idOrder}}-{{supplierEstimation.idSupplier}}"
                                 dialog
                                 ng-if="isRemoveDatesDialogVisible['confirmed'][supplierEstimation.idSupplier]"
                                 on-confirmation="removeSupplierEstimation"
                                 on-close="showHideRemoveDatesDialog('confirmed', supplierEstimation)"
                                 is-modal="true"
                                 has-buttons="true"
                                 parameters="{idSupplier: supplierEstimation.idSupplier, type: 'confirmation'}"
                                 title="{{'orders.headers.REMOVE_DATES' | translate}}">
                                 <p><span class="glyphicon glyphicon-warning-sign"></span>{{'orders.messages.REMOVE_CONFIRMED_DATE' | translate}} <b>{{supplierEstimation.confirmedDate}}</b>?</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <span class="glyphicon {{getEstimationIcon(supplierEstimation.confirmedDate)}}"></span>
                    </div>
                </div>

                <div class="traking-layer col-md-12">
                    <div>
                        {{'orders.headers.TRACKING' | translate}}
                    </div>
                    <div ng-if="!isSetDeliveryDatesDisabled()">
                        <div ng-repeat="trackingInfo in supplierEstimation.trackings">
                            <input type="text"
                                 class="product-input col-md-2"
                                 placeholder="{{ 'orders.tables.headers.trackingNumber' | translate }}"
                                 ng-model="trackingInfo.trackingNumber"/>
                            <input type="text"
                                class="product-input col-md-8"
                                placeholder="{{ 'orders.tables.headers.trackingUrl' | translate }}"
                                ng-model="trackingInfo.trackingUrl"/>
                            <div id="remove-tracking-{{idOrder}}-{{idPackage}}-{{trackingInfo.idSupplier}}"
                                class="remove-date col-md-1"
                                ng-click="showHideRemoveDialog(trackingInfo.idTracking)">
                                <span class="remove-date-btn glyphicon glyphicon-trash"></span>
                                <div id="confirm-remove-tracking-{{idOrder}}-{{idPackage}}-{{trackingInfo.idSupplier}}"
                                     dialog
                                     ng-if="isRemoveDialogVisible[trackingInfo.idTracking]"
                                     on-confirmation="removeTracking"
                                     on-close="showHideRemoveDialog(trackingInfo.idTracking)"
                                     is-modal="true"
                                     has-buttons="true"
                                     parameters="trackingInfo"
                                     title="{{'orders.headers.REMOVE_TRACKING' | translate}}">
                                     <p><span class="glyphicon glyphicon-warning-sign"></span>{{'orders.messages.REMOVE_TRACKING' | translate}} <b>{{trackingInfo.trackingNumber}}</b>?</p>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="btn btn-primary save-traking-btn"
                                    ng-click="updateTracking(trackingInfo)">
                                    {{ 'orders.buttons.SAVE' | translate }}
                                </div>
                            </div>
                        </div>

                        <div ng-if="showAddNewTracking[supplierEstimation.idSupplier]">
                            <input type="text"
                                 class="product-input col-md-3"
                                 placeholder="{{ 'orders.tables.headers.trackingNumber' | translate }}"
                                 ng-model="trackingNumber"/>
                            <input type="text"
                                class="product-input col-md-7"
                                placeholder="{{ 'orders.tables.headers.trackingUrl' | translate }}"
                                ng-model="trackingUrl"/>
                            <div class="col-md-2">
                                <div class="btn btn-primary save-traking-btn"
                                    ng-click="addTracking(supplierEstimation.idSupplier, trackingNumber, trackingUrl)">
                                    {{ 'orders.buttons.ADD_TRACKING' | translate }}
                                </div>
                            </div>
                        </div>

                        <div class="add-new-traking-btn col-md-12">
                            <div class="col-md-5 btn btn-primary" ng-click="shouldShowAddNewTracking(supplierEstimation.idSupplier)">
                                <span class="glyphicon glyphicon-plus"></span>
                                <span class="add-new-schedule">{{'orders.buttons.ADD_ANOTHER_TRACKING' | translate}}</span>
                            </div>
                        </div>
                    </div>
                    <div ng-if="isSetDeliveryDatesDisabled()">
                        <div class="col-md-12" ng-if="isTrackingEmpty(supplierEstimation.trackings)">{{'orders.messages.TRACKING_EMPTY' | translate}}</div>
                        <div class="display-tracking-info col-md-12" ng-if="!isTrackingEmpty(supplierEstimation.trackings)" ng-repeat="trackingInfo in supplierEstimation.trackings">
                            <span class="col-md-2">{{trackingInfo.trackingNumber}}</span>
                            <span class="col-md-10">
                                <a href="{{trackingInfo.trackingUrl}}" target="_blank">{{trackingInfo.trackingUrl}}</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="final-dates-layer col-md-12">
                    <div class="col-md-6">{{'orders.headers.FINAL_DATES' | translate}}:</div>
                    <div class="final-esimation col-md-3">{{getEstimatedOrConfirmedMaxDate('estimatedDate')}}</div>
                    <div class="final-confirmation col-md-3">{{getEstimatedOrConfirmedMaxDate('confirmedDate')}}</div>
                </div>
            </div>

            <?php
                if($user->getUserType() === USER_TYPES['BROKER']) {
                    require_once('DisplayEarliestInstallationDate.html');
                }
             ?>
        </fieldset>
    </div>
</div>
