<vn-crud-model auto-load="false"
    vn-id="model"
    url="/api/Tickets/{{$ctrl.$stateParams.id}}/getSales"
    data="$ctrl.sales">
</vn-crud-model>
<vn-watcher
    vn-id="watcher"
    data="$ctrl.sales">
</vn-watcher>
<vn-vertical>
    <vn-card pad-large>
        <vn-vertical>
            <vn-horizontal class="header">
                <vn-tool-bar margin-medium-bottom>
                    <vn-button
                        disabled="!$ctrl.isEditable"
                        label="Ok"
                        vn-http-click="$ctrl.onStateOkClick()"
                        vn-tooltip="Change ticket state to 'Ok'">
                    </vn-button>
                    <vn-button-menu
                        disabled="!$ctrl.isEditable"
                        label="State"
                        value-field="id"
                        url="/api/States/editableStates"
                        on-change="$ctrl.onStateChange(value)">
                    </vn-button-menu>
                    <vn-button-menu
                        ng-show="$ctrl.isChecked"
                        vn-id="more-button"
                        label="More"
                        show-filter="false"
                        value-field="callback"
                        translate-fields="['name']"
                        on-change="$ctrl.onMoreChange(value)"
                        on-open="$ctrl.onMoreOpen()">
                    </vn-button-menu>
                    <vn-button 
                        disabled="!$ctrl.isChecked || !$ctrl.isEditable"
                        ng-click="$ctrl.showRemoveLinesDialog()"
                        vn-tooltip="Remove lines"
                        tooltip-position="up"
                        icon="delete">
                    </vn-button>
                    <vn-button
                        disabled="!$ctrl.isChecked || !$ctrl.isEditable"
                        ng-click="$ctrl.showTransferPopover($event);"
                        vn-tooltip="Transfer lines"
                        tooltip-position="right"
                        icon="call_split">
                    </vn-button>
                </vn-tool-bar>
                <vn-one class="taxes" ng-if="$ctrl.sales.length > 0">
                    <p><vn-label translate>Subtotal</vn-label> {{$ctrl.subtotal | currency: 'EUR':2}}</p>
                    <p><vn-label translate>VAT</vn-label> {{$ctrl.VAT | currency: 'EUR':2}}</p>
                    <p><vn-label><strong>Total</strong></vn-label> <strong>{{$ctrl.total | currency: 'EUR':2}}</strong></p>
                </vn-one>
            </vn-horizontal>
            <vn-table model="model">
                <vn-thead>
                    <vn-tr>
                        <vn-th shrink>
                            <vn-multi-check
                                model="model">
                            </vn-multi-check>
                        </vn-th>
                        <vn-th shrink></vn-th>
                        <vn-th shrink></vn-th>
                        <vn-th number>Id</vn-th>
                        <vn-th>Quantity</vn-th>
                        <vn-th>Item</vn-th>
                        <vn-th number>Price</vn-th>
                        <vn-th number>Disc</vn-th>
                        <vn-th number>Amount</vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <vn-tr ng-repeat="sale in $ctrl.sales">
                        <vn-td shrink>
                            <vn-check 
                                field="sale.checked">
                            </vn-check>
                        </vn-td>
                        <vn-td shrink>
                            <a ui-sref="claim.card.basicData({id: sale.claim.claimFk})">
                                <vn-icon
                                    ng-show="sale.claim.claimFk"
                                    icon="icon-claims"
                                    vn-tooltip="{{::$ctrl.$translate.instant('Claim')}}: {{::sale.claim.claimFk}}">
                                </vn-icon>
                            </a>
                            <vn-icon 
                                ng-show="sale.visible < 0 || sale.available < 0" 
                                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-reserve"
                                    vn-tooltip="{{::$ctrl.$translate.instant('Reserved')}}">
                            </vn-icon>
                        </vn-td>
                    <vn-td shrink>
                        <img 
                            ng-src="{{::$ctrl.imagesPath}}/50x50/{{sale.image}}"
                            zoom-image="{{::$ctrl.imagesPath}}/1600x900/{{sale.image}}"
                            on-error-src/>
                    </vn-td>
                    <vn-td vn-focus number>
                        <span class="link" ng-if="sale.itemFk"
                            ng-click="$ctrl.showDescriptor($event, sale.itemFk)">
                            {{sale.itemFk | zeroFill:6}}
                        </span>

                        <vn-autocomplete ng-if="!sale.itemFk" vn-focus vn-one
                            url="/api/Items"
                            field="sale.itemFk"
                            show-field="name"
                            value-field="id"
                            search-function="{or: [{id: $search}, {name: {like: '%' + $search + '%'}}]}"
                            order="id DESC">
                            <tpl-item>
                                {{id}} - {{name}}
                            </tpl-item>
                        </vn-autocomplete>
                    </vn-td>
                    <vn-td-editable ng-if="sale.id" disabled="!$ctrl.isEditable" number>
                        <text>{{sale.quantity}}</text>
                        <field>
                            <vn-input-number vn-focus
                                model="sale.quantity"
                                on-change="$ctrl.onChangeQuantity(sale)">
                            </vn-input-number>
                        </field>
                    </vn-td-editable>
                    <vn-td ng-if="!sale.id" number>
                        <vn-input-number
                            model="sale.quantity"
                            on-change="$ctrl.onChangeQuantity(sale)">
                        </vn-input-number>
                    </vn-td>
                    <vn-td-editable disabled="!sale.id || !$ctrl.isEditable" expand>
                        <text>
                            <vn-fetched-tags
                                max-length="6"
                                item="sale.item"
                                name="sale.concept"
                                sub-name="sale.subName">
                            </vn-fetched-tags>
                        </text>
                        <field>
                            <vn-textfield vn-id="concept" vn-focus
                                model="sale.concept"
                                on-change="$ctrl.updateConcept(sale)">
                            </vn-textfield>
                        </field>
                    </vn-td-editable>
                    <vn-td number>
                        <span ng-class="{'link': $ctrl.isEditable}"
                            title="{{$ctrl.isEditable ? 'Edit price' : ''}}"
                            ng-click="$ctrl.showEditPricePopover($event, sale)">
                            {{sale.price | currency: 'EUR':2}}
                        </span>
                    </vn-td>
                    <vn-td number>
                        <span ng-class="{'link': $ctrl.isEditable}"
                            title="{{$ctrl.isEditable ? 'Edit discount' : ''}}"
                            ng-click="$ctrl.showEditDiscountPopover($event, sale)">
                            {{sale.discount | percentage}} 
                        </span>
                    </vn-td>
                    <vn-td number>
                        {{$ctrl.getSaleTotal(sale) | currency: 'EUR':2}}
                    </vn-td>
                </vn-tr>
            </vn-tbody>
        </vn-table>
        <vn-one>
            <vn-icon-button vn-none
                vn-tooltip="Add item"
                vn-bind="+"
                icon="add_circle"
                ng-click="$ctrl.add()"
                disabled="!$ctrl.isEditable">
            </vn-icon-button>
        </vn-one>
    </vn-card>
    <vn-item-descriptor-popover vn-id="descriptor"
        quicklinks="$ctrl.quicklinks">
    </vn-item-descriptor-popover>

    <!-- Edit Price Popover -->
    <vn-popover 
        class="edit dialog-summary" 
        vn-id="edit-price-popover"
        on-open="$ctrl.getManaSalespersonMana()"
        on-close="$ctrl.mana = null">
        <vn-spinner
            ng-if="$ctrl.mana == null"
            style="padding: 1em;"
            enable="true">
        </vn-spinner>
        <div ng-if="$ctrl.mana != null">
            <vn-horizontal pad-medium class="header">
                <h5>MANÁ: {{$ctrl.mana | currency: 'EUR':0}}</h5>
            </vn-horizontal>
            <div pad-medium>
                <vn-input-number
                    vn-focus
                    label="Price"
                    model="$ctrl.editedPrice"
                    type="text"
                    step="0.01"
                    on-change="$ctrl.updatePrice()">
                    <t-right-icons>
                        <span class="filter">€</span>
                    </t-right-icons>
                </vn-input-number>
                <div class="simulator">
                    <p class="simulatorTitle" translate>New price</p>
                    <p>{{$ctrl.newPrice | currency: 'EUR':2}}</p>
                </div>
            </div>
        </div>
    </vn-popover>

    <!-- Edit Popover -->
    <vn-popover 
        class="edit dialog-summary"
        vn-id="edit-popover"
        on-open="$ctrl.getManaSalespersonMana()"
        on-close="$ctrl.mana = null">
        <vn-spinner
            ng-if="$ctrl.mana == null"
            style="padding: 1em;"
            enable="true">
        </vn-spinner>
        <vn-ticket-sale-edit-discount
            ng-if="$ctrl.mana != null"
            mana="$ctrl.mana"
            bulk="false"
            edit="$ctrl.edit"
            on-hide="$ctrl.hideEditPopover()">
        </vn-ticket-sale-edit-discount>
    </vn-popover>

    <!-- Edit Dialog -->
    <vn-dialog 
        vn-id="editDialog"
        class="edit"
        on-open="$ctrl.getManaSalespersonMana()"
        on-close="$ctrl.mana = null">
        <tpl-body>
            <vn-spinner
                ng-if="$ctrl.mana == null"
                style="padding: 1em;"
                enable="true">
            </vn-spinner>
            <vn-ticket-sale-edit-discount
                ng-if="$ctrl.mana != null"
                mana="$ctrl.mana"
                bulk="true"
                edit="$ctrl.edit"
                on-hide="$ctrl.hideEditDialog()">
            </vn-ticket-sale-edit-discount>
        </tpl-body>
    </vn-dialog>

    <!-- Transfer Popover -->
    <vn-popover class="transfer" vn-id="transfer">
        <div pad-medium>
            <vn-horizontal>
                <vn-one>
                    <h4 translate>Sales to transfer</h4>
                    <vn-table>
                        <vn-thead>
                            <vn-tr>
                                <vn-th number shrink>Id</vn-th>
                                <vn-th>Item</vn-th>
                                <vn-th number shrink>Quantity</vn-th>
                            </vn-tr>
                        </vn-thead>
                        <vn-tbody>
                            <vn-tr ng-repeat="sale in $ctrl.transfer.sales">
                                <vn-td number shrink>{{::sale.itemFk | zeroFill:6}}</vn-td>
                                <vn-td>
                                    <span title="{{::sale.concept}}">{{::sale.concept}}</span>
                                </vn-td>
                                <vn-td-editable number shrink>
                                    <text>{{sale.quantity}}</text>
                                    <field>
                                        <vn-input-number vn-focus
                                            model="sale.quantity">
                                        </vn-input-number>
                                    </field>
                                </vn-td-editable>
                            </vn-tr>
                        </vn-tbody>
                    </vn-table>
                </vn-one>
                <vn-one>
                    <vn-horizontal>
                        <h4 vn-one translate>Destination ticket</h4>
                        <vn-icon vn-none
                            color-secondary
                            vn-tooltip="You have to allow pop-ups in your web browser to use this functionality"
                            icon="info">
                        </vn-icon>
                    </vn-horizontal>
                    <table class="vn-grid">
                        <thead>
                            <tr>
                                <th number>ID</th>
                                <th number>F. envio</th>
                                <th number>Agencia</th>
                                <th number>Almacen</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-if="$ctrl.transfer.lastActiveTickets.length === 0" >
                                <td colspan="4" style="text-align: center" translate>No results</td>
                            </tr>
                            <tr 
                                class="clickable" 
                                ng-repeat="ticket in $ctrl.transfer.lastActiveTickets track by ticket.id"
                                ng-click="$ctrl.transferSales(ticket.id)">
                                <td number>{{::ticket.id}}</td>
                                <td number>{{::ticket.shipped | dateTime: 'dd/MM/yyyy'}}</td>
                                <td number>{{::ticket.agencyName}}</td>
                                <td number>{{::ticket.warehouseName}}</td>
                            </tr>
                        </tbody>
                    </table>

                    <vn-horizontal pad-medium-v>
                        <vn-textfield vn-one
                            label="Transfer to ticket"
                            model="$ctrl.transfer.ticketId"
                            type="number">
                        </vn-textfield>
                        <vn-icon-button vn-none
                            icon="arrow_forward_ios"
                            ng-click="$ctrl.transferSales($ctrl.transfer.ticketId)">
                        </vn-icon-button>
                    </vn-horizontal>
                    <vn-horizontal pad-medium-v>
                        <vn-button
                            label="New ticket"
                            ng-click="$ctrl.transferSales()">
                        </vn-button>
                    </vn-horizontal>
                </vn-one>
            </vn-horizontal>
        </div>
    </vn-popover>

    <!-- SMS Dialog -->
    <vn-client-sms vn-id="sms" sms="$ctrl.newSMS"></vn-client-sms>
    <!-- SMS Dialog -->
</vn-vertical>
<vn-confirm
    vn-id="delete-lines"
    question="You are going to delete lines of the ticket"
    message="Continue anyway?"
    on-response="$ctrl.onRemoveLinesClick(response)">
</vn-confirm>
<vn-confirm
    vn-id="delete-ticket"
    question="Do you want to delete it?"
    message="This ticket is now empty"
    on-response="$ctrl.transferSales($ctrl.transfer.ticketId, response)">
</vn-confirm>
<vn-float-button
    ng-show="$ctrl.isEditable"
    ng-click="$ctrl.newOrderFromTicket()"
    icon="add"
    vn-tooltip="Add item"
    vn-bind="+"
    fixed-bottom-right>
</vn-float-button>