<vn-auto-search
    model="model">
</vn-auto-search>
<vn-crud-model
    auto-load="true"
    url="AgencyModes"
    data="agencyModes">
</vn-crud-model>
<vn-crud-model
    auto-load="true"
    url="Vehicles"
    data="vehicles">
</vn-crud-model>
<vn-crud-model
    auto-load="true"
    url="Workers/activeWithInheritedRole"
    data="activeWithInheritedRole">
</vn-crud-model>
<div class="vn-w-xl">
    <vn-card>
        <smart-table
            model="model"
            options="$ctrl.smartTableOptions"
            expr-builder="$ctrl.exprBuilder(param, value)">
            <slot-actions>
                <section class="header">
                    <vn-tool-bar class="vn-mb-md">
                        <vn-button
                            icon="icon-clone"
                            ng-show="$ctrl.totalChecked > 0"
                            ng-click="$ctrl.openClonationDialog()"
                            vn-tooltip="Clone selected routes">
                        </vn-button>
                        <vn-button
                            icon="cloud_download"
                            ng-show="$ctrl.totalChecked > 0"
                            ng-click="$ctrl.showRouteReport()"
                            vn-tooltip="Download selected routes as PDF">
                        </vn-button>
                        <vn-button
                            icon="check"
                            ng-show="$ctrl.totalChecked > 0"
                            ng-click="$ctrl.markAsServed()"
                            vn-tooltip="Mark as served">
                        </vn-button>
                </section>
            </slot-actions>
            <slot-table>
                <table model="model">
                    <thead>
                        <tr>
                            <th shrink>
                                <vn-multi-check
                                    model="model">
                                </vn-multi-check>
                            </th>
                            <th field="id" number>
                                <span translate>Id</span>
                            </th>
                            <th field="workerFk">
                                <span translate>Worker</span>
                            </th>
                            <th field="agencyName">
                                <span translate>Agency</span>
                            </th>
                            <th field="vehiclePlateNumber">
                                <span translate>Vehicle</span>
                            </th>
                            <th field="created" shrink-date>
                                <span translate>Date</span>
                            </th>
                            <th field="m3" number>
                                <span translate>m³</span>
                            </th>
                            <th field="description">
                                <span translate>Description</span>
                            </th>
                            <th field="started">
                                <span translate>Hour started</span>
                            </th>
                            <th field="finished">
                                <span translate>Hour finished</span>
                            </th>
                            <th shrink></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="route in model.data"
                            class="clickable vn-tr search-result"
                            ng-attr-id="{{::route.id}}" vn-droppable="$ctrl.onDrop($event)">
                            <td shrink>
                                <vn-check
                                    ng-model="route.checked"
                                    vn-click-stop>
                                </vn-check>
                            </td>
                            <td number>{{::route.id | dashIfEmpty}}</td>
                            <td>
                                <vn-autocomplete
                                    ng-model="route.workerFk"
                                    data="activeWithInheritedRole"
                                    show-field="nickname"
                                    search-function="{firstName: $search}"
                                    value-field="id"
                                    where="{role: 'employee'}"
                                    on-change="$ctrl.updateAttributes(route)"
                                    vn-click-stop>
                                    <tpl-item>
                                        <div>{{name}} - {{nickname}}</div>
                                    </tpl-item>
                                </vn-autocomplete>
                            </td>
                            <td expand>
                                <vn-autocomplete
                                    ng-model="route.agencyModeFk"
                                    data="agencyModes"
                                    show-field="name"
                                    value-field="id"
                                    on-change="$ctrl.updateAttributes(route)"
                                    vn-click-stop>
                                </vn-autocomplete>
                            </td>
                            <td expand>
                                <vn-autocomplete
                                    ng-model="route.vehicleFk"
                                    data="vehicles"
                                    show-field="numberPlate"
                                    value-field="id"
                                    on-change="$ctrl.updateAttributes(route)"
                                    vn-click-stop>
                                </vn-autocomplete>
                            </td >
                            <td>
                                <vn-date-picker
                                    ng-model="route.created"
                                    on-change="$ctrl.updateAttributes(route)">
                            </vn-horizontal>
                            </td>
                            <td number>{{::route.m3 | dashIfEmpty}}</td>
                            <td>
                                <vn-textfield
                                    ng-model="route.description"
                                    on-change="$ctrl.updateAttributes(route)">
                                </vn-textfield>
                            </td>
                            <td expand>
                                <vn-input-time
                                    ng-model="route.started"
                                    on-change="$ctrl.updateAttributes(route)">
                                </vn-input-time>
                            </td>
                            <td expand>
                                <vn-input-time
                                    ng-model="route.finished"
                                    on-change="$ctrl.updateAttributes(route)">
                                </vn-input-time>
                            </td>
                            <td>
                                <vn-icon-button
                                    vn-click-stop="$ctrl.showTicketPopup(route)"
                                    vn-tooltip="Añadir tickets"
                                    icon="icon-ticketAdd">
                                </vn-icon-button>
                                <vn-icon-button
                                    vn-click-stop="$ctrl.preview(route)"
                                    vn-tooltip="Preview"
                                    icon="preview">
                                </vn-icon-button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </slot-table>
        </smart-table>
    </vn-card>
</div>

<vn-popup vn-id="summary">
    <vn-route-summary
        route="$ctrl.routeSelected">
    </vn-route-summary>
</vn-popup>

<vn-route-ticket-popup
    vn-id="ticketPopup"
    route="$ctrl.routeSelected">
</vn-route-ticket-popup>

<vn-worker-descriptor-popover
    vn-id="workerDescriptor">
</vn-worker-descriptor-popover>
<vn-ticket-descriptor-popover
    vn-id="ticketDescriptor">
</vn-ticket-descriptor-popover>
<vn-client-descriptor-popover
    vn-id="clientDescriptor">
</vn-client-descriptor-popover>

<div fixed-bottom-right>
    <vn-vertical style="align-items: center;">
        <a ui-sref="route.create" vn-bind="+">
            <vn-button class="round md vn-mb-sm"
                icon="add"
                vn-tooltip="New route"
                tooltip-position="left">
            </vn-button>
        </a>
    </vn-vertical>
</div>

<!-- Clonation dialog -->
<vn-dialog class="edit"
    vn-id="clonationDialog"
    on-accept="$ctrl.cloneSelectedRoutes()"
    message="Select the starting date">
    <tpl-body>
        <vn-horizontal>
            <vn-date-picker
                label="Starting date"
                ng-model="$ctrl.createdDate">
            </vn-date-picker>
        </vn-horizontal>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Clone</button>
    </tpl-buttons>
</vn-dialog>