<h3>{{'shop.headers.MY_CART' | translate}}</h3>
<div id="shop-cart-container" ng-if="!isCartEmpty()">
    <div id="shop-cart" class="row">
        <div id="show-order-info-headers">
            <div class="show-order-items step active-step">1. {{'shop.headers.ORDER_INFO' | translate}}</div>
            <div class="step-link"></div>
            <div class="upload-customer-questionaire step inactive-step">2. {{'shop.headers.CUSTOMER_QUESTIONAIRE' | translate}}</div>
            <div class="step-link"></div>
            <div class="upload-agreement step inactive-step">3. {{'shop.headers.UPLOAD_AGREEMENT' | translate}}</div>
            <div class="step-link"></div>
            <div class="show-customer-details step inactive-step">4. {{'shop.headers.CUSTOMER_INFO' | translate}}</div>
            <div class="step-link"></div>
            <div class="show-customer-billing step inactive-step">5. {{'shop.headers.BILLING_ADDRESS' | translate}}</div>
        </div>
        <div id="show-order-items" class="shop-cl" ng-if="isStepVisible('show-order-items')">
            <h3 class="col-md-12">{{'shop.headers.SOLD_BY' | translate}} {{::commercialLead}}</h3>
            <div class="shop-cart-item col-md-12" ng-repeat="(position, package) in cartPackages track by position">
                <div class="shop-item-name col-md-3">
                    {{position+1}}. {{package.packageName}}
                    <div class="shop-item-options" ng-if="package.options.length">
                        <div class="shop-item-option {{getOptionAvailabilityClass(option.isAvailable)}}" ng-repeat="option in package.options">
                            <b>{{option.groupName}}</b> : {{option.packageName}}
                        </div>
                    </div>
                    <div class="shop-item-additional-packages" ng-if="package.additionalPackages.length">
                        <div class="shop-item-option {{getOptionAvailabilityClass(additionalPackage.isAvailable)}}" ng-repeat="additionalPackage in package.additionalPackages">
                            {{additionalPackage.packageName}}
                        </div>
                    </div>
                    <div ng-if="!isAvailable(package)" class="not-available">
                        <span class="glyphicon glyphicon-warning-sign"></span>
                        {{'shop.messages.' + getAvailabilityMessage(package) | translate}}
                    </div>
                </div>

                <div class="shop-item-pay col-md-2">
                    {{package.payType}}
                </div>
                <div ng-if="isAvailable(package)" class="shop-item-pay col-md-2">
                    {{sumPrice([package.fixedPrice, package.extraFixedPrice], package.quantity)}} ({{sumPrice([package.recurentPrice, package.servicesPrice, package.extraRecurrentPrice], package.quantity)}} / {{package.periodUnit}})
                </div>
                <div ng-if="!isAvailable(package)" class="shop-item-pay col-md-2">-</div>

                <div class="shop-item-quantity col-md-4">
                    {{'shop.labels.QUANTITY' | translate}}: <input class="quantity-input" type="number" min="1" max="100" ng-model="package.quantity" ng-blur="updateQuantity(package)"/>
                </div>

                <div class="shop-item-remove col-md-1">
                    <span ng-click="removeFromCart(package)" class="glyphicon glyphicon-remove"></span>
                </div>
            </div>
        </div>

        <div id="upload-customer-questionaire" class="upload-customer-questionaire col-md-12" ng-if="isStepVisible('upload-customer-questionaire')">
            <div class="documet-templates">
                <div ng-if="!documents[DOCUMENT_TYPES['TEMPLATE_QUESTINNAIRE']].length" class="questionnaire-info col-md-12">
                    <div class="alert alert-info">
                        <span class="glyphicon glyphicon-info-sign"></span>
                        {{'shop.messages.QUESIONNAIRE_NOT_REQUIRED' | translate}}
                    </div>
                </div>
                <div class="document-layer col-md-12" ng-repeat="document in documents[DOCUMENT_TYPES['TEMPLATE_QUESTINNAIRE']]">
                    <h3 class="col-md-12">{{document.packageName}}: {{'shop.headers.CUSTOMER_QUESTIONAIRE' | translate}}</h3>
                    <div class="col-md-12">
                        <a href="utils/api/downloadFile?idDocument={{document.id}}&fileName={{document.documentName}}.{{document.extension}}">
                            <div class="btn btn-primary">
                                {{'shop.buttons.DOWNLOAD' | translate}} {{document.documentName}}
                            </div>
                        </a>
                    </div>
                    <form name="form" class="col-md-4">
                        <div ngf-drop="uploadFile($file, document.idPackage, 'questionnaire')"
                            ng-model="files"
                            ngf-drag-over-class="'dragover'"
                            ngf-select="uploadFile($file, document.idPackage, 'questionnaire')"
                            ngf-pattern="'.pdf,.docx,.doc,.xlsx,.xls,.odt,.ods'"
                            ngf-max-size="20MB"
                            class="drop-box">{{'shop.labels.SELECT_QUESTIONAIRE' | translate}}</div>
                    </form>
                    <div class="col-md-4">
                        <div ng-if="!document.isUploaded" class="no-file-uploaded upload-status">
                            <span class="glyphicon glyphicon-upload"></span> {{'shop.labels.UPLOAD_QUESTIONAIRE' | translate}}
                        </div>

                        <div ng-if="document.isUploaded" class="file-uploaded upload-status">
                            <span class="glyphicon glyphicon-ok"></span> {{'shop.labels.FILE_UPLOADED' | translate}}
                        </div>
                    </div>
                    <div ngf-no-file-drop>{{'shop.messages.NO_SUPPORT' | translate}}</div>
                </div>
            </div>
        </div>

        <div id="upload-agreement" class="upload-customer-questionaire col-md-12" ng-if="isStepVisible('upload-agreement')">
            <div class="documet-templates">
                <div ng-if="!documents[DOCUMENT_TYPES['TEMPLATE_AGREEMENT']].length" class="questionnaire-info col-md-12">
                    <div class="alert alert-info">
                        <span class="glyphicon glyphicon-info-sign"></span>
                        {{'shop.messages.AGREEMENT_NOT_REQUIRED' | translate}}
                    </div>
                </div>
                <div class="document-layer col-md-12" ng-repeat="document in documents[DOCUMENT_TYPES['TEMPLATE_AGREEMENT']]">
                    <h3 class="col-md-12">{{document.packageName}}: {{'shop.headers.CUSTOMER_AGREEMENT' | translate}}</h3>
                    <div class="col-md-12">
                        <a href="utils/api/downloadFile?idDocument={{document.id}}&fileName={{document.documentName}}.{{document.extension}}">
                            <div class="btn btn-primary">
                                {{'shop.buttons.DOWNLOAD' | translate}} {{document.documentName}}
                            </div>
                        </a>
                    </div>
                    <form name="form" class="col-md-4">
                        <div ngf-drop="uploadFile($file, document.idPackage, 'agreement')"
                            ng-model="files"
                            ngf-drag-over-class="'dragover'"
                            ngf-select="uploadFile($file, document.idPackage, 'agreement')"
                            ngf-pattern="'.pdf,.docx,.doc,.xlsx,.xls,.odt,.ods,.png,.jpg,.jpeg'"
                            ngf-max-size="20MB"
                            class="drop-box">{{'shop.labels.SELECT_AGREEMENT' | translate}}</div>
                    </form>
                    <div class="col-md-4">
                        <div ng-if="!document.isUploaded" class="no-file-uploaded upload-status">
                            <span class="glyphicon glyphicon-upload"></span> {{'shop.labels.UPLOAD_AGREEMENT' | translate}}
                        </div>

                        <div ng-if="document.isUploaded" class="file-uploaded upload-status">
                            <span class="glyphicon glyphicon-ok"></span> {{'shop.labels.FILE_UPLOADED' | translate}}
                        </div>
                    </div>
                    <div ngf-no-file-drop>{{'shop.messages.NO_SUPPORT' | translate}}</div>
                </div>
            </div>
        </div>

        <div id="show-customer-details" class="show-customer-addresses" ng-if="isStepVisible('show-customer-details')">
            <div class="label-value-pair col-md-12">
                <label class="col-md-2">{{'shop.labels.VAT' | translate}}</label>
                <input id="vat-code-nb" class="col-md-2" type="text" ng-model="vatCode" ng-disabled="vatCode" />
            </div>
            <div class="label-value-pair col-md-12">
                <label class="col-md-2">{{'shop.labels.REFERENCE' | translate}}</label>
                <input id="reference-nb" class="col-md-3" type="text" ng-model="details.reference" required />
            </div>
            <div class="label-value-pair col-md-12">
                <label class="col-md-2">{{'shop.labels.TENDER' | translate}}</label>
                <input id="tender-nb" class="col-md-3" type="text" ng-model="details.tender" />
            </div>
            <div class="address-type col-md-12">
                <label>{{'shop.labels.DELIVERY_ADDRESS' | translate}}</label>
            </div>
            <div class="label-value-pair col-md-12">
                <label class="col-md-2">{{'shop.labels.ADDRESS' | translate}}</label>
                <textarea id="detailed-address" class="address-area col-md-3" type="text" ng-model="delivery.detailedAddress" required></textarea>
            </div>
            <div class="label-value-pair col-md-12">
                <label class="col-md-2">{{'shop.labels.COUNTRY' | translate}}</label>
                <select id="delivery-country" class="form-control-static col-md-2" ng-change="changeCountryName('delivery', delivery.idCountrySelected)" ng-model="delivery.idCountrySelected" required>
                    <option ng-repeat="country in countries track by country.id" value="{{country.id}}">
                        {{country.name}}
                    </option>
                </select>
            </div>
            <div class="label-value-pair col-md-12">
                <label class="col-md-2">{{'shop.labels.CITY' | translate}}</label>
                <input id="delivery-city" class="col-md-2" type="text" ng-model="delivery.city" required />
            </div>
            <div class="label-value-pair col-md-12">
                <label class="col-md-2">{{'shop.labels.ZIP' | translate}}</label>
                <input id="zip-code" class="col-md-2" type="text" ng-model="delivery.zipCode" required />
            </div>
        </div>

        <div id="show-customer-billing" class="show-customer-addresses" ng-if="isStepVisible('show-customer-billing')">
            <div class="label-value-pair col-md-12">
                <label class="col-md-2">{{'shop.labels.VAT' | translate}}</label>
                <input id="vat-code-nb" class="col-md-2" type="text" ng-model="vatCode" ng-disabled="vatCode" />
            </div>
            <div class="label-value-pair col-md-12">
                <label class="col-md-2">{{'shop.labels.COMPANY' | translate}}</label>
                <input id="billing-company-name" class="col-md-2" type="text" ng-model="billing.companyName" required />
            </div>
            <div class="label-value-pair col-md-12">
                <label class="col-md-2">{{'shop.labels.FIRST_NAME' | translate}}</label>
                <input id="billing-first-name" class="col-md-2" type="text" ng-model="billing.firstName" required />
            </div>
            <div class="label-value-pair col-md-12">
                <label class="col-md-2">{{'shop.labels.LAST_NAME' | translate}}</label>
                <input id="billing-last-name" class="col-md-2" type="text" ng-model="billing.lastName" required />
            </div>
            <div class="address-type col-md-12">
                <label>{{'shop.labels.BILLING_ADDRESS' | translate}}</label>
            </div>
            <div class="label-value-pair col-md-12">
                <input type="checkbox" ng-model="deliveryEqualsBilling.checked" ng-change="setBillingSameAsDeliveryAddress()" />
                <label>{{'shop.labels.DELIVERY_SAME_AS_BILLING' | translate}}</label>
            </div>
            <div class="label-value-pair col-md-12">
                <label class="col-md-2">{{'shop.labels.ADDRESS' | translate}}</label>
                <textarea id="billing-address" class="address-area col-md-3" type="text" ng-model="billing.detailedAddress" required></textarea>
            </div>
            <div class="label-value-pair col-md-12">
                <label class="col-md-2">{{'shop.labels.COUNTRY' | translate}}</label>
                <select id="billing-country" class="form-control-static col-md-2" ng-change="changeCountryName('billing', billing.idCountrySelected)" ng-model="billing.idCountrySelected" required>
                    <option ng-repeat="country in countries track by country.id" value="{{country.id}}">
                        {{country.name}}
                    </option>
                </select>
            </div>
            <div class="label-value-pair col-md-12">
                <label class="col-md-2">{{'shop.labels.CITY' | translate}}</label>
                <input id="billing-city" class="col-md-2" type="text" ng-model="billing.city" required />
            </div>
            <div class="label-value-pair col-md-12">
                <label class="col-md-2">{{'shop.labels.ZIP' | translate}}</label>
                <input id="billing-zip-code" class="col-md-2" type="text" ng-model="billing.zipCode" required />
            </div>

            <div class="shop-terms-conditions alert {{getAlertClass(termsAndConditionCheckbox)}} col-md-12">
                <input type="checkbox"
                    ng-model="termsAndConditionCheckbox"
                    ng-change="setTermsCheckboxValue(termsAndConditionCheckbox)"/>
                {{'shop.labels.ACCEPT' | translate}} <a target="_blank" href="terms">{{'shop.labels.TERMS_CONDITIONS' | translate}}</a>
            </div>
        </div>
    </div>

    <div id="order-action-buttons">
        <div class="next-btn btn btn-primary"
            ng-disabled="isBtnDisabled"
            ng-click="goToNextStep('next')">
            {{'shop.buttons.' + actionButton | translate}}
        </div>
        <div class="prev-btn btn btn-primary"
            ng-click="goToNextStep('prev')"
            ng-if="hasPrevStep()">
            {{'shop.buttons.' + prevButton | translate}}
        </div>
    </div>

    <div id="place-order-dialog-confirm"
         dialog
         ng-if="isDialogVisible"
         on-confirmation="placeOrder"
         on-close="showHideDialog"
         is-modal="true"
         has-buttons="true"
         parameters="details"
         title="{{'shop.headers.PLACE_ORDER' | translate}}">
      <p>
          <span class="glyphicon glyphicon-warning-sign"></span>{{'shop.headers.OVERVIEW' | translate}}
          <div cart-review
                country-names="countryNames"
                cart-packages="cartPackages"
                delivery="delivery"
                billing="billing"
                details="details">
          </div>
      </p>
  </div>
</div>

<div id="shop-cart-order-success" class="alert alert-success shop-message" ng-if="isOrderPlaced">
    <span class="glyphicon glyphicon-ok"></span>
    {{'shop.messages.ORDER_PLACED' | translate}}
</div>

<div id="shop-cart-empty-container" class="alert alert-info shop-message" ng-if="isCartEmpty()">
    <span class="glyphicon glyphicon-alert"></span>
    <a href="shop">
        {{'shop.messages.NO_PACKAGES_IN_CART' | translate}}
    </a>
</div>
