<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-card class="vn-pa-lg">
    <smart-table model="model"
        view-config-id="expeditionIndex"
        options="$ctrl.smartTableOptions"
        expr-builder="$ctrl.exprBuilder(param, value)">
        <slot-actions>
                <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>
        </slot-actions>
        <slot-table>
            <table>
                <thead>
                    <tr>
                        <th shrink>
                            <multi-check 
                                model="model">
                            </multi-check>
                        </th>
                        <th field="expeditionFk" number>
                            <span translate>Expedition</span>
                        </th>
                        <th field="itemFk" number>
                            <span translate>Item</span>
                        </th>
                        <th field="packageItemName">
                            <span translate>Name</span>
                        </th>
                        <th field="freightItemName">
                            <span translate>Package Type</span>
                        </th>
                        <th field="counter" number>
                            <span translate>Counter</span>
                        </th>
                        <th field="externalId" number>
                            <span translate>externalId</span>
                        </th>
                        <th field="created" expand>
                            <span translate>Created</span>
                        </th>
                        <th field="state" expand>
                            <span translate>State</span>
                        </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="expedition in expeditions">
                        <td shrink>
                            <vn-check tabindex="-1"
                                ng-model="expedition.checked">
                            </vn-check>
                        </td>
                        <td number expand>{{expedition.id}}</td>
                        <td number>
                            <span
                                ng-class="{link: expedition.packagingItemFk}"
                                ng-click="itemDescriptor.show($event, expedition.packagingItemFk)">
                                {{expedition.packagingItemFk}}
                            </span>
                        </td>
                        <td>{{::expedition.packageItemName}}</td>
                        <td>{{::expedition.freightItemName}}</td>
                        <td number>{{::expedition.counter}}</td>
                        <td expand>{{::expedition.externalId}}</td>
                        <td shrink-datetime>{{::expedition.created | date:'dd/MM/yyyy HH:mm'}}</td>
                        <td>{{::expedition.state}}</td>
                        <td>
                            <vn-icon-button
                                vn-click-stop="$ctrl.showLog(expedition)"
                                vn-tooltip="Status log"
                                icon="history">
                            </vn-icon-button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </slot-table>
    </smart-table>    
</vn-card>
<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>