<vn-crud-model
    vn-id="model"
    url="SalesMonitors/salesFilter"
    auto-load="false"
    limit="20">
</vn-crud-model>
<vn-portal slot="topbar">
    <vn-searchbar
        vn-focus
        panel="vn-monitor-sales-search-panel"
        placeholder="Search tickets"
        info="Search ticket by id or alias"
        model="model"
        fetch-params="$ctrl.fetchParams($params)"
        suggested-filter="$ctrl.filterParams"
        auto-state="false">
    </vn-searchbar>
</vn-portal>
<vn-horizontal class="header">
    <vn-one translate>
        Tickets monitor
    </vn-one> 
</vn-horizontal>
<vn-card>
    <smart-table 
        model="model" 
        view-config-id="ticketsMonitor" 
        options="$ctrl.smartTableOptions" 
        expr-builder="$ctrl.exprBuilder(param, value)">
        <slot-actions>
            <vn-check
                label="Auto-refresh"
                vn-tooltip="Toggle auto-refresh every 2 minutes"
                on-change="$ctrl.autoRefresh(value)">
            </vn-check>
        </slot-actions>
        <slot-table>
            <table>
                <thead>
                    <tr>
                        <th field="totalProblems" menu-enabled="false">
                            <span translate>Problems</span>
                        </th>
                        <th field="id">
                            <span translate>Identifier</span>
                        </th>
                        <th field="nickname">
                            <span translate>Client</span>
                        </th>
                        <th field="salesPersonFk">
                            <span translate>Salesperson</span>
                        </th>
                        <th field="shippedDate" shrink-date>
                            <span translate>Date</span>
                        </th>
                        <th field="theoreticalHour">
                            <span translate>Theoretical</span>
                        </th>
                        <th field="practicalHour">
                            <span translate>Practical</span>
                        </th>
                        <th field="preparationHour" filter-enabled="false">
                            <span translate>Preparation</span>
                        </th>
                        <th field="provinceFk">
                            <span translate>Province</span>
                        </th>
                        <th field="stateFk">
                            <span translate>State</span>
                        </th>
                        <th field="zoneFk">
                            <span translate>Zone</span>
                        </th>
                        <th field="totalWithVat" shrink>
                            <span translate>Total</span>
                        </th>
                        <th shrink></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="ticket in model.data"
                        vn-anchor="::{
                            state: 'ticket.card.summary', 
                            params: {id: ticket.id},
                            target: '_blank'
                        }">
                        <td>
                            <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"
                                ng-class="::{'highRisk': ticket.hasHighRisk}"
                                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-icon
                                ng-show="::ticket.isTooLittle"
                                translate-attr="{title: 'Ticket too little'}"
                                class="bright"
                                icon="icon-isTooLittle">
                            </vn-icon>
                        </td>
                         <td>
                            <span
                                vn-click-stop="ticketDescriptor.show($event, ticket.id)"
                                class="link">
                                {{::ticket.id}}
                            </span>
                        </td>
                        <td name="nickname">
                            <span
                                title="{{::ticket.nickname}}"
                                vn-click-stop="clientDescriptor.show($event, ticket.clientFk)"
                                class="link">
                                {{::ticket.nickname}}
                            </span>
                        </td>
                        <td>
                            <span
                                title="{{::ticket.userName}}"
                                vn-click-stop="workerDescriptor.show($event, ticket.salesPersonFk)"
                                class="link">
                                {{::ticket.userName | dashIfEmpty}}
                            </span>
                        </td>
                        <td>
                            <span class="chip {{::$ctrl.compareDate(ticket.shippedDate)}}">
                                {{::ticket.shippedDate | date: 'dd/MM/yyyy'}}
                            </span>
                        </td>
                        <td>{{::ticket.zoneLanding | date: 'HH:mm'}}</td>
                        <td>{{::ticket.practicalHour | date: 'HH:mm'}}</td>
                        <td>{{::ticket.shipped | date: 'HH:mm'}}</td>
                        <td>{{::ticket.province}}</td>
                        <td>
                            <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 {{::ticket.classColor}}">
                                {{::ticket.state}}
                            </span>
                        </td>
                        <td name="zone">
                            <span
                                title="{{::ticket.zoneName}}"
                                vn-click-stop="zoneDescriptor.show($event, ticket.zoneFk)"
                                class="link">
                                {{::ticket.zoneName | dashIfEmpty}}
                            </span>
                        </td>
                        <td number>
                            <span class="chip {{::$ctrl.totalPriceColor(ticket)}}">
                                {{::(ticket.totalWithVat ? ticket.totalWithVat : 0) | currency: 'EUR': 2}}
                            </span>
                        </td>
                        <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>
                        </td>
                    </tr>
                </tbody>
            </table>
        </slot-table>
    </smart-table>
</vn-card>
<vn-worker-descriptor-popover 
    vn-id="workerDescriptor">
</vn-worker-descriptor-popover>
<vn-client-descriptor-popover
    vn-id="clientDescriptor">
</vn-client-descriptor-popover>
<vn-zone-descriptor-popover
    vn-id="zoneDescriptor">
</vn-zone-descriptor-popover>
<vn-popup vn-id="summary">
    <vn-ticket-summary
        ticket="$ctrl.selectedTicket"
        model="model">
    </vn-ticket-summary>
</vn-popup>
<vn-contextmenu vn-id="contextmenu" targets="['vn-monitor-sales-tickets smart-table']" 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>