<vn-crud-model
    vn-id="model"
    url="ClaimDms"
    filter="::$ctrl.filter"
    data="photos">
</vn-crud-model>
<vn-card class="summary">
    <h5>
        <a
            ng-if="::$ctrl.summary.claim.id"
            vn-tooltip="Go to the claim"
            ui-sref="claim.card.summary({id: {{::$ctrl.summary.claim.id}}})"
            name="goToSummary">
            <vn-icon-button icon="launch"></vn-icon-button>
        </a>
        <span>{{::$ctrl.summary.claim.id}} - {{::$ctrl.summary.claim.client.name}}</span>
        <vn-button-menu
            disabled="!$ctrl.summary.isEditable"
            class="message"
            label="Change state"
            value-field="id"
            show-field="description"
            url="claimStates"
            on-change="$ctrl.changeState(value)">
        </vn-button-menu>
    </h5>
    <vn-horizontal>
        <vn-auto>
            <h4>
                <a
                    ui-sref="claim.card.basicData({id:$ctrl.claim.id})"
                    target="_self">
                    <span translate vn-tooltip="Go to">Basic data</span>
                </a>
            </h4>
                <vn-label-value
                    label="Created"
                    value="{{$ctrl.summary.claim.created | date: 'dd/MM/yyyy'}}">
                </vn-label-value>
                <vn-label-value
                    label="State"
                    value="{{$ctrl.summary.claim.claimState.description}}">
                </vn-label-value>
                <vn-label-value
                label="Salesperson"
                value="{{$ctrl.summary.claim.client.salesPersonUser.name}}">
            </vn-label-value>
            <vn-label-value
                label="Attended by"
                value="{{$ctrl.summary.claim.worker.user.nickname}}">
            </vn-label-value>
        </vn-auto>
        <vn-auto>
            <h4 ng-show="$ctrl.isSalesPerson && $ctrl.summary.observations.length">
                <a
                    ui-sref="claim.card.note.index({id:$ctrl.claim.id})"
                    target="_self">
                    <span translate vn-tooltip="Go to">Observations</span>
                </a>
            </h4>
            <h4
                ng-show="!$ctrl.isSalesPerson && $ctrl.summary.observations.length"
                translate>
                Observations
            </h4>
            <div
                ng-repeat="note in $ctrl.summary.observations"
                class="note vn-pa-sm border-solid border-radius vn-mb-md">
                <vn-horizontal class="vn-mb-sm" style="color: #666">
                    <vn-one>{{::note.worker.firstName}} {{::note.worker.lastName}}</vn-one>
                    <vn-auto>{{::note.created | date:'dd/MM/yyyy HH:mm'}}</vn-auto>
                </vn-horizontal>
                <vn-horizontal class="text">
                    {{::note.text}}
                </vn-horizontal>
            </div>
        </vn-auto>
        <vn-auto>
            <h4 ng-show="$ctrl.isSalesPerson">
                <a
                    ui-sref="claim.card.detail({id:$ctrl.claim.id})"
                    target="_self">
                    <span translate vn-tooltip="Go to">Detail</span>
                </a>
            </h4>
            <h4
                ng-show="!$ctrl.isSalesPerson"
                translate>
                Detail
            </h4>
            <vn-data-viewer data="::$ctrl.summary.salesClaimed">
                <vn-table>
                    <vn-thead>
                        <vn-tr>
                            <vn-th number>Item</vn-th>
                            <vn-th expand>Landed</vn-th>
                            <vn-th number>Quantity</vn-th>
                            <vn-th number>Claimed</vn-th>
                            <vn-th>Description</vn-th>
                            <vn-th number>Price</vn-th>
                            <vn-th number>Disc.</vn-th>
                            <vn-th number>Total</vn-th>
                        </vn-tr>
                    </vn-thead>
                    <vn-tbody>
                        <vn-tr ng-repeat="saleClaimed in $ctrl.summary.salesClaimed">
                            <vn-td number>
                                <span
                                    ng-click="itemDescriptor.show($event, saleClaimed.sale.itemFk, saleClaimed.sale.id)"
                                    class="link">
                                    {{::saleClaimed.sale.itemFk}}
                                </span>
                            </vn-td>
                            <vn-td expand>{{::saleClaimed.sale.ticket.landed | date: 'dd/MM/yyyy'}}</vn-td>
                            <vn-td number>{{::saleClaimed.sale.quantity}}</vn-td>
                            <vn-td number>{{::saleClaimed.quantity}}</vn-td>
                            <vn-td expand>{{::saleClaimed.sale.concept}}</vn-td>
                            <vn-td number>{{::saleClaimed.sale.price | currency: 'EUR':2}}</vn-td>
                            <vn-td number>{{::saleClaimed.sale.discount}} %</vn-td>
                            <vn-td number>
                                {{saleClaimed.sale.quantity * saleClaimed.sale.price *
                                    ((100 - saleClaimed.sale.discount) / 100) | currency: 'EUR':2}}
                            </vn-td>
                        </vn-tr>
                    </vn-tbody>
                </vn-table>
            </vn-data-viewer>
        </vn-auto>
        <vn-auto ng-if="photos.length > 0">
            <h4 translate>Photos</h4>
            <vn-horizontal class="photo-list">
                <section class="photo" ng-repeat="photo in photos">
                    <section class="image" on-error-src
                        ng-style="{'background': 'url(' + $ctrl.getImagePath(photo.dmsFk) + ')'}"
                        zoom-image="{{$ctrl.getImagePath(photo.dmsFk)}}"
                        ng-if="photo.dms.contentType != 'video/mp4'">
                    </section>
                    <video id="videobcg" muted="muted" controls ng-if="photo.dms.contentType == 'video/mp4'"
                        class="video">
                        <source src="{{$ctrl.getImagePath(photo.dmsFk)}}" type="video/mp4">
                    </video>
                </section>
            </vn-horizontal>
        </vn-auto>
        <vn-auto>
            <h4 ng-show="$ctrl.isClaimManager">
                <a
                    ui-sref="claim.card.development({id:$ctrl.claim.id})"
                    target="_self">
                    <span translate vn-tooltip="Go to">Development</span>
                </a>
            </h4>
            <h4
                translate
                ng-show="!$ctrl.isClaimManager">
                Development
            </h4>
            <vn-data-viewer data="::$ctrl.summary.developments">
                <vn-table>
                    <vn-thead>
                        <vn-tr>
                            <vn-th>Reason</vn-th>
                            <vn-th>Result</vn-th>
                            <vn-th>Responsible</vn-th>
                            <vn-th>Worker</vn-th>
                            <vn-th>Redelivery</vn-th>
                        </vn-tr>
                    </vn-thead>
                    <vn-tbody>
                        <vn-tr ng-repeat="development in $ctrl.summary.developments">
                            <vn-td>{{::development.claimReason.description}}</vn-td>
                            <vn-td>{{::development.claimResult.description}}</vn-td>
                            <vn-td>{{::development.claimResponsible.description}}</vn-td>
                            <vn-td expand>
                                <span
                                    class="link"
                                    ng-click="workerDescriptor.show($event, development.workerFk)">
                                    {{::development.worker.user.nickname}}
                                </span>
                            </vn-td>
                            <vn-td>{{::development.claimRedelivery.description}}</vn-td>
                        </vn-tr>
                    </vn-tbody>
                </vn-table>
            </vn-data-viewer>
        </vn-auto>
        <vn-auto>
            <h4 ng-show="$ctrl.isClaimManager">
                <a
                    ui-sref="claim.card.action({id:$ctrl.claim.id})"
                    target="_self">
                    <span translate vn-tooltip="Go to">Action</span>
                </a>
            </h4>
            <h4
                translate
                ng-show="!$ctrl.isClaimManager">
                Action
            </h4>
            <vn-horizontal>
                <vn-one>
                    <vn-range
                        vn-one
                        disabled="true"
                        label="Responsability"
                        min-label="Company"
                        max-label="Sales/Client"
                        ng-model="$ctrl.summary.claim.responsibility"
                        max="5"
                        min="1"
                        step="1"
                        vn-acl="claimManager">
                    </vn-range>
                </vn-one>
            </vn-horizontal>
            <vn-data-viewer data="::$ctrl.summary.actions">
                <vn-table>
                    <vn-thead>
                        <vn-tr>
                            <vn-th number>Item</vn-th>
                            <vn-th number>Ticket</vn-th>
                            <vn-th>Destination</vn-th>
                            <vn-th number>Landed</vn-th>
                            <vn-th number>Quantity</vn-th>
                            <vn-th>Description</vn-th>
                            <vn-th number>Price</vn-th>
                            <vn-th number>Disc.</vn-th>
                            <vn-th number>Total</vn-th>
                        </vn-tr>
                    </vn-thead>
                    <vn-tbody>
                        <vn-tr ng-repeat="action in $ctrl.summary.actions">
                            <vn-td number>
                                <span
                                    ng-click="itemDescriptor.show($event, action.sale.itemFk, action.sale.id)"
                                    class="link">
                                    {{::action.sale.itemFk}}
                                </span>
                            </vn-td>
                            <vn-td number>
                                <span
                                    ng-click="ticketDescriptor.show($event, action.sale.ticket.id)"
                                    class="link">
                                    {{::action.sale.ticket.id}}
                                </span>
                            </vn-td>
                            <vn-td expand>{{::action.claimBeggining.description}}</vn-td>
                            <vn-td number>{{::action.sale.ticket.landed | date: 'dd/MM/yyyy'}}</vn-td>
                            <vn-td number>{{::action.sale.quantity}}</vn-td>
                            <vn-td expand>{{::action.sale.concept}}</vn-td>
                            <vn-td number>{{::action.sale.price}}</vn-td>
                            <vn-td number>{{::action.sale.discount}} %</vn-td>
                            <vn-td number>
                                {{action.sale.quantity * action.sale.price *
                                    ((100 - action.sale.discount) / 100) | currency: 'EUR':2}}
                            </vn-td>
                        </vn-tr>
                    </vn-tbody>
                </vn-table>
            </vn-data-viewer>
        </vn-auto>
    </vn-horizontal>
</vn-card>
<vn-item-descriptor-popover
    vn-id="item-descriptor"
    warehouse-fk="$ctrl.vnConfig.warehouseFk">
</vn-item-descriptor-popover>
<vn-worker-descriptor-popover
    vn-id="worker-descriptor">
</vn-worker-descriptor-popover>
<vn-ticket-descriptor-popover
    vn-id="ticket-descriptor">
</vn-ticket-descriptor-popover>