( async function(){

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

    Vue.component('finish-item-table',{
        props : [ 'items' ],
        methods: {
            getFormattedDateTime: function (dateTime) {
                if (!!dateTime) {
                    return dateTime.split('T')[0] + ' ' + dateTime.split('T')[1];
                }
                return luxon.DateTime.now().toFormat('yyyy-MM-dd HH:mm:ss');
            },
            removeItem: function (index) {
                this.$emit('remove-item', index)
            }
        },
        template : `
             <table class="table table-bordered bg-white col-sm-12">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Item ID</th>
                        <th>Sku</th>
                        <th>Created By</th>
                        <th>Created At</th>
                        <th>Job Card ID</th>
                        <th>Barcode</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in items">
                        <td>
                           <input hidden="hidden" v-bind:name="'items[' + index + '].id'" v-bind:value="item.id">
                           <input hidden="hidden" v-bind:name="'items[' + index + '].itemId'" v-bind:value="item.itemId">
                           <input hidden="hidden" v-bind:name="'items[' + index + '].sku'" v-bind:value="item.sku">
                           <input hidden="hidden" v-bind:name="'items[' + index + '].createdBy'" v-bind:value="item.createdBy">
                           <input hidden="hidden" v-bind:name="'items[' + index + '].createdAt'" v-bind:value="getFormattedDateTime(item.createdAt)">
                           <input hidden="hidden" v-bind:name="'items[' + index + '].jobCardId'" v-bind:value="item.jobCardId">
                           <input hidden="hidden" v-bind:name="'items[' + index + '].barcode'" v-bind:value="item.barcode" >
                           <input hidden="hidden" v-bind:name="'items[' + index + '].isQa'" v-bind:value="item.isQa">
                           <input hidden="hidden" v-bind:name="'items[' + index + '].stitchedItemId'" v-bind:value="item.stitchedItemId">
                           <input hidden="hidden" v-bind:name="'items[' + index + '].isSegregated'" v-bind:value="item.isSegregated">
                           <input hidden="hidden" v-bind:name="'items[' + index + '].qaStatus'" v-bind:value="item.qaStatus">
                           <input hidden="hidden" v-bind:name="'items[' + index + '].accountId'" v-bind:value="item.accountId">
                           <input hidden="hidden" v-bind:name="'items[' + index + '].operationDate'" v-bind:value="getFormattedDateTime(item.operationDate)">
                           <span> {{item.id}} </span>
                        </td>
                        <td> {{item.itemId}} </td>
                        <td> {{item.sku}} </td>
                        <td> {{item.createdBy}} </td>
                        <td> {{ getFormattedDateTime( item.createdAt) }} </td>
                        <td> {{item.jobCardId}}</td>
                        <td> {{item.barcode}} </td>
                        <td >
                            <span v-if="!item.qaStatus" class="badge badge-danger">NOT PERFORMED</span>
                            <span v-else-if="item.qaStatus === 'APPROVED'" class="font-lg badge badge-success">{{ item.qaStatus }}</span>
                            <span v-else-if="item.qaStatus === 'ALTER' || item.qaStatus === 'B GRADE'" class="font-lg badge badge-danger">{{ item.qaStatus }}</span>
                            <span v-else-if="item.qaStatus === 'WASHED'" class="font-lg badge badge-APPROVED">{{ item.qaStatus }}</span>
                            <span v-else-if="item.qaStatus === 'REJECT'" class="font-lg badge badge-danger">{{ item.qaStatus }}</span>
                         </td>
                        <td>
                         <button type="button" title="Remove" class="btn btn-light text-left" v-on:click="removeItem(index)">
                                <i class="bi bi-trash"></i>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        `,

    })

    let app = new Vue({
        el : '#packagingApp',
        data : {
            items : [],
            reason: '',
        },
        methods : {
            onItemSelect: function (id, item) {
                this.items.push(item);
            },
            removeItem: function (index) {
                this.items.splice(index, 1);
            },
            hasDuplicates: function () {
                const ids = this.items.map(item => item.id);
                const uniqueIds = new Set(ids);
                return ids.length !== uniqueIds.size;
            },
            submitWithRejectReason: function (reason) {
                this.reason = reason;
                this.$nextTick(() => {
                    const form = document.getElementById('packagingApp');
                    if (form.checkValidity()) {
                        form.submit();
                    } else {
                        form.reportValidity();
                    }
                });
            }

        },
        mounted : function () {
            console.log( this.$accounts )
        }
    })

})(jQuery)