<template>
    <theme-table :permisName="'Backup'"  :newButton="true" @click="funSubmitORCreate" @input="Searching">
        <span slot="main-title">
            {{ $t("Backup") }}
        </span>
        <div slot="body">
            <div class="table-responsive table_scroll">
                <table class="table table-bordered">
                    <thead class="text-nowrap fixed_table">
                        <tr class="border-top border-bottom">
                            <th>{{ $t("#") }}</th>
                            <th>{{ $t("File Name") }}</th>
                            <th>{{ $t("File Size") }}</th>
                            <th>{{ $t("Backup Date") }}</th>
                            <th>{{ $t("Action") }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(value, index) in backup" :key="value.id">
                            <td>{{ index + 1 }}</td>
                            <td>{{ value["file_name"] }}</td>
                            <td>{{ value["file_size"] }}</td>
                            <td>{{ value["last_modified"] }}</td>
                            <td>
                                <a :href="'/api/backup/download/' + value['file_name']" target="_blank" download :title="$t('Download')" class="btn btn-dark s-btn-xs">
                                    <i class="fa-regular fa-download fa-sm"></i>
                                </a>
                                <button type="button" :title="$t('Delete')" @click="removeBackup(value['file_name'])" class="btn btn-danger s-btn-xs">
                                    <i class="fa-solid fa-trash-can fa-sm"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </theme-table>
</template>

<script>

import ThemeTable from "../../../components/ThemeTable.vue";
export default {
    components: {

        ThemeTable,
    },
    data() {
        return {
            backup: [],
            searching: "",
            loading: false,
            clickSpiner: false,
            timerCount: 0,
            toDay: null,
            ampm: "am",
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            axios.get("system/backup").then((res) => {
                this.backup = res.data;
            });
        },

        funSubmitORCreate() {
            axios.get("system/backup/create").then((res) => {
                $("#FormUpdateOrCreate").modal("hide");
                this.getData();
            });
        },
        downloadBackup(file_name) {
            axios.get("system/backup/download/" + file_name).then((res) => {
                console.log(res.data);
                alert(res.data);
            });
        },
        removeBackup(file_name) {
            axios.get("system/backup/delete/" + file_name).then((res) => {
                this.getData();
            });
        },
    },
};
</script>
