{% extends 'layout.html' %}
{% block css %}
{% endblock %}
{% block content %}

    <v-card class="ma-2 mt-12 w-100 h-100">
        <v-toolbar>
            <v-toolbar-title>Roles Dashboard</v-toolbar-title>
            <v-spacer></v-spacer>
        </v-toolbar>
        <v-card-text>

            <v-data-table-server
                :headers="headers"
                :items="items"
                :items-length="itemsLength"
                :page="options.page"
                :items-per-page="options.itemsPerPage"
                @update:options="refresh"
                hover
            >
                <template v-slot:top>
                    <v-toolbar color="transparent" class="mb-4" dense elevation="0">
                        <v-btn class="ml-auto" @click="createItem" size="small" variant="elevated" color="primary">
                            <template v-slot:prepend><i class="ti ti-plus"></i></template>
                            Add Role
                        </v-btn>
                    </v-toolbar>
                </template>

                <template v-slot:item.description="{ item }">
                    <span>${item.description}</span>
                </template>

                <template v-slot:item.actions="{ item }">
                    <v-icon
                            small
                            class="mr-2"
                            @click="editItem(item)"
                    >
                        ti ti-pencil
                    </v-icon>
                    <v-icon
                            small
                            @click="deleteItem(item)"
                    >
                        ti ti-trash
                    </v-icon>
                </template>

            </v-data-table-server>


        </v-card-text>
    </v-card>

    <!--Edit Dialog-->
    <v-dialog v-model="edialog" width="660">
        <v-card v-if="edialog" class="pa-6">
            <v-sheet class="d-flex justify-end">
                <v-btn @click="edialog=false" size="small" icon="ti ti-x" variant="text"></v-btn>
            </v-sheet>
            <v-card-title>Role Editor</v-card-title>

            <v-card-text>
                <!-- fields go here -->
                <v-text-field label="Name" v-model="eitem.name"></v-text-field>
                <v-textarea label="Description" v-model="eitem.description" rows="3"></v-textarea>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" variant="elevated" @click="saveItem">Save</v-btn>
            </v-card-actions>
        </v-card>

    </v-dialog>

    <v-snackbar size="small" class="d-flex" v-model="snackBar" rounded="pill" elevation="25">

        ${snackMessage}
        <template v-slot:actions>
            <v-btn @click="snackBar=false" icon="ti ti-x" class="ml-auto" variant="text" size="small"></v-btn>
        </template>
    </v-snackbar>

{% endblock %} {% block js %}

    <script>
        const {createApp, toRaw} = Vue;
        const {createVuetify} = Vuetify;

        const vuetify = createVuetify(config.vuetifyConfig);

        window.app = createApp({
            mixins: [layoutMixin],
            data() {
                return {
                    snackBar: false,
                    snackMessage: "",
                    items: [],
                    itemsLength: 0,
                    options: {
                        page: 1,
                        itemsPerPage: 25
                    },

                    headers: [
                        {title: 'ID', value: 'id', sortable: true},
                        {title: 'Name', value: 'name', sortable: true},
                        {title: 'Description', value: 'description', sortable: false},
                        {title: 'Actions', value: 'actions', sortable: false}
                    ],
                    edialog: false,
                    eitem: {
                        id: "",
                        name: "",
                        description: ""
                    },
                };
            },

            mounted() {
                // No refresh on mount
            },
            delimiters: config.delimiters,

            methods: {
                showSnack(message) {
                    this.snackMessage = message;
                    this.snackBar = true;
                },

                refresh(options) {
                    // Use options from parameter or component state
                    if (options) {
                        // Update options with the values from the event
                        this.options = {
                            ...this.options,
                            page: options.page,
                            itemsPerPage: options.itemsPerPage
                        };
                    }
                    
                    // Make API request with pagination parameters
                    axios.get(`/api/roles?page=${this.options.page}&per_page=${this.options.itemsPerPage}`)
                        .then(res => {
                            this.items = res.data.items;
                            this.itemsLength = res.data.total;
                            // Update itemsPerPage from API response if provided
                            if (res.data.perPage) {
                                this.options.itemsPerPage = res.data.perPage;
                            }
                        })
                        .catch(error => {
                            console.error('Error fetching roles:', error);
                        });
                },
                
                createItem() {
                    this.edialog = true;
                    this.eitem = {};
                },

                editItem(item) {
                    this.eitem = toRaw(item);
                    this.$nextTick(() => {
                        this.edialog = true;
                    });
                },

                saveItem() {
                    if (this.eitem.id) {
                        // edit mode
                        axios.post(`/api/role/${this.eitem.id}`, {item: this.eitem})
                            .then(res => {
                                this.showSnack(res.data?.message);
                                this.refresh();
                            })
                            .catch(err => {
                                this.showSnack(err.response?.data);
                            });
                    } else {
                        // create mode
                        axios.post('/api/role/', {item: this.eitem})
                            .then(res => {
                                this.showSnack(res.data?.message);
                                this.refresh();
                            })
                            .catch(err => {
                                this.showSnack(err.response?.data);
                            });
                    }
                    this.edialog = false;
                },

                deleteItem(item) {
                    if (confirm('Are you sure?')) {
                        axios.delete(`/api/role/${item.id}`)
                            .then(res => {
                                this.showSnack(res.data?.message);
                                this.refresh();
                            })
                            .catch(err => {
                                this.showSnack(err.response?.data);
                            });
                    }
                }
            }
        });

        registerStkComponents(app);
        app.use(vuetify).mount("#app");
    </script>
{% endblock %}