<div id="package-info">
    <h4>{{packageInfo.name}} ({{'packages.headers.SOLD_IN' | translate}} {{packageInfo.country}})</h4>
    <div ng-bind-html="renderHtml(packageInfo.description)" class="package_description"></div>
    <h4>{{'packages.headers.PRODUCTS' | translate}}:</h4>
    <div class="products-list">
        <div class="package-category" ng-repeat="(productType, produccts) in packageProducts">
            <div class="product-category-title">{{productType}} ({{produccts.length}}):</div>
            <div class="package-info-product" ng-repeat="product in produccts">
                {{product.quantity}} x {{product.productName}} : {{calculateTotalPrice(product.unitCostPrice, product.payPeriod, product.isPriceRecurring, product.quantity)}} ({{calculateTotalPrice(product.unitCostPrice, product.payPeriod, product.isPriceRecurring)}} {{'packages.headers.UNIT' | translate}})
                <span ng-if="isPriceRecurring(product.isPriceRecurring)" class="product-recurring-info">({{product.unitCostPrice}} / {{'packages.extra.MONTH_FOR' | translate}} {{product.payPeriod}} {{'packages.extra.MONTHS' | translate}})</span>
            </div>
        </div>
    </div>
</div>

<div id="total-costs" class="row">
    <h3 class="col-md-12">{{'packages.headers.TOTAL_COSTS' | translate}}</h3>
    <div class="col-md-12">
        <div class="price-col col-md-2" ng-if="totalPrices.product">
            <div class="price-header">Products</div>
            <div class="price-text">{{totalPrices.product}}</div>
        </div>
        <div class="price-col col-md-2" ng-if="totalPrices.service.fixedPrice">
            <div class="price-header">One time services</div>
            <div class="price-text">{{totalPrices.service.fixedPrice}}</div>
        </div>
        <div class="price-col col-md-2" ng-if="totalPrices.installation">
            <div class="price-header">Installation</div>
            <div class="price-text">{{totalPrices.installation}}</div>
        </div>
        <div class="price-col col-md-2" ng-if="totalPrices.service.recurringPrice">
            <div class="price-header">Recurring services</div>
            <div class="price-text">{{totalPrices.service.recurringPrice}} / month</div>
        </div>
        <div class="price-col col-md-2">
            <div class="price-header">Interest Rate</div>
            <div class="price-text">{{interestRate}} %</div>
        </div>
        <div class="total-col col-md-2">
            <div class="price-header">{{'packages.headers.PAY_MARGIN' | translate}}</div>
            <div class="price-text">
                <input type="number" ng-model="commissionSplit.payMargin"/>
            </div>
        </div>
        <div ng-if="maxMarginExceded(commissionSplit.payMargin, totalPrice)" class="col-md-4">
            <div class="alert alert-danger">
                <span class="glyphicon glyphicon-ban-circle"></span>
                {{'packages.messages.PAY_MARGIN_EXCEDED' | translate}}
            </div>
        </div>
        <div class="total-col col-md-12">
            <div class="price-header">Total cost</div>
            <div class="row">
                <div class="col-md-1">Fixed cost:</div>
                <div class="col-md-2">{{calculateTotalCost(totalPrices, 'fixed')}}</div>
            </div>
            <div class="row" ng-if="calculateTotalCost(totalPrices, 'recurring')">
                <div class="col-md-1">Recurring cost:</div>
                <div class="col-md-2">{{calculateTotalCost(totalPrices, 'recurring')}} / month</div>
            </div>
        </div>
    </div>
</div>

<div id="comission-split" class="row">
    <h3 class="col-md-12">{{'packages.headers.COMISSION_SPLIT' | translate}}</h3>
    <div class="user-layer">
        <div class="user-icon glyphicon glyphicon-user"></div>
        <div class="user-type">
            {{'packages.headers.BROKER' | translate}}
        </div>
    </div>
    <div class="commission-range-layer">
        <input ng-model="commissionSplit.broker" ng-change="updateCommission('broker')" type="number" class="small-input"/>
        <span class="split-percent-sign">%</span>
        <input ng-model="commissionSplit.broker" ng-change="updateCommission('broker')" type="range" min="0" max="100" class="range-input"/>
        <input ng-model="commissionSplit.commercialLead" ng-change="updateCommission('commercialLead')" type="number" class="small-input"/>
        <span class="split-percent-sign">%</span>
    </div>

    <div class="user-layer">
        <div class="user-icon glyphicon glyphicon-user"></div>
        <div class="user-type">
            {{'packages.headers.COMMERCIAL_LEAD' | translate}}
        </div>
    </div>
</div>

<div id="packages-per-pay-type">
    <h3>{{'packages.headers.PACKAGE_PER_PAY_TYPES' | translate}}</h3>
    <div ng-repeat="(key, price) in selectedPrices" class="price-group row">
        <div class="pay-type col-md-12">{{price.payType}}</div>
        <div class="price-small-group col-md-12">
            <div class="price-col col-md-2">
                <div class="price-header">{{'packages.headers.MINIMAL_FIXED_SELL_PRICE' | translate}}</div>
                <div class="price-text"><input ng-model="price.minimalFixedPrice"/></div>
            </div>
            <div class="price-col col-md-2">
                <div class="price-header">{{'packages.headers.MINIMAL_RECURENT_SELL_PRICE' | translate}}</div>
                <div class="price-text">{{(price.minimalRecurentPrice + price.minimalServicesPrice).toFixed(0)}}</div>
            </div>
            <div class="price-col col-md-3" ng-if="price.packagePayPeriod > 0">
                <div class="price-header">Principal Amount</div>
                <div class="price-text"><input type="number" ng-change="setRecurrentPrice(interestRate / 100, price)" ng-model="price.principalAmount"/></div>
                <div class="price-header">{{'packages.headers.MINIMAL_RECURENT_PACKAGE_PRICE' | translate}} ({{boundMessage(price.packagePayPeriod, price.periodUnit, 'packagePayPeriod')}})</div>
                <div class="price-text">{{calculateFinancing(interestRate / 100, price.packagePayPeriod, price.principalAmount).toFixed(0)}} / {{price.periodUnit}}</div>
            </div>
            <div class="price-col col-md-3">
                <div class="price-header">{{'packages.headers.MINIMAL_RECURENT_SERVICES_PRICE' | translate}} ({{boundMessage(price.servicesContractPeriod, price.periodUnit, 'servicesContractPeriod')}})</div>
                <div class="price-text"><input type="number" ng-model="price.minimalServicesPrice"/> / {{price.periodUnit}}</div>
                <div class="price-total-recurent" ng-if="price.servicesContractPeriod > 0">
                    {{'packages.headers.FINAL_TOTAL' | translate}} {{(price.minimalServicesPrice * price.servicesContractPeriod).toFixed(2)}}
                </div>
            </div>
            <div class="price-col col-md-2">
                <div class="price-header">Max contract period</div>
                <div class="price-text">{{price.maxContractPeriod}} {{price.periodUnit}}</div>
            </div>
        </div>
        <div id="remove-pay-{{key}}" class="pay-type-btn btn btn-danger" ng-click="removePayType(key)">
            <span class="glyphicon glyphicon-minus"></span>
            <span class="btn-extra-text">
                {{'packages.buttons.REMOVE' | translate}}
            </span>
        </div>
    </div>
    <div id="all-price-types" ng-if="payTypesVisible" class="price-group row">
        <div ng-repeat="(key, price) in prices" class="price-col pay-type-selection">
            <input type="checkbox" ng-checked="price.isChecked" ng-model="price.isChecked" class="price-checkbox"/>
            <label>{{price.payType}}
                ({{'packages.headers.PAY_PERIOD' | translate}} {{price.packagePayPeriod}} {{price.periodUnit}} ,
                {{'packages.headers.SERVICES_AND_SUPPORT' | translate}} {{price.servicesContractPeriod}} {{price.periodUnit}},
                {{'packages.headers.MAX_PERIOD' | translate}} {{price.maxContractPeriod}} {{price.periodUnit}})
            </label>
        </div>
        <div id="select-pay-types" class="pay-type-btn btn btn-success" ng-click="selectPayTypes()">
            <span class="glyphicon glyphicon-ok"></span>
            <span class="btn-extra-text">
                {{'packages.buttons.SELECT' | translate}}
            </span>
        </div>
    </div>
    <div id="action-buttons" class="col-md-12">
        <div id="add-pay-type" ng-if="!payTypesVisible" class="pay-type-btn btn btn-success" ng-click="addPayType()">
            <span class="glyphicon glyphicon-plus"></span>
            <span class="btn-extra-text">
                {{'packages.buttons.ADD' | translate}}
            </span>
        </div>
        <div class="save-btn btn btn-primary"
            ng-if="!payTypesVisible"
            ng-click="updateBrokerPricesAndCommission(key)">
            {{'packages.buttons.SAVE' | translate}}
        </div>
    </div>
</div>
