@extends('layouts.main')

@section("content")
    <page-content :event="eventListener"></page-content>
@endsection
@section("components_declarations")
    @include("users.purchases")
    <template id="page-content">
        <v-content>
            <v-container fluid fill-height>

                <v-layout justify-center>
        <v-flex>
            <template>
                <v-card flat pa-2>
                    <v-toolbar

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

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

                        ></v-text-field>

                    </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="{{__("Add Content")}}">
                                        <span>Add Content</span>

                                    </v-btn>


                                    <v-spacer></v-spacer>


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

                                <v-divider></v-divider>

                                <purchases :event="eventListener" title="Purchases" url="{{route("users.purchases",Auth::id())}}"></purchases>
                            </v-card>
                        </v-flex>
                    </v-layout>

                </v-card>
            </template>

        </v-flex>





    </v-layout>
            </v-container>
        </v-content>
    </template>

    <script>

        const PageContent = {
            template: "#page-content",
            components: {Purchases},
            data: () => ({
                total: 0,
                loading: true,
                pagination: {},
                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: '{{__("Name")}}', value: 'name'},
                    {text: '{{__("Actions")}}', sortable: false},
                ],
                course: {},
                items: [],
                defaultItem: {},
                settings: {pagination: {page: 1}},



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

                event: {
                    type: Function,
                    default: function (event, data) {
                    }
                },

            },
            computed: {


            },
            watch: {

            },
            mounted() {

                if (localStorage.getItem('settings')) this.settings = JSON.parse(localStorage.getItem('settings')) || this.settings;
                this.pagination = {rowsPerPage:10,page: 1};

            },
            methods: {
                eventListener(event,data){
                    switch (event) {

                        default:
                            (this.event)(event, data);

                            break;
                    }
                },




                /*
                    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>
@endsection
@section("components_instances")
    PageContent
@endsection