(async function () {


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

    Vue.component('item-table', {
        props: ['items'],
        methods: {
            removeItem: function (index) {
                if (confirm('Do want to delete Item?')) {
                    if (this.items[index].id === 0) {
                        this.items.splice(index, 1);
                    } else {
                        // post request and reload page on success
                        $.ajax({
                            url: '/ctp/rest/job-cards?job-card-item-id=' + this.items[index].id,
                            method: 'POST',
                            contentType: 'application/json',
                            dataType: 'json',
                            success: function (data) {
                                location.reload();
                            },
                            error: function (err) {
                                console.log(err)
                                location.reload();
                            }
                        });
                    }
                }
            }
        },
        template: `
            <table class="table table-bordered bg-white">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Item Sku/Title</th>
                        <th>Cut Panels</th>
                        <th>Expected Production</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <item-rows  v-for="(item,index) in items"
                                v-bind:key="index"
                                v-bind:index="index"
                                v-bind:item="item"
                                v-on:remove-item="removeItem">            
                    </item-rows>
                </tbody>
            </table>
        `,


    });


    Vue.component('item-rows', {
        props: ['index', 'item'],
        methods: {
            removeItem: function (e) {
                e.preventDefault();
                this.$emit('remove-item', this.index);
            },
            addPieces: function (e) {
                e.preventDefault();
                this.item.cutPieces.push({
                    'id': 0,
                    'jobCardItemId': 0,
                    'type': '',
                    'quantity': 0
                })
            },
            removePiece: function (index) {
                if (confirm('Do want to delete Item?')) {
                    if (this.item.cutPieces[index].id === 0) {
                        this.item.cutPieces.splice(index, 1);
                    } else {
                        // post request and reload page on success
                        $.ajax({
                            url: '/ctp/rest/cut-pieces?cut-piece-id=' + this.item.cutPieces[index].id,
                            method: 'POST',
                            contentType: 'application/json',
                            dataType: 'json',
                            success: function (data) {
                                location.reload();
                            },
                            error: function (err) {
                                console.log(err)
                                location.reload();
                            }
                        });
                    }
                }
            },
            onItemSelect(itemId, invItem) {
                this.item.itemId = invItem.id;
                this.item.sku = invItem.sku;
            }
        },
        template: `
                <tr>
                     <td width="400">
                     <input hidden="hidden" v-bind:name="'items[' + index + '].id'" v-bind:value="item.id">
                     <input hidden="hidden" v-bind:name="'items[' + index + '].sku'" v-bind:value="item.sku">
                      <input hidden="hidden" v-bind:name="'items[' + index + '].totalProduction'" v-bind:value="item.totalProduction">
                         <item-search
                                    v-bind:id-field-name="'items[' + index + '].itemId'"
                                    v-bind:id="item.itemId"
                                    v-bind:title="item.title"
                                    v-on:item-select="onItemSelect"
                                    v-bind:show-label="false"
                                    v-bind:requuired="true"></item-search>
                     </td>
                     <td width="400">
                        <span class="form-control"  readonly >{{item.sku}}</span> 
                    </td>
                     <td width="500">
                        <span class="bi-plus-circle-fill" title="Add Pieces" v-on:click="addPieces"></span>
                        <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"
                            v-on:piece-remove="removePiece">
                        </cut-piece>
                     </td>
                     <td width="200">
                        <input type="number" class="form-control" v-bind:name="'items[' + index + '].expectedProductionQuantity'" v-model="item.expectedProductionQuantity" required>
                    </td>
                     <td>
                        <button class="btn btn-sm btn-light" title="Edit" v-on:click="removeItem">
                             <i class="bi bi-trash"></i>
                        </button>
                    </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" required>
                        <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">
                    <input type="number" class="form-control" v-bind:name="'items[' + pIndex + '].cutPieces[' + index  +'].quantity'" v-model="piece.quantity" required>
                </div>
                 <div class="col-md-1">
                  <span class="bi-trash2-fill" title="Remove Piece" v-on:click="removePiece" ></span>
                </div>    
          </div>
       `

    });


    let app = new Vue({
        el: '#jobCardApp',
        data: {
            jobCard: {},
            items: [],
        },
        methods: {
            addItem: function (e) {
                e.preventDefault();
                this.items.push(this.createNewItem())
            },
            createNewItem: function () {
                return {
                    'id': 0,
                    'jobCardId': 0,
                    'itemId': 0,
                    'sku': '',
                    'expectedProductionQuantity': 0.0,
                    cutPieces: []
                }
            },
            removeItem: function () {
                e.preventDefault();

            },
            hasDuplicates: function () {
                const ids = this.items.map(item => item.itemId);
                const uniqueIds = new Set(ids);
                return ids.length !== uniqueIds.size;
            },
            hasEmptyItems: function () {
                if( this.items.length === 0 ) return true;
                for( let x of this.items ){
                    if( x.itemId === 0 ){
                        return true;
                    }
                }
               return false;
            }
        },
        mounted: function () {
            this.jobCard = window.ctp.jobCard;
            this.items = this.jobCard.items;

        }
    });

})(jQuery);