<vn-auto-search
    model="model">
</vn-auto-search>
<vn-data-viewer
    model="model"
    class="vn-mb-xl vn-w-xl">
    <vn-card>
    <vn-table model="model">
        <vn-thead>
            <vn-tr>
                <vn-th shrink>
                    <vn-multi-check 
                        model="model">
                    </vn-multi-check>
                </vn-th>
                <vn-th></vn-th>
                <vn-th field="id" number>Id</vn-th>
                <vn-th field="salesPersonFk" class="expendable">Salesperson</vn-th>
                <vn-th field="shipped">Date</vn-th>
                <vn-th>Hour</vn-th>
                <vn-th field="nickname">Alias</vn-th>
                <vn-th field="provinceFk" class="expendable">Province</vn-th>
                <vn-th field="stateFk" >State</vn-th>
                <vn-th field="zoneFk">Zone</vn-th>
                <vn-th field="warehouseFk">Warehouse</vn-th>
                <vn-th field="refFk" class="expendable">Invoice</vn-th>
                <vn-th field="hour" shrink>Closure</vn-th>
                <vn-th number>Total</vn-th>
                <vn-th></vn-th>
            </vn-tr>
        </vn-thead>
        <vn-tbody>
            <a ng-repeat="ticket in model.data"
                class="clickable vn-tr search-result"
                ui-sref="ticket.card.summary({id: {{::ticket.id}}})">
                <vn-td shrink>
                    <vn-check 
                        ng-model="ticket.checked"
                        vn-click-stop>
                    </vn-check>
                </vn-td>
                <vn-td shrink>
                    <vn-icon
                        ng-show="ticket.hasTicketRequest"
                        class="bright"
                        vn-tooltip="Purchase request"
                        icon="icon-100">
                    </vn-icon>
                    <vn-icon
                        ng-show="ticket.isAvailable === 0"
                        class="bright"
                        vn-tooltip="Not available"
                        icon="icon-unavailable">
                    </vn-icon>
                    <vn-icon
                        ng-show="ticket.isFreezed"
                        class="bright"
                        vn-tooltip="Client frozen"
                        icon="icon-frozen">
                    </vn-icon>
                    <vn-icon
                        ng-show="ticket.risk"
                        class="bright"
                        vn-tooltip="{{::$ctrl.$t('Risk')}}: {{ticket.risk}}"
                        icon="icon-risk">
                    </vn-icon>
                </vn-td>
                <vn-td number>{{::ticket.id}}</vn-td>
                <vn-td class="expendable">
                    <span
                        title="{{::ticket.userName}}"
                        vn-click-stop="workerDescriptor.show($event, ticket.salesPersonFk)"
                        class="link">
                        {{::ticket.userName | dashIfEmpty}}
                    </span>
                </vn-td>
                <vn-td expand>
                    <span class="chip {{$ctrl.compareDate(ticket.shipped)}}">
                        {{::ticket.shipped | date: 'dd/MM/yyyy'}}
                    </span>
                </vn-td>
                <vn-td>{{::ticket.shipped | date: 'HH:mm'}}</vn-td>
                <vn-td>
                    <span
                        title="{{::ticket.nickname}}"
                        vn-click-stop="clientDescriptor.show($event, ticket.clientFk)"
                        class="link">
                        {{::ticket.nickname}}
                    </span>
                </vn-td>
                <vn-td class="expendable">{{::ticket.province}}</vn-td>
                <vn-td>
                    <span class="chip {{$ctrl.stateColor(ticket)}}">
                        {{ticket.state}}
                    </span>
                </vn-td>
                <vn-td>
                    <span
                        title="{{::ticket.zoneName}}"
                        vn-click-stop="zoneDescriptor.show($event, ticket.zoneFk)"
                        class="link">
                        {{::ticket.zoneName | dashIfEmpty}}
                    </span>
                </vn-td>
                <vn-td>{{::ticket.warehouse}}</vn-td>
                <vn-td class="expendable">{{::ticket.refFk | dashIfEmpty}}</vn-td>
                <vn-td shrink>{{::ticket.zoneLanding | date: 'HH:mm'}}</vn-td>
                <vn-td number>
                    <span class="chip {{$ctrl.totalPriceColor(ticket)}}">
                        {{::ticket.total | currency: 'EUR': 2}}
                    </span>
                </vn-td>
                <vn-td actions>
                    <vn-icon-button
                        vn-click-stop="$ctrl.goToLines(ticket.id)"
                        vn-tooltip="Go to lines"
                        icon="icon-lines">
                    </vn-icon-button>
                    <vn-icon-button
                        vn-click-stop="$ctrl.preview(ticket)"
                        vn-tooltip="Preview"
                        icon="desktop_windows">
                    </vn-icon-button>
                </vn-td>
            </a>
        </vn-tbody>
    </vn-table>
    </vn-card>
</vn-data-viewer>
<div fixed-bottom-right>
    <vn-vertical style="align-items: center;">
        <vn-button class="round sm vn-mb-sm"
            icon="print"
            ng-show="$ctrl.totalChecked > 0"
            ng-click="$ctrl.setDelivered()"
            vn-tooltip="Set as delivered and open delivery note(s)"
            tooltip-position="left">
        </vn-button>
        <vn-button class="round sm vn-mb-sm"
            icon="icon-recovery"
            ng-show="$ctrl.totalChecked > 0"
            ng-click="$ctrl.openBalanceDialog()"
            vn-tooltip="Payment on account..."
            tooltip-position="left">
        </vn-button>
        <a ui-sref="ticket.create" vn-bind="+">
            <vn-button class="round md vn-mb-sm"
                icon="add"
                vn-tooltip="New ticket"
                tooltip-position="left">
            </vn-button>
        </a>
    </vn-vertical>
</div>
<vn-popup vn-id="summary">
    <vn-ticket-summary
        ticket="$ctrl.selectedTicket">
    </vn-ticket-summary>
</vn-popup>
<vn-client-descriptor-popover
    vn-id="clientDescriptor">
</vn-client-descriptor-popover>
<vn-worker-descriptor-popover 
    vn-id="workerDescriptor">
</vn-worker-descriptor-popover>
<vn-zone-descriptor-popover 
    vn-id="zoneDescriptor">
</vn-zone-descriptor-popover>
<vn-client-balance-create
    vn-id="balanceCreateDialog">
</vn-client-balance-create>
<vn-contextmenu vn-id="contextmenu" targets="['vn-data-viewer']" model="model"
    expr-builder="$ctrl.exprBuilder(param, value)">
    <slot-menu>
        <vn-item translate
        ng-if="contextmenu.isFilterAllowed()"
        ng-click="contextmenu.filterBySelection()">
            Filter by selection
        </vn-item>
        <vn-item translate 
        ng-if="contextmenu.isFilterAllowed()" 
        ng-click="contextmenu.excludeSelection()">
            Exclude selection
        </vn-item>
        <vn-item translate 
        ng-if="contextmenu.isFilterAllowed()" 
        ng-click="contextmenu.removeFilter()" >
            Remove filter
        </vn-item>
        <vn-item translate 
        ng-click="contextmenu.removeAllFilters()" >
            Remove all filters
        </vn-item>
    </slot-menu>
</vn-contextmenu>