<vn-crud-model
    vn-id="model"
    url="TicketServices"
    link="{ticketFk: $ctrl.$params.id}"
    data="$ctrl.services"
    auto-load="true">
</vn-crud-model>
<vn-crud-model
    vn-id="typesModel"
    auto-load="true"
    url="TicketServiceTypes"
    data="ticketServiceTypes"
    order="name">
</vn-crud-model>
<vn-crud-model
    auto-load="true"
    url="TaxClasses"
    data="taxClasses"
    order="description">
</vn-crud-model>
<vn-watcher
    vn-id="watcher"
    data="$ctrl.services">
</vn-watcher>
<form name="form" ng-submit="$ctrl.onSubmit()" class="vn-w-md">
    <vn-card class="vn-pa-lg">
        <vn-button-bar>
            <vn-button
                disabled="watcher.dataChanged() || !$ctrl.checkeds.length"
                label="Pay"
                ng-click="$ctrl.createRefund()"
                vn-acl="invoicing, claimManager, salesAssistant, buyer"
                vn-acl-action="remove">
        </vn-button>
        </vn-button-bar>
        <vn-horizontal ng-repeat="service in $ctrl.services">
            <vn-check
                tabindex="1"
                on-change="$ctrl.addChecked(service.id)"
                disabled="!service.id"
                vn-acl="invoicing, claimManager, salesAssistant, buyer"
                vn-acl-action="remove">
            </vn-check>
            <vn-autocomplete vn-two vn-focus
                data="ticketServiceTypes"
                label="Description"
                show-field="name"
                value-field="id"
                ng-model="service.ticketServiceTypeFk">
                <append>
                    <vn-icon-button
                        icon="add_circle"
                        vn-tooltip="New service type"
                        ng-click="$ctrl.onNewServiceTypeClick(service, $event)"
                        vn-acl="administrative"
                        style="padding: 0;">
                    </vn-icon-button>
                </append>
            </vn-autocomplete>
            <vn-input-number
                vn-one
                step="1"
                label="Quantity"
                info="To create services with negative amounts mark the service on the source ticket and press the pay button."
                ng-model="service.quantity"
                rule="TicketService"
                min="0">
            </vn-input-number>
            <vn-input-number
                vn-one
                label="Price"
                ng-model="service.price"
                step="0.01"
                min="0">
            </vn-input-number>
            <vn-auto>
                <vn-icon-button
                    pointer
                    vn-tooltip="Remove service"
                    icon="delete"
                    ng-click="model.remove($index)">
                </vn-icon-button>
            </vn-auto>
        </vn-horizontal>
        <vn-icon-button
            ng-if=$ctrl.defaultTaxClass
            vn-tooltip="Add service"
            vn-bind="+"
            icon="add_circle"
            ng-click="$ctrl.add()">
        </vn-icon-button>
    </vn-card>
    <vn-button-bar>
        <vn-submit
            disabled="!watcher.dataChanged()"
            label="Save">
        </vn-submit>
    </vn-button-bar>
</form>

<!-- Create service type dialog -->
<vn-dialog class="edit"
    vn-id="newServiceTypeDialog"
    on-accept="$ctrl.onNewServiceTypeAccept($data)"
    on-close="newServiceType = null"
    message="New service type">
    <tpl-body>
        <vn-horizontal>
            <vn-textfield
                vn-one
                label="Description"
                ng-model="newServiceType.name"
                vn-focus>
            </vn-textfield>
        </vn-horizontal>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Create</button>
    </tpl-buttons>
</vn-dialog>