<template>
<div>
    <div v-if="showSpinner" id="spinner"><img src="/img/ajax-loader.gif"/></div>

    <ul class="nav nav-tabs">
        <li :class="{active: activeState === 1}"><a href="#" @click.prevent="selectState(1)">Нові</a></li>
        <li :class="{active: activeState === 2}"><a href="#" @click.prevent="selectState(2)">В обробці</a></li>
        <li :class="{active: activeState === 4}"><a href="#" @click.prevent="selectState(4)">Відкладені</a></li>
        <li :class="{active: activeState === 5}"><a href="#" @click.prevent="selectState(5)">Надіслані</a></li>
        <li :class="{active: activeState === 7}"><a href="#" @click.prevent="selectState(7)">Скас. клієнтом</a></li>
        <li :class="{active: activeState === 8}"><a href="#" @click.prevent="selectState(8)">Скас. менедж.</a></li>
        <li :class="{active: activeState === 3}"><a href="#" @click.prevent="selectState(3)">Підозрілі</a></li>
        <li :class="{active: activeState === 9}"><a href="#" @click.prevent="selectState(9)">Незабрані</a></li>
        <li :class="{active: activeState === 0}"><a href="#" @click.prevent="selectState(0)">Всі</a></li>
    </ul>
    <div v-for="order of orders" :key="order.id" class="panel" :class="{
                    'panel-default': ['1', '7', '8'].indexOf(order.status_id) !== -1,
                    'panel-primary': order.status_id === '2',
                    'panel-success': ['5', '6'].indexOf(order.status_id) !== -1,
                    'panel-info': order.status_id === '4',
                    'panel-danger': order.status_id === '3',
                    'panel-warning': order.status_id === '9'
    }">
        <div class="panel-heading">
            <h3 class="panel-title row">
                <div class="col-sm-6">Замовлення № {{ order.id }}: {{ translateStatus('uk', lookup(statuses, order.status_id, 'status')) }} від {{ order.status_date }}</div>
                <div class="col-sm-6 text-right">
                    <a href="#" class="label label-default" @click.prevent="statusHistory(order.id)">Історія статусів</a>
                </div>
            </h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-12 bg-success">{{ order.message }}</div>
            </div>
            <div class="row">
                <label class="col-sm-1 text-right">Мова</label>
                <div class="col-sm-1 text-left bg-info"><span class="lang">{{ order.lang }}</span></div>
                <label class="col-sm-1 text-right">Замовник</label>
                <div class="col-sm-7 text-left bg-info">{{ order.name }}</div>
                <div class="col-sm-2"><b>Телефон</b> {{ order.phone }}</div>
            </div>
            <div class="row">
                <label class="col-sm-1 text-right">Кількість</label>
                <div class="col-sm-1 text-left bg-info">{{ order.quantity }}</div>
                <label class="col-sm-1 text-right">За ціною</label>
                <div class="col-sm-1 text-left bg-info">{{ order.price }}</div>
                <div class="col-sm-1 text-left bg-primary">{{ Number(order.quantity) * Number(order.price) }}</div>
                <label class="col-sm-1 text-right">Email</label>
                <div class="col-sm-2 text-left bg-info"><a :href="'mailto:' + order.email">{{ order.email }}</a></div>
                <label class="col-sm-1 text-right">Доставка</label>
                <div class="col-sm-3 text-left bg-info">{{ lookup(shipping, order.shipment_id, 'name') }}</div>
            </div>
            <div class="row">
                <label class="col-sm-1 text-right">Адреса</label>
                <div class="col-sm-11 text-left bg-info">{{ order.address }}</div>
            </div>
            <div class="row">
                <label class="col-sm-1 text-right">Примітка</label>
                <div class="col-sm-11 text-left bg-info">{{ order.comment }}</div>
            </div>
        </div>
        <div class="panel-footer">
            <div class="buttons">
                <button v-if="['1', '3', '4', '5', '7', '8', '9'].indexOf(order.status_id) !== -1" class="btn btn-primary" @click="changeState(order, 2)">В обробку</button>
                <button v-if="['1', '2', '3', '4'].indexOf(order.status_id) !== -1" class="btn btn-success" @click="changeState(order, 5)">Надіслано</button>
                <button v-if="['1', '2', '3'].indexOf(order.status_id) !== -1" class="btn btn-info" @click="changeState(order, 4)">Відкладено</button>
                <button v-if="['1', '2'].indexOf(order.status_id) !== -1" class="btn btn-danger" @click="changeState(order, 3)">Підозр.</button>
                <button v-if="['1', '2', '3', '4'].indexOf(order.status_id) !== -1" class="btn btn-default" @click="changeState(order, 7)">Скас. кл.</button>
                <button v-if="['1', '2', '3', '4'].indexOf(order.status_id) !== -1" class="btn btn-default" @click="changeState(order, 8)">Скас. мен.</button>
                <button v-if="['5'].indexOf(order.status_id) !== -1" class="btn btn-warning" @click="changeState(order, 9)">Не забрали</button>
            </div>
            <hr  v-if="order.ready_to_state_change">
            <div v-if="order.ready_to_state_change">Змінити статус замовлення на <strong>{{ translateStatus('uk', lookup(statuses, order.new_status_id, 'status')) }}</strong></div>
            <div v-if="order.ready_to_state_change" class="row">
                <div class="col-sm-1 checkbox">
                    <label>
                        <input type="checkbox" v-model="order.sendMsg" true-value="1" false-value="0" :disabled="! order.phone.startsWith('38')">
                        <b>SMS</b>
                    </label>
                </div>
                <div class="col-sm-10">
                    <input class="form-control" type="text" v-model="order.new_message">
                </div>
                <div class="col-sm-1">
                    <button class="btn btn-primary" @click="sendStatus(order)">OK</button>
                </div>
            </div>
        </div>
    </div>

    <modal v-if="showModal" @hide="showModal = false">
        <h3 slot="header"><a class="btn btn-default" @click.prevent="showModal = false"><span class="glyphicon glyphicon-remove"></span></a> Історія статусів замовлення № {{ modalOrderId }}</h3>
        <div slot="body">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Дата, час</th>
                            <th>Статус</th>
                            <th>Повідомлення</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row of statusTable" :key="row.id">
                            <td>{{ row.status_date }}</td>
                            <td>{{ translateStatus('uk', lookup(statuses, row.status_id, 'status')) }}</td>
                            <td>{{ row.message }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </modal>

</div>
</template>

<script>
import axios from 'axios';
import lookup from 'dict-lookup';

export default {
    data() {
        return {
            orders: [],
            statuses: [],
            statusTranslation: [],
            shipping: [],
            activeState: 1,
            showModal: false,
            modalOrderId: '',
            statusTable: [],
            showSpinner: false,
        }
    },

    components: {
        modal: () => import('Modal'),
    },

    methods: {
        lookup: lookup,

        translateStatus(lang, src) {
            let result = src;
            this.statusTranslation.some(row => {
                if (row.lang === lang && row.src === src) {
                    result = row.translation;
                    return true;
                }
            });
            return result;
        },

        getData() {
            this.showSpinner = true;
            axios.get(getDataUrl, { params: {state: this.activeState} })
            .then(response => {
                this.$data.orders = response.data;
                this.$data.showSpinner = false;
            });
        },

        selectState(state) {
            this.activeState = state;
            this.getData();
        },

        changeState(order, new_status_id) {
            let new_status;
            this.statuses.some(row => {
                if (row.id === new_status_id) {
                    new_status = row;
                    return true;
                }
            });
            let new_message = new_status.message_template;

            if (new_message) {
                [...new_message.matchAll(/\{([^}]+)\}/g)].forEach(match => {
                    new_message = new_message.replace(match[0], this.translateStatus(order.lang, match[1]));
                });
    
                new_message = new_message.replace('%status', this.translateStatus(order.lang, new_status.status));
                new_message = new_message.replace('%shipping', lookup(this.shipping, order.shipment_id, 'short_name') || lookup(this.shipping, order.shipment_id, 'name'));
                new_message = new_message.replace('%invoice', lookup(this.shipping, order.shipment_id, 'invoice'));
            }

            this.$set(order, 'new_status_id', new_status_id);
            this.$set(order, 'new_message', new_message);
            this.$set(order, 'sendMsg', order.phone.startsWith('38') ? new_status.sendMsg : 0);
            this.$set(order, 'ready_to_state_change', true);
        },

        sendStatus(order) {
            const vm = this;
            const formData = new FormData;
            formData.set(csrfParam, csrfToken);
            formData.set('OrderStatuses[order_id]', order.id);
            formData.set('OrderStatuses[status_id]', order.new_status_id);
            formData.set('OrderStatuses[message]', order.new_message || '');
            formData.set('sendMsg', order.sendMsg);
            formData.set('phone', order.phone);
            axios.post(sendStatusUrl, formData, { headers: {'Content-Type': 'multipart/form-data' } })
            .then(response => {
                if (response.data.result === 'OK') {
                    if (order.sendMsg && response.data.sms.result !== 'OK') {
                        console.error(response.data.sms);
                        alert("Не вдалося відправити СМС!\nДив. повідомлення в консолі");
                    }
                    if (vm.activeState === 0) {
                        order.status_id = response.data.status_id;
                        order.status_date = response.data.status_date;
                        order.message = response.data.message;
                        vm.$delete(order, 'new_status_id');
                        vm.$delete(order, 'new_message');
                        vm.$delete(order, 'sendMsg');
                        vm.$delete(order, 'ready_to_state_change');
                    } else {
                        const index = vm.orders.indexOf(order);
                        vm.orders.splice(index, 1);
                    }
                } else {
                    console.error(response.data);
                    alert('Не вдалося зберегти дані.\nДив. повідомлення в консолі');
                }
            })
            .catch(error => { alert(error.message); });
        },

        statusHistory(order_id) {
            axios.get(statusHistoryUrl, { params: {order_id: order_id} })
            .then(response => {
                this.statusTable = response.data;
                this.modalOrderId = order_id;
                this.showModal = true;
            })
        }
    },

    mounted() {
        axios.get(getStatusesUrl)
        .then(response => {this.$data.statuses = response.data});
        axios.get(statusTranslationUrl)
        .then(response => {this.$data.statusTranslation = response.data});
        axios.get(getShippingUrl)
        .then(response => {this.$data.shipping = response.data});
        this.getData();
    }
}
</script>

<style>
.lang {
    /* font-weight: bold; */
    text-transform: uppercase;
}

#spinner {
    position: fixed;
    top: 40%;
    left: 45%;
    z-index: 9999;
}
</style>