<div class="content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <h2>{{::vm.translate.get('Products')}}</h2>
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h2 class="card-title ng-binding ng-scope" ng-if="!vm.isEditMode">{{::vm.translate.get('Create Product')}}</h2>
                <h2 class="card-title ng-binding ng-scope" ng-if="vm.isEditMode">{{::vm.translate.get('Edit Product')}}: {{vm.product.name}}</h2>
                <div class="card-tools" style="width: 300px">
                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input type="checkbox" class="form-check-input" ng-model="vm.isAdvancedMode"> {{::vm.translate.get('Use Full Mode')}}
                                </label>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <a ng-if="vm.isEditMode" ui-sref="product-clone({id: vm.product.id})" class="btn btn-success"><span class="glyphicon glyphicon-copy"></span> {{::vm.translate.get('Clone Product')}}</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <form name="productForm" class="form-horizontal">
                    <div class="col-sm-offset-2 bg-danger" ng-show="vm.validationErrors">
                        <ul>
                            <li ng-repeat="error in vm.validationErrors">{{error}}</li>
                        </ul>
                    </div>
                    <uib-tabset>
                        <uib-tab index="0" heading="{{::vm.translate.get('General Information')}}">
                            <div class="form-group">
                                <label class="control-label">{{::vm.translate.get('Product Name')}}</label>
                                <div>
                                    <input name="name" ng-model="vm.product.name" ng-change="vm.updateSlug()" required class="form-control" />
                                </div>
                            </div>
                            <div class="form-group" ng-show="vm.isAdvancedMode">
                                <label class="control-label">{{::vm.translate.get('Brand')}}</label>
                                <div>
                                    <select class="form-control" ng-model="vm.product.brandId" ng-options="brand.id as brand.name for brand in vm.brands"></select>
                                </div>
                            </div>
                            <div class="form-group" ng-show="vm.isAdvancedMode">
                                <label class="control-label">{{::vm.translate.get('Unit')}}</label>
                                <div>
                                    <select class="form-control" ng-model="vm.product.unitId" ng-options="unit.id as unit.name for unit in vm.units"></select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">{{::vm.translate.get('Short Description')}}</label>
                                <div>
                                    <textarea class="form-control" ng-model="vm.product.shortDescription"></textarea>
                                </div>
                            </div>
                            <div class="form-group" ng-show="vm.isAdvancedMode">
                                <label class="control-label">{{::vm.translate.get('Description')}}</label>
                                <div>
                                    <textarea class="form-control" ng-model="vm.product.description"></textarea>
                                </div>
                            </div>
                            <div class="form-group" ng-show="vm.isAdvancedMode">
                                <label class="control-label">{{::vm.translate.get('Specification')}}</label>
                                <div>
                                    <textarea class="form-control" ng-model="vm.product.specification"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">{{::vm.translate.get('SKU')}}</label>
                                <div>
                                    <input name="sku" ng-model="vm.product.sku" class="form-control" />
                                </div>
                            </div>
                            <div class="form-group" ng-show="vm.isAdvancedMode">
                                <label class="control-label">{{::vm.translate.get('GTIN')}}</label>
                                <div>
                                    <input name="gtin" ng-model="vm.product.gtin" class="form-control" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">{{::vm.translate.get('Price')}}</label>
                                <div>
                                    <div class="input-number">
                                        <input id="productPrice" type="text" decimal maxlength="10" name="price" ng-model="vm.product.price" required class="form-control" />
                                        <small for="productPrice" class="">{{vm.product.price | number}}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">{{::vm.translate.get('Old Price')}}</label>
                                <div>
                                    <div class="input-number">
                                        <input id="productOldPrice" type="text" decimal maxlength="10" name="oldPrice" ng-model="vm.product.oldPrice" class="form-control" />
                                        <small class="" for="productOldPrice">{{vm.product.oldPrice | number}}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">{{::vm.translate.get('Special Price')}}</label>
                                <div>
                                    <div class="input-number">
                                        <input id="productSpecialPrice" type="text" decimal maxlength="10" name="specialPrice" ng-model="vm.product.specialPrice" class="form-control" />
                                        <small class="" for="productSpecialPrice">{{vm.product.specialPrice | number}}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">{{::vm.translate.get('Special Price Start')}}</label>
                                <div>
                                    <p class="input-group simpl-datetime-picker">
                                        <input type="text" class="form-control" datetime-picker="dd MMM yyyy HH:mm" ng-model="vm.product.specialPriceStart" is-open="vm.datePickerSpecialPriceStart.open" datepicker-options="vm.datePickerSpecialPriceStart.datepickerOptions" />
                                        <span class="input-group-append">
                                            <button type="button" class="btn btn-default" ng-click="vm.openCalendar($event, 'datePickerSpecialPriceStart')"><i class="fa fa-calendar"></i></button>
                                        </span>
                                    </p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">{{::vm.translate.get('Special Price End')}}</label>
                                <div>
                                    <p class="input-group simpl-datetime-picker">
                                        <input type="text" class="form-control" datetime-picker="dd MMM yyyy HH:mm" ng-model="vm.product.specialPriceEnd" is-open="vm.datePickerSpecialPriceEnd.open" datepicker-options="vm.datePickerSpecialPriceEnd.datepickerOptions" />
                                        <span class="input-group-append">
                                            <button type="button" class="btn btn-default" ng-click="vm.openCalendar($event, 'datePickerSpecialPriceEnd')"><i class="fa fa-calendar"></i></button>
                                        </span>
                                    </p>
                                </div>
                            </div>
                            <div class="form-group">
                                <div >
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" ng-model="vm.product.stockTrackingIsEnabled">{{::vm.translate.get('Enable Stock Tracking')}}
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" ng-show="vm.isAdvancedMode">
                                <label class="control-label">{{::vm.translate.get('Tax Class')}}</label>
                                <div>
                                    <select class="form-control" ng-model="vm.product.taxClassId" ng-options="taxClass.id as taxClass.name for taxClass in vm.taxClasses"></select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">{{::vm.translate.get('Thumbnail')}}</label>
                                <div>
                                    <input class="form-control" type="file" ngf-select ng-model="vm.thumbnailImage" name="thumbnailImage" ngf-accept="'image/*'">
                                    <img ngf-src="vm.thumbnailImage" ngf-resize="{width: 100, height: 100, quality: 0.9}">
                                    <img ng-show="!vm.thumbnailImage && vm.product.thumbnailImageUrl" ng-src="{{vm.product.thumbnailImageUrl}}" style="width: 100px; height: 100px" />
                                </div>
                            </div>
                            <div class="form-group" ng-show="vm.isAdvancedMode">
                                <label class="control-label">{{::vm.translate.get('Product Images')}}</label>
                                <div>
                                    <input class="form-control" type="file" ngf-select ng-model="vm.productImages" ngf-multiple="true" name="productImages" ngf-accept="'image/*'">
                                    <span class="product-image-edit" ng-repeat="image in vm.product.productImages">
                                        <img ng-src="{{image.mediaUrl}}" style="width: 100px; height: 100px" />
                                        <button type="button" ng-click="vm.removeImage(image)" class="btn btn-link" aria-label="Remove">
                                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                        </button>
                                    </span>
                                    <span class="product-image-edit" ng-repeat="image in vm.productImages">
                                        <img ngf-src="image" ngf-resize="{width: 100, height: 100, quality: 0.9}">
                                    </span>
                                </div>
                            </div>
                            <div class="form-group" ng-show="vm.isAdvancedMode">
                                <label class="control-label">{{::vm.translate.get('Product Documents')}}</label>
                                <div>
                                    <input class="form-control" type="file" ngf-select ng-model="vm.productDocuments" ngf-multiple="true" name="productDocuments" ngf-accept="'.pdf,.doc'">
                                    <span class="product-file-edit" ng-repeat="doc in vm.product.productDocuments">
                                        <a target="_blank" href="{{doc.mediaUrl}}">{{doc.caption}}</a>
                                        <button type="button" ng-click="vm.removeDocument(doc)" class="btn btn-link" aria-label="Remove">
                                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                        </button>
                                    </span>
                                    <span class="product-file-edit" ng-repeat="file in vm.productDocuments">
                                        <span>{{file.name}}</span>
                                    </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <div >
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" ng-model="vm.product.isFeatured">{{::vm.translate.get('Is Featured')}}
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div >
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" ng-model="vm.product.isPublished">{{::vm.translate.get('Is Published')}}
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div >
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" ng-model="vm.product.isAllowToOrder">{{::vm.translate.get('Is Allowed To Order')}}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </uib-tab>

                        <uib-tab index="3" heading="{{::vm.translate.get('Category Mapping')}}">
                            <md-content class="md-padding">
                                <md-input-container class="md-block">
                                    <div ng-repeat="category in vm.categories">
                                        <md-checkbox ng-checked="vm.product.categoryIds.indexOf(category.id) > -1" ng-click="vm.toggleCategories(category.id)">
                                            {{ category.name }}
                                        </md-checkbox>
                                    </div>
                                </md-input-container>
                            </md-content>
                        </uib-tab>

                        <uib-tab index="1" heading="{{::vm.translate.get('Product Variations')}}" ng-show="vm.isAdvancedMode">
                            <div class="form-group">
                                <label class="control-label">{{::vm.translate.get('Available Options')}}</label>
                                <div>
                                    <div class="input-group">
                                        <div class="col-md-3">
                                            <select class="form-control" ng-model="vm.addingOption" ng-options="opt as opt.name for opt in vm.options"></select>
                                        </div>
                                        <button class="btn btn-default" ng-disabled="!vm.addingOption" ng-click="vm.addOption()">{{::vm.translate.get('Add Option')}}</button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" ng-show="vm.product.options.length > 0">
                                <label class="control-label">{{::vm.translate.get('Option Values')}}</label>
                            </div>
                            <div class="form-group" ng-show="vm.product.options.length > 0">
                                <div class="col-sm-offset-1 col-sm-11">
                                    <div class="form-group" ng-repeat="option in vm.product.options">
                                        <label class="col-sm-1 control-label">{{option.name}}</label>
                                        <div class="col-sm-11">
                                            <div class="input-group">
                                                <div class="col-md-6">
                                                    <md-chips ng-model="option.values"
                                                              md-transform-chip="vm.newOptionValue($chip)"
                                                              placeholder="Enter a {{option.name}}"
                                                              delete-button-label="Remove {{option.name}}"
                                                              delete-hint="Press delete to remove {{option.name}}"
                                                              secondary-placeholder="+{{option.name}}">
                                                        <md-chip-template>
                                                            <span>
                                                                {{$chip.key}}
                                                            </span>
                                                        </md-chip-template>
                                                    </md-chips>
                                                </div>
                                                <product-option-display-directive model-id="option_{{option.id}}" title="Configure Display" option="option"></product-option-display-directive>
                                                <button class="btn btn-default" data-toggle="modal" data-target="#option_{{option.id}}">{{::vm.translate.get('Configure Display')}}</button>
                                                <button class="btn btn-default" ng-click="vm.deleteOption(option)">{{::vm.translate.get('Delete Option')}}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" ng-if="!vm.isEditMode" ng-show="vm.product.options.length > 0">
                                <div >
                                    <button class="btn btn-default" ng-click="vm.generateOptionCombination()">{{::vm.translate.get('Generate Combinations')}}</button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">{{::vm.translate.get('Product Variations')}}</label>
                                <div>
                                    <table class="table table-striped">
                                        <tr>
                                            <th class="col-md-2">{{::vm.translate.get('Option Combinations')}}</th>
                                            <th class="col-md-1">{{::vm.translate.get('SKU')}}</th>
                                            <th class="col-md-1">{{::vm.translate.get('GTIN')}}</th>
                                            <th class="col-md-1">{{::vm.translate.get('Price')}}</th>
                                            <th class="col-md-1">{{::vm.translate.get('Old Price')}}</th>
                                            <th class="col-md-2">{{::vm.translate.get('Thumbnails')}}</th>
                                            <th class="col-md-3">{{::vm.translate.get('Images')}}</th>
                                            <th class="col-md-1">{{::vm.translate.get('Actions')}}</th>
                                        </tr>
                                        <tr ng-repeat="variation in vm.product.variations">
                                            <td>{{variation.name}}</td>
                                            <td>
                                                <input id="{{variation.normalizedName}}Sku" type="text" maxlength="100" class="form-control" ng-model="variation.sku" />
                                            </td>
                                            <td>
                                                <input id="{{variation.normalizedName}}Gtin" type="text" maxlength="100" class="form-control" ng-model="variation.gtin" />
                                            </td>
                                            <td>
                                                <div class="input-number">
                                                    <input id="{{variation.normalizedName}}Price" type="text" decimal maxlength="10" required class="form-control" ng-model="variation.price" />
                                                    <small for="{{variation.normalizedName}}Price" class="">{{variation.price | number}}</small>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="input-number">
                                                    <input id="{{variation.normalizedName}}OldPrice" type="text" decimal maxlength="10" class="form-control" ng-model="variation.oldPrice" />
                                                    <small for="{{variation.normalizedName}}OldPrice" class="">{{variation.oldPrice | number}}</small>
                                                </div>
                                            </td>
                                            <td>
                                                <input class="form-control" type="file" ngf-select ng-model="variation.newThumbnailImage" name="variationThumbnailImage" ngf-accept="'image/*'">
                                                <img ngf-src="variation.newThumbnailImage" ngf-resize="{width:50, height: 50, quality: 0.9}">
                                                <img ng-show="!variation.newThumbnailImage && variation.thumbnailImageUrl" ng-src="{{variation.thumbnailImageUrl}}" style="width: 50px; height: 50px" />
                                            </td>
                                            <td>
                                                <input class="form-control" type="file" ngf-select ng-model="variation.newImages" ngf-multiple="true" name="variationImages" ngf-accept="'image/*'">
                                                <span class="product-image-edit" ng-repeat="image in variation.imageUrls">
                                                    <img ng-src="{{image}}" style="width: 50px; height: 50px" />
                                                </span>
                                                <span ng-repeat="image in variation.newImages">
                                                    <img ngf-src="image" ngf-resize="{width: 50, height: 50, quality: 0.9}">
                                                </span>
                                            </td>
                                            <td>
                                                <button ng-click="vm.deleteVariation(variation)" type="button" class="btn">
                                                    <i class="fas fa-times-circle"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        <tr ng-show="vm.product.options.length > 0">
                                            <td class="variation-form" colspan="8">
                                                <ng-form name="addingVariationForm">
                                                    <table class="table">
                                                        <tr>
                                                            <td class="col-md-2">
                                                                <div ng-repeat="option in vm.product.options">
                                                                    <div>
                                                                        <select class="form-control" ng-model="vm.addingVariation[option.name]"
                                                                                ng-options="value.key as value.key for value in option.values | filter: vm.filterAddedOptionValue"></select>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="col-md-1">
                                                                <input id="addingVariationSku" type="text" maxlength="100" class="form-control" ng-model="vm.addingVariation.sku" />
                                                            </td>
                                                            <td class="col-md-1">
                                                                <input id="addingVariationGtin" type="text" maxlength="100" class="form-control" ng-model="vm.addingVariation.gtin" />
                                                            </td>
                                                            <td class="col-md-1">
                                                                <div class="input-number">
                                                                    <input id="addingVariationPrice" type="text" decimal maxlength="10" class="form-control" ng-model="vm.addingVariation.price" />
                                                                    <small for="addingVariationPrice" class="">{{vm.addingVariation.price | number}}</small>
                                                                </div>
                                                            </td>
                                                            <td class="col-md-1">
                                                                <div class="input-number">
                                                                    <input id="addingVariationOldPrice" type="text" decimal maxlength="10" class="form-control" ng-model="vm.addingVariation.oldPrice" />
                                                                    <small for="addingVariationOldPrice" class="">{{vm.addingVariation.oldPrice | number}}</small>
                                                                </div>
                                                            </td>
                                                            <td class="col-md-2"></td>
                                                            <td class="col-md-3"></td>
                                                            <td class="col-md-1"><button type="button" class="btn btn-primary" ng-disabled="!vm.isAddVariationFormValid()" ng-click="vm.addVariation()"><span class="fa fa-plus"></span></button></td>
                                                        </tr>
                                                    </table>
                                                </ng-form>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </uib-tab>

                    </uib-tabset>
                    <hr />
                    <div class="form-group">
                        <div class="col-12">
                            <button class="btn btn-success float-right" ng-disabled="productForm.$invalid" ng-click="vm.save()"><span class="fa fa-save"></span> {{::vm.translate.get('Save')}}</button>
                            <button ui-sref="product" class="btn btn-default">{{::vm.translate.get('Cancel')}}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>