<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 class="icon-field"></vn-th>
                    <vn-th field="id">Id</vn-th>
                    <vn-th field="salesPersonFk" class="expendable">Salesperson</vn-th>
                    <vn-th field="shipped" shrink-date>Date</vn-th>
                    <vn-th>Hour</vn-th>
                    <vn-th field="zoneHour" shrink>Closure</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="totalWithVat" 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>
                        <vn-check 
                            ng-model="ticket.checked"
                            vn-click-stop>
                        </vn-check>
                    </vn-td>
                    <vn-td class="icon-field">
                        <vn-icon
                            ng-show="::ticket.isTaxDataChecked === 0"
                            translate-attr="{title: 'No verified data'}"
                            class="bright"
                            icon="icon-no036">
                        </vn-icon>
                        <vn-icon
                            ng-show="::ticket.hasTicketRequest"
                            translate-attr="{title: 'Purchase request'}"
                            class="bright"
                            icon="icon-buyrequest">
                        </vn-icon>
                        <vn-icon
                            ng-show="::ticket.itemShortage"
                            translate-attr="{title: 'Not visible'}"
                            class="bright"
                            icon="icon-unavailable">
                        </vn-icon>
                        <vn-icon
                            ng-show="::ticket.isFreezed"
                            translate-attr="{title: 'Client frozen'}"
                            class="bright"
                            icon="icon-frozen">
                        </vn-icon>
                        <vn-icon
                            ng-show="::ticket.risk"
                            title="{{::$ctrl.$t('Risk')}}: {{ticket.risk}}"
                            class="bright"
                            icon="icon-risk">
                        </vn-icon>
                        <vn-icon
                            ng-show="::ticket.hasComponentLack"
                            translate-attr="{title: 'Component lack'}"
                            class="bright"
                            icon="icon-components">
                        </vn-icon>
                    </vn-td>
                    <vn-td shrink>{{::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 shrink-date>
                        <span class="chip {{$ctrl.compareDate(ticket.shipped)}}">
                            {{::ticket.shipped | date: 'dd/MM/yyyy'}}
                        </span>
                    </vn-td>
                    <vn-td shrink>{{::ticket.shipped | date: 'HH:mm'}}</vn-td>
                    <vn-td shrink>{{::ticket.zoneLanding | 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 class="expendable">
                        <span
                            ng-show="ticket.refFk"
                            title="{{::ticket.refFk}}"
                            vn-click-stop="invoiceOutDescriptor.show($event, ticket.invoiceOutId)"
                            class="link">
                            {{::ticket.refFk}}
                        </span>
                        <span 
                            ng-show="!ticket.refFk"
                            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 number>
                        <span class="chip {{$ctrl.totalPriceColor(ticket)}}">
                            {{::(ticket.totalWithVat ? ticket.totalWithVat : 0) | currency: 'EUR': 2}}
                        </span>
                    </vn-td>
                    <vn-td actions>
                        <vn-icon-button
                            vn-anchor="::{
                                state: 'ticket.card.sale', 
                                params: {id: ticket.id}, 
                                target: '_blank'
                            }"
                            vn-tooltip="Go to lines"
                            icon="icon-lines">
                        </vn-icon-button>
                        <vn-icon-button
                            vn-click-stop="$ctrl.preview(ticket)"
                            vn-tooltip="Preview"
                            icon="preview">
                        </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>
        <vn-button class="round sm vn-mb-sm"
            icon="icon-invoice"
            ng-click="makeInvoiceConfirmation.show()"
            ng-show="$ctrl.totalChecked > 0"
            vn-tooltip="Make invoice..."
            tooltip-position="left"
            vn-acl="invoicing"
            vn-acl-action="remove">
        </vn-button>
        <a ui-sref="ticket.create($ctrl.clientParams())" 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"
        model="model">
    </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-invoice-out-descriptor-popover 
    vn-id="invoiceOutDescriptor">
</vn-invoice-out-descriptor-popover>
<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>
        <vn-item translate 
            ng-if="contextmenu.isActionAllowed()" 
            ng-click="contextmenu.copyValue()">
            Copy value
        </vn-item>
    </slot-menu>
</vn-contextmenu>

<!-- Make invoice confirmation dialog -->
<vn-confirm
    vn-id="makeInvoiceConfirmation"
    on-accept="$ctrl.makeInvoice()"
    question="{{$ctrl.confirmationMessage}}"
    message="Invoice selected tickets">
</vn-confirm>