Sindbad~EG File Manager

Current Path : /home/copmadinaarea/thecopmadinaarea.org/dashboard/
Upload File :
Current File : /home/copmadinaarea/thecopmadinaarea.org/dashboard/admin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel - COP MADINA AREA Church</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        :root {
            --gradient-blue: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
            --gradient-grey: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
            --gradient-white: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
            --gradient-accent: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
        }
        
        body {
            background: var(--gradient-white);
        }
        
        nav {
            background: var(--gradient-blue);
        }
        
        .admin-card {
            background: var(--gradient-white);
            transition: all 0.3s ease;
        }
        
        .admin-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        .form-input:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
        }
        
        .btn-primary {
            background: var(--gradient-blue);
        }
        
        .btn-primary:hover {
            background: var(--gradient-accent);
        }
        
        .ministry-preview {
            min-height: 200px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Navigation -->
    <nav class="shadow-sm text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <i data-feather="settings" class="text-white mr-2"></i>
                    <span class="text-xl font-semibold text-white">Admin Panel - COP MADINA AREA Church</span>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="index.html" class="bg-white bg-opacity-20 hover:bg-opacity-30 transition-all px-4 py-2 rounded-full flex items-center text-white mr-2">
                        <i data-feather="home" class="mr-2"></i>
                        Dashboard
                    </a>
                    <a href="settings.html" class="bg-white bg-opacity-20 hover:bg-opacity-30 transition-all px-4 py-2 rounded-full flex items-center text-white">
                        <i data-feather="sliders" class="mr-2"></i>
                        Settings
                    </a>
                    <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
                        <i data-feather="user" class="text-blue-500"></i>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-800 mb-2">Dashboard Administration</h1>
            <p class="text-gray-600">Manage your church dashboard settings, ministries, and content</p>
        </div>

        <!-- Tabs -->
        <div class="mb-8">
            <div class="border-b border-gray-200">
                <nav class="-mb-px flex space-x-8">
                    <button class="tab-button active py-2 px-1 border-b-2 border-blue-500 font-medium text-sm text-blue-600" data-tab="general">
                        General Settings
                    </button>
                    <button class="tab-button py-2 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="ministries">
                        Manage Ministries
                    </button>
                    <button class="tab-button py-2 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="categories">
                        Categories
                    </button>
                </nav>
            </div>
        </div>

        <!-- General Settings Tab -->
        <div id="general-tab" class="tab-content">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- Church Information -->
                <div class="admin-card bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Church Information</h3>
                    <form id="church-info-form">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Site Title</label>
                                <input type="text" id="site-title" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:border-blue-500" value="COP - MADINA AREA Church Dashboard">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Church Name</label>
                                <input type="text" id="church-name" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:border-blue-500" value="The Church of Pentecost - Madina Area">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Navigation Title</label>
                                <input type="text" id="nav-title" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:border-blue-500" value="COP - MADINA AREA Church">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                                <textarea id="church-description" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:border-blue-500" rows="3">Our Central hub to all our platforms</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Status Badge</label>
                                <input type="text" id="church-badge" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:border-blue-500" value="SERVING GOD">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Logo</label>
                                <div class="flex items-center space-x-4">
                                    <div id="logo-preview" class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center border">
                                        <i data-feather="heart" class="w-8 h-8 text-gray-400"></i>
                                    </div>
                                    <div class="flex-1">
                                        <input type="file" id="logo-upload" accept="image/*" class="hidden">
                                        <button type="button" onclick="document.getElementById('logo-upload').click()" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 mr-2">
                                            Upload Logo
                                        </button>
                                        <button type="button" id="remove-logo" class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600">
                                            Remove Logo
                                        </button>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-500 mt-1">PNG, JPG up to 1MB. Recommended size: 64x64px</p>
                            </div>
                            <button type="submit" class="btn-primary w-full text-white py-2 px-4 rounded-md hover:shadow-lg transition-all">
                                Update Church Info
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Dashboard Settings -->
                <div class="admin-card bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Dashboard Settings</h3>
                    <form id="dashboard-settings-form">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Items per Page</label>
                                <select id="items-per-page" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:border-blue-500">
                                    <option value="8" selected>8 items</option>
                                    <option value="12">12 items</option>
                                    <option value="16">16 items</option>
                                    <option value="20">20 items</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Default Sort Order</label>
                                <select id="default-sort" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:border-blue-500">
                                    <option value="priority">Priority Level</option>
                                    <option value="recent">Recently Updated</option>
                                    <option value="popular">Most Used</option>
                                    <option value="alphabetical">A-Z</option>
                                </select>
                            </div>
                            <div class="flex items-center">
                                <input type="checkbox" id="enable-animations" class="mr-2" checked>
                                <label class="text-sm font-medium text-gray-700">Enable Animations</label>
                            </div>
                            <button type="submit" class="btn-primary w-full text-white py-2 px-4 rounded-md hover:shadow-lg transition-all">
                                Update Settings
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Ministries Management Tab -->
        <div id="ministries-tab" class="tab-content hidden">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- Add New Ministry -->
                <div class="admin-card bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Add New Ministry</h3>
                    <form id="add-ministry-form">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Ministry Name</label>
                                <input type="text" id="ministry-name" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:border-blue-500" placeholder="e.g., Sunday Worship">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                                <input type="text" id="ministry-description" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:border-blue-500" placeholder="e.g., Main worship service">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">URL</label>
                                <input type="url" id="ministry-url" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:border-blue-500" placeholder="https://example.com">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Category</label>
                                <select id="ministry-category" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:border-blue-500">
                                    <option value="">Select Category</option>
                                </select>
                            </div>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Icon</label>
                                    <select id="ministry-icon" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:border-blue-500">
                                        <option value="music">Music</option>
                                        <option value="book-open">Book Open</option>
                                        <option value="users">Users</option>
                                        <option value="heart">Heart</option>
                                        <option value="globe">Globe</option>
                                        <option value="smile">Smile</option>
                                        <option value="calendar">Calendar</option>
                                        <option value="shield">Shield</option>
                                        <option value="star">Star</option>
                                        <option value="home">Home</option>
                                        <option value="phone">Phone</option>
                                        <option value="mail">Mail</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Background Color</label>
                                    <select id="ministry-color" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:border-blue-500">
                                        <option value="purple-500">Purple</option>
                                        <option value="blue-600">Blue</option>
                                        <option value="green-600">Green</option>
                                        <option value="indigo-600">Indigo</option>
                                        <option value="orange-500">Orange</option>
                                        <option value="pink-500">Pink</option>
                                        <option value="yellow-500">Yellow</option>
                                        <option value="teal-600">Teal</option>
                                        <option value="red-500">Red</option>
                                        <option value="gray-600">Gray</option>
                                    </select>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Status Badge</label>
                                <input type="text" id="ministry-status" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:border-blue-500" placeholder="e.g., WEEKLY, ACTIVE, ONGOING">
                            </div>
                            <button type="submit" class="btn-primary w-full text-white py-2 px-4 rounded-md hover:shadow-lg transition-all">
                                Add Ministry
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Ministry Preview -->
                <div class="admin-card bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Preview</h3>
                    <div id="ministry-preview" class="ministry-preview">
                        <div class="bg-white rounded-xl overflow-hidden shadow-md border">
                            <div id="preview-bg" class="h-40 bg-purple-500 relative overflow-hidden flex items-center justify-center">
                                <i id="preview-icon" data-feather="music" class="w-16 h-16 text-white"></i>
                                <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white p-1 rounded-md text-xs">
                                    <i data-feather="external-link" class="w-3 h-3"></i>
                                </div>
                            </div>
                            <div class="p-4">
                                <h3 id="preview-title" class="font-medium text-gray-800 mb-1 truncate">Ministry Name</h3>
                                <p id="preview-description" class="text-gray-500 text-sm mb-2 truncate">Ministry description</p>
                                <div class="flex justify-between items-center">
                                    <span id="preview-status" class="text-xs text-purple-600 font-semibold">STATUS</span>
                                    <div class="flex space-x-2">
                                        <button class="text-gray-400 hover:text-blue-500">
                                            <i data-feather="edit-2" class="w-4 h-4"></i>
                                        </button>
                                        <button class="text-gray-400 hover:text-red-500">
                                            <i data-feather="trash-2" class="w-4 h-4"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Existing Ministries -->
            <div class="mt-8">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Existing Ministries</h3>
                <div id="existing-ministries" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                    <!-- Existing ministries will be loaded here -->
                </div>
            </div>
        </div>

        <!-- Categories Management Tab -->
        <div id="categories-tab" class="tab-content hidden">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- Add Category -->
                <div class="admin-card bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Add New Category</h3>
                    <form id="add-category-form">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Category Name</label>
                                <input type="text" id="category-name" class="form-input w-full px-3 py-2 border border-gray-300 rounded-md focus:border-blue-500" placeholder="e.g., Worship">
                            </div>
                            <button type="submit" class="btn-primary w-full text-white py-2 px-4 rounded-md hover:shadow-lg transition-all">
                                Add Category
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Existing Categories -->
                <div class="admin-card bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Existing Categories</h3>
                    <div id="existing-categories" class="space-y-2">
                        <!-- Categories will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        // Initialize AOS and Feather icons
        AOS.init({
            duration: 600,
            easing: 'ease-in-out',
            once: true
        });

        // Default data
        let dashboardData = {
            churchInfo: {
                siteTitle: "COP - MADINA AREA Church Dashboard",
                name: "The Church of Pentecost - Madina Area",
                navTitle: "COP - MADINA AREA Church",
                description: "Our Central hub to all our platforms",
                badge: "SERVING GOD",
                logo: null
            },
            settings: {
                itemsPerPage: 8,
                defaultSort: "priority",
                enableAnimations: true
            },
            categories: [
                "All Ministries", 
                {name: "Worship", url: null}, 
                {name: "Youth Ministry", url: null}, 
                {name: "Community Outreach", url: null}, 
                {name: "Bible Study", url: null}, 
                {name: "Prayer & Care", url: null}
            ],
            ministries: [
                {
                    id: 1,
                    name: "Sunday Worship",
                    description: "Main worship service",
                    url: "#",
                    category: "Worship",
                    icon: "music",
                    color: "purple-500",
                    status: "WEEKLY"
                },
                {
                    id: 2,
                    name: "Bible Study Groups",
                    description: "Weekly scripture study",
                    url: "#",
                    category: "Bible Study",
                    icon: "book-open",
                    color: "blue-600",
                    status: "ACTIVE"
                },
                {
                    id: 3,
                    name: "Youth Ministry",
                    description: "Programs for young people",
                    url: "#",
                    category: "Youth Ministry",
                    icon: "users",
                    color: "green-600",
                    status: "GROWING"
                },
                {
                    id: 4,
                    name: "Prayer Ministry",
                    description: "Prayer requests & support",
                    url: "#",
                    category: "Prayer & Care",
                    icon: "heart",
                    color: "indigo-600",
                    status: "24/7"
                },
                {
                    id: 5,
                    name: "Community Outreach",
                    description: "Serving the community",
                    url: "#",
                    category: "Community Outreach",
                    icon: "globe",
                    color: "orange-500",
                    status: "ONGOING"
                },
                {
                    id: 6,
                    name: "Children's Ministry",
                    description: "Programs for children",
                    url: "#",
                    category: "Youth Ministry",
                    icon: "smile",
                    color: "pink-500",
                    status: "JOYFUL"
                },
                {
                    id: 7,
                    name: "Church Events",
                    description: "Upcoming activities",
                    url: "#",
                    category: "Community Outreach",
                    icon: "calendar",
                    color: "yellow-500",
                    status: "UPCOMING"
                },
                {
                    id: 8,
                    name: "Pastoral Care",
                    description: "Spiritual guidance & support",
                    url: "#",
                    category: "Prayer & Care",
                    icon: "shield",
                    color: "teal-600",
                    status: "CARING"
                }
            ]
        };

        // Load data from localStorage if available
        function loadData() {
            const saved = localStorage.getItem('churchDashboardData');
            if (saved) {
                dashboardData = { ...dashboardData, ...JSON.parse(saved) };
            }
        }

        // Save data to localStorage
        function saveData() {
            localStorage.setItem('churchDashboardData', JSON.stringify(dashboardData));
        }

        // Tab switching
        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', function() {
                const tabName = this.dataset.tab;
                
                // Update button states
                document.querySelectorAll('.tab-button').forEach(btn => {
                    btn.classList.remove('active', 'border-blue-500', 'text-blue-600');
                    btn.classList.add('border-transparent', 'text-gray-500');
                });
                this.classList.add('active', 'border-blue-500', 'text-blue-600');
                this.classList.remove('border-transparent', 'text-gray-500');
                
                // Show/hide tab content
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.add('hidden');
                });
                document.getElementById(tabName + '-tab').classList.remove('hidden');
            });
        });

        // Preview update functions
        function updatePreview() {
            const name = document.getElementById('ministry-name').value || 'Ministry Name';
            const description = document.getElementById('ministry-description').value || 'Ministry description';
            const icon = document.getElementById('ministry-icon').value;
            const color = document.getElementById('ministry-color').value;
            const status = document.getElementById('ministry-status').value || 'STATUS';
            
            document.getElementById('preview-title').textContent = name;
            document.getElementById('preview-description').textContent = description;
            document.getElementById('preview-status').textContent = status;
            
            const previewBg = document.getElementById('preview-bg');
            previewBg.className = `h-40 bg-${color} relative overflow-hidden flex items-center justify-center`;
            
            const previewIcon = document.getElementById('preview-icon');
            previewIcon.setAttribute('data-feather', icon);
            
            // Update status color
            const statusElement = document.getElementById('preview-status');
            const colorMap = {
                'purple-500': 'text-purple-600',
                'blue-600': 'text-blue-600',
                'green-600': 'text-green-600',
                'indigo-600': 'text-indigo-600',
                'orange-500': 'text-orange-600',
                'pink-500': 'text-pink-600',
                'yellow-500': 'text-yellow-600',
                'teal-600': 'text-teal-600',
                'red-500': 'text-red-600',
                'gray-600': 'text-gray-600'
            };
            statusElement.className = `text-xs ${colorMap[color]} font-semibold`;
            
            feather.replace();
        }

        // Add event listeners for preview updates
        ['ministry-name', 'ministry-description', 'ministry-icon', 'ministry-color', 'ministry-status'].forEach(id => {
            document.getElementById(id).addEventListener('input', updatePreview);
        });

        // Add ministry form
        document.getElementById('add-ministry-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const newMinistry = {
                id: Date.now(),
                name: document.getElementById('ministry-name').value,
                description: document.getElementById('ministry-description').value,
                url: document.getElementById('ministry-url').value,
                category: document.getElementById('ministry-category').value,
                icon: document.getElementById('ministry-icon').value,
                color: document.getElementById('ministry-color').value,
                status: document.getElementById('ministry-status').value
            };
            
            dashboardData.ministries.push(newMinistry);
            saveData();
            loadExistingMinistries();
            this.reset();
            updatePreview();
            alert('Ministry added successfully!');
        });

        // Load existing ministries
        function loadExistingMinistries() {
            const container = document.getElementById('existing-ministries');
            container.innerHTML = '';
            
            dashboardData.ministries.forEach(ministry => {
                const ministryCard = document.createElement('div');
                ministryCard.className = 'bg-white rounded-lg shadow-md p-4 border';
                ministryCard.innerHTML = `
                    <div class="flex items-center justify-between mb-2">
                        <h4 class="font-medium text-gray-800">${ministry.name}</h4>
                        <button onclick="deleteMinistry(${ministry.id})" class="text-red-500 hover:text-red-700">
                            <i data-feather="trash-2" class="w-4 h-4"></i>
                        </button>
                    </div>
                    <p class="text-sm text-gray-600 mb-2">${ministry.description}</p>
                    <div class="flex items-center justify-between text-xs text-gray-500 mb-2">
                        <span>Icon: ${ministry.icon}</span>
                        <span class="bg-${ministry.color} text-white px-2 py-1 rounded">${ministry.status}</span>
                    </div>
                    <div class="text-xs text-blue-600">
                        Category: ${ministry.category || 'No category assigned'}
                    </div>
                `;
                container.appendChild(ministryCard);
            });
            feather.replace();
        }

        // Delete ministry
        function deleteMinistry(id) {
            if (confirm('Are you sure you want to delete this ministry?')) {
                dashboardData.ministries = dashboardData.ministries.filter(m => m.id !== id);
                saveData();
                loadExistingMinistries();
            }
        }

        // Load existing categories
        function loadExistingCategories() {
            const container = document.getElementById('existing-categories');
            container.innerHTML = '';
            
            dashboardData.categories.forEach((category, index) => {
                if (index === 0) return; // Skip "All Ministries"
                
                const categoryItem = document.createElement('div');
                categoryItem.className = 'flex items-center justify-between p-2 bg-gray-50 rounded';
                categoryItem.innerHTML = `
                    <span>${category}</span>
                    <button onclick="deleteCategory(${index})" class="text-red-500 hover:text-red-700">
                        <i data-feather="trash-2" class="w-4 h-4"></i>
                    </button>
                `;
                container.appendChild(categoryItem);
            });
            feather.replace();
        }

        // Add category
        document.getElementById('add-category-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const categoryName = document.getElementById('category-name').value;
            if (categoryName && !dashboardData.categories.includes(categoryName)) {
                dashboardData.categories.push(categoryName);
                saveData();
                loadExistingCategories();
                this.reset();
                alert('Category added successfully!');
            }
        });

        // Delete category
        function deleteCategory(index) {
            if (confirm('Are you sure you want to delete this category?')) {
                dashboardData.categories.splice(index, 1);
                saveData();
                loadExistingCategories();
            }
        }

        // Logo upload functionality
        document.getElementById('logo-upload').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                if (file.size > 1024 * 1024) { // 1MB limit
                    alert('File size must be less than 1MB');
                    return;
                }
                const reader = new FileReader();
                reader.onload = function(e) {
                    dashboardData.churchInfo.logo = e.target.result;
                    updateLogoPreview();
                    saveData();
                };
                reader.readAsDataURL(file);
            }
        });

        document.getElementById('remove-logo').addEventListener('click', function() {
            if (confirm('Remove the current logo?')) {
                dashboardData.churchInfo.logo = null;
                updateLogoPreview();
                saveData();
            }
        });

        function updateLogoPreview() {
            const preview = document.getElementById('logo-preview');
            if (dashboardData.churchInfo.logo) {
                preview.innerHTML = `<img src="${dashboardData.churchInfo.logo}" alt="Logo" class="w-full h-full object-cover rounded-lg">`;
            } else {
                preview.innerHTML = '<i data-feather="heart" class="w-8 h-8 text-gray-400"></i>';
                feather.replace();
            }
        }

        // Church info form
        document.getElementById('church-info-form').addEventListener('submit', function(e) {
            e.preventDefault();
            dashboardData.churchInfo = {
                ...dashboardData.churchInfo,
                siteTitle: document.getElementById('site-title').value,
                name: document.getElementById('church-name').value,
                navTitle: document.getElementById('nav-title').value,
                description: document.getElementById('church-description').value,
                badge: document.getElementById('church-badge').value
            };
            saveData();
            alert('Church information updated successfully!');
        });

        // Dashboard settings form
        document.getElementById('dashboard-settings-form').addEventListener('submit', function(e) {
            e.preventDefault();
            dashboardData.settings = {
                itemsPerPage: parseInt(document.getElementById('items-per-page').value),
                defaultSort: document.getElementById('default-sort').value,
                enableAnimations: document.getElementById('enable-animations').checked
            };
            saveData();
            alert('Dashboard settings updated successfully!');
        });

        // Populate category dropdown
        function populateCategoryDropdown() {
            const select = document.getElementById('ministry-category');
            select.innerHTML = '<option value="">Select Category</option>';
            
            dashboardData.categories.forEach((category, index) => {
                if (index === 0) return; // Skip "All Ministries"
                const categoryName = typeof category === 'string' ? category : category.name;
                const option = document.createElement('option');
                option.value = categoryName;
                option.textContent = categoryName;
                select.appendChild(option);
            });
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            loadData();
            loadExistingMinistries();
            loadExistingCategories();
            populateCategoryDropdown();
            updatePreview();
            feather.replace();
            
            // Load saved values into forms
            document.getElementById('site-title').value = dashboardData.churchInfo.siteTitle;
            document.getElementById('church-name').value = dashboardData.churchInfo.name;
            document.getElementById('nav-title').value = dashboardData.churchInfo.navTitle;
            document.getElementById('church-description').value = dashboardData.churchInfo.description;
            document.getElementById('church-badge').value = dashboardData.churchInfo.badge;
            updateLogoPreview();
            document.getElementById('items-per-page').value = dashboardData.settings.itemsPerPage;
            document.getElementById('default-sort').value = dashboardData.settings.defaultSort;
            document.getElementById('enable-animations').checked = dashboardData.settings.enableAnimations;
        });

        // Make deleteMinistry and deleteCategory available globally
        window.deleteMinistry = deleteMinistry;
        window.deleteCategory = deleteCategory;
    </script>
</body>
</html>

Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists