<vn-crud-model
    vn-id="model"
    url="Routes/getTickets"
    filter="{id: $ctrl.$params.id}"
    order="priority ASC"
    data="$ctrl.tickets"
    auto-load="true">
</vn-crud-model>
<vn-data-viewer 
    model="model">
    <form 
        class="vn-w-xl"
        name="form">
        <vn-card>
        <section 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-button 
                    disabled="!$ctrl.isChecked"
                    ng-click="$ctrl.deletePriority()"
                    vn-tooltip="Delete priority"
                    icon="filter_alt_off">
                </vn-button>
                <vn-button 
                    ng-click="$ctrl.setOrderedPriority($ctrl.tickets)"
                    vn-tooltip="Renumber all tickets in the order you see on the screen"
                    icon="format_list_numbered">
                </vn-button>
            </vn-tool-bar>
            <vn-table class="vn-pt-md" 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 shrink></vn-th>
                        <vn-th field="priority">Order</vn-th>
                        <vn-th field="street" expand>Street</vn-th>
                        <vn-th field="city">City</vn-th>
                        <vn-th field="postalCode" translate-attr="{title: 'Postcode'}" shrink>PC</vn-th>
                        <vn-th field="clientFk" expand>Client</vn-th>
                        <vn-th field="packages" shrink>Packages</vn-th>
                        <vn-th field="volume" shrink>m³</vn-th>
                        <vn-th field="id" number>Ticket</vn-th>
                        <vn-th shrink></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>
                            <vn-icon-button
                                icon="low_priority"
                                ng-click="$ctrl.setHighestPriority(ticket)"
                                vn-tooltip="Assign highest priority"
                                tabindex="-1">
                            </vn-icon-button>
                        </vn-td>
                        <vn-td>
                            <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 expand title="{{::ticket.street}}">{{::ticket.street}}</vn-td>
                        <vn-td expand>{{::ticket.city}}</vn-td>
                        <vn-td shrink>{{::ticket.postalCode}}</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:2}}</vn-td>
                        <vn-td number>
                            <span
                                ng-click="ticketDescriptor.show($event, ticket.id)"
                                class="link">
                                {{::ticket.id}}
                            </span>
                        </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-td>
                            <vn-icon-button
                                ng-if="::ticket.description"
                                vn-tooltip="{{::ticket.description}}"
                                icon="icon-notes"
                                tabindex="-1">
                            </vn-icon-button>
                        </vn-td>
                    </a>
                </vn-tbody>
            </vn-table>
        </section>
        </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($index)">
</vn-confirm>

<vn-route-ticket-popup
    vn-id="ticketPopup"
    route="$ctrl.$params"
    parent-reload="$ctrl.$.model.refresh()">
</vn-route-ticket-popup>

<vn-float-button
    icon="add"
    ng-click="$ctrl.$.ticketPopup.show()"
    vn-tooltip="Add ticket"
    vn-acl="delivery"
    vn-acl-action="remove"
    vn-bind="+"
    fixed-bottom-right>
</vn-float-button>
<vn-ticket-descriptor-popover 
    vn-id="ticket-descriptor">
</vn-ticket-descriptor-popover>
<vn-client-descriptor-popover 
    vn-id="client-descriptor">
</vn-client-descriptor-popover>