<vn-crud-model url="Tags" fields="['id','name', 'isFree']" data="$ctrl.tags" auto-load="true">
<vn-crud-model url="ItemCategories" data="$ctrl.categories" auto-load="true"></vn-crud-model>
<vn-side-menu side="right">
    <vn-horizontal class="input">
        <vn-textfield
            label="General search"
            ng-model="$ctrl.filter.search"
            info="Search items by id, name or barcode"
            vn-focus
            ng-keydown="$ctrl.onKeyPress($event)">
        </vn-textfield>
    </vn-horizontal>
    <vn-horizontal class="item-category">
        <vn-autocomplete
            vn-id="category"
            data="$ctrl.categories"
            ng-model="$ctrl.filter.categoryFk"
            show-field="name"
            value-field="id"
            label="Category">
        </vn-autocomplete>
        <vn-one ng-repeat="category in $ctrl.categories">
            <vn-icon
                ng-class="{'active': $ctrl.filter.categoryFk == category.id}"
                icon="{{::category.icon}}"
                vn-tooltip="{{::category.name}}"
                ng-click="$ctrl.changeCategory(category.id)">
            </vn-icon>
        </vn-one>
    </vn-horizontal>
    <vn-vertical class="input">
        <vn-autocomplete
            vn-id="type"
            disabled="!$ctrl.filter.categoryFk"
            url="ItemTypes"
            label="Type"
            where="{categoryFk: $ctrl.filter.categoryFk}"
            show-field="name"
            value-field="id"
            ng-model="$ctrl.filter.typeFk"
            fields="['categoryFk']"
            include="'category'"
            on-change="$ctrl.addFilters()">
            <tpl-item>
                <div>{{name}}</div>
                <div class="text-caption text-secondary">
                    {{category.name}}
                </div> </tpl-item
            >>
        </vn-autocomplete>
    </vn-vertical>
    <vn-horizontal class="input horizontal">
        <vn-autocomplete
            vn-id="salesPerson"
            disabled="false"
            ng-model="$ctrl.filter.salesPersonFk"
            url="Workers/activeWithRole"
            show-field="nickname"
            search-function="{firstName: $search}"
            value-field="id"
            where="{role: {inq: ['logistic', 'buyer']}}"
            label="Buyer"
            on-change="$ctrl.addFilters()">
        </vn-autocomplete>
        <vn-autocomplete
            vn-id="supplier"
            label="Supplier"
            ng-model="$ctrl.filter.supplierFk"
            url="Suppliers"
            fields="['name','nickname']"
            search-function="{or: [{nickname: {like: '%'+ $search +'%'}}, {name: {like: '%'+ $search +'%'}}]}"
            show-field="name"
            value-field="id"
            on-change="$ctrl.addFilters()">
            <tpl-item>{{name}}: {{nickname}}</tpl-item>
        </vn-autocomplete>
    </vn-horizontal>
    <vn-vertical class="input">
        <vn-date-picker
            label="From"
            ng-model="$ctrl.filter.from"
            on-change="$ctrl.addFilters()">
        </vn-date-picker>
        <vn-date-picker
            label="To"
            ng-model="$ctrl.filter.to"
            on-change="$ctrl.addFilters()">
        </vn-date-picker>
    </vn-vertical>
    <vn-horizontal class="checks">
        <vn-check
            label="Is active"
            ng-model="$ctrl.filter.active"
            triple-state="true"
            ng-click="$ctrl.addFilters()">
        </vn-check>
        <vn-check
            label="Is visible"
            ng-model="$ctrl.filter.visible"
            triple-state="true"
            ng-click="$ctrl.addFilters()">
        </vn-check>
        <vn-check
            label="Is floramondo"
            ng-model="$ctrl.filter.floramondo"
            triple-state="true"
            ng-click="$ctrl.addFilters()">
        </vn-check>
    </vn-horizontal>
    <vn-horizontal class="tags">
        <vn-one class="text-subtitle1" translate> Tags </vn-one>
        <vn-icon-button
            vn-none
            vn-tooltip="Add tag"
            icon="add_circle"
            ng-click="$ctrl.filter.tags.push({})">
        </vn-icon-button>
    </vn-horizontal>
    <vn-horizontal class="tags horizontal" ng-repeat="itemTag in $ctrl.filter.tags">
        <vn-autocomplete
            vn-id="tag"
            data="$ctrl.tags"
            ng-model="itemTag.tagFk"
            show-field="name"
            label="Tag"
            on-change="itemTag.value = null">
        </vn-autocomplete>
        <vn-textfield
            ng-show="tag.selection.isFree || tag.selection.isFree == undefined"
            label="Value"
            ng-model="itemTag.value"
            ng-keydown="$ctrl.onKeyPress($event)">
        </vn-textfield>
        <vn-autocomplete
            ng-show="tag.selection.isFree === false"
            url="{{'Tags/' + itemTag.tagFk + '/filterValue'}}"
            search-function="{value: $search}"
            label="Value"
            ng-model="itemTag.value"
            show-field="value"
            value-field="value"
            on-change="$ctrl.addFilters()">
        </vn-autocomplete>
        <vn-icon-button
            vn-none
            vn-tooltip="Remove tag"
            icon="delete"
            ng-click="$ctrl.removeTag(itemTag)">
        </vn-icon-button>
    </vn-horizontal>
    <div class="chips">
        <vn-chip
            ng-if="$ctrl.filter.search"
            removable="true"
            vn-tooltip="Item id/name"
            on-remove="$ctrl.removeItemFilter('search')"
            class="colored">
            <span>Id/Name: {{$ctrl.filter.search}}</span>
        </vn-chip>
        <vn-chip
            ng-if="category.selection"
            removable="true"
            vn-tooltip="Category"
            on-remove="$ctrl.removeItemFilter('categoryFk')"
            class="colored">
            <span>{{category.selection.name}}</span>
        </vn-chip>
        <vn-chip
            ng-if="type.selection"
            removable="true"
            vn-tooltip="Type"
            on-remove="$ctrl.removeItemFilter('typeFk')"
            class="colored">
            <span>{{type.selection.name}}</span>
        </vn-chip>
        <vn-chip
            ng-if="salesPerson.selection"
            removable="true"
            vn-tooltip="Sales person"
            on-remove="$ctrl.removeItemFilter('salesPersonFk')"
            class="colored">
            <span>Sales person: {{salesPerson.selection.nickname}}</span>
        </vn-chip>
        <vn-chip
            ng-if="supplier.selection"
            removable="true"
            vn-tooltip="Supplier"
            on-remove="$ctrl.removeItemFilter('supplierFk')"
            class="colored">
            <span>Supplier: {{supplier.selection.name}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.from"
            removable="true"
            vn-tooltip="From date"
            on-remove="$ctrl.removeItemFilter('from')"
            class="colored">
            <span>From: {{$ctrl.filter.from | date:'dd/MM/yyyy'}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.to"
            removable="true"
            vn-tooltip="To date"
            on-remove="$ctrl.removeItemFilter('to')"
            class="colored">
            <span>To: {{$ctrl.filter.to | date:'dd/MM/yyyy'}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.active != null"
            removable="true"
            vn-tooltip="Active"
            on-remove="$ctrl.removeItemFilter('active')"
            class="colored">
            <span>Active: {{$ctrl.filter.active ? '✓' : '✗'}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.floramondo != null"
            removable="true"
            vn-tooltip="Floramondo"
            on-remove="$ctrl.removeItemFilter('floramondo')"
            class="colored">
            <span>Floramondo: {{$ctrl.filter.floramondo ? '✓' : '✗'}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.visible != null"
            removable="true"
            vn-tooltip="Visible"
            on-remove="$ctrl.removeItemFilter('visible')"
            class="colored">
            <span>Visible: {{$ctrl.filter.visible ? '✓' : '✗'}}</span>
        </vn-chip>
        <vn-chip
            ng-repeat="chipTag in $ctrl.filter.tags"
            removable="true"
            vn-tooltip="Tag"
            on-remove="$ctrl.removeTag(chipTag)"
            class="colored"
            ng-if="chipTag.value">
            <span>{{$ctrl.showTagInfo(chipTag)}}</span>
        </vn-chip>
        </vn-chip>
    </div>
</vn-side-menu>