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

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

            <v-data-table-server
            :items="items"
            :items-length="itemsLength"
            :headers="headers"
            :page="options.page"
            :items-per-page="options.itemsPerPage"
            @update:options="refresh"
            hover
            >

                <template v-slot:top>
                    <v-toolbar class="mb-4" dense elevation="0" color="transparent">
                        <v-text-field
                            v-model="search"
                            density="compact"
                            label="Search"
                            prepend-inner-icon="ti ti-search"
                            variant="outlined"
                            hide-details
                            single-line
                            class="mr-4"
                            style="max-width:320px"
                            @update:model-value="refresh()"
                        ></v-text-field>
                        <v-btn class="ml-auto" @click="createItem" size="small" color="primary" variant="elevated">
                            <template v-slot:prepend><i class="ti ti-plus"></i></template>
                            Add Note
                        </v-btn>
                    </v-toolbar>
                </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">
            <v-toolbar>
                <v-toolbar-title>${eidialog_title}</v-toolbar-title>
                <template v-slot:append>
                    <v-btn @click="edialog=false" size="small" icon="ti ti-x" variant="text"></v-btn>
                </template>
            </v-toolbar>
            <v-card-text>
                <v-text-field label="Name" v-model="eitem.name" required></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" @click="saveItem" variant="elevated">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" size="small" variant="text"></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 {
                    errors: "",
                    snackBar: false,
                    snackMessage: "",
                    search: "",
                    items: [],
                    itemsLength: 0,
                    options: {
                        page: 1,
                        itemsPerPage: 25
                    },
                    headers: [
                        {title: 'ID', value: 'id'},
                        {title: 'Name', value: 'name'},
                        {title: 'Description', value: 'description'},
                        {title: 'Actions', value: 'actions', sortable: false}
                    ],
                    edialog: false,
                    eitem: {id: "", name: "", description: ""},
                };
            },

            mounted() {
                // Table triggers refresh via @update:options on load
            },
            delimiters: config.delimiters,

            computed: {
                eidialog_title() {
                    return this.eitem.id ? 'Edit Note' : 'New Note';
                }
            },

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

                refresh(options) {
                    if (options) {
                        this.options = {
                            ...this.options,
                            page: options.page,
                            itemsPerPage: options.itemsPerPage
                        };
                    }
                    axios.get(`/api/notes?page=${this.options.page}&per_page=${this.options.itemsPerPage}&search=${this.search}`)
                        .then(res => {
                            this.items = res.data.items;
                            this.itemsLength = res.data.total;
                            if (res.data.perPage) this.options.itemsPerPage = res.data.perPage;
                        })
                        .catch(error => {
                            console.error('Error fetching notes:', error);
                            this.showSnack('Failed to load notes');
                        });
                },

                createItem() {
                    this.eitem = {id: "", name: "", description: ""};
                    this.edialog = true;
                },

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

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

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

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