<vn-crud-model
    vn-id="model"
    url="Routes/{{$ctrl.$params.id}}/getTickets"
    order="priority ASC"
    data="$ctrl.tickets"
    auto-load="true">
</vn-crud-model>
<vn-data-viewer model="model">
    <form name="form">
        <vn-card class="vn-pa-md">
            <vn-tool-bar>
                <vn-button
                    icon="icon-wand"
                    ng-click="$ctrl.guessPriority()"
                    vn-tooltip="Sort routes">
                </vn-button>
                <vn-button
                    disabled="!$ctrl.isChecked"
                    ng-click="$ctrl.goToBuscaman()"
                    vn-tooltip="Open buscaman"
                    icon="icon-buscaman">
                </vn-button>
            </vn-tool-bar>
        </vn-card>
        <vn-card class="vn-mt-md">
            <vn-table model="model" auto-load="false" vn-droppable="$ctrl.onDrop($event)">
                <vn-thead>
                    <vn-tr>
                        <vn-th shrink>
                            <vn-multi-check
                                model="model">
                            </vn-multi-check>
                        </vn-th>
                        <vn-th class="order-field">Order</vn-th>
                        <vn-th number>Ticket</vn-th>
                        <vn-th expand>Client</vn-th>
                        <vn-th shrink>Packages</vn-th>
                        <vn-th shrink>m³</vn-th>
                        <vn-th>Warehouse</vn-th>
                        <vn-th translate-attr="{title: 'Postcode'}" shrink>PC</vn-th>
                        <vn-th expand>Street</vn-th>
                        <vn-th shrink></vn-th>
                        <vn-th shrink></vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <vn-tr ng-repeat="ticket in $ctrl.tickets">
                        <vn-td shrink>
                            <vn-check
                                ng-model="ticket.checked">
                            </vn-check>
                        </vn-td>
                        <vn-td class="order-field">
                            <vn-input-number
                                on-change="$ctrl.setPriority(ticket.id, ticket.priority)"
                                ng-model="ticket.priority"
                                rule="Ticket"
                                class="dense">
                            </vn-input-number>
                        </vn-td>
                        <vn-td number>
                            <span
                                ng-click="ticketDescriptor.show($event, ticket.id)"
                                class="link">
                                {{ticket.id}}
                            </span>
                        </vn-td>
                        <vn-td expand>
                            <span
                                ng-click="clientDescriptor.show($event, ticket.clientFk)"
                                class="link">
                                {{ticket.nickname}}
                            </span>
                        </vn-td>
                        <vn-td shrink>{{ticket.packages}}</vn-td>
                        <vn-td shrink>{{::ticket.volume | number:1}}</vn-td>
                        <vn-td expand>{{ticket.warehouse.name}}</vn-td>
                        <vn-td shrink>{{ticket.address.postalCode}}</vn-td>
                        <vn-td expand title="{{ticket.address.street}}">{{ticket.address.street}}</vn-td>
                        <vn-td shrink>
                            <vn-icon
                                ng-if="ticket.notes.length"
                                title="::{{ticket.notes[0].description}}"
                                icon="insert_drive_file"
                                class="bright">
                            </vn-icon>
                        </vn-td>
                        <vn-td>
                            <vn-icon-button
                                translate-attr="{title: 'Remove ticket'}"
                                icon="delete"
                                ng-click="$ctrl.showDeleteConfirm(ticket.id)"
                                tabindex="-1">
                            </vn-icon-button>
                        </vn-td>
                    </vn-tr>
                </vn-tbody>
            </vn-table>
        </vn-card>
    </form>
</vn-data-viewer>
<vn-ticket-descriptor-popover 
    vn-id="ticketDescriptor">
</vn-ticket-descriptor-popover>
<vn-client-descriptor-popover
    vn-id="clientDescriptor">
</vn-client-descriptor-popover>
<vn-confirm 
    vn-id="confirm"
    question="Delete ticket from route?"
    on-accept="$ctrl.removeTicketFromRoute()">
</vn-confirm>
<vn-crud-model 
    vn-id="possibleTicketsModel"
    url="Tickets"
    filter="$ctrl.possibleTicketsFilter"
    data="$ctrl.possibleTickets">
</vn-crud-model>
<vn-dialog
    vn-id="possibleTicketsDialog"
    on-accept="$ctrl.setTicketsRoute()"
    message="Tickets to add">
    <tpl-body>
        <vn-data-viewer class="vn-pa-md" model="possibleTicketsModel">
            <vn-table model="possibleTicketsModel" auto-load="false">
                <vn-thead>
                    <vn-tr>
                        <vn-th shrink>
                            <vn-multi-check 
                                model="possibleTicketsModel">
                            </vn-multi-check>
                        </vn-th>
                        <vn-th number>Ticket</vn-th>
                        <vn-th>Client</vn-th>
                        <vn-th number shrink>Packages</vn-th>
                        <vn-th shrink>Warehouse</vn-th>
                        <vn-th expand>Postcode</vn-th>
                        <vn-th>Address</vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <vn-tr ng-repeat="ticket in $ctrl.possibleTickets">
                        <vn-td shrink>
                            <vn-check 
                                ng-model="ticket.checked">
                            </vn-check>
                        </vn-td>
                        <vn-td number>{{ticket.id}}</vn-td>
                        <vn-td number>
                            <span
                                ng-click="$ctrl.showClientDescriptor($event, ticket.clientFk)"
                                class="link">
                                {{ticket.nickname}}
                            </span>
                        </vn-td>
                        <vn-td number shrink>{{ticket.packages}}</vn-td>
                        <vn-td expand>{{ticket.warehouse.name}}</vn-td>
                        <vn-td number shrink>{{ticket.address.postalCode}}</vn-td>
                        <vn-td expand title="{{ticket.address.street}}">{{ticket.address.street}}</vn-td>
                    </vn-tr>
                </vn-tbody>
            </vn-table>
        </vn-data-viewer>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Add</button>
    </tpl-buttons>
</vn-dialog>
<vn-float-button
    icon="add"
    ng-click="$ctrl.openPossibleTicketsDialog()"
    vn-tooltip="Add ticket"
    vn-acl="delivery"
    vn-acl-action="remove"
    vn-bind="+"
    fixed-bottom-right>
</vn-float-button>