<template>
    <table>
            <thead>
                <tr>
                    <th v-for="header in tableData.headers">
                        {{ header }}
                    </th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(row) in tableData.content">
                    <td>{{ row[0] }}</td>
                    <td v-for="(column) in row.slice(1)">
                        {{ column }}
                    </td>
                    <td>
                        <button @click="showEditForm(`${row[0]}`)">&#9998</button>
                    </td>
                    <td>
                        <button @click="removeField(`${row[0]}`)">&#10006</button>
                    </td>
                </tr>
            </tbody>
        </table>
</template>

<script>
    import EditFormBox from "./EditFormBox.vue";
    import axios from 'axios';

    export default {
        name: "Table",
        props: ['tableData', 'showFormCallback'],
        components: {EditFormBox},

        methods: {
            showEditForm(serviceId) {
                axios
                    .request({
                        url: '/api/get/',
                        method: 'post',
                        headers: {'Content-Type': 'application/json'},
                        data: JSON.stringify({'type': 'single_id', 'service_id': serviceId})
                    })
                    .then(response => {
                        this.showFormCallback('update', response.data);
                    });
            },

            removeField(serviceId) {
                this.tableData.content = this.tableData.content.filter(row => row[0].toString() !== serviceId);
                axios
                    .request({
                        url: '/api/delete', method: 'post',
                        data: {'service_id': serviceId}
                    })
                    .then(response => {
                        if (response.status === 200)
                            this.tableData = this.tableData.content.filter(row => row[0] !== serviceId);
                    });
            }

        }
    }
</script>

<style scoped>
    table {
        border-spacing: 0;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    }

    th {
        background-color: #6c7ae0;
        padding: 7px 15px;
        font-size: 19px;
        color: white;
    }

    td {
        padding: 6px;
        color: #505050;
    }

    tbody > tr:hover, tbody > tr:nth-child(2n):hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

    tbody > tr:nth-child(2n) {
        background-color: #f8f6ff;
    }

    button {
        border: none;
        border-radius: 2px;
    }

    button:hover {
        background-color: #dadada;
    }

    button:focus {
        background-color: #d5d5d5;
    }
</style>