<template>
    <div class="row">
        <div class="col">
            <div class="row no-margin">
                <div class="col p-t-25 p-t-25">
                    <div class="row">
                        <div class="col p-b-10 b-b b-grey">
                            <div class="row align-items-center">
                                <div class="col-auto p-r-0" style="min-width: 40px;">
                                    <div class="font-heading all-caps fs-10"></div>
                                </div>
                                <div class="col p-r-5">
                                    <div class="font-heading all-caps fs-10 muted">Type</div>
                                </div>
                                <div class="col-4 p-r-5 p-l-5">
                                    <div class="font-heading all-caps fs-10 muted">Description</div>
                                </div>
                                <div class="col text-center p-r-5 p-l-5">
                                    <div class="font-heading all-caps fs-10 muted">Width</div>
                                </div>
                                <div class="col text-center p-r-5 p-l-5">
                                    <div class="font-heading all-caps fs-10 muted">Height</div>
                                </div>
                                <div class="col-1 text-center p-r-5 p-l-5">
                                    <div class="font-heading all-caps fs-10 muted">Length</div>
                                </div>
                                <div class="col-1 text-right p-r-5 p-l-5">
                                    <div class="font-heading all-caps fs-10 muted">Weight</div>
                                </div>
                                <div class="col-1 text-right p-r-5 p-l-5">
                                    <div class="font-heading all-caps fs-10 muted">Quantity</div>
                                </div>
                                <div class="col-1 text-right p-r-5 p-l-5">
                                    <div class="font-heading all-caps fs-10 muted">Reference</div>
                                </div>
                                <div class="col-auto text-center">
                                    <button class="btn btn-xs btn-outline-success b-rad-none invisible"><i class="fa fa-check"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-b-20">
                        <div class="col">
                            <div class="row" v-if="!submitted">
                                <div class="col p-b-5 p-t-5 b-b b-grey">
                                    <div class="row align-items-center">
                                        <div class="col-auto p-r-0" style="min-width: 40px;">
                                            <div class="font-heading all-caps fs-10"></div>
                                        </div>
                                        <div class="col p-r-5">
                                            <select-component :options="[{'id': 0, 'text': 'Carton'}, {'id': 1, 'text': 'Pallet'}]" v-model="product.type"></select-component>
                                        </div>
                                        <div class="col-4 p-r-5 p-l-5">
                                            <textarea class="form-control fs-10 b-rad-none" placeholder="Description" rows="1" @keyup="onlyEnglish($event)" v-model="product.description"></textarea>
                                        </div>

                                        <div class="col text-center p-r-5 p-l-5">
                                            <input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Width" v-model.lazy="product.width"/>
                                        </div>

                                        <div class="col text-center p-r-5 p-l-5">
                                            <input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Height" v-model.lazy="product.height"/>
                                        </div>

                                        <div class="col text-center p-r-5 p-l-5">
                                            <input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Length" v-model.lazy="product.length"/>
                                        </div>

                                        <div class="col text-center p-r-5 p-l-5">
                                            <input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Weight" v-model.lazy="product.weight"/>
                                        </div>

                                        <div class="col text-center p-r-5 p-l-5">
                                            <input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Quantity" v-model.lazy="product.quantity"/>
                                        </div>
                                        
                                        <div class="col text-center p-r-5 p-l-5">
                                            <input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Reference" v-model.lazy="product.reference"/>
                                        </div>
                                       
                                        <div class="col-auto">
                                            <button class="btn btn-xs btn-outline-success b-rad-none" @click="addPackage()"><i class="fa fa-check"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row" v-for="(item, index) in packages">
                                <div class="col p-b-10 p-t-10 b-b b-grey">
                                    <div class="row  align-items-center">
                                        <div class="col-auto p-r-0" style="min-width: 40px;">
                                            <div class="font-heading all-caps fs-10">{{index + 1}}</div>
                                        </div>
                                        <div class="col p-r-5">
                                            <div class="font-heading all-caps fs-10">{{item.type}}</div>
                                        </div>
                                        <div class="col-4 p-r-5 p-l-5">
                                            <div class="font-heading all-caps fs-10">{{item.description}}</div>
                                        </div>
                                        <div class="col text-center p-r-5 p-l-5">
                                            <div class="font-heading all-caps fs-10">{{item.width}}</div>
                                        </div>
                                        <div class="col text-center p-r-5 p-l-5">
                                            <div class="font-heading all-caps fs-10">{{item.height}}</div>
                                        </div>
                                        <div class="col-1 text-center p-r-5 p-l-5">
                                            <div class="font-heading all-caps fs-10">{{item.length}}</div>
                                        </div>
                                        <div class="col-1 text-center p-r-5 p-l-5">
                                            <div class="font-heading all-caps fs-10">{{item.weight}}</div>
                                        </div>
                                        <div class="col-1 text-right p-r-5 p-l-5">
                                            <div class="font-heading all-caps fs-10">{{item.quantity}}</div>
                                        </div>
                                        <div class="col-1 text-right p-r-5 p-l-5">
                                            <div class="font-heading all-caps fs-10">{{item.reference}}</div>
                                        </div>
                                        <div class="col-auto">
                                            <button class="btn btn-xs btn-outline-danger b-rad-none" v-if="!submitted" @click="removePackage(index)"><i class="fa fa-times"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
           
        </div>
    </div>
</template>
<script>
    import formHandler from '../../../general/mixins/formHandler';
    export default {
        props: {
            packages: {
                type: Array,
                required: true
            },
        },
        data(){
          return {
              submitted: false,
              product: {
                  type: '',
                  description: '',
                  width: 0,
                  height: 0,
                  length: 0,
                  weight: 0,
                  quantity: 1,
                  reference: '',
              },
          }
        },
        methods: {
            onlyEnglish(event){
                let value = event.target.value,
                    regex = /^[^~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?a-zA-Z0-9-]+$/;
                event.preventDefault();
                if(regex.test(value)){
                    this.product.description = value.replace(regex, '');
                }
            },
            addPackage(){
              this.packages.push({
                  type: this.product.type,
                  description: this.product.description,
                  width: this.product.width,
                  height: this.product.height,
                  length: this.product.length,
                  weight: this.product.weight,
                  quantity: this.product.quantity,
                  reference: this.product.reference,
              });

              this.product = {
                  type: '',
                  description: '',
                  width: 0,
                  height: 0,
                  length: 0,
                  weight: 0,
                  quantity: 1,
                  reference: 0,
              };

            },
            removePackage(index){
                this.packages.splice(index, 1);
            }
        },
        mixins: [formHandler]
    }
</script>