<vn-crud-model
    vn-id="model"
    url="Expeditions/filter"
    link="{ticketFk: $ctrl.$params.id}"
    limit="20"
    data="expeditions"
    order="created DESC"
    auto-load="true">
</vn-crud-model>
<vn-data-viewer model="model">
    <vn-card class="vn-pa-lg">
        <vn-horizontal class="header">
            <vn-tool-bar class="vn-mb-md">
                <vn-button icon="keyboard_arrow_down"
                    label="Move"
                    ng-click="moreOptions.show($event)"
                    disabled="!$ctrl.totalChecked">
                </vn-button>
                <vn-button 
                    disabled="!$ctrl.checked.length"
                    ng-click="removeConfirm.show()"
                    icon="delete"
                    vn-tooltip="Delete expedition">
                </vn-button>
            </vn-tool-bar>
            <vn-one class="taxes" ng-if="$ctrl.sales.length > 0">
                <p><vn-label translate>Subtotal</vn-label> {{$ctrl.ticket.totalWithoutVat | currency: 'EUR':2}}</p>
                <p><vn-label translate>VAT</vn-label> {{$ctrl.ticket.totalWithVat - $ctrl.ticket.totalWithoutVat | currency: 'EUR':2}}</p>
                <p><vn-label><strong>Total</strong></vn-label> <strong>{{$ctrl.ticket.totalWithVat | currency: 'EUR':2}}</strong></p>
            </vn-one>
        </vn-horizontal>
        <vn-table model="model">
            <vn-thead>
                <vn-tr>
                    <vn-th shrink>
                        <vn-multi-check 
                            model="model">
                        </vn-multi-check>
                    </vn-th>
                    <vn-th field="itemFk" number>Expedition</vn-th>
                    <vn-th field="itemFk" number>Item</vn-th>
                    <vn-th field="packageItemName">Name</vn-th>
                    <vn-th field="freightItemName">Package type</vn-th>
                    <vn-th field="counter" number>Counter</vn-th>
                    <vn-th field="externalId" number>externalId</vn-th>
                    <vn-th field="created" expand>Created</vn-th>
                    <vn-th field="state" expand>State</vn-th>
                    <vn-th></vn-th>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr ng-repeat="expedition in expeditions">
                    <vn-td shrink>
                        <vn-check tabindex="-1"
                            ng-model="expedition.checked">
                        </vn-check>
                    </vn-td>
                    <vn-td number expand>{{expedition.id | zeroFill:6}}</vn-td>
                    <vn-td number>
                        <span
                            ng-class="{link: expedition.packagingItemFk}"
                            ng-click="itemDescriptor.show($event, expedition.packagingItemFk)">
                            {{expedition.packagingFk}}
                        </span>
                    </vn-td>
                    <vn-td>{{::expedition.packageItemName}}</vn-td>
                    <vn-td>{{::expedition.freightItemName}}</vn-td>
                    <vn-td number>{{::expedition.counter}}</vn-td>
                    <vn-td expand>{{::expedition.externalId}}</vn-td>
                    <vn-td shrink-datetime>{{::expedition.created | date:'dd/MM/yyyy HH:mm'}}</vn-td>
                    <vn-td>{{::expedition.state}}</vn-td>
                    <vn-td>
                        <vn-icon-button
                            vn-click-stop="$ctrl.showLog(expedition)"
                            vn-tooltip="Status log"
                            icon="history">
                        </vn-icon-button>
                    </vn-td>
                </vn-tr>
            </vn-tbody>
        </vn-table>
    </vn-card>
</vn-data-viewer>
<vn-item-descriptor-popover
    vn-id="item-descriptor"
    warehouse-fk="$ctrl.ticket.warehouseFk",
    ticket-fk="$ctrl.ticket.id">
</vn-item-descriptor-popover>
<vn-worker-descriptor-popover 
    vn-id="worker-descriptor">
</vn-worker-descriptor-popover>
<vn-confirm 
    vn-id="removeConfirm"
    message="Are you sure you want to delete this expedition?"
    question="Delete expedition"
    on-accept="$ctrl.onRemove()">
</vn-confirm>
 
<vn-popup vn-id="statusLog">
    <vn-crud-model
        vn-id="modelExpeditionStates"
        url="ExpeditionStates/filter"
        link="{expeditionFk: $ctrl.expedition.id}"
        data="expeditionStates"
        order="created DESC"
        auto-load="true">
    </vn-crud-model>
    <vn-data-viewer model="modelExpeditionStates">
        <vn-card class="vn-w-md">
        <vn-table model="modelExpeditionStates">
            <vn-thead>
                <vn-tr>
                    <vn-th field="state">State</vn-th>
                    <vn-th field="worker">Worker</vn-th>
                    <vn-th field="created">Created</vn-th>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr ng-repeat="expeditionState in expeditionStates">
                    <vn-td>{{::expeditionState.state}}</vn-td>
                    <vn-td expand>
                        <span 
                            ng-class="{'link': expeditionState.workerFk}"
                            ng-click="workerDescriptor.show($event, expeditionState.workerFk)">
                            {{::expeditionState.name || 'System' | translate}}
                        </span>
                    </vn-td>
                    <vn-td shrink-datetime>{{::expeditionState.created | date:'dd/MM/yyyy HH:mm'}}</vn-td>
                </vn-tr>
            </vn-tbody>
        </vn-table>
        </vn-card>
    </vn-data-viewer>
    <vn-worker-descriptor-popover 
        vn-id="workerDescriptor">
    </vn-worker-descriptor-popover>
</vn-popup>

<vn-menu vn-id="moreOptions">
    <vn-item translate
        name="withoutRoute"
        ng-click="selectLanded.show('withoutRoute')">
        New ticket without route
    </vn-item>
    <vn-item translate
        name="withRoute"
        ng-click="selectLanded.show('withRoute')">
        New ticket with route
    </vn-item>
</vn-menu>

<vn-dialog 
    vn-id="selectLanded"
    on-accept="$ctrl.createTicket($ctrl.landed, $ctrl.newRoute)">
    <tpl-body>
        <vn-date-picker
            label="Landed" 
            ng-model="$ctrl.landed">
        </vn-date-picker>
        <vn-textfield
            ng-show="selectLanded.data == 'withRoute'"
            label="Route id"
            ng-model="$ctrl.newRoute">
        </vn-textfield>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Accept</button>
    </tpl-buttons>
</vn-dialog>