( async function(){

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

    Vue.component('item-rows', {
        props: ['index', 'item'],
        methods  : {
            populateCuttingAccount : function (){
                return this.$accounts.find(account => account.id === this.item.accountId).title;
            },
        },
        template: `
                <tr>
                     <td width="400">
                     <input hidden="hidden" v-bind:name="'items[' + index + '].jobCardId'" v-bind:value="item.jobCardId" >
                     <input hidden="hidden" v-bind:name="'items[' + index + '].jobCardItemId'" v-bind:value="item.id" >
                         <item-search 
                                    v-bind:id-field-name="'items[' + index + '].itemId'"
                                    v-bind:id="item.itemId"
                                    v-bind:type="item.type"
                                    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.expectedProduction}}</span>
                     </td>
                    <td  width="200">
                        <input class="form-control" min="0" type="number" v-bind:name="'items[' + index + '].actualProduction'" required>
                    </td>
                    <td>
                      {{ populateCuttingAccount() }}
                    </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 + '].pieces[' + index  + '].id'" v-bind:value="piece.id">
                <input hidden="hidden" v-bind:name="'items[' + pIndex + '].pieces[' + index  + '].jobCardItemId'" v-bind:value="piece.jobCardItemId">
                <input hidden="hidden" v-bind:name="'items[' + pIndex + '].pieces[' + index  + '].type'" v-bind:value="piece.type">
                <div  class="col-md-5">
                    <select style="width: 150px;" class="form-control" v-bind:name="'pieces[' + index  +'].type'" v-model="piece.type" disabled>
                        <option value="">Please Select</option>
                        <option  v-for="(type,index) in $types"
                             v-bind:selected="type.type === piece.type"
                             v-bind:value="type.type">{{type.type}}</option>
                    </select>
                </div>
                <div class="col-md-6" style="padding-left: 40px;">
                    <input class="form-control" type="number" v-bind:name="'items[' + pIndex + '].pieces[' + index  +'].quantity'" v-model="piece.quantity" min="0" required/>
                </div>
          </div>
       `
    });

    Vue.component('job-card-details',{
        props:[ 'jobCard' ],
        methods : {

        },
        template : `
            <table class="table table-bordered bg-white w-100">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Item Sku/Title</th>
                        <th>Cut Pieces</th>
                        <th>Expected Production</th>
                        <th>Actual Production</th>
                         <th style="width: 312px" >Account</th>
                    </tr>
                    </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);