<vn-crud-model
    vn-id="model"
    url="Travels/extraCommunityFilter"
    user-params="::$ctrl.defaultFilter"
    data="travels"
    order="landed ASC, shipped ASC, travelFk, loadPriority, agencyModeFk, supplierName, evaNotes"
    limit="20"
    auto-load="true">
</vn-crud-model>
<vn-portal slot="topbar">
    <vn-searchbar
        vn-focus
        panel="vn-extra-community-search-panel"
        info="Search by travel id or reference"
        placeholder="Search by extra community travel"
        suggested-filter="$ctrl.defaultFilter"
        filter="$ctrl.defaultFilter"
        auto-state="false"
        model="model">
    </vn-searchbar>
</vn-portal>
<vn-card class="travel-list scrollable">
    <smart-table
        model="model"
        options="$ctrl.smartTableOptions">
        <slot-actions>
            <section>
                <vn-tool-bar class="vn-mb-md">
                    <vn-button
                        disabled="!travels.length"
                        icon="picture_as_pdf"
                        ng-click="$ctrl.showReport()"
                        vn-tooltip="Open as PDF">
                    </vn-button>
                </vn-tool-bar>
            </section>
        </slot-actions>
        <slot-table>
            <table>
                <thead>
                    <tr>
                        <th field="id" shrink>
                            <span translate>Id</span>
                        </th>
                        <th field="cargoSupplierFk">
                            <span translate>Supplier</span>
                        </th>
                        <th field="agencyModeFk">
                            <span translate>Agency</span>
                        </th>
                        <th field="invoiceAmount">
                            <span translate>Amount</span>
                        </th>
                        <th field="ref">
                            <span translate>Reference</span>
                        </th>
                        <th field="stickers" number>
                            <span translate>Packages</span>
                        </th>
                        <th field="kg" number>
                            <span translate>Bl. KG</span>
                        </th>
                        <th field="loadedKg" number>
                            <span translate>Phy. KG</span>
                        </th>
                        <th field="volumeKg" number>
                            <span translate>Vol. KG</span>
                        </th>
                        <th
                            field="warehouseOutFk"
                            translate-attr="{title: 'Warehouse Out'}">
                            <span translate>Wh. Out</span>
                        </th>
                        <th field="shipped">
                            <span translate>W. Shipped</span>
                        </th>
                        <th
                            field="warehouseInFk"
                            translate-attr="{title: 'Warehouse In'}">
                            <span translate>Wh. In</span>
                        </th>
                        <th field="landed">
                            <span translate>W. Landed</span>
                        </th>
                    </tr>
                </thead>
                <tbody
                    ng-repeat="travel in travels"
                    class="vn-mb-md"
                    vn-droppable="$ctrl.onDrop($event)"
                    ng-attr-id="{{::travel.id}}"
                    vn-stop-click>
                    <tr
                        class="header"
                        vn-anchor="::{
                            state: 'travel.card.basicData',
                            params: {id: travel.id}
                        }">
                        <td vn-click-stop>
                            <span
                                class="link"
                                ng-click="travelDescriptor.show($event, travel.id)">
                                {{::travel.id}}
                            </span>
                        </td>
                        <td class="multi-line" vn-click-stop>
                            <span
                                class="link"
                                ng-click="supplierDescriptor.show($event, travel.cargoSupplierFk)">
                                {{::travel.cargoSupplierNickname}}
                            </span>
                        </td>
                        <td></td>
                        <td>{{::travel.agencyModeName}}</td>
                        <td vn-click-stop>
                            <vn-td-editable name="reference" expand>
                                <text>{{travel.ref}}</text>
                                <field>
                                    <vn-textfield class="dense" vn-focus
                                        ng-model="travel.ref"
                                        on-change="$ctrl.save(travel.id, {ref: value})">
                                    </vn-textfield>
                                </field>
                            </vn-td-editable>
                        </td>
                        <td number>{{::travel.stickers}}</td>
                        <td vn-click-stop>
                            <vn-td-editable name="lockedKg" expand style="text-align: right">
                                <text number>{{travel.kg}}</text>
                                <field>
                                    <vn-input-number class="dense" vn-focus
                                        ng-model="travel.kg"
                                        on-change="$ctrl.save(travel.id, {kg: value})"
                                        min="0">
                                    </vn-input-number>
                                </field>
                            </vn-td-editable>
                        </td>
                        <td number>{{::travel.loadedKg}}</td>
                        <td number>{{::travel.volumeKg}}</td>
                        <td expand>{{::travel.warehouseOutName}}</td>
                        <td expand>{{::travel.shipped | date: 'dd/MM/yyyy'}}</td>
                        <td expand>{{::travel.warehouseInName}}</td>
                        <td expand>{{::travel.landed | date: 'dd/MM/yyyy'}}</td>
                    </tr>
                    <tr
                        ng-repeat="entry in travel.entries"
                        draggable
                        ng-attr-id="{{::entry.id}}"
                        ng-click="$event.preventDefault()">
                        <td>
                            <span class="link"
                                ng-click="entryDescriptor.show($event, entry.id)">
                                {{::entry.id}}
                            </span>
                        </td>
                        <td class="multi-line">
                            <span
                                class="link"
                                ng-click="supplierDescriptor.show($event, entry.supplierFk)">
                                {{::entry.supplierName}}
                            </span>
                        </td>
                        <td number>{{::entry.invoiceAmount | currency: 'EUR': 2}}</td>
                        <td></td>
                        <td class="td-editable">{{::entry.reference}}</td>
                        <td number>{{::entry.stickers}}</td>
                        <td number></td>
                        <td number>{{::entry.loadedkg}}</td>
                        <td number>{{::entry.volumeKg}}</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </slot-table>
    </smart-table>
</vn-card>
<vn-travel-descriptor-popover
    vn-id="travelDescriptor">
</vn-travel-descriptor-popover>
<vn-entry-descriptor-popover
    vn-id="entryDescriptor">
</vn-entry-descriptor-popover>
<vn-supplier-descriptor-popover
    vn-id="supplierDescriptor">
</vn-supplier-descriptor-popover>