<template>
    <div class="row m-b-15">
        <div class="col">
            <loading-component  v-show="isLoading"></loading-component>
            <div class="row" v-show="isAdding">
                <div class="col bg-info">
                    <div class="row">
                        <div class="col-7 bg-master" style="height: 3px;"></div>
                        <div class="col"></div>
                    </div>
                    <div class="row p-b-5 m-b-5">
                        <div class="col p-l-0">
                            <div class="b-l b-master p-l-15 p-t-15  p-b-10 m-b-5" style="border-left-width: 2px;">
                                <h6 class="bold all-caps no-margin text-white hint-text">New Order</h6>
                                <div class="muted all-caps fs-12">Create A New Order</div>
                            </div>
                        </div>
                    </div>
                    <form  @submit.prevent="addOrder()">
                        <div class="row">
                            <div class="col no-padding">
                                <div class="row m-b-15">
                                    <div class="col no-padding">
                                        <div class="form-group form-group-default input-group bg-info-light no-border">
                                            <div class="row w-100">
                                                <div class="col no-padding">
                                                    <label class="text-white block fade">Order No.</label>
                                                    <input class="form-control block text-white" name="marking" v-model="order.marking">
                                                </div>
                                                <div class="col-auto no-padding" @click="generateMarking()">
                                                    <div class="input-group-addon pointer inline bg-info-darker">
                                                        <div class="row align-items-center justify-content-center h-100">
                                                            <div class="col">
                                                                <i class="fa fa-random text-white hint-text"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group form-group-default form-group-default-select2 select2-dark bg-info-light m-b-0">
                                            <label class="muted">Importer</label>
                                            <select-component :options="companies" v-model="order.companyId"></select-component>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                                    <div class="col no-padding">
                                        <div class="row">
                                            <div class="col text-right no-padding">
                                                <button type="button" class="btn btn-sm b-rad-none btn-default bg-info-darker text-white no-border all-caps" @click="isAdding = false">Cancel</button>
                                                <button type="submit" class="btn btn-sm b-rad-none btn-primary bg-master-darkest no-border all-caps">Create Order</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="row p-t-15 b-r b-master" style="height: 30px; border-right-width: 2px; margin-top: -15px;">
                        <div class="col"></div>
                    </div>
                    <div class="row">
                        <div class="col bg-info-light"></div>
                        <div class="col-1 bg-master" style="height: 3px;"></div>
                    </div>
                </div>
            </div>
            <div class="row" v-show="!isAdding">
                <div class="col no-padding">
                    <button type="button" class="btn btn-sm btn-block btn-default bg-info text-white no-border b-rad-none all-caps" @click="isAdding = true">New Orders</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            'data': {
                type: String,
                required: true
            }
        },
        data() {
            return {
                order: {
                    marking: '',
                    companyId: ''
                },
                companies: [],
                isAdding: false,
                isLoading: false
            }
        },
        created() {
            this.fetchCompanies();
            this.generateMarking()
        },
        methods: {
            fetchCompanies(){
                //turn on loading animation
                this.isLoading = true;

                fetch(route('api.company.list', {'pagination': 0})).then(response => response.json())
                    .then(response => {
                        this.companies = $.map(response, function(company) {
                            return {id: company.id, text: company.name};
                        });

                        //turn off loading animation
                        this.isLoading = false;

                    })
                    .catch(error => console.log(error))
            },
            addOrder() {
                //turn on loading animation
                this.isLoading = true;
                fetch(route('api.order.create', {companyId: this.order.companyId}), {
                    method: 'post',
                    body: JSON.stringify(this.order),
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then(response => response.json())
                    .then(response => {
                        //turn off loading animation
                        this.isLoading = false;
                        this.ConfirmWarehouse(response.id);
                    })
            },
            ConfirmWarehouse(orderId){
                this.isLoading = true;
                fetch(route('api.order.step.update', {orderId: orderId}), {
                    method: 'post',
                    body: JSON.stringify({warehouse_id: this.data}),
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then(() => {
                    this.resetForm();

                    Event.$emit('updateOrdersSelectList');
                    this.isLoading = false;
                    this.isAdding = false;
                })
            },
            generateMarking(){
                this.order.marking = Math.floor(Math.random() * 799999) + 200000;
            },
            resetForm(){
                this.generateMarking();
                this.companyId = '';
            }
        }
    }
</script>
