<vn-card class="summary">
    <h5>
        <span>
            Ticket #{{$ctrl.summary.id}} - {{$ctrl.summary.client.name}} 
            ({{$ctrl.summary.client.id}}) - {{$ctrl.summary.nickname}}
        </span>
        <vn-button
            disabled="!$ctrl.isEditable" 
            class="flat"
            style="color: inherit;"
            label="SET OK" 
            ng-click="$ctrl.setOkState()"
            vn-tooltip="Change ticket state to 'Ok'">
        </vn-button>
    </h5>
    <vn-horizontal>
        <vn-one>
            <vn-label-value label="State" 
                value="{{$ctrl.summary.state.state.name}}">
            </vn-label-value>
            <vn-label-value label="Salesperson" 
                value="{{$ctrl.summary.client.salesPerson.user.nickname}}">
            </vn-label-value>
            <vn-label-value label="Agency" 
                value="{{$ctrl.summary.agencyMode.name}}">
            </vn-label-value>
            <vn-label-value label="Zone" 
                value="{{$ctrl.summary.zone.name}}">
            </vn-label-value>
            <vn-label-value label="Warehouse" 
                value="{{$ctrl.summary.warehouse.name}}">
            </vn-label-value>
            <vn-label-value label="Route">
                <span 
                    ng-click="$ctrl.showRouteDescriptor($event)"
                    class="link">
                    {{$ctrl.summary.routeFk}}
                </span>
            </vn-label-value>
            <vn-label-value label="Invoice" 
                value="{{$ctrl.summary.refFk}}">
            </vn-label-value>
        </vn-one>
        <vn-one>
            <vn-label-value label="Shipped" 
                value="{{$ctrl.summary.shipped | date: 'dd/MM/yyyy HH:mm'}}">
            </vn-label-value>
            <vn-label-value label="Landed" 
                value="{{$ctrl.summary.landed | date: 'dd/MM/yyyy'}}">
            </vn-label-value>
            <vn-label-value label="Package size" 
                value="{{$ctrl.summary.packages}}">
            </vn-label-value>
            <vn-label-value label="Address" 
                value="{{$ctrl.formattedAddress}}">
            </vn-label-value>
            <vn-label-value label="Address phone"
                ng-if="$ctrl.summary.address.phone != null" 
                value="{{$ctrl.summary.address.phone}}">
            </vn-label-value>
            <vn-label-value label="Address mobile"
                ng-if="$ctrl.summary.address.mobile != null"
                value="{{$ctrl.summary.address.mobile}}">
            </vn-label-value>
            <vn-label-value label="Client phone"
                ng-if="$ctrl.summary.client.phone != null"
                value="{{$ctrl.summary.client.phone}}">
            </vn-label-value>
            <vn-label-value label="Client mobile"
                ng-if="$ctrl.summary.client.mobile != null"
                value="{{$ctrl.summary.client.mobile}}">
            </vn-label-value>
        </vn-one>
        <vn-one class="notes">
            <vn-label-value
                label="{{note.observationType.description}}"
                ng-repeat="note in $ctrl.summary.notes track by note.id"
                value="{{note.description}}">
            </vn-label-value>
        </vn-one>
        <vn-one class="taxes">
            <p><vn-label translate>Subtotal</vn-label> {{$ctrl.summary.subtotal | currency: 'EUR':2}}</p>
            <p><vn-label translate>VAT</vn-label> {{$ctrl.summary.vat | currency: 'EUR':2}}</p>
            <p><vn-label><strong>Total</strong></vn-label> <strong>{{$ctrl.summary.total | currency: 'EUR':2}}</strong></p>
        </vn-one>
        <vn-auto name="sales">
            <h4 translate>Sale</h4>
            <vn-table>
                <vn-thead>
                    <vn-tr>
                        <vn-th shrink></vn-th>
                        <vn-th number shrink>Item</vn-th>
                        <vn-th number shrink>Quantity</vn-th>
                        <vn-th>Description</vn-th>
                        <vn-th number>Price</vn-th>
                        <vn-th number>Discount</vn-th>
                        <vn-th number>Amount</vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <vn-tr ng-repeat="sale in $ctrl.summary.sales track by sale.id">
                        <vn-td shrink>
                            <a ui-sref="claim.card.basicData({id: sale.claimBeginning.claimFk})">
                                <vn-icon
                                    ng-show="sale.claimBeginning.claimFk"
                                    icon="icon-claims"
                                    vn-tooltip="{{::$ctrl.$translate.instant('Claim')}}: {{::sale.claimBeginning.claimFk}}">
                                </vn-icon>
                            </a>
                            <vn-icon 
                                ng-show="sale.visible || sale.available" 
                                color-main
                                icon="warning"
                                vn-tooltip="Visible: {{::sale.visible || 0}} <br> {{::$ctrl.translate.instant('Available')}} {{::sale.available || 0}}">
                            </vn-icon>
                            <vn-icon ng-show="sale.reserved" icon="icon-reserva"></vn-icon>
                        </vn-td>
                        <vn-td number shrink>
                            <span 
                                ng-click="$ctrl.showDescriptor($event, sale.itemFk)"
                                class="link">
                                {{sale.itemFk | zeroFill:6}}
                            </span>
                        </vn-td>
                        <vn-td number shrink>{{::sale.quantity}}</vn-td>
                        <vn-td expand>
                            <vn-fetched-tags 
                                max-length="6" 
                                item="::sale.item"
                                name="::sale.concept"
                                sub-name="::sale.item.subName">
                            </vn-fetched-tags>
                        </vn-td>
                        <vn-td number>{{::sale.price | currency: 'EUR':2}}</vn-td>
                        <vn-td number>{{::sale.discount}} %</vn-td>
                        <vn-td number>{{::sale.quantity * sale.price * ((100 - sale.discount) / 100) | currency: 'EUR':2}}</vn-td>
                    </vn-tr>
                </vn-tbody>
            </vn-table>
        </vn-auto>
        <vn-one ng-if="$ctrl.summary.packagings.length != 0">
            <h4 translate>Packages</h4>
            <vn-table model="model">
                <vn-thead>
                    <vn-tr>
                        <vn-th number>Created</vn-th>
                        <vn-th number>Package</vn-th>
                        <vn-th number>Quantity</vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <vn-tr ng-repeat="package in $ctrl.summary.packagings">
                        <vn-td number>{{package.created | date: 'dd/MM/yyyy'}}</vn-td>
                        <vn-td number>{{package.packaging.item.name}}</vn-td>
                        <vn-td number>{{package.quantity}}</vn-td>
                    </vn-tr>
                </vn-tbody>
            </vn-table>
        </vn-one>
        <vn-one class="services" ng-if="$ctrl.summary.services.length != 0">
            <h4 translate>Service</h4>
            <vn-table model="model">
                <vn-thead>
                    <vn-tr>
                        <vn-th shrink></vn-th>
                        <vn-th class="identifier" number shrink>Id</vn-th>
                        <vn-th number shrink>Quantity</vn-th>
                        <vn-th expand>Description</vn-th>
                        <vn-th number shrink>Price</vn-th>
                        <vn-th class="tax-class">Tax class</vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <vn-tr ng-repeat="service in $ctrl.summary.services">
                        <vn-td></vn-td>
                        <vn-td class="identifier" number shrink>{{::service.id}}</vn-td>
                        <vn-td number shrink>{{::service.quantity}}</vn-td>
                        <vn-td expand>{{::service.description}}</vn-td>
                        <vn-td number shrink>{{::service.price}}</vn-td>
                        <vn-td class="tax-class">{{::service.taxClass.description}}</vn-td>
                    </vn-tr>
                </vn-tbody>
            </vn-table>
        </vn-one>
        <vn-auto ng-if="$ctrl.summary.requests.length != 0">
            <h4 translate>Purchase request</h4>
            <vn-table model="model">
                <vn-thead>
                    <vn-tr>
                        <vn-th>Description</vn-th>
                        <vn-th number>Created</vn-th>
                        <vn-th>Requester</vn-th>
                        <vn-th>Atender</vn-th>
                        <vn-th number>Quantity</vn-th>
                        <vn-th number>Price</vn-th>
                        <vn-th number>Item</vn-th>
                        <vn-th number>Ok</vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <vn-tr ng-repeat="request in $ctrl.summary.requests">
                        <vn-td expand>{{::request.description}}</vn-td>
                        <vn-td number>{{::request.created | date: 'dd/MM/yyyy'}}</vn-td>
                        <vn-td>{{::request.requester.user.name}}</vn-td>
                        <vn-td>{{::request.atender.user.name}}</vn-td>
                        <vn-td number>{{::request.quantity}}</vn-td>
                        <vn-td number>{{::request.price}}</vn-td>
                        <vn-td number>
                            <span 
                                ng-show="::request.saleFk"
                                ng-click="$ctrl.showDescriptor($event, request.sale.itemFk)"
                                class="link">
                                {{request.sale.itemFk | zeroFill:6}}
                            </span>
                        </vn-td>
                        <vn-td number>
                            <vn-check vn-one
                                ng-model="::request.isOk"
                                triple-state="true"
                                title="{{$ctrl.getRequestState(request.isOk)}}"
                                disabled="true">
                            </vn-check>
                        </vn-td>
                    </vn-tr>
                </vn-tbody>
            </vn-table>
        </vn-auto>
    </vn-horizontal>
</vn-card>
<vn-route-descriptor-popover
    vn-id="route-descriptor"
    quicklinks="$ctrl.routeQuicklinks">
</vn-route-descriptor-popover>
<vn-item-descriptor-popover
    vn-id="descriptor"
    quicklinks="$ctrl.quicklinks">
</vn-item-descriptor-popover>