tinyqc/app/Views/master/dept/index.php

<?= $this->extend("layout/main_layout"); ?>

<?= $this->section("content"); ?>
<main class="flex-1 p-6 overflow-auto" x-data="departments()">
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-base-content tracking-tight">Departments</h1>
            <p class="text-sm mt-1 opacity-70">Manage laboratory departments</p>
        </div>
        <button
            class="btn btn-sm gap-2 shadow-sm border-0 bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white transition-all duration-200"
            @click="showForm()"
        >
            <i class="fa-solid fa-plus"></i> New Department
        </button>
    </div>

    <div class="bg-base-100 rounded-xl border border-base-300 shadow-sm p-4 mb-6">
        <div class="flex items-center gap-3">
            <div class="relative flex-1 max-w-md">
                <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 opacity-50 text-sm"></i>
                <input
                    type="text"
                    placeholder="Search by name..."
                    class="w-full pl-10 pr-4 py-2.5 text-sm bg-base-200 border border-base-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
                    x-model="keyword"
                    @keyup.enter="fetchList()"
                />
            </div>
            <button
                class="px-4 py-2.5 text-sm font-medium bg-base-content text-base-100 rounded-lg hover:bg-base-content/90 transition-all duration-200 flex items-center gap-2"
                @click="fetchList()"
            >
                <i class="fa-solid fa-magnifying-glass text-xs"></i> Search
            </button>
        </div>
    </div>

    <div class="bg-base-100 rounded-xl border border-base-300 shadow-sm overflow-hidden">
        <template x-if="loading">
            <div class="p-8 text-center">
                <span class="loading loading-spinner loading-lg text-primary"></span>
                <p class="mt-2 text-base-content/60">Loading...</p>
            </div>
        </template>
        
        <template x-if="!loading && error">
            <div class="p-8 text-center">
                <i class="fa-solid fa-triangle-exclamation text-4xl text-error mb-2"></i>
                <p class="text-error" x-text="error"></p>
            </div>
        </template>
        
        <template x-if="!loading && !error && list">
            <div class="overflow-x-auto">
                <table class="w-full text-sm text-left">
                    <thead class="uppercase tracking-wider font-semibold bg-base-200 text-base-content/70 text-xs">
                        <tr>
                            <th class="py-3 px-5 font-semibold">Name</th>
                            <th class="py-3 px-5 font-semibold text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody class="text-base-content/80 divide-y divide-base-300">
                        <template x-for="item in list" :key="item.deptId">
                            <tr class="hover:bg-base-200 transition-colors">
                                <td class="py-3 px-5 font-medium text-base-content" x-text="item.deptName"></td>
                                <td class="py-3 px-5 text-right">
                                    <button
                                        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-amber-700 bg-amber-50 hover:bg-amber-100 rounded-lg transition-colors"
                                        @click="showForm(item.deptId)"
                                    >
                                        <i class="fa-solid fa-pencil"></i> Edit
                                    </button>
                                    <button
                                        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-error bg-error/10 hover:bg-error/20 rounded-lg transition-colors ml-1"
                                        @click="deleteData(item.deptId)"
                                    >
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </template>
                        <template x-if="list.length === 0">
                            <tr>
                                <td colspan="2" class="py-8 text-center text-base-content/60">No data available</td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </template>
    </div>

    <?= $this->include('master/dept/dialog_dept_form'); ?>
</main>
<?= $this->endSection(); ?>

<?= $this->section("script"); ?>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data("departments", () => ({
            loading: false,
            showModal: false,
            errors: {},
            error: null,
            keyword: "",
            list: null,
            form: {
                deptId: null,
                deptName: "",
            },

            async fetchList() {
                this.loading = true;
                this.error = null;
                this.list = null;
                try {
                    const params = new URLSearchParams({ keyword: this.keyword });
                    const response = await fetch(`${window.BASEURL}api/master/depts?${params}`, {
                        method: "GET",
                        headers: { "Content-Type": "application/json" }
                    });
                    if (!response.ok) throw new Error("Failed to load data");
                    const data = await response.json();
                    this.list = data.data;
                } catch (err) {
                    this.error = err.message;
                } finally {
                    this.loading = false;
                }
            },

            async loadData(id) {
                this.loading = true;
                try {
                    const response = await fetch(`${window.BASEURL}api/master/depts/${id}`, {
                        method: "GET",
                        headers: { "Content-Type": "application/json" }
                    });
                    if (!response.ok) throw new Error("Failed to load item");
                    const data = await response.json();
                    this.form = data.data[0];
                } catch (err) {
                    this.error = err.message;
                    this.form = {};
                } finally {
                    this.loading = false;
                }
            },

            async showForm(id = null) {
                this.showModal = true;
                this.errors = {};
                if (id) {
                    await this.loadData(id);
                } else {
                    this.form = { deptId: null, deptName: "" };
                }
            },

            closeModal() {
                this.showModal = false;
                this.form = { deptId: null, deptName: "" };
            },

            validate() {
                this.errors = {};
                if (!this.form.deptName) this.errors.deptName = "Name is required.";
                return Object.keys(this.errors).length === 0;
            },

            async save() {
                if (!this.validate()) return;
                this.loading = true;
                let method = '';
                let url = '';
                if (this.form.deptId) {
                    method = 'PATCH';
                    url = `${window.BASEURL}api/master/depts/${this.form.deptId}`;
                } else {
                    method = 'POST';
                    url = `${window.BASEURL}api/master/depts`;
                }
                try {
                    const res = await fetch(url, {
                        method: method,
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify(this.form),
                    });
                    const data = await res.json();
                    if (data.status === 'success') {
                        alert("Data saved successfully!");
                        this.closeModal();
                        this.fetchList();
                    } else {
                        alert(data.message || "Something went wrong.");
                    }
                } catch (err) {
                    console.error(err);
                    alert("Failed to save data.");
                } finally {
                    this.loading = false;
                }
            },

            async deleteData(id) {
                if (!confirm("Are you sure you want to delete this item?")) return;
                this.loading = true;
                try {
                    const res = await fetch(`${window.BASEURL}api/master/depts/${id}`, {
                        method: "DELETE",
                        headers: { "Content-Type": "application/json" }
                    });
                    const data = await res.json();
                    if (data.status === 'success') {
                        alert("Data deleted successfully!");
                        this.fetchList();
                    } else {
                        alert(data.message || "Failed to delete.");
                    }
                } catch (err) {
                    console.error(err);
                    alert("Failed to delete data.");
                } finally {
                    this.loading = false;
                }
            }
        }));
    });
</script>
<?= $this->endSection(); ?>