<div id="select-packages-steps">
    <div class="set-default-prices step active-step">1. {{'packages.headers.SET_DEFAULT_PRICES' | translate}}</div>
    <div class="step-link"></div>
    <div class="select-commissions step inactive-step">2. {{'packages.headers.SET_COMMISSIONS' | translate}}</div>
</div>
<div id="select-packages-all" class="row">
    <div id="package-info" class="col-md-6">
        <h4>{{packageInfo.name}} ({{'packages.headers.SOLD_IN' | translate}} {{packageInfo.country}})</h4>
        <div ng-bind-html="renderHtml(packageInfo.description)" class="package_description"></div>
        </div>
        <h5>{{'packages.headers.PRODUCTS' | translate}}:</h5>
        <div class="products-list">
            <div class="package-category" ng-repeat="(productCategory, produccts) in packageProducts">
                <div class="product-category-title">{{productCategory}} ({{produccts.length}}):</div>
                <div class="package-info-product" ng-repeat="product in produccts">
                    {{product.quantity}} x {{product.productName}}
                </div>
            </div>
        </div>
    </div>

    <div id="set-default-prices" class="col-md-12" ng-if="isStepVisible('set-default-prices')">
        <h4>{{'packages.headers.SET_DEFAULT_PRICES' | translate}}</h4>
        <div id="comissions-default" class="comissions-row row">
            <div class="customer-name col-md-12">{{'packages.headers.DEFAULT' | translate}}</div>
            <div ng-repeat="priceObject in priceList[0]" class="pay-group col-md-12">
                <div class="row pay-comission-row">
                    <div class="pay-comission-col-small col-md-2">
                        <div class="comission-header">
                            {{'packages.headers.PAY_TYPE' | translate}}: {{priceObject.payType}}
                        </div>
                        <div class="comission-text">
                            {{'packages.headers.FIXED' | translate}}:
                        </div>
                    </div>

                    <div class="pay-comission-col-small col-md-2">
                        <div class="comission-header">
                            {{'packages.headers.MINIMAL_SELL_PRICE' | translate}}
                        </div>
                        <div class="comission-text">
                            {{priceObject.minimalFixedPrice}}
                        </div>
                    </div>

                    <div class="pay-comission-col-small col-md-2">
                        <div class="comission-header">
                            {{'packages.headers.MY_COMMISSION' | translate}}
                        </div>
                        <div class="comission-text">
                            + <input ng-model="priceObject.defaultExtra"/>
                        </div>
                    </div>

                    <div class="pay-comission-col-small col-md-2">
                        <div class="comission-header">
                            {{'packages.headers.DEFAULT_PRICE' | translate}}
                        </div>
                        <div class="comission-text">
                            = {{priceSum([priceObject.minimalFixedPrice, priceObject.defaultExtra])}}
                        </div>
                    </div>

                    <div class="pay-comission-col-small col-md-2">
                        <div class="comission-header">
                            {{'packages.headers.VISIBLE_TO_CUSTOMER' | translate}}
                        </div>
                        <div class="comission-text">
                            <span ng-click="setVisible(priceObject)" class="visible-glyph glyphicon {{isVisibleToCustomer(priceObject)}}"></span>
                        </div>
                    </div>
                </div>

                <div class="row pay-comission-row">
                    <div class="pay-comission-col-small col-md-2">
                        {{'packages.headers.MONTHLY_RECURENCE' | translate}}:
                    </div>

                    <div class="pay-comission-col-small col-md-2">
                        <div class="comission-text">
                            {{priceSum([priceObject.minimalRecurentPrice, priceObject.minimalServicesPrice])}}
                            <span ng-if="priceObject.minimalRecurentPrice > 0">
                                ({{priceObject.minimalServicesPrice}} for services)
                            </span>
                        </div>
                    </div>

                    <div class="pay-comission-col-small col-md-2">
                        <div class="recurent-box comission-text">
                            <div ng-if="title[priceObject.idPayType]" class="recurent-tip alert alert-success">
                                <span class="glyphicon glyphicon-info-sign"></span> {{'packages.messages.EPR' | translate}}
                                <br/>
                                <span class="glyphicon glyphicon-info-sign"></span> {{'packages.messages.ESR' | translate}}
                                <br/>
                                <span class="glyphicon glyphicon-info-sign"></span> {{'packages.messages.MY_COMMISSION_FORMULA' | translate}}
                            </div>
                            <div class="recurent-input-layer" ng-if="priceObject.packagePayPeriod > 0">
                                + <input ng-model="priceObject.defaultRecurent"/> (<span ng-mouseover="showTitle(priceObject.idPayType)" ng-mouseleave="hideTitle(priceObject.idPayType)" class="recurent-info glyphicon glyphicon-info-sign"></span> EPR)
                            </div>
                            <div>
                                + <input ng-model="priceObject.defaultServicesRecurent"/> (<span ng-mouseover="showTitle(priceObject.idPayType)" ng-mouseleave="hideTitle(priceObject.idPayType)" class="recurent-info glyphicon glyphicon-info-sign"></span> ESR)
                            </div>
                        </div>
                    </div>

                    <div class="pay-comission-col-small col-md-2">
                        <div class="comission-text">
                            = {{priceSum([priceObject.minimalRecurentPrice, priceObject.minimalServicesPrice, priceObject.defaultRecurent, priceObject.defaultServicesRecurent])}}
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div id="choose-customers" class="col-md-12" ng-if="isStepVisible('select-commissions')">
        <h4>{{'packages.headers.ADD_CUSTOMERS' | translate}}</h4>
        <div class="customer-select-layer">
            <select id="customer-selection"
                    class="select-customer-for-pricing form-control-static"
                    ng-model="data.selectedCustomerKey"
                    ng-change="getCustomerPrices(data.selectedCustomerKey)"
                    required>
                <option ng-repeat="(key, customerObject) in customers" value={{key}}>
                    {{customerObject.customer}}
                </option>
            </select>
        </div>
    </div>

    <div id="select-commissions" class="col-md-12" ng-if="isStepVisible('select-commissions')">
        <h4>{{'packages.headers.SET_COMMISSIONS' | translate}}: {{packageInfo.name}}</h4>
        <div id="select-comission-warning" class="alert alert-warning" ng-if="!selectedCustomers.length">
            {{'packages.messages.NO_CUMSTOMER_SELECTED' | translate}}
        </div>
        <div class="comissions-select-layer">
            <div ng-repeat="customerObject in selectedCustomers"
                 idCustomer="{{customerObject.id}}"
                 id="comissions-{{customerObject.id}}"
                 class="row comissions-row">
                 <div class="customer-name col-md-12">
                     {{customerObject.customer}}
                     <span ng-if="isSameCompany(customerObject)">( same company )</span>
                 </div>
                 <div ng-repeat="priceObject in priceList[customerObject.id]" class="pay-group col-md-12">
                     <div class="row pay-comission-row">
                         <div class="pay-comission-col-small col-md-2">
                             <div class="comission-header">
                                 {{'packages.headers.PAY_TYPE' | translate}}: {{priceObject.payType}}
                             </div>
                             <div class="comission-text">
                                 {{'packages.headers.FIXED' | translate}}:
                             </div>
                         </div>

                         <div class="pay-comission-col-small col-md-1">
                             <div class="comission-header">
                                 {{'packages.headers.MINIMAL_SELL_PRICE' | translate}}
                             </div>
                             <div class="comission-text">
                                 {{priceObject.minimalFixedPrice}}
                             </div>
                         </div>

                         <div class="pay-comission-col-small col-md-2">
                             <div class="comission-header">
                                 {{'packages.headers.MY_COMMISSION' | translate}}
                             </div>
                             <div class="comission-text">
                                 + <input ng-disabled="isSameCompany(customerObject)" ng-model="customerObject.prices[priceObject.idPayType].fixedCommission" />
                             </div>
                         </div>

                         <div class="pay-comission-col-small col-md-1">
                             <div class="comission-header">
                                 {{'packages.headers.FINAL_PRICE' | translate}}
                             </div>
                             <div class="comission-text">
                                 = {{priceSum([priceObject.minimalFixedPrice, customerObject.prices[priceObject.idPayType].fixedCommission])}}
                             </div>
                         </div>

                         <div class="pay-comission-col-small col-md-2">
                             <div class="comission-header">
                                 {{'packages.headers.VISIBLE_TO_CUSTOMER' | translate}}
                             </div>
                             <div class="comission-text">
                                 <span ng-click="setVisible(customerObject.prices[priceObject.idPayType])" class="visible-glyph glyphicon {{isVisibleToCustomer(customerObject.prices[priceObject.idPayType])}}"></span>
                             </div>
                         </div>
                     </div>

                     <div class="row pay-comission-row">
                         <div class="pay-comission-col-small col-md-2">
                             {{'packages.headers.MONTHLY_RECURENCE' | translate}}:
                         </div>

                         <div class="pay-comission-col-small col-md-1">
                             <div class="comission-text">
                                 {{priceSum([priceObject.minimalRecurentPrice, priceObject.minimalServicesPrice])}}
                                 <span ng-if="priceObject.minimalRecurentPrice > 0">
                                     ({{priceObject.minimalServicesPrice}} for services)
                                 </span>
                             </div>
                         </div>

                         <div class="pay-comission-col-small col-md-2">
                             <div class="recurent-box comission-text">
                                 <div ng-if="title[priceObject.idPayType +'-' + customerObject.id]" class="recurent-tip alert alert-success">
                                     <span class="glyphicon glyphicon-info-sign"></span> MPR = My Package Recurent Comission
                                     <br/>
                                     <span class="glyphicon glyphicon-info-sign"></span> MSR = My Services and Support Recurent Comission
                                 </div>
                                 <div class="recurent-input-layer" ng-if="customerObject.prices[priceObject.idPayType].packagePayPeriod > 0">
                                     + <input ng-disabled="isSameCompany(customerObject)" ng-model="customerObject.prices[priceObject.idPayType].recurentCommission"/> (<span ng-mouseover="showTitle(priceObject.idPayType +'-' + customerObject.id)" ng-mouseleave="hideTitle(priceObject.idPayType +'-' + customerObject.id)" class="recurent-info glyphicon glyphicon-info-sign"></span> MPR)
                                 </div>
                                 <div>
                                     + <input ng-disabled="isSameCompany(customerObject)" ng-model="customerObject.prices[priceObject.idPayType].recurentServicesCommission"/> (<span ng-mouseover="showTitle(priceObject.idPayType +'-' + customerObject.id)" ng-mouseleave="hideTitle(priceObject.idPayType +'-' + customerObject.id)" class="recurent-info glyphicon glyphicon-info-sign"></span> MSR)
                                 </div>
                             </div>
                         </div>

                         <div class="pay-comission-col-small col-md-1">
                             <div class="comission-text">
                                 = {{priceSum([priceObject.minimalRecurentPrice, priceObject.minimalServicesPrice, customerObject.prices[priceObject.idPayType].recurentCommission, customerObject.prices[priceObject.idPayType].recurentServicesCommission])}}
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="btn btn-danger" ng-click="showHideRemoveDialog(customerObject.id)">
                     <span class="glyphicon glyphicon-remove"></span> Remove customer specific commisions
                 </div>
            </div>
        </div>
    </div>
</div>
<div id="action-buttons">
    <div class="next-btn btn btn-primary"
        ng-click="goToNextStep('next')">
        {{'packages.buttons.' + actionButton | translate}}
    </div>
    <div class="prev-btn btn btn-primary"
        ng-click="goToNextStep('prev')"
        ng-if="hasPrevStep()">
        {{'packages.buttons.' + prevButton | translate}}
    </div>
</div>
<div id="dialog-confirm-remove-customer-from-package-price"
     dialog
     ng-if="isRemoveDialogVisible"
     on-confirmation="removeCustomerSpecificCommissions"
     on-close="showHideRemoveDialog"
     is-modal="true"
     has-buttons="true"
     parameters="idCustomer"
     title="Remove customer">
  <p><span class="glyphicon glyphicon-warning-sign"></span>Are you sure you want to remove customer {{customerToRemove.customer}}?</p>
</div>
