( async function(){

    Vue.prototype.$types = window.ctp.types;

    Vue.component('item-rows', {
        props: ['index', 'item'],
        template: `
                <tr>
                     <td width="400">
                     <input hidden="hidden" v-bind:value="item.id">
                     <input hidden="hidden" v-bind:value="item.sku">
                         <item-search
                                    v-bind:id-field-name="'items[' + index + '].itemId'"
                                    v-bind:id="item.itemId"
                                    v-bind:title="item.title"
                                    v-bind:show-label="false"
                                    v-bind:disabled="true"></item-search>
                     </td>
                     <td width="400">
                        <span class="form-control"  readonly >{{item.sku}}</span> 
                    </td>
                     <td width="500">
                        <cut-piece v-for="(piece, cIndex) in item.cutPieces"
                            v-bind:index="cIndex"
                            v-bind:pIndex="index"
                            v-bind:piece="piece"
                            v-bind:key="index + '-' + cIndex">
                        </cut-piece>
                     </td>
                     <td width="200">
                        <span class="form-control" readonly>{{item.expectedProductionQuantity}}</span>
                    </td>
                  
                </tr>
        `
    });


    Vue.component('cut-piece', {
        props: ['index', 'piece', 'pIndex'],
        methods: {
            removePiece: function (e) {
                e.preventDefault();
                this.$emit('piece-remove', this.index)
            }
        },
        template: `
           <div class="row mt-1">
                <input hidden="hidden" v-bind:name="'items[' + pIndex + '].cutPieces[' + index  +'].id'" v-bind:value="piece.id">
                <input hidden="hidden" v-bind:name="'items[' + pIndex + '].cutPieces[' + index  +'].jobCardItemId'" v-bind:value="piece.jobCardItemId">
                <div class="col-md-5">
                    <select class="form-control" v-bind:name="'items[' + pIndex + '].cutPieces[' + index  +'].type'" v-model="piece.type" disabled>
                        <option value="">Please Select</option>
                        <option v-for="(type,index) in $types"
                             v-bind:selected="type.title === piece.type"
                            v-bind:value="type.title">{{type.title}}</option>
                    </select>
                </div>
                <div class="col-md-5">
                    <span class="form-control" readonly="">{{piece.quantity}}</span>
                </div>
          </div>
       `

    });

    Vue.component('job-card-details',{
        props:[ 'jobCard' ],
        template : `
            <table class="table table-bordered bg-white col-sm-8">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Item Sku/Title</th>
                        <th>Cut Pieces</th>
                        <th>Expected Production</th>
                    </tr>
                </thead>
                <tbody>
                    <item-rows  v-for="(item,index) in jobCard.items"
                                v-bind:key="index"
                                v-bind:index="index"
                                v-bind:item="item">            
                    </item-rows>
                </tbody>
            </table>
        `
    });


    let app = new Vue({
        el : '#receiveInvApp',
        data :{
            jobCard : {}
        },
        computed: {
            getStatus: function() {
                return `badge-${this.jobCard.status}`;
            },
            getInvStatus: function() {
                return `badge-${this.jobCard.inventoryStatus}`;
            }
        },
        methods : {
            onCardSelect : function ( id, card ) {
               $.ajax({
                   url: `/ctp/rest/job-cards/find/${id}`,
                   method: 'GET',
                   contentType: 'application/json',
                   dataType: 'json',
                   success: ( data )  => {
                     this.jobCard = data;
                   },
                   error : function ( err ){
                       alert( err );
                   }
               })
            }
        },
        mounted : function () {

        }
    })


})(jQuery);