<template v-cloak>
    <div>
        <headernav :section="section" :subsection="subsection"></headernav>
        <scheduletabs :statusCount="statusCount"></scheduletabs>
        <table class="table is-fullwidth is-striped is-hoverable">
            <thead>
                <tr>
                    <th>Client</th>
                    <th>Schedule</th>
                    <th>When <span class="icon"><i class="mdi mdi-18px mdi-chevron-up" aria-hidden="true"></i></span>
                        <span class="icon"><i class="mdi mdi-28px mdi-chevron-down" aria-hidden="true"></i></span>
                    </th>
                    <th><span class="is-pulled-right">Actions</span></th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="schedule in schedules" :key="schedule.id">
                    <td><span class="icon tbl-icon"><i class="mdi mdi-24px mdi-check has-text-success" aria-hidden="true"></i></span>
                        {{ schedule.client }}</td>
                    <td>{{ schedule.name }}</td>
                    <td>{{ schedule.date }}</td>
                    <td><i class="mdi mdi-24px mdi-magnify is-pulled-right" aria-hidden="true"></i></td>
                </tr>
            </tbody>
        </table>
        <pagination v-if="pagination.last_page > 1" :pagination="pagination" :offset="5" @paginate="fetchSchedules()"></pagination>
    </div>
</template>

<script>
export default {
    data () {
    return {
      schedules: null,
      statusCount: {},
      section: 'Schedules',
      subsection: "success",
      pagination: {
            'current_page': 1
        }
    }
  },
    methods: {
        fetchSchedules() {
            axios.get('/api/v1/schedule/success?page=' + this.pagination.current_page)
                .then(response => {
                    this.schedules = response.data.data, 
                    this.statusCount = response.data.count,
                    this.pagination = response.data.meta;
                })
                .catch(error => {
                    console.log(error.response.data);
                });
        }
    },
    created() {
        this.fetchSchedules();
        setInterval(() => this.fetchSchedules(), 10000);
    }
}
</script>

