<vn-crud-model
    vn-id="model"
    url="Tickets/getTicketsFuture"
    auto-load="false">
</vn-crud-model>
<vn-portal slot="topbar">
    <vn-searchbar
        vn-focus
        panel="vn-future-ticket-search-panel"
        placeholder="Search tickets"
        info="Search future tickets by date"
        suggested-filter="$ctrl.filterParams"
        auto-state="false"
        model="model">
    </vn-searchbar>
</vn-portal>
<vn-card>
    <smart-table
        model="model"
        options="$ctrl.smartTableOptions"
        expr-builder="$ctrl.exprBuilder(param, value)"
        >
        <slot-actions>
            <vn-button disabled="$ctrl.checked.length === 0"
                icon="keyboard_double_arrow_right"
                ng-click="moveTicketsFuture.show($event)"
                vn-tooltip="Future tickets">
            </vn-button>
        </slot-actions>
        <slot-table>
            <table>
                <thead>
                    <tr second-header>
                        <td></td>
                        <th colspan="7" translate>Origin</th>
                        <th colspan="4" translate>Destination</th>
                    </tr>
                    <tr>
                        <th shrink>
                            <vn-multi-check
                                model="model"
                                checked="$ctrl.checkAll"
                                check-field="checked">
                            </vn-multi-check>
                        </th>
                        <th field="totalProblems">
                            <span translate>Problems</span>
                        </th>
                        <th field="id">
                            <span translate>ID</span>
                        </th>
                        <th field="shipped">
                            <span translate>Date</span>
                        </th>
                        <th field="ipt" title="Item Packing Type">
                            <span>IPT</span>
                        </th>
                        <th field="state">
                            <span translate>State</span>
                        </th>
                        <th field="liters">
                            <span translate>Liters</span>
                        </th>
                        <th field="totalWithVat">
                            <span translate>Import</span>
                        </th>
                        <th shrink field="lines">
                            <span translate>Available Lines</span>
                        </th>
                        <th field="futureId" separator>
                            <span translate>ID</span>
                        </th>
                        <th field="futureShipped">
                            <span translate>Date</span>
                        </th>
                        <th field="futureIpt" title="Item Packing Type">
                            <span>IPT</span>
                        </th>
                        <th shrink field="futureState">
                            <span translate>State</span>
                        </th>

                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="ticket in model.data">
                        <td>
                            <vn-check
                                ng-model="ticket.checked"
                                vn-click-stop>
                            </vn-check>
                        </td>
                        <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-icon
                                ng-show="::ticket.hasRounding"
                                translate-attr="{title: 'Rounding'}"
                                class="bright"
                                icon="sync_problem">
                            </vn-icon>
                        </td>
                        <td><span
                            ng-click="ticketDescriptor.show($event, ticket.id)"
                            class="link">
                            {{::ticket.id}}
                        </span></td>
                        <td>
                            <span class="chip {{$ctrl.compareDate(ticket.shipped)}}">
                                {{::ticket.shipped | date: 'dd/MM/yyyy HH:mm'}}
                            </span>
                        </td>
                        <td>{{::ticket.ipt | dashIfEmpty}}</td>
                        <td>
                            <span
                            class="chip {{ticket.classColor}}">
                                {{::ticket.state}}
                            </span>
                        </td>
                        <td>{{::ticket.liters}}</td>
                        <td>
                            <span
                                class="chip {{$ctrl.totalPriceColor(ticket.totalWithVat)}}"
                                title="{{$ctrl.totalPriceTitle(ticket.totalWithVat) | translate}}">
                                {{::(ticket.totalWithVat ? ticket.totalWithVat : 0) | currency: 'EUR': 2}}
                            </span>
                        </td>
                        <td>{{::ticket.lines}}</td>
                        <td separator>
                            <span
                            ng-click="ticketDescriptor.show($event, ticket.futureId)"
                            class="link">
                                {{::ticket.futureId}}
                            </span>
                        </td>
                        <td>
                            <span class="chip {{$ctrl.compareDate(ticket.futureShipped)}}">
                                {{::ticket.futureShipped | date: 'dd/MM/yyyy HH:mm'}}
                            </span>
                        </td>
                        <td>{{::ticket.futureIpt | dashIfEmpty}}</td>
                        <td>
                            <span
                            class="chip {{ticket.futureClassColor}}">
                                {{::ticket.futureState}}
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </slot-table>
    </smart-table>
</vn-card>
<vn-confirm
    vn-id="moveTicketsFuture"
    on-accept="$ctrl.moveTicketsFuture()"
    question="{{$ctrl.confirmationMessage}}"
    message="Move tickets">
</vn-confirm>
<vn-ticket-descriptor-popover
    vn-id="ticketDescriptor">
</vn-ticket-descriptor-popover>