File Manager

✏️ Edit File: /home/u625410797/domains/monothailand.com/public_html/views/admin/documents.php

<?php
/**
 * views/admin/documents.php
 * Upgraded Documents Management - Premium Obsidian Cyber-Glass
 */
$documentsJson = json_encode($documents ?? []);
?>

<div class="max-w-7xl mx-auto space-y-6" x-data="documentsManager()">
    
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-slate-900/40 backdrop-blur-xl border border-slate-800 p-6 rounded-3xl shadow-2xl">
        <div>
            <h1 class="text-3xl font-extrabold tracking-tight text-white flex items-center gap-2">
                <span class="w-3 h-3 rounded-full bg-blue-500 animate-pulse"></span>
                Technical Documents
            </h1>
            <p class="text-sm text-slate-400 mt-1">คลังเอกสาร คู่มือติดตั้ง สเปกแผงโซล่าเซลล์ โบรชัวร์ และแค็ตตาล็อกสินค้า</p>
        </div>
        <button @click="openCreateModal()" class="w-full sm:w-auto bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-400 hover:to-indigo-500 text-white font-semibold px-5 py-2.5 rounded-xl transition duration-300 transform hover:-translate-y-0.5 shadow-[0_0_20px_rgba(59,130,246,0.2)] flex items-center justify-center gap-2">
            <i class="w-4 h-4" data-lucide="upload-cloud"></i>
            <span>Upload Document</span>
        </button>
    </div>

<div class="bg-slate-900/40 backdrop-blur-xl border border-slate-800 p-4 rounded-2xl flex flex-col md:flex-row gap-4 items-center justify-between">
        <div class="relative w-full md:w-96">
            <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500"></i>
            <input type="text" x-model="searchQuery" placeholder="Search by title, filename..." class="w-full pl-10 pr-4 py-2 bg-slate-950/60 border border-slate-800 rounded-xl text-sm text-slate-200 focus:outline-none focus:border-blue-500 transition-colors">
        </div>
        <div class="flex gap-2 w-full md:w-auto overflow-x-auto pb-1 md:pb-0">
            <select x-model="filterCategory" class="bg-slate-950 border border-slate-800 text-slate-300 rounded-xl px-3 py-2 text-xs focus:outline-none focus:border-blue-500">
                <option value="all">All Categories</option>
                <template x-for="cat in getCategories()" :key="cat">
                    <option :value="cat" x-text="cat"></option>
                </template>
            </select>
            <select x-model="filterExt" class="bg-slate-950 border border-slate-800 text-slate-300 rounded-xl px-3 py-2 text-xs focus:outline-none focus:border-blue-500">
                <option value="all">All Formats</option>
                <template x-for="ext in getExtensions()" :key="ext">
                    <option :value="ext" x-text="ext.toUpperCase()"></option>
                </template>
            </select>
        </div>
    </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <template x-for="doc in filteredDocs()" :key="doc.id">
            <div class="bg-slate-900/40 backdrop-blur-xl border border-slate-800 rounded-3xl p-6 hover:border-blue-500/30 transition duration-350 flex flex-col justify-between group shadow-lg">
                <div class="space-y-4">
                    <div class="flex justify-between items-start">
                        <span class="px-2.5 py-1 bg-slate-950 text-blue-400 font-mono text-[9px] rounded-lg border border-slate-850 uppercase tracking-wider font-bold" x-text="doc.category || 'general'"></span>
                        <div class="flex items-center gap-2">
                            <span class="text-[10px] text-slate-550 font-mono" x-text="formatBytes(doc.file_size)"></span>
                            <button @click="toggleActive(doc)" class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-350 focus:outline-none" :class="doc.is_active ? 'bg-emerald-500' : 'bg-slate-750'">
                                <span class="inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform duration-350" :class="doc.is_active ? 'translate-x-4' : 'translate-x-1'"></span>
                            </button>
                        </div>
                    </div>

<div class="border-t border-slate-850 mt-6 pt-4 flex justify-between items-center">
                    <span class="text-[9px] font-mono text-slate-550" x-text="'Order: ' + doc.sort_order"></span>
                    <div class="flex gap-1.5">
                        <a :href="'<?php echo BASE_URL; ?>' + doc.file_path" target="_blank" class="p-2 bg-slate-950/60 hover:bg-emerald-500/20 hover:text-emerald-400 rounded-lg text-slate-400 transition" title="Download">
                            <i class="w-4 h-4" data-lucide="download"></i>
                        </a>
                        <button @click="openEditModal(doc)" class="p-2 bg-slate-950/60 hover:bg-blue-500/20 hover:text-blue-400 rounded-lg text-slate-400 transition" title="Edit">
                            <i class="w-4 h-4" data-lucide="edit-3"></i>
                        </button>
                        <button @click="deleteDoc(doc)" class="p-2 bg-slate-950/60 hover:bg-rose-500/20 hover:text-rose-400 rounded-lg text-slate-400 transition" title="Delete">
                            <i class="w-4 h-4" data-lucide="trash-2"></i>
                        </button>
                    </div>
                </div>
            </div>
        </template>

<template x-if="filteredDocs().length === 0">
            <div class="col-span-1 md:col-span-3 bg-slate-900/20 border border-slate-850 p-12 rounded-3xl text-center text-slate-500 shadow-inner">
                <i class="w-12 h-12 mx-auto mb-3 text-slate-700" data-lucide="folder-open"></i>
                <p class="text-sm">No files or manuals found matching your criteria</p>
            </div>
        </template>
    </div>

<div x-show="modalOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak>
        <div class="fixed inset-0 bg-slate-950/60 backdrop-blur-sm" @click="modalOpen = false"></div>
        <div class="bg-slate-900 border border-slate-800 rounded-3xl w-full max-w-lg shadow-2xl relative z-10 overflow-hidden transform transition duration-300">
            
            <div class="px-6 py-4 bg-slate-950/60 border-b border-slate-800 flex justify-between items-center">
                <h3 class="text-lg font-bold text-white" x-text="isEdit ? 'Edit Document' : 'Upload Document'"></h3>
                <button @click="modalOpen = false" class="text-slate-400 hover:text-white transition">
                    <i class="w-5 h-5" data-lucide="x"></i>
                </button>
            </div>
            
            <div class="p-6 space-y-4 max-h-[70vh] overflow-y-auto">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Category</label>
                        <select x-model="form.category" class="w-full bg-slate-950 border border-slate-800 text-slate-300 rounded-xl px-4 py-2.5 text-sm focus:outline-none">
                            <option value="specsheet">Specification Sheets</option>
                            <option value="manual">User Manuals</option>
                            <option value="catalog">Catalog Brochure</option>
                            <option value="cert">Certifications</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Sort Order</label>
                        <input type="number" x-model="form.sort_order" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-slate-200 text-sm focus:outline-none focus:border-blue-500">
                    </div>
                </div>

<div>
                    <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Document Title</label>
                    <input type="text" x-model="form.title" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-slate-200 text-sm focus:outline-none focus:border-blue-500" placeholder="e.g. Mono Mono 550W Catalog">
                </div>

<div>
                    <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Brief Description</label>
                    <textarea x-model="form.description" rows="2" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-slate-200 text-sm focus:outline-none focus:border-blue-500" placeholder="Summary or info detail"></textarea>
                </div>

<div x-show="!isEdit" class="border-2 border-dashed border-slate-800 hover:border-blue-500/50 rounded-2xl p-6 bg-slate-950/40 text-center transition cursor-pointer relative">
                    <input type="file" id="document_file" @change="handleFileChange" class="absolute inset-0 opacity-0 cursor-pointer">
                    <i data-lucide="upload-cloud" class="w-8 h-8 mx-auto text-blue-500/70 mb-2"></i>
                    <span class="block text-xs font-bold text-slate-350" x-text="fileSelectedName || 'Drag & Drop file or Click to browse'"></span>
                    <span class="block text-[10px] text-slate-500 mt-1">Allowed: PDF, XLSX, XLS, DOCX, DOC, TXT (Max 10MB)</span>
                </div>

<div>
                    <div class="flex items-center gap-2">
                        <input type="checkbox" x-model="form.is_active" id="is_active_chk_doc" class="w-4 h-4 accent-blue-500 rounded">
                        <label for="is_active_chk_doc" class="text-sm text-slate-300">Visible on Site</label>
                    </div>
                </div>
            </div>
            
            <div class="px-6 py-4 bg-slate-950/60 border-t border-slate-800 flex justify-end gap-3">
                <button @click="modalOpen = false" class="px-4 py-2 border border-slate-800 rounded-xl text-slate-400 hover:text-white transition">Cancel</button>
                <button @click="saveForm()" class="px-5 py-2 bg-blue-500 hover:bg-blue-400 text-white font-semibold rounded-xl shadow-[0_0_15px_rgba(59,130,246,0.2)] transition flex items-center gap-2">
                    <span x-text="isEdit ? 'Save Changes' : 'Upload File'"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
function documentsManager() {
    return {
        docs: <?php echo $documentsJson; ?>,
        searchQuery: '',
        filterCategory: 'all',
        filterExt: 'all',
        
        // Modal & Form State
        modalOpen: false,
        isEdit: false,
        fileSelected: null,
        fileSelectedName: '',
        form: {
            id: null,
            title: '',
            category: 'specsheet',
            description: '',
            sort_order: 0,
            is_active: true
        },

init() {
            this.$watch('searchQuery', () => this.$nextTick(() => lucide.createIcons()));
            this.$watch('filterCategory', () => this.$nextTick(() => lucide.createIcons()));
            this.$watch('filterExt', () => this.$nextTick(() => lucide.createIcons()));
            this.$watch('modalOpen', value => {
                if (value) this.$nextTick(() => lucide.createIcons());
            });
        },

getCategories() {
            return [...new Set(this.docs.map(d => d.category))].filter(Boolean);
        },

getExtensions() {
            return [...new Set(this.docs.map(d => d.file_extension))].filter(Boolean);
        },

formatBytes(bytes) {
            if (!bytes) return '0 Bytes';
            const k = 1024;
            const dm = 1;
            const sizes = ['Bytes', 'KB', 'MB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
        },

filteredDocs() {
            return this.docs.filter(doc => {
                const query = this.searchQuery.toLowerCase();
                const matchesSearch = !query || 
                    (doc.title && doc.title.toLowerCase().includes(query)) ||
                    (doc.file_name && doc.file_name.toLowerCase().includes(query));
                
                const matchesCat = this.filterCategory === 'all' || doc.category === this.filterCategory;
                const matchesExt = this.filterExt === 'all' || doc.file_extension === this.filterExt;

return matchesSearch && matchesCat && matchesExt;
            });
        },

toggleActive(doc) {
            doc.is_active = doc.is_active ? 0 : 1;
            fetch('<?php echo BASE_URL; ?>api/documents.php', {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    id: doc.id,
                    is_active: doc.is_active
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    showToast('Document visibility updated!', 'success');
                } else {
                    doc.is_active = doc.is_active ? 0 : 1;
                    showToast('Failed to update visibility', 'error');
                }
            })
            .catch(() => {
                doc.is_active = doc.is_active ? 0 : 1;
                showToast('Network error occurred', 'error');
            });
        },

openCreateModal() {
            this.isEdit = false;
            this.fileSelected = null;
            this.fileSelectedName = '';
            this.form = {
                id: null,
                title: '',
                category: 'specsheet',
                description: '',
                sort_order: 0,
                is_active: true
            };
            this.modalOpen = true;
        },

openEditModal(doc) {
            this.isEdit = true;
            this.form = {
                id: doc.id,
                title: doc.title || '',
                category: doc.category || 'specsheet',
                description: doc.description || '',
                sort_order: doc.sort_order || 0,
                is_active: !!doc.is_active
            };
            this.modalOpen = true;
        },

handleFileChange(e) {
            if (e.target.files && e.target.files[0]) {
                this.fileSelected = e.target.files[0];
                this.fileSelectedName = this.fileSelected.name + ' (' + this.formatBytes(this.fileSelected.size) + ')';
            }
        },

saveForm() {
            if (this.isEdit) {
                // Regular PUT JSON request
                const payload = {
                    id: this.form.id,
                    title: this.form.title,
                    category: this.form.category,
                    description: this.form.description,
                    sort_order: parseInt(this.form.sort_order) || 0,
                    is_active: this.form.is_active ? 1 : 0
                };

fetch('<?php echo BASE_URL; ?>api/documents.php', {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        showToast('Document details updated!', 'success');
                        this.modalOpen = false;
                        
                        const idx = this.docs.findIndex(d => d.id === this.form.id);
                        if (idx !== -1) {
                            this.docs[idx].title = payload.title;
                            this.docs[idx].category = payload.category;
                            this.docs[idx].description = payload.description;
                            this.docs[idx].sort_order = payload.sort_order;
                            this.docs[idx].is_active = payload.is_active;
                        }
                        this.$nextTick(() => lucide.createIcons());
                    } else {
                        showToast(data.error || 'Failed to save edits', 'error');
                    }
                })
                .catch(() => {
                    showToast('Network error occurred', 'error');
                });
            } else {
                // Authentic multipart file upload!
                if (!this.fileSelected) {
                    showToast('Please select a file to upload first', 'warning');
                    return;
                }

const formData = new FormData();
                formData.append('file', this.fileSelected);
                formData.append('title', this.form.title || this.fileSelected.name);
                formData.append('category', this.form.category);
                formData.append('description', this.form.description);
                formData.append('sort_order', this.form.sort_order);
                formData.append('is_active', this.form.is_active ? 1 : 0);

showToast('Uploading file...', 'info');

fetch('<?php echo BASE_URL; ?>api/documents.php', {
                    method: 'POST',
                    body: formData
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        showToast('File uploaded successfully!', 'success');
                        this.modalOpen = false;
                        
                        // Append new item to list local array
                        const newDoc = {
                            id: data.id,
                            title: this.form.title || this.fileSelected.name,
                            file_name: this.fileSelected.name,
                            file_path: data.file_url.replace(/^\//, ''),
                            file_size: this.fileSelected.size,
                            file_extension: this.fileSelected.name.split('.').pop().toLowerCase(),
                            category: this.form.category,
                            description: this.form.description,
                            sort_order: parseInt(this.form.sort_order) || 0,
                            is_active: this.form.is_active ? 1 : 0
                        };
                        this.docs.push(newDoc);
                        this.$nextTick(() => lucide.createIcons());
                    } else {
                        showToast(data.error || 'Upload failed', 'error');
                    }
                })
                .catch(() => {
                    showToast('Network error occurred during upload', 'error');
                });
            }
        },

deleteDoc(doc) {
            if (!confirm('Are you sure you want to delete this document from server?')) return;
            
            fetch('<?php echo BASE_URL; ?>api/documents.php?id=' + doc.id, {
                method: 'DELETE'
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    showToast('Document deleted successfully!', 'success');
                    this.docs = this.docs.filter(item => item.id !== doc.id);
                    this.$nextTick(() => lucide.createIcons());
                } else {
                    showToast('Failed to delete document', 'error');
                }
            })
            .catch(() => {
                showToast('Network error occurred', 'error');
            });
        }
    };
}
</script>

Batal

⬅ Naik ke views 54 item

Nama	Tipe	Ukuran	Diubah	Aksi
📁layout	dir	—	2026-05-31 16:45	📂 Buka
📁menus	dir	—	2026-05-31 16:45	📂 Buka
📁orders	dir	—	2026-05-31 16:45	📂 Buka
📁pages	dir	—	2026-05-31 16:45	📂 Buka
📁products	dir	—	2026-05-31 16:45	📂 Buka
🐘404.php	php	511 B	2026-05-31 16:43	✏️ Edit 👁️ View
🐘about-sections.php	php	22.6 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘admin-users.php	php	18.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘banners.php	php	25.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘branches.php	php	22.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘categories.php	php	20.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘contact-info.php	php	19.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘coupons.php	php	23.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘cta-buttons.php	php	1.8 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘cta.php	php	17 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘customers.php	php	1.6 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘dashboard.php	php	51.2 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘database-viewer.php	php	28.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘documents.php	php	21.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘faqs.php	php	16.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘features.php	php	19.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘file-manager.php	php	66.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘finance.php	php	26.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘hero-sections.php	php	27.6 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘image-gallery.php	php	41.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘inquiries.php	php	7.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘inventory.php	php	16.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘knowledge.php	php	22.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘layout.php	php	27.6 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘login.php	php	10.2 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘logout.php	php	195 B	2026-05-31 16:43	✏️ Edit 👁️ View
🐘map-locations.php	php	18 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘menus.php	php	11.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘navigation-form.php	php	14 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘navigation.php	php	33.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘omni-dynamic.php	php	16.9 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘orders.php	php	8.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘pages.php	php	28.2 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘payments.php	php	23.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘product-attributes.php	php	22.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘product-images.php	php	21.3 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘products.php	php	29.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘projects.php	php	33.8 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘reviews.php	php	22.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘services.php	php	20.8 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘settings.php	php	51.8 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘shipping.php	php	8.9 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘solar-calculator.php	php	31.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘solutions.php	php	47.3 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘statistics.php	php	17.2 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘testimonials.php	php	20.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘verify-mfa.php	php	10.9 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘videos-form.php	php	28.2 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘videos.php	php	27.9 KB	2026-05-31 16:43	✏️ Edit 👁️ View