@include("admin.messages.form")
<template id="messages">
    <v-layout justify-center>
        <v-flex>
            <template>
                <v-card flat>
                    <v-toolbar

                        color="grey"
                        class="lighten-2"
                        light
                        extended
                        flat

                    >
                        <v-toolbar-title>{{trans("Messages")}}</v-toolbar-title>
                        <v-spacer></v-spacer>
                        <v-text-field
                            v-model="search"
                            append-icon="search"
                            label="{{trans("Search")}}"
                            single-line

                        ></v-text-field>
                        <v-btn v-if="modal" small icon @click="event('close',true)">
                            <v-icon small>close</v-icon>
                        </v-btn>
                    </v-toolbar>

                    <v-layout row pb-2>
                        <v-flex xs10 offset-xs1>
                            <v-card flat :elevation="0" class="card--flex-toolbar">
                                <v-toolbar card prominent dense>

{{--

                                    <v-btn @click="newItem()" small outline color="primary"
                                           title="{{trans("Add Content")}}">
                                        <span v-if="items.length == 0">Add Content</span>
                                        <span v-else>Add more Content to module</span>
                                    </v-btn>
--}}


                                    <v-spacer></v-spacer>


                                    <v-btn :disabled="selected.length==0" icon @click="activateItems()"
                                           title="{{trans("Activate")}}">
                                        <v-icon color="success">check</v-icon>
                                    </v-btn>
                                    <v-btn :disabled="selected.length==0" icon @click="suspendItems()"
                                           title="{{trans("Deactivate")}}">
                                        <v-icon color="red">close</v-icon>
                                    </v-btn>
                                    <v-btn :disabled="selected.length==0" icon @click="deleteItems()"
                                           title="{{trans("components.Delete")}}">
                                        <v-icon color="red">delete</v-icon>
                                    </v-btn>
                                </v-toolbar>

                                <v-divider></v-divider>

                                <v-data-table
                                    :elevation="0"
                                    v-model="selected"
                                    :headers="headers"
                                    :items="items"
                                    item-key="id"
                                    select-all="primary"
                                    :pagination.sync="pagination"
                                    :total-items="total"
                                    :loading="loading"

                                >

                                    <template slot="items" slot-scope="props">
                                        <td>
                                            <v-checkbox
                                                v-model="props.selected"
                                                color="primary lighten-2"
                                                hide-details
                                            ></v-checkbox>
                                        </td>

                                        <td>@{{ props.item.id }}</td>
                                        <td>@{{ props.item.name }}</td>
                                        <td>@{{ props.item.email }}</td>


                                        <td>
                                            <v-btn small flat outline @click="editItem(props.item)"
                                                   title="{{trans("Reply")}}">
                                                Reply
                                                <v-icon small color="primary">reply</v-icon>
                                            </v-btn>
                                            <v-btn small flat outline color="info" @click="viewItem(props.item)"
                                                   title="{{trans("View")}}">
                                               view
                                            </v-btn>
                                            {{--<select-assessment v-if="props.item.assessment" :event="eventListener" :assessment="props.item.assessment"/>--}}
                                        </td>
                                    </template>

                                    <template slot="no-data">
                                        <v-alert :value="true" color="error" icon="warning">
                                            {{trans("components.Sorry, nothing to display here")}} 😞
                                        </v-alert>

                                    </template>
                                    <v-alert slot="no-results" :value="true" color="error" icon="warning">
                                        @{{ search }} {{trans('components.not found')}} 😥
                                    </v-alert>
                                </v-data-table>
                            </v-card>
                        </v-flex>
                    </v-layout>
                </v-card>
            </template>

        </v-flex>
        <v-dialog v-model="dialog" persistent fullscreen>
            <v-card>
                <v-card-title
                    class="grey lighten-4  title"
                >
                    <span v-if="item.id">@{{ item.name }}</span>
                    <span v-else>{{trans("Add Content")}}</span>
                    <v-spacer></v-spacer>
                    <v-btn small icon @click="dialog=false">
                        <v-icon small>close</v-icon>
                    </v-btn>
                </v-card-title>
                <v-container grid-list-sm class="pa-4">
                    <message :module="module" :message="item" :event="eventListener"/>
                </v-container>
            </v-card>
        </v-dialog>

        <v-dialog v-model="view_dialog" fullscreen persistent>
            <v-card>
                <v-card-title
                    class="grey lighten-4 py-4 title"
                >
                    <span>@{{ item.name }}</span>
                    <v-spacer></v-spacer>
                    <v-btn small icon @click="view_dialog=false">
                        <v-icon small>close</v-icon>
                    </v-btn>
                </v-card-title>
                <v-container grid-list-sm class="pa-4">
                    <v-layout row wrap>
                        <v-flex xs12>
                            Name: <span>@{{ item.name }}</span>
                        </v-flex>
                        <v-flex xs12>
                            Email: <span>@{{ item.email }}</span>
                        </v-flex>
                        <v-flex xs12>
                            Message:
                        </v-flex>
                        <v-flex xs12 v-html="item.content">

                        </v-flex>
                    </v-layout>
                </v-container>

            </v-card>
        </v-dialog>

        <v-dialog v-model="confirm" width="300px">
            <v-card>
                <v-card-title
                    class="grey lighten-4 py-4 title"
                >
                    {{trans("Confirm")}}
                </v-card-title>
                <v-container grid-list-sm class="pa-4">
                    <v-layout row wrap>
                        <v-flex xs12 align-center justify-space-between>
                            <v-layout align-center>
                                @{{confirmObject.text}}
                            </v-layout>
                        </v-flex>
                    </v-layout>
                </v-container>
                <v-card-actions>


                    <v-btn flat @click="confirm = !confirm">{{trans("components.Cancel")}}</v-btn>
                    <v-spacer></v-spacer>
                    <v-btn flat color="primary" :loading="loading"
                           @click="actionOnMultiple(confirmObject.action)">{{trans("components.Continue")}}
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-snackbar
            v-model="snackbar.active"
            :color="snackbar.color"
        >
            @{{ snackbar.text }}
            <v-btn

                flat
                @click="snackbar.active = false"
            >
                Close
            </v-btn>
        </v-snackbar>
    </v-layout>


</template>
<script>
    const Messages = {
        template: "#messages",
        components: {Message},
        data: () => ({
            total: 0,
            loading: false,
            pagination: {rowsPerPage: 10, page: 1},
            fab: false,
            dialog: false,
            view_dialog: false,
            confirm: false,
            confirmObject: {action: '', text: '', active: false},
            snackbar: {active: false, text: "", color: "primary"},
            search: "",

            table_items: [
                'Validate', 'Suspend', 'Delete'
            ],

            selected: [],
            selectedBills: [],
            headers: [
                {text: '{{trans("Number")}}', value: 'id'},
                {text: '{{trans("Name")}}', value: 'name'},
                {text: '{{trans("Email")}}', value: 'email'},
                {text: '{{trans("Actions")}}', sortable: false},
            ],
            form: {},
            item: {},
            items: [],
            defaultItem: {},
            settings: {pagination: {page: 1}},


            print_date: new Date().toISOString().substr(0, 7),
            print_modal: false,
            month_modal: false
        }),
        props: {
            source: String,
            module: Object,

            modal: {
                type: Boolean,
                default: false,
            },
            url: {
                type: String,
                default: "{{route("messages.index")}}",
            },
            select: {
                type: Boolean,
                default: false,
            },
            event: {
                type: Function,
                default: function (event, data) {
                }
            },
        },
        computed: {
            pages() {
                if (this.pagination.rowsPerPage == null ||
                    this.pagination.totalItems == null
                ) return 0;

                return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
            },
            params(nv) {
                return {
                    ...this.pagination,
                    query: this.search
                };
            },

        },
        watch: {
            params: {
                handler() {
                    this.getData().then(data => {
                        this.items = data.items;
                        this.total = data.total;
                    });
                },
                deep: true
            },
        },
        mounted() {


        },
        methods: {
            eventListener(event, data) {
                switch (event) {
                    case "message":
                        this.pushItem(data);
                        break;
                    default:
                        (this.event)(event, data);
                        break;
                }
            },
            getData() {
               this.loading = true;
                return new Promise((resolve, reject) => {
                    var _this = this;
                    const rowsPerPage = this.pagination.rowsPerPage;
                    const page = this.pagination.page;
                    // get by search keyword
                    if (this.url.trim().length < 2) return false;
                    axios.get(this.url, {
                        params: {
                            term: this.search,
                            orderBy: this.pagination.sortBy,
                            page: this.pagination.page,
                            direction: this.pagination.descending ? "ASC" : "DESC",
                            per_page: this.pagination.rowsPerPage
                        }
                    })
                        .then(res => {
                            let items = res.data.data;


                            const total = res.data.total;
                            this.loading = false;
                            resolve({
                                items,
                                total
                            })

                        })
                        .catch(err => console.log(err))
                        .finally(() => _this.loading = false);
                })


            },


            newItem() {

                this.item = {type: ""};
                this.dialog = true;
            },
            updateItems() {
                if (this.selected.length == 0) {
                    this.toast("{{trans("components.Select items")}}", "red");
                    return false;
                }
                this.update_dialog = true;
            },
            editItem(item) {

                this.item = item;
                this.dialog = true;
            },
            selectItem(item) {
                this.item = item;
                (this.event)("message_selected", item);
                (this.event)("close", true);
            },
            viewItem(item) {

                this.item = item;
                this.view_dialog = true;
            },
            editPayment(item) {

                this.payment = item;
            },
            deleteItems() {
                if (this.selected.length !== 0) {
                    this.confirmObject.text = "{{trans("components.Are you sure to delete")}} " + this.selected.length + " messages";
                    this.confirmObject.action = "delete";
                    this.confirm = true;
                }

            },


            actionOnMultiple(action) {
                if (this.selected.length === 0) {
                    this.snackbar.text = "{{trans("components.Select items")}}";
                    this.snackbar.color = "dark";
                    this.snackbar.active = true;
                    return false;
                }

                let _this = this;
                let IDS = [];
                for (let i = 0; i < this.selected.length; i++) {
                    IDS.push(this.selected[i].id);
                }

                this.loading = true;

                axios.post('/panel/messages/action/' + action, {ids: IDS})
                    .then(response => {

                        if (response.data) {
                            let data = response.data;

                            if (action == "delete") {
                                for (let i = 0; i < IDS.length; i++) {
                                    _this.items.splice(_this.getIndex(_this.items, "id", IDS[i]), 1);
                                }
                            } else {
                                for (let i = 0; i < data.length; i++) {
                                    let object = data[i];
                                    let index = _this.getIndex(_this.items, "id", object.id);

                                    if (index > -1) {
                                        Vue.set(_this.items, index, object);
                                    } else {
                                        _this.items.unshift(object);
                                    }
                                }
                            }
                            _this.confirm = false;
                            _this.selected = [];
                            this.loading = false;
                        } else {
                            this.snackbar.text = "{{trans("components.An error occurred")}}";
                            this.snackbar.color = "red";
                            this.snackbar.active = true;
                            _this.confirm = false;
                            this.loading = false;
                        }
                    });
            },


            /*
                format tweet created_at date to a nice string date
                 */
            formatDate(date_string) {
                var REFERENCE = moment(date_string);
                var TODAY = moment();
                var YESTERDAY = moment().subtract(1, 'day');
                /*
                if the time is creater than a day show the month and day
                 */
                if (moment(date_string).isSame(TODAY, 'd') || moment(date_string).isSame(YESTERDAY, 'd')) {
                    return moment(date_string).fromNow()
                } else {
                    return REFERENCE.format("MMM DD")
                }

                return
            },
            /*
                method to get index of an item in an array
                using a field and a value of comparison
                 */
            getIndex(items, field, value) {
                for (var i = 0; i < items.length; i++) {
                    if (items[i][field] == value) {
                        return i;
                    }
                }
                return -1;
            },
            /*
               method to get an item in an array
               using a field and a value of comparison
                */
            getItem(items, field, value) {
                for (var i = 0; i < items.length; i++) {
                    if (items[i][field] == value) {
                        return items[i];
                    }
                }
                return false;
            },
            pushItem(item) {


                for (var i = 0; i < this.items.length; i++) {
                    if (item.id === this.items[i].id) {
                        Vue.set(this.items, i, item);
                        return true;
                    }
                }
                this.items.unshift(item)

                this.dialog = false;
            },
            toast(message, color) {

                this.snackbar.text = message;
                this.snackbar.color = color;
                this.snackbar.active = true;


            },
            close() {
                this.dialog = false
                setTimeout(() => {
                    this.item = Object.assign({}, this.defaultItem)

                }, 300)
            },
        },
    }
</script>