// Co-Service Database Save Handler
    window.handleSaveRealCoService = async function(e) {
        if (e) e.preventDefault();
        
        const headCategory = document.getElementById('serviceCategory').value;
        const coName = document.getElementById('serviceName').value.trim();
        const image = document.getElementById('serviceImageBase64')?.value || '';

        if (!headCategory || !coName) {
            alert("Please enter Co-Service Title.");
            return false;
        }

        try {
            const response = await fetch('/api/save_co_category.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ headCategory, coName, image })
            });
            const data = await response.json();

            if (data.success) {
                closeModal('modalService');
                if(typeof showToast === 'function') showToast(data.message || `Co-Service "${coName}" saved!`);
                await window.loadServicesMaster();
            } else {
                alert("Error: " + data.message);
            }
        } catch (error) {
            console.error("Save Co-Service error:", error);
            alert("Server error while saving Co-Service.");
        }
        return false;
    };
    
    // 5. FORM: Add Sub-Service Modal
    window.openSpecificSubServiceModal = function(coName) {
        openModal('modalService');
        setTimeout(() => {
            const modal = document.getElementById('modalService');
            if (!modal) return;

            document.getElementById('serviceId').value = '';
            document.getElementById('serviceName').value = '';
            document.getElementById('serviceBasePrice').value = '449';
            document.getElementById('serviceTime').value = '45 mins';
            document.getElementById('serviceStatus').value = 'Active';
            document.getElementById('serviceHighlight').value = 'Doorstep standard certified service';

            const title = modal.querySelector('h3');
            if (title) title.innerHTML = `<i class="fa-solid fa-plus text-brand-500"></i> Add Sub-Service under ${coName}`;

            const catSelect = document.getElementById('serviceCategory');
            if (catSelect) {
                const catLabel = catSelect.previousElementSibling;
                if (catLabel) catLabel.innerText = 'Co-Service';
                catSelect.innerHTML = `<option value="${coName}" selected>${coName}</option>`;
                catSelect.value = coName;
            }

            const nameInput = document.getElementById('serviceName');
            if (nameInput) {
                const nameLabel = nameInput.previousElementSibling;
                if (nameLabel) nameLabel.innerText = 'Sub-Service Title';
                nameInput.placeholder = 'e.g. Door Lock Repair, Jet Cleaning';
            }

            // Sabhi fields wapas visible karein
            const timeField = document.getElementById('serviceTime')?.closest('.grid');
            if (timeField) timeField.style.display = '';
            const highlightField = document.getElementById('serviceHighlight')?.closest('.grid');
            if (highlightField) highlightField.style.display = '';
            const imageField = document.getElementById('serviceImageFile')?.closest('div')?.parentElement;
            if (imageField) imageField.style.display = '';

            const saveBtn = modal.querySelector('button[type="submit"]');
            if (saveBtn) saveBtn.innerText = 'Save Sub-Service';

            modal.querySelector('form').onsubmit = window.handleSaveSubServiceDB;
        }, 50);
    };

    window.handleSaveSubServiceDB = async function(e) {
    if (e) e.preventDefault();

    const payload = {
        id: document.getElementById('serviceId')?.value || '',
        headCategory: selectedMainCategory,
        coCategory: document.getElementById('serviceCategory')?.value || '',
        name: document.getElementById('serviceName')?.value.trim() || '',
        basePrice: parseInt(document.getElementById('serviceBasePrice')?.value) || 0,
        time: document.getElementById('serviceTime')?.value.trim() || '45 mins',
        status: document.getElementById('serviceStatus')?.value || 'Active',
        highlight: document.getElementById('serviceHighlight')?.value.trim() || '',
        image: document.getElementById('serviceImageBase64')?.value || '' // <--- Yeh yahan zaroori hai
    };

    if (!payload.coCategory || !payload.name) {
        alert("Co-Service and Sub-Service Title are required.");
        return false;
    }

    try {
        const response = await fetch('/api/save_service.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });
        const data = await response.json();

        if (data.success) {
            closeModal('modalService');
            if (typeof showToast === 'function') {
                showToast(data.message || `Sub-Service "${payload.name}" saved!`);
            }
            await window.loadServicesMaster();
        } else {
            alert("Error: " + data.message);
        }
    } catch (error) {
        console.error("Save Sub-Service error:", error);
        alert("Server error while saving Sub-Service.");
    }
    return false;
        
    };

    // 6. 3-Tier Table Render Function (Database Sync ke sath)
    window.expandedCoServices = window.expandedCoServices || {};

    window.renderServicesTable = function() {
        const tbody = document.getElementById('servicesTableBody');
        const thead = tbody?.previousElementSibling;
        if (!tbody || !thead) return;

        thead.innerHTML = `<tr>
            <th class="py-3.5 px-4 uppercase text-[11px] font-black text-slate-400">Image</th>
            <th class="py-3.5 px-5 uppercase text-[11px] font-black text-slate-400">Co-Service & Sub-Services</th>
            <th class="py-3.5 px-5 uppercase text-[11px] font-black text-slate-400">Parent</th>
            <th class="py-3.5 px-5 uppercase text-[11px] font-black text-slate-400">Time</th>
            <th class="py-3.5 px-5 uppercase text-[11px] font-black text-slate-400">Base Rate</th>
            <th class="py-3.5 px-5 text-center uppercase text-[11px] font-black text-slate-400">Status</th>
            <th class="py-3.5 px-5 text-right uppercase text-[11px] font-black text-slate-400">Actions</th>
        </tr>`;

        const currentMain = selectedMainCategory || '';
        const hObj = (window.headServices || []).find(h => h.name === currentMain);
        
        let currentCoList = [];
        if (hObj && window.coServices) {
            currentCoList = window.coServices.filter(c => c.head_id == hObj.id).map(c => c.name);
        }

        const allSubs = (services || []).filter(s => s.headCategory === currentMain || currentCoList.includes(s.category) || s.category === currentMain);
        allSubs.forEach(s => {
            const cName = s.coCategory || s.category;
            if (cName && !currentCoList.includes(cName) && cName !== currentMain) currentCoList.push(cName);
        });

        if (currentCoList.length === 0) {
            tbody.innerHTML = `<tr><td colspan="7" class="py-8 text-center text-slate-400 font-bold">No Co-Services added yet under ${currentMain}. Click "+ Add Co-Service" to start.</td></tr>`;
            return;
        }

        let html = '';
        currentCoList.forEach(coName => {
            const subInCo = allSubs.filter(f => (f.coCategory || f.category) === coName);
            if (window.expandedCoServices[coName] === undefined) window.expandedCoServices[coName] = true;
            const isExpanded = window.expandedCoServices[coName];

            // ROW 1: CO-SERVICE (Yahan action buttons add karne hain)
            html += `<tr class="bg-indigo-50/50 border-y border-indigo-100">
                <td class="py-3 px-4">
                    <div class="w-10 h-10 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center text-lg"><i class="fa-solid fa-layer-group"></i></div>
                </td>
                <td class="py-3 px-5">
                    <strong class="block text-slate-900 text-sm">${coName}</strong>
                    <button onclick="window.toggleSubServices('${coName}')" class="text-[10px] font-bold text-indigo-600 hover:underline mt-1 cursor-pointer">
                        <i class="fa-solid ${isExpanded ? 'fa-chevron-down' : 'fa-chevron-right'}"></i> View Sub-Services (${subInCo.length})
                    </button>
                </td>
                <td class="py-3 px-5"><span class="px-2 py-0.5 text-[10px] font-bold rounded-full bg-slate-200 text-slate-700">${currentMain}</span></td>
                <td class="py-3 px-5 text-slate-400 font-bold text-xs">-</td>
                <td class="py-3 px-5 text-slate-400 font-bold text-xs">-</td>
                <td class="py-3 px-5 text-center"><span class="px-2 py-0.5 text-[10px] font-black rounded-full bg-emerald-100 text-emerald-700">Active</span></td>
                // Co-Service Row Actions HTML:
<td class="py-3 px-5 text-right space-x-1">
    <button onclick="window.openSpecificSubServiceModal('${coName}')" class="px-2.5 py-1 bg-brand-600 text-white text-[10px] font-bold rounded-lg mr-1 cursor-pointer"><i class="fa-solid fa-plus mr-1"></i>Add Sub</button>
    <button onclick="window.editCoService('${coName}')" class="p-1.5 text-blue-600 hover:bg-blue-100 rounded cursor-pointer" title="Edit"><i class="fa-solid fa-pen-to-square"></i></button>
    <button onclick="window.toggleStopCoService('${coName}')" class="p-1.5 text-amber-600 hover:bg-amber-100 rounded cursor-pointer" title="Stop/Start"><i class="fa-solid fa-ban"></i></button>
    <button onclick="window.deleteCoService('${coName}')" class="p-1.5 text-rose-600 hover:bg-rose-100 rounded cursor-pointer" title="Delete"><i class="fa-solid fa-trash-can"></i></button>
</td>
            </tr>`;

            // ROW 2: SUB-SERVICES
            if (isExpanded) {
                if (subInCo.length === 0) {
                    html += `<tr><td colspan="7" class="py-4 px-5 text-center text-xs text-slate-400 italic bg-white border-b border-slate-100">No sub-services added under ${coName} yet.</td></tr>`;
                } else {
                    subInCo.forEach(sub => {
                        const stop = String(sub.status).includes('Stopped');
                        html += `<tr class="bg-white hover:bg-slate-50 transition-colors border-b border-slate-100 ${stop ? 'opacity-70' : ''}">
                            <td class="py-3 px-4 pl-10">
                                <img src="${sub.image || 'https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=240&auto=format&fit=crop&q=80'}" class="w-12 h-8 rounded border border-slate-200 object-cover" />
                            </td>
                            <td class="py-3 px-5"><strong class="font-bold text-slate-800 text-xs">${sub.name}</strong></td>
                            <td class="py-3 px-5"><span class="text-[10px] font-bold text-slate-500">${coName}</span></td>
                            <td class="py-3 px-5 text-slate-600 text-xs font-medium"><i class="fa-regular fa-clock mr-1 text-slate-400"></i>${sub.time || '45 mins'}</td>
                            <td class="py-3 px-5 font-black text-brand-600 text-sm">₹${sub.basePrice || 0}</td>
                            <td class="py-3 px-5 text-center"><span class="px-2 py-0.5 rounded-full text-[9px] font-black ${stop ? 'bg-rose-100 text-rose-700' : 'bg-emerald-100 text-emerald-700'}">${stop ? 'Stopped' : 'Active'}</span></td>
                            <td class="py-3 px-5 text-right space-x-1">
                                <button onclick="editService('${sub.id}')" class="p-1.5 text-blue-600 hover:bg-blue-100 rounded cursor-pointer" title="Edit"><i class="fa-solid fa-pen-to-square"></i></button>
                                <button onclick="deleteService('${sub.id}')" class="p-1.5 text-rose-600 hover:bg-rose-100 rounded cursor-pointer" title="Delete"><i class="fa-solid fa-trash-can"></i></button>
                            </td>
                        </tr>`;
                    });
                }
            }
        });
        tbody.innerHTML = html;
    };

    window.toggleSubServices = function(coName) {
        window.expandedCoServices[coName] = !window.expandedCoServices[coName];
        window.renderServicesTable();
    };

    // Auto load on start
    window.addEventListener('DOMContentLoaded', () => {
        window.loadServicesMaster();
    });
    window.loadServicesMaster();
})();

window.deleteMainService = async function(id, name) {
    if (!confirm(`Kya aap "${name}" Main Service ko delete karna chahte hain?`)) return;
    try {
        const response = await fetch('/api/delete_head_service.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id: id })
        });
        const data = await response.json();
        if (data.success) {
            if(typeof showToast === 'function') showToast(`Main Service deleted successfully!`);
            window.loadServicesMaster();
        } else {
            alert("Error: " + data.message);
        }
    } catch (err) {
        alert("Server error while deleting.");
    }
};

// Image file reader handler
document.addEventListener('change', function(e) {
    if (e.target && e.target.id === 'serviceImageFile') {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(uploadEvt) {
                let base64Input = document.getElementById('serviceImageBase64');
                if (!base64Input) {
                    base64Input = document.createElement('input');
                    base64Input.type = 'hidden';
                    base64Input.id = 'serviceImageBase64';
                    e.target.closest('form').appendChild(base64Input);
                }
                base64Input.value = uploadEvt.target.result;
            };
            reader.readAsDataURL(file);
        }
    }
});

// Co-Service Save Handler Fix
window.handleSaveRealCoService = async function(e) {
    if (e) e.preventDefault();
    
    const headCategory = document.getElementById('serviceCategory')?.value || selectedMainCategory;
    const coName = document.getElementById('serviceName')?.value.trim() || '';
    const image = document.getElementById('serviceImageBase64')?.value || '';

    if (!headCategory || !coName) {
        alert("Please enter Co-Service Title.");
        return false;
    }

    try {
        const response = await fetch('/api/save_co_category.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ headCategory, coName, image })
        });
        const data = await response.json();

        if (data.success) {
            closeModal('modalService');
            if (typeof showToast === 'function') showToast(data.message || `Co-Service "${coName}" saved!`);
            await window.loadServicesMaster();
        } else {
            alert("Error: " + data.message);
        }
    } catch (error) {
        console.error("Save Co-Service error:", error);
        alert("Server error while saving Co-Service.");
    }
    return false;
};

// Co-Service Edit
window.editCoService = function(coName) {
    alert("Edit Co-Service: " + coName);
    // Yahan aap edit modal open kar sakte hain
};

// Co-Service Stop / Start Toggle
window.toggleStopCoService = async function(coName) {
    if (!confirm(`Kya aap "${coName}" ka status change karna chahte hain?`)) return;
    try {
        const response = await fetch('/api/toggle_co_status.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ coName })
        });
        const data = await response.json();
        if (data.success) {
            if (typeof showToast === 'function') showToast("Status updated!");
            window.loadServicesMaster();
        } else {
            alert("Error: " + data.message);
        }
    } catch (err) {
        console.error(err);
        alert("Server error.");
    }
};

// Co-Service Delete
window.deleteCoService = async function(coName) {
    if (!confirm(`Kya aap "${coName}" Co-Service ko delete karna chahte hain?`)) return;
    try {
        const response = await fetch('/api/delete_co_category.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ coName })
        });
        const data = await response.json();
        if (data.success) {
            if (typeof showToast === 'function') showToast(`Co-Service deleted successfully!`);
            window.loadServicesMaster();
        } else {
            alert("Error: " + data.message);
        }
    } catch (err) {
        console.error(err);
        alert("Server error while deleting.");
    }
};

document.addEventListener('click', function(e) {
    // Agar kisi bhi button par "Save Co-Service" likha hai, toh ye automatic click sambhal lega
    if (e.target && (e.target.id === 'saveCoServiceBtn' || e.target.textContent.includes('Save Co-Service'))) {
        e.preventDefault();
        if (typeof window.handleSaveRealCoService === 'function') {
            window.handleSaveRealCoService(e);
        }
    }
});

window.handleSaveRealCoService = async function(e) {
    if (e) e.preventDefault();
    
    const headCategory = document.getElementById('serviceCategory')?.value || selectedMainCategory;
    const coName = document.getElementById('serviceName')?.value.trim() || '';
    
    // Image base64 grab karne ka secure tarika
    let image = '';
const fileInput = document.getElementById('serviceImageFile');

if (fileInput && fileInput.files && fileInput.files[0]) {
    const file = fileInput.files[0];

    image = await new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = function(evt) {
            resolve(evt.target.result);
        };

        reader.onerror = function() {
            reject(new Error('Image file could not be read.'));
        };

        reader.readAsDataURL(file);
    });
} else {
    image = document.getElementById('serviceImageBase64')?.value || '';
}

    if (!headCategory || !coName) {
        alert("Please enter Co-Service Title.");
        return false;
    }

    try {
        const response = await fetch('/api/save_co_category.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ headCategory, coName, image })
        });
        const data = await response.json();

        if (data.success) {
            closeModal('modalService');
            if (typeof showToast === 'function') {
                showToast(data.message || `Co-Service "${coName}" saved!`);
            } else {
                alert(data.message || "Co-Service saved successfully!");
            }
            await window.loadServicesMaster();
        } else {
            alert("Error: " + data.message);
        }
    } catch (error) {
        console.error("Save Co-Service error:", error);
        alert("Server error while saving Co-Service.");
    }
    return false;
};

document.addEventListener('click', function(e) {
    // Agar kisi bhi button par "Save Co-Service" likha hai, toh ye automatic click sambhal lega
    if (e.target && (e.target.id === 'saveCoServiceBtn' || e.target.textContent.includes('Save Co-Service'))) {
        e.preventDefault();
        if (typeof window.handleSaveRealCoService === 'function') {
            window.handleSaveRealCoService(e);
        }
    }
});

// 1. Main Service Edit करने का फंक्शन (इमेज और नाम बदलने के लिए)
window.editMainService = async function(id) {
    const newName = prompt("नया सर्विस नाम दर्ज करें:");
    if (!newName) return;

    // इमेज बदलने के लिए फाइल इनपुट प्रॉम्प्ट या नया इमेज चयन
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.onchange = async function(e) {
        const file = e.target.files[0];
        const reader = new FileReader();
        reader.onload = async function(uploadEvt) {
            const image = uploadEvt.target.result;
            
            // डेटा सर्वर पर अपडेट करने के लिए
            try {
                const response = await fetch('/api/update_head_service.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ id: id, name: newName, image: image })
                });
                const data = await response.json();
                if (data.success) {
                    if (typeof showToast === 'function') showToast("Service updated successfully!");
                    window.loadServicesMaster();
                } else {
                    alert("Error: " + data.message);
                }
            } catch (err) {
                alert("Server error during update.");
            }
        };
        reader.readAsDataURL(file);
    };
    input.click();
};


</script>

<script>
window.editMainService = function(id, name) {
    // Agar ID nahi mili, toh error alert dikhayein
    if (!id || id === 'undefined') {
        alert("Error: Service ID is missing!");
        return;
    }

    // Pehle se bane hue 'modalMainCategory' form modal ka use karenge
    const modal = document.getElementById('modalMainCategory');
    if (!modal) {
        alert("Modal form nahi mila!");
        return;
    }

    // Modal ke fields me purani values set karein
    document.getElementById('mainCatOriginalName').value = name || '';
    document.getElementById('mainCatName').value = name || '';
    
    // Hidden ID field agar nahi hai toh create kar lenge
    let idField = document.getElementById('mainCatEditId');
    if (!idField) {
        idField = document.createElement('input');
        idField.type = 'hidden';
        idField.id = 'mainCatEditId';
        modal.querySelector('form').appendChild(idField);
    }
    idField.value = id;

    // Modal ka title change karke "Modify" dikhayein
    const titleEl = document.getElementById('mainCatModalTitle');
    if (titleEl) {
        titleEl.innerHTML = `<i class="fa-solid fa-pen-to-square text-blue-500"></i> Modify Main Service: ${name}`;
    }

    // Modal ko khol dein (yeh wahi form hai jisme image upload ka option bhi hai)
    openModal('modalMainCategory');
};

window.toggleStopMainService = async function(id) {
    if (!confirm("Kya aap is service ka status badalna chahte hain?")) return;
    try {
        const response = await fetch('/api/toggle_head_status.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id: id })
        });
        const data = await response.json();
        if (data.success) {
            alert("Status updated successfully!");
            if (typeof window.loadServicesMaster === 'function') window.loadServicesMaster();
        } else {
            alert("Error: " + data.message);
        }
    } catch (err) {
        alert("Server error.");
    }
};

window.deleteMainService = async function(id, name) {
    if (!confirm(`Kya aap "${name}" ko delete karna chahte hain?`)) return;
    try {
        const response = await fetch('/api/delete_head_service.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id: id })
        });
        const data = await response.json();
        if (data.success) {
            alert("Service deleted successfully!");
            if (typeof window.loadServicesMaster === 'function') window.loadServicesMaster();
        } else {
            alert("Error: " + data.message);
        }
    } catch (err) {
        alert("Server error while deleting.");
    }
};

window.editMainService = function(id) {
    console.log("Edit clicked for ID:", id);
    if (!id || id === 'undefined') {
        alert("Error: Service ID is missing!");
        return;
    }
    const newName = prompt("नया सर्विस नाम दर्ज करें:");
    if (!newName) return;
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.onchange = async function(e) {
        const file = e.target.files[0];
        const reader = new FileReader();
        reader.onload = async function(uploadEvt) {
            const image = uploadEvt.target.result;
            try {
                const response = await fetch('/api/update_head_service.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ id: id, name: newName, image: image })
                });
                const data = await response.json();
                if (data.success) {
                    alert("Service updated successfully!");
                    if (typeof window.loadServicesMaster === 'function') window.loadServicesMaster();
                } else {
                    alert("Error: " + data.message);
                }
            } catch (err) {
                alert("Server error during update.");
            }
        };
        reader.readAsDataURL(file);
    };
    input.click();
};

window.toggleStopMainService = async function(id) {
    console.log("Toggle Status clicked for ID:", id);
    if (!id || id === 'undefined') {
        alert("Error: Service ID is missing!");
        return;
    }
    if (!confirm("क्या आप इस सर्विस का स्टेटस बदलना चाहते हैं?")) return;
    try {
        const response = await fetch('/api/toggle_head_status.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id: id })
        });
        const data = await response.json();
        if (data.success) {
            alert("Status updated successfully!");
            if (typeof window.loadServicesMaster === 'function') window.loadServicesMaster();
        } else {
            alert("Error: " + data.message);
        }
    } catch (err) {
        alert("Server error.");
    }
};

window.deleteMainService = async function(id, name) {
    console.log("Delete clicked for ID:", id, name);
    if (!id || id === 'undefined') {
        alert("Error: Service ID is missing!");
        return;
    }
    if (!confirm(`क्या आप "${name}" को डिलीट करना चाहते हैं?`)) return;
    try {
        const response = await fetch('/api/delete_head_service.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id: id })
        });
        const data = await response.json();
        if (data.success) {
            alert("Service deleted successfully!");
            if (typeof window.loadServicesMaster === 'function') window.loadServicesMaster();
        } else {
            alert("Error: " + data.message);
        }
    } catch (err) {
        alert("Server error while deleting.");
    }
};

window.toggleStopMainService = async function(id) {
    console.log("Toggle Status started for ID:", id);
    if (!confirm("क्या आप इस सर्विस का स्टेटस बदलना चाहते हैं?")) return;
    try {
        console.log("Sending request to /api/toggle_head_status.php...");
        const response = await fetch('/api/toggle_head_status.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id: id })
        });
        console.log("Response received, status:", response.status);
        
        const responseText = await response.text();
        console.log("Raw response text:", responseText);
        
        let data;
        try {
            data = JSON.parse(responseText);
        } catch (e) {
            console.error("JSON Parse Error. Server did not return valid JSON.");
            alert("Server error: Invalid JSON response. Check console.");
            return;
        }

        if (data.success) {
            alert("Status updated successfully!");
            if (typeof window.loadServicesMaster === 'function') window.loadServicesMaster();
        } else {
            alert("Error: " + (data.message || "Unknown error"));
        }
    } catch (err) {
        console.error("Fetch Exception:", err);
        alert("Network or Server error occurred!");
    }
};

window.deleteMainService = async function(id, name) {
    console.log("Delete started for ID:", id);
    if (!confirm(`क्या आप "${name}" को डिलीट करना चाहते हैं?`)) return;
    try {
        console.log("Sending request to /api/delete_head_service.php...");
        const response = await fetch('/api/delete_head_service.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id: id })
        });
        console.log("Response received, status:", response.status);
        
        const responseText = await response.text();
        console.log("Raw response text:", responseText);
        
        let data;
        try {
            data = JSON.parse(responseText);
        } catch (e) {
            console.error("JSON Parse Error:", e);
            alert("Server error: Invalid JSON response. Check console.");
            return;
        }

        if (data.success) {
            alert("Service deleted successfully!");
            if (typeof window.loadServicesMaster === 'function') window.loadServicesMaster();
        } else {
            alert("Error: " + (data.message || "Unknown error"));
        }
    } catch (err) {
        console.error("Fetch Exception:", err);
        alert("Network or Server error occurred!");
    }
};
</script>


<!-- FINAL Main Services card actions + save request compatibility fix -->
<script id="main-services-actions-final-fix">
(function () {
  'use strict';
  const fallbackImage = 'https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=240&auto=format&fit=crop&q=80';
  const esc = v => String(v == null ? '' : v).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
  const norm = v => String(v == null ? '' : v).trim().toLowerCase();
  const dbRows = () => {
    try {
      if (Array.isArray(window.headServices) && window.headServices.length) return window.headServices;
      if (typeof headServices !== 'undefined' && Array.isArray(headServices) && headServices.length) return headServices;
    } catch (_) {}
    return [];
  };
  const fallbackRows = () => {
    try {
      if (typeof mainCategories !== 'undefined' && Array.isArray(mainCategories)) return mainCategories;
    } catch (_) {}
    return Array.isArray(window.mainCategories) ? window.mainCategories : [];
  };
  const idOf = x => x && (x.head_id ?? x.id ?? x.headId ?? x.service_id ?? x.serviceId);
  const nameOf = x => String(x && (x.head_name || x.name || x.category_name || x.service_name) || 'Unnamed Service');
  const statusOf = x => {
    if (x && x.is_active !== undefined && x.is_active !== null && x.is_active !== '') {
      return (String(x.is_active) === '1' || String(x.is_active).toLowerCase() === 'active') ? 'Active' : 'Stopped';
    }
    const s = String((x && x.status) || 'Active').toLowerCase();
    return (s === 'inactive' || s === 'stopped' || s === 'disabled' || s === '0') ? 'Stopped' : 'Active';
  };
  const allRows = () => {
    const db = dbRows();
    return db.length ? db : fallbackRows();
  };
  const findByName = name => {
    const key = norm(name);
    return dbRows().find(x => norm(nameOf(x)) === key || norm(x.name) === key || norm(x.head_name) === key)
      || allRows().find(x => norm(nameOf(x)) === key);
  };
  const findById = id => allRows().find(x => String(idOf(x)) === String(id));
  const resolveRecord = (id, name) => {
    let row = (id !== undefined && id !== null && String(id) !== '') ? findById(id) : null;
    if (!row && name) row = findByName(name);
    return row;
  };
  async function requestJson(url, payload) {
    let response;
    try {
      response = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify(payload)
      });
    } catch (err) {
      throw new Error('NetworkError: ' + (err && err.message ? err.message : 'PHP API tak connection nahi hua') +
        '. Dashboard ko same PHP website/server URL se kholen aur /api endpoint check karein.');
    }
    const raw = await response.text();
    let data;
    try { data = JSON.parse(raw); }
    catch (_) {
      const detail = raw.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim().slice(0, 350);
      throw new Error('HTTP ' + response.status + ': ' + (detail || 'PHP API ne valid JSON nahi diya.'));
    }
    if (!response.ok || data.success === false || data.success === 0) {
      throw new Error(data.message || data.error || ('HTTP ' + response.status + ' request failed'));
    }
    return data;
  }
  async function refreshServices() {
    if (typeof window.loadServicesMaster === 'function') await window.loadServicesMaster();
    else if (typeof loadServicesMaster === 'function') await loadServicesMaster();
    // The original loader uses lexical `let headServices`; mirror it for the card renderer.
    try {
      if (typeof headServices !== 'undefined' && Array.isArray(headServices)) window.headServices = headServices;
      if (typeof mainCategories !== 'undefined' && Array.isArray(mainCategories)) window.mainCategories = mainCategories;
    } catch (_) {}
    if (typeof window.renderMainServicesGrid === 'function') window.renderMainServicesGrid();
    if (typeof window.renderServicesTable === 'function') window.renderServicesTable();
  }
  function notify(msg) {
    if (typeof window.showToast === 'function') window.showToast(msg);
    else alert(msg);
  }

  // Last-definition renderer: action buttons are always present and record IDs are resolved by DB name.
  window.renderMainServicesGrid = function () {
    const grid = document.getElementById('mainServicesGrid');
    if (!grid) return;
    const rows = allRows();
    if (!rows.length) {
      grid.innerHTML = '<div class="w-full min-w-full rounded-xl border border-slate-200 bg-white p-6 text-center text-sm font-semibold text-slate-400">Main Services load nahi hui. /api/get_services_master.php ka response check karein.</div>';
      return;
    }
    let selected = '';
    try { selected = window.selectedMainCategory || selectedMainCategory || ''; } catch (_) { selected = window.selectedMainCategory || ''; }
    grid.innerHTML = rows.map(item => {
      const name = nameOf(item);
      const dbItem = findByName(name) || item;
      const id = idOf(dbItem);
      const status = statusOf(dbItem);
      const image = item.image || item.icon_url || item.iconUrl || fallbackImage;
      const safeName = esc(name);
      const safeId = esc(id == null ? '' : id);
      const safeImage = esc(image);
      const hasId = id !== undefined && id !== null && String(id) !== '';
      return `<div class="bg-white rounded-2xl p-[.9rem] border ${selected === name ? 'border-brand-500 shadow-md ring-2 ring-brand-500/20' : 'border-slate-200'} transition-all relative group min-w-[230px]">
        <div class="flex items-center justify-end gap-2 mb-3 w-full">
          <div class="main-service-action-buttons">
            <button type="button" data-main-action="edit" data-id="${safeId}" data-name="${safeName}" class="inline-flex items-center justify-center px-2.5 py-1 text-xs font-bold rounded-lg bg-blue-50 text-blue-700 hover:bg-blue-100 border border-blue-200 cursor-pointer transition-colors" title="Modify Main Service" aria-label="Modify ${safeName}"><i class="fa-solid fa-pen-to-square mr-1"></i> Modify</button>
            <button type="button" data-main-action="toggle" data-id="${safeId}" data-name="${safeName}" class="inline-flex items-center justify-center px-2.5 py-1 text-xs font-bold rounded-lg cursor-pointer transition-colors ${status === 'Active' ? 'bg-amber-50 text-amber-800 hover:bg-amber-100 border border-amber-200' : 'bg-emerald-600 text-white hover:bg-emerald-700 border border-emerald-600'}" title="${status === 'Active' ? 'Stop' : 'Start'} Main Service" aria-label="${status === 'Active' ? 'Stop' : 'Start'} ${safeName}"><i class="fa-solid ${status === 'Active' ? 'fa-pause' : 'fa-play'} mr-1"></i>${status === 'Active' ? 'Stop' : 'Start'}</button>
            <button type="button" data-main-action="delete" data-id="${safeId}" data-name="${safeName}" class="inline-flex items-center justify-center p-1.5 text-rose-600 hover:bg-rose-50 border border-transparent hover:border-rose-200 rounded-lg text-sm cursor-pointer transition-colors" title="Delete Main Service" aria-label="Delete ${safeName}"><i class="fa-solid fa-trash-can"></i></button>
          </div>
        </div>
        <div data-main-action="select" data-name="${safeName}" class="cursor-pointer">
          <img src="${safeImage}" alt="${safeName}" onerror="this.onerror=null;this.src='https://homecareonline.in/images/logo/logo.png'" class="w-full rounded-xl object-cover mb-3 border border-slate-100" />
          <h4 class="font-black text-slate-900 text-sm truncate">${safeName}</h4>
          <p class="text-[11px] text-slate-400 font-bold mt-0.5">Open Catalog →</p>
        </div>
      </div>`;
    }).join('');
  };

  window.editMainService = async function (id, name) {
    const item = resolveRecord(id, name);
    if (!item || idOf(item) == null || String(idOf(item)) === '') {
      alert('Is Main Service ka database ID nahi mila. /api/get_services_master.php se head_id return hona chahiye.');
      return;
    }
    const serviceId = idOf(item);
    const oldName = nameOf(item);
    const newName = prompt('Main Service ka naam edit karein:', oldName);
    if (newName === null) return;
    if (!newName.trim()) { alert('Service name khali nahi ho sakta.'); return; }

    let image = '';
    if (confirm('Kya service image bhi change karni hai? OK = image select karein, Cancel = sirf naam update karein.')) {
      const file = await new Promise(resolve => {
        const input = document.createElement('input');
        input.type = 'file'; input.accept = 'image/*';
        input.onchange = () => resolve(input.files && input.files[0] ? input.files[0] : null);
        input.click();
      });
      if (file) {
        try {
          image = await new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = () => resolve(reader.result);
            reader.onerror = () => reject(new Error('Image file read nahi ho saki.'));
            reader.readAsDataURL(file);
          });
        } catch (err) { alert(err.message); return; }
      }
    }
    try {
      await requestJson('/api/update_head_service.php', {
        id: serviceId, head_id: serviceId, name: newName.trim(), head_name: newName.trim(),
        origName: oldName, originalName: oldName, image: image || null
      });
      await refreshServices();
      notify('Main Service update ho gayi.');
    } catch (err) { alert('Edit failed: ' + err.message); }
  };

  window.toggleStopMainService = async function (id, name) {
    const item = resolveRecord(id, name);
    if (!item || idOf(item) == null || String(idOf(item)) === '') {
      alert('Is Main Service ka database ID nahi mila. /api/get_services_master.php se head_id return hona chahiye.');
      return;
    }
    const serviceId = idOf(item);
    const serviceName = nameOf(item);
    const previousStatus = statusOf(item);
    const next = previousStatus === 'Active' ? 'Stopped' : 'Active';
    const button = document.querySelector('#mainServicesGrid [data-main-action="toggle"][data-id="' + CSS.escape(String(serviceId)) + '"]');
    if (button && button.disabled) return;
    if (button) { button.disabled = true; button.style.opacity = '0.65'; button.style.pointerEvents = 'none'; }
    const applyStatus = value => {
      const rows = allRows();
      rows.forEach(row => {
        if (String(idOf(row)) === String(serviceId)) {
          row.status = value;
          row.is_active = value === 'Active' ? 1 : 0;
        }
      });
      try {
        if (typeof headServices !== 'undefined' && Array.isArray(headServices)) window.headServices = headServices;
        if (typeof mainCategories !== 'undefined' && Array.isArray(mainCategories)) window.mainCategories = mainCategories;
      } catch (_) {}
      if (typeof window.renderMainServicesGrid === 'function') window.renderMainServicesGrid();
      if (typeof window.renderServicesTable === 'function') window.renderServicesTable();
    };
    // Update the visible button immediately while the server request is in flight.
    applyStatus(next);
    try {
      await requestJson('/api/toggle_head_status.php', { id: serviceId, head_id: serviceId, name: serviceName, head_name: serviceName });
      await refreshServices();
      // Keep the UI consistent with the successful toggle even if a cached loader response is stale.
      applyStatus(next);
      notify(serviceName + ' ka status ' + (next === 'Active' ? 'Start' : 'Stop') + ' ho gaya.');
    } catch (err) {
      applyStatus(previousStatus);
      alert('Stop/Start failed: ' + err.message);
    } finally {
      const currentButton = document.querySelector('#mainServicesGrid [data-main-action="toggle"][data-id="' + CSS.escape(String(serviceId)) + '"]');
      if (currentButton) { currentButton.disabled = false; currentButton.style.opacity = ''; currentButton.style.pointerEvents = ''; }
    }
  };

  window.deleteMainService = async function (id, name) {
    const item = resolveRecord(id, name);
    if (!item || idOf(item) == null || String(idOf(item)) === '') {
      alert('Is Main Service ka database ID nahi mila. /api/get_services_master.php se head_id return hona chahiye.');
      return;
    }
    const serviceId = idOf(item);
    const serviceName = name || nameOf(item);
    if (!confirm('Kya "' + serviceName + '" ko database se delete karna hai?')) return;
    try {
      await requestJson('/api/delete_head_service.php', { id: serviceId, head_id: serviceId, name: serviceName, head_name: serviceName });
      await refreshServices();
      notify('Main Service delete ho gayi.');
    } catch (err) { alert('Delete failed: ' + err.message); }
  };

  // Correct the original save handler's API request and surface server/network errors.
  window.handleSaveMainCategory = async function (e) {
    if (e && typeof e.preventDefault === 'function') e.preventDefault();
    
    const nameEl = document.getElementById('mainCatName');
    const colorEl = document.getElementById('mainCatColor');
    const statusEl = document.getElementById('mainCatStatus');
    const imageEl = document.getElementById('mainCatImageBase64');
    const originalEl = document.getElementById('mainCatOriginalName');
    const editIdEl = document.getElementById('mainCatEditId');
    
    const name = nameEl ? nameEl.value.trim() : '';
    const color = colorEl ? colorEl.value : 'text-brand-600';
    const status = statusEl ? statusEl.value : 'Active';
    const originalName = originalEl ? originalEl.value.trim() : '';
    const editId = editIdEl ? editIdEl.value : '';

    const fileInput = document.getElementById('mainCatImageFile');
    const imgName = (fileInput && fileInput.files && fileInput.files[0]) ? fileInput.files[0].name : '';
    
    let image = imageEl ? imageEl.value : '';

    if (!image && fileInput && fileInput.files && fileInput.files[0]) {
        const file = fileInput.files[0];
        const reader = new FileReader();
        reader.readAsDataURL(file);
        await new Promise(resolve => {
            reader.onload = function(evt) { image = evt.target.result; resolve(); };
        });
    }

    if (!name) { 
        alert('Please enter Main Service name.'); 
        if (nameEl) nameEl.focus(); 
        return false; 
    }
    
    try {
        const response = await fetch('/api/save_head_service.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                id: editId, head_id: editId,
                origName: originalName, originalName: originalName, original_name: originalName,
                name: name, head_name: name, color: color, color_theme: color,
                status: status, is_active: status === 'Active' ? 1 : 0,
                image: image, icon_url: image, image_name: imgName 
            })
        });

        const data = await response.json();

        if (data.success) {
            if (typeof window.closeModal === 'function') window.closeModal('modalMainCategory');
            if (document.getElementById('mainCatEditId')) document.getElementById('mainCatEditId').value = '';
            
            // Fetch fresh server state (no browser cache), then redraw immediately.
            if (typeof window.loadServicesMaster === 'function') {
                await window.loadServicesMaster();
            }
            if (typeof window.renderMainServicesGrid === 'function') window.renderMainServicesGrid();
            if (typeof window.renderServicesTable === 'function') window.renderServicesTable();
            if (typeof window.renderPricingMatrix === 'function') window.renderPricingMatrix();
            
            if (typeof showToast === 'function') {
                showToast(originalName ? 'Main Service update ho gayi.' : 'Main Service save ho gayi.');
            } else {
                alert(originalName ? 'Main Service update ho gayi.' : 'Main Service save ho gayi.');
            }
        } else {
            alert("Error: " + data.message);
        }
    } catch (err) {
        console.error('Main Service save failed:', err);
        alert('Main Service save nahi hui: ' + err.message);
    }
    return false;
};

  document.addEventListener('click', function (event) {
    const el = event.target && event.target.closest ? event.target.closest('[data-main-action]') : null;
    if (!el) return;
    const action = el.dataset.mainAction;
    if (action === 'select') {
      if (typeof window.selectMainCategory === 'function') window.selectMainCategory(el.dataset.name);
      return;
    }
    event.preventDefault();
    event.stopPropagation();
    if (action === 'edit') window.editMainService(el.dataset.id, el.dataset.name);
    else if (action === 'toggle') window.toggleStopMainService(el.dataset.id, el.dataset.name);
    else if (action === 'delete') window.deleteMainService(el.dataset.id, el.dataset.name);
  }, true);

  // Ensure the original modal form submits to this handler.
  function bindMainServiceForm() {
    const modal = document.getElementById('modalMainCategory');
    if (!modal) return;
    const form = modal.querySelector('form');
    if (form) {
      form.onsubmit = window.handleSaveMainCategory;
    }
  }
  const oldLoader = window.loadServicesMaster;
  if (typeof oldLoader === 'function' && !window.__mainServiceActionLoaderBridge) {
    window.__mainServiceActionLoaderBridge = true;
    window.loadServicesMaster = async function () {
      const result = await oldLoader.apply(this, arguments);
      try {
        if (typeof headServices !== 'undefined' && Array.isArray(headServices)) window.headServices = headServices;
        if (typeof mainCategories !== 'undefined' && Array.isArray(mainCategories)) window.mainCategories = mainCategories;
      } catch (_) {}
      window.renderMainServicesGrid();
      return result;
    };
  }
  function init() {
    bindMainServiceForm();
    try {
      if (typeof headServices !== 'undefined' && Array.isArray(headServices)) window.headServices = headServices;
      if (typeof mainCategories !== 'undefined' && Array.isArray(mainCategories)) window.mainCategories = mainCategories;
    } catch (_) {}
    window.renderMainServicesGrid();
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => setTimeout(init, 0), { once: true });
  else setTimeout(init, 0);
})();
</script>

<script>
// Purane browser prompt ko block karke, sahi Form (Modal) open karne ka code
window.editMainService = function(id, name) {
    if (!id || id === 'undefined') { 
        alert("Error: Service ID is missing!"); 
        return; 
    }

    const modal = document.getElementById('modalMainCategory');
    if (!modal) return;

    // Form mein existing Data bharna
    document.getElementById('mainCatOriginalName').value = name || '';
    document.getElementById('mainCatName').value = name || '';

    // ID field create karke set karna
    let idField = document.getElementById('mainCatEditId');
    if (!idField) {
        idField = document.createElement('input');
        idField.type = 'hidden';
        idField.id = 'mainCatEditId';
        modal.querySelector('form').appendChild(idField);
    }
    idField.value = id;

    // Purani Image load karna
    let existingImage = 'https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=240&auto=format&fit=crop&q=80';
    if (window.headServices && window.headServices.length > 0) {
        const item = window.headServices.find(h => String(h.head_id ?? h.id) === String(id));
        if (item && (item.image || item.icon_url)) {
            existingImage = item.image || item.icon_url;
        }
    }
    
    if (document.getElementById('mainCatImageBase64')) document.getElementById('mainCatImageBase64').value = existingImage;
    if (document.getElementById('mainCatImagePreview')) document.getElementById('mainCatImagePreview').src = existingImage;
    if (document.getElementById('mainCatImageFile')) document.getElementById('mainCatImageFile').value = ''; 

    // Title change karna
    const titleEl = document.getElementById('mainCatModalTitle');
    if (titleEl) {
        titleEl.innerHTML = `<i class="fa-solid fa-pen-to-square text-blue-500"></i> Modify Main Service: ${name}`;
    }

    // Proper Form (Modal) open karna
    if (typeof openModal === 'function') {
        openModal('modalMainCategory');
    } else {
        modal.classList.remove('hidden');
        modal.classList.add('flex', 'modal-parent-visible');
    }
};
</script>

<script>
// --- OVERWRITE ALL PREVIOUS CO-SERVICE LOGIC ---
window.expandedCoServices = window.expandedCoServices || {};
window.isSavingCoService = false;

window.renderServicesTable = function() {
    const tbody = document.getElementById('servicesTableBody');
    const thead = tbody?.previousElementSibling;
    if (!tbody || !thead) return;

    // Ensure table headers (aur kachra hataye)
    thead.innerHTML = `<tr>
        <th class="py-3.5 px-4 uppercase text-[11px] font-black text-slate-400">Image</th>
        <th class="py-3.5 px-5 uppercase text-[11px] font-black text-slate-400">Co-Service & Sub-Services</th>
        <th class="py-3.5 px-5 uppercase text-[11px] font-black text-slate-400">Parent</th>
        <th class="py-3.5 px-5 uppercase text-[11px] font-black text-slate-400">Time</th>
        <th class="py-3.5 px-5 uppercase text-[11px] font-black text-slate-400">Base Rate</th>
        <th class="py-3.5 px-5 text-center uppercase text-[11px] font-black text-slate-400">Status</th>
        <th class="py-3.5 px-5 text-right uppercase text-[11px] font-black text-slate-400">Actions</th>
    </tr>`;

    const currentMain = window.selectedMainCategory || '';
    const hObj = (window.headServices || []).find(h => (h.head_name || h.name) === currentMain);
    
    let currentCoList = [];
    if (hObj && window.coServices) {
        currentCoList = window.coServices.filter(c => String(c.head_id) === String(hObj.head_id || hObj.id)).map(c => c.name || c.co_name);
    }
    
    if(currentCoList.length === 0 && window.coServices) {
         currentCoList = window.coServices.filter(c => c.headCategory === currentMain).map(c => c.name);
    }

    const allSubs = (window.services || []).filter(s => s.headCategory === currentMain || currentCoList.includes(s.category) || s.category === currentMain);
    allSubs.forEach(s => {
        const cName = s.coCategory || s.category;
        if (cName && !currentCoList.includes(cName) && cName !== currentMain) currentCoList.push(cName);
    });

    currentCoList = [...new Set(currentCoList)];

    if (currentCoList.length === 0) {
        tbody.innerHTML = `<tr><td colspan="7" class="py-8 text-center text-slate-400 font-bold">No Co-Services added yet under ${currentMain}.</td></tr>`;
        return;
    }

    let html = '';
    currentCoList.forEach(coName => {
        const subInCo = allSubs.filter(f => (f.coCategory || f.category) === coName);
        if (window.expandedCoServices[coName] === undefined) window.expandedCoServices[coName] = true;
        const isExpanded = window.expandedCoServices[coName];

        let coImage = 'https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=240&auto=format&fit=crop&q=80';
        const coObj = (window.coServices || []).find(c => c.name === coName || c.co_name === coName);
        if (coObj && (coObj.image || coObj.image_url || coObj.icon_url)) {
            coImage = coObj.image || coObj.image_url || coObj.icon_url;
        }

        const safeName = coName.replace(/'/g, "\\'");

        html += `<tr class="bg-indigo-50/50 border-y border-indigo-100">
            <td class="py-3 px-4">
                <img src="${coImage}" class="w-10 h-10 rounded-lg object-cover border border-indigo-200" />
            </td>
            <td class="py-3 px-5">
                <strong class="block text-slate-900 text-sm">${coName}</strong>
                <button onclick="window.toggleSubServices('${safeName}')" class="text-[10px] font-bold text-indigo-600 hover:underline mt-1 cursor-pointer">
                    <i class="fa-solid ${isExpanded ? 'fa-chevron-down' : 'fa-chevron-right'}"></i> View Sub-Services (${subInCo.length})
                </button>
            </td>
            <td class="py-3 px-5"><span class="px-2 py-0.5 text-[10px] font-bold rounded-full bg-slate-200 text-slate-700">${currentMain}</span></td>
            <td class="py-3 px-5 text-slate-400 font-bold text-xs">-</td>
            <td class="py-3 px-5 text-slate-400 font-bold text-xs">-</td>
            <td class="py-3 px-5 text-center"><span class="px-2 py-0.5 text-[10px] font-black rounded-full bg-emerald-100 text-emerald-700">Active</span></td>
            <td class="py-3 px-5 text-right space-x-1">
                <button onclick="window.openSpecificSubServiceModal('${safeName}')" class="px-2.5 py-1 bg-brand-600 text-white text-[10px] font-bold rounded-lg mr-1 cursor-pointer"><i class="fa-solid fa-plus mr-1"></i>Add Sub</button>
                <button onclick="window.editCoService('${safeName}')" class="p-1.5 text-blue-600 hover:bg-blue-100 rounded cursor-pointer" title="Edit"><i class="fa-solid fa-pen-to-square"></i></button>
                <button onclick="window.toggleStopCoService('${safeName}')" class="p-1.5 text-amber-600 hover:bg-amber-100 rounded cursor-pointer" title="Stop/Start"><i class="fa-solid fa-ban"></i></button>
                <button onclick="window.deleteCoService('${safeName}')" class="p-1.5 text-rose-600 hover:bg-rose-100 rounded cursor-pointer" title="Delete"><i class="fa-solid fa-trash-can"></i></button>
            </td>
        </tr>`;

        if (isExpanded) {
            if (subInCo.length === 0) {
                html += `<tr><td colspan="7" class="py-4 px-5 text-center text-xs text-slate-400 italic bg-white border-b border-slate-100">No sub-services added yet.</td></tr>`;
            } else {
                subInCo.forEach(sub => {
                    const stop = String(sub.status).includes('Stopped');
                    html += `<tr class="bg-white hover:bg-slate-50 transition-colors border-b border-slate-100 ${stop ? 'opacity-70' : ''}">
                        <td class="py-3 px-4 pl-10"><img src="${sub.image || 'https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=240&auto=format&fit=crop&q=80'}" class="w-12 h-8 rounded border border-slate-200 object-cover" /></td>
                        <td class="py-3 px-5"><strong class="font-bold text-slate-800 text-xs">${sub.name}</strong></td>
                        <td class="py-3 px-5"><span class="text-[10px] font-bold text-slate-500">${coName}</span></td>
                        <td class="py-3 px-5 text-slate-600 text-xs font-medium"><i class="fa-regular fa-clock mr-1 text-slate-400"></i>${sub.time || '45 mins'}</td>
                        <td class="py-3 px-5 font-black text-brand-600 text-sm">₹${sub.basePrice || 0}</td>
                        <td class="py-3 px-5 text-center"><span class="px-2 py-0.5 rounded-full text-[9px] font-black ${stop ? 'bg-rose-100 text-rose-700' : 'bg-emerald-100 text-emerald-700'}">${stop ? 'Stopped' : 'Active'}</span></td>
                        <td class="py-3 px-5 text-right space-x-1">
                            <button onclick="window.editSubService('${sub.id}')" class="p-1.5 text-blue-600 hover:bg-blue-100 rounded cursor-pointer" title="Edit"><i class="fa-solid fa-pen-to-square"></i></button>
                            <button onclick="window.deleteSubService('${sub.id}')" class="p-1.5 text-rose-600 hover:bg-rose-100 rounded cursor-pointer" title="Delete"><i class="fa-solid fa-trash-can"></i></button>
                        </td>
                    </tr>`;
                });
            }
        }
    });
    tbody.innerHTML = html;
};

window.toggleSubServices = function(coName) {
    window.expandedCoServices[coName] = !window.expandedCoServices[coName];
    if (typeof window.renderServicesTable === 'function') window.renderServicesTable();
};

window.handleSaveRealCoService = async function(e) {
    if (e) e.preventDefault();
    if (window.isSavingCoService) return false;
    window.isSavingCoService = true;

    const headCategory = document.getElementById('serviceCategory')?.value || window.selectedMainCategory || '';
    const coName = document.getElementById('serviceName')?.value.trim() || '';
    const idField = document.getElementById('serviceId');
    const rawId = idField?.value || '';
    const coId = /^\d+$/.test(String(rawId)) ? Number(rawId) : null;
    const fileInput = document.getElementById('serviceImageFile');
    let image = '';
    let image_name = '';

    // A newly selected file must override any old/default preview image.
    if (fileInput?.files?.[0]) {
        const file = fileInput.files[0];
        image_name = file.name;
        try {
            image = await new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = () => resolve(String(reader.result || ''));
                reader.onerror = () => reject(new Error('Image file could not be read.'));
                reader.readAsDataURL(file);
            });
        } catch (err) {
            alert(err.message || 'Image file could not be read.');
            window.isSavingCoService = false;
            return false;
        }
    }

    if (!headCategory || !coName) {
        alert('Please enter Co-Service Title and select Main Service.');
        window.isSavingCoService = false;
        return false;
    }

    try {
        const response = await fetch('/api/save_co_category.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ headCategory, coName, co_id: coId, origName: coId ? '' : rawId, image, image_name })
        });
        const text = await response.text();
        let data;
        try { data = JSON.parse(text); }
        catch (_) { throw new Error('Server ne JSON response nahi diya. PHP error/log check karein.'); }

        if (!response.ok || !data.success) {
            alert('Error: ' + (data.message || ('HTTP ' + response.status)));
            return false;
        }
        if (typeof closeModal === 'function') closeModal('modalService');
        if (typeof showToast === 'function') showToast(data.message || `Co-Service "${coName}" saved successfully!`);
        if (typeof window.loadServicesMaster === 'function') await window.loadServicesMaster();
    } catch (error) {
        alert('Save failed: ' + error.message);
    } finally {
        window.isSavingCoService = false;
    }
    return false;
};

window.editCoService = function(coName) {
    const coObj = (window.coServices || []).find(c => c.name === coName || c.co_name === coName);
    if (!coObj) {
        alert('Co-Service record nahi mila. Services Master ko refresh karke dobara try karein.');
        return;
    }
    if (typeof openModal === 'function') openModal('modalService');
    setTimeout(() => {
        const modal = document.getElementById('modalService');
        if (!modal) return;

        const idField = document.getElementById('serviceId');
        if (idField) idField.value = coObj.id ?? coObj.co_id ?? '';
        document.getElementById('serviceName').value = coObj.name || coObj.co_name || coName;

        const title = modal.querySelector('h3');
        if (title) title.innerHTML = `<i class="fa-solid fa-pen-to-square text-indigo-400"></i> Edit Co-Service`;

        const catSelect = document.getElementById('serviceCategory');
        if (catSelect) {
            const categoryName = coObj.headCategory || window.selectedMainCategory || '';
            catSelect.innerHTML = (window.mainCategories || []).map(c => `<option value="${String(c.name).replace(/&/g,'&amp;').replace(/"/g,'&quot;')}" ${c.name === categoryName ? 'selected' : ''}>${c.name}</option>`).join('');
            catSelect.value = categoryName;
        }

        const existingImage = coObj.image || coObj.image_url || coObj.icon_url || 'https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=240&auto=format&fit=crop&q=80';
        // Keep the current image only in the preview. Hidden field must be empty so a newly selected file wins.
        const base64Field = document.getElementById('serviceImageBase64');
        if (base64Field) base64Field.value = '';
        const preview = document.getElementById('serviceImagePreview');
        if (preview) preview.src = existingImage;
        if (document.getElementById('serviceImageFile')) document.getElementById('serviceImageFile').value = '';

        const timeField = document.getElementById('serviceTime')?.closest('.grid');
        if (timeField) timeField.style.display = 'none';
        const highlightField = document.getElementById('serviceHighlight')?.closest('.grid');
        if (highlightField) highlightField.style.display = 'none';
        const saveBtn = modal.querySelector('button[type="submit"]');
        if (saveBtn) saveBtn.innerText = 'Update Co-Service';
        const form = modal.querySelector('form');
        if (form) form.onsubmit = window.handleSaveRealCoService;
    }, 50);
};

window.deleteCoService = async function(coName) {
    const coObj = (window.coServices || []).find(c => c.name === coName || c.co_name === coName);
    if (!confirm(`Kya aap "${coName}" Co-Service ko delete karna chahte hain?`)) return;
    try {
        const payload = { coName, headCategory: window.selectedMainCategory };
        if (coObj && (coObj.id ?? coObj.co_id) != null) payload.co_id = coObj.id ?? coObj.co_id;
        const response = await fetch('/api/delete_co_category.php', {
            method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload)
        });
        const text = await response.text();
        let data;
        try { data = JSON.parse(text); } catch (_) { throw new Error('Server ne JSON response nahi diya. PHP error/log check karein.'); }
        if (!response.ok || !data.success) { alert('Error: ' + (data.message || ('HTTP ' + response.status))); return; }
        if (typeof showToast === 'function') showToast(data.message || 'Co-Service deleted successfully!');
        if (typeof window.loadServicesMaster === 'function') await window.loadServicesMaster();
    } catch (err) { alert('Delete failed: ' + err.message); }
};

window.toggleStopCoService = async function(coName) {
    const coObj = (window.coServices || []).find(c => c.name === coName || c.co_name === coName);
    if (!confirm(`Kya aap "${coName}" ka status change karna chahte hain?`)) return;
    try {
        const payload = { coName, headCategory: window.selectedMainCategory };
        if (coObj && (coObj.id ?? coObj.co_id) != null) payload.co_id = coObj.id ?? coObj.co_id;
        const response = await fetch('/api/toggle_co_status.php', {
            method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload)
        });
        const text = await response.text();
        let data;
        try { data = JSON.parse(text); } catch (_) { throw new Error('Server ne JSON response nahi diya. PHP error/log check karein.'); }
        if (!response.ok || !data.success) { alert('Error: ' + (data.message || ('HTTP ' + response.status))); return; }
        if (typeof showToast === 'function') showToast(data.message || 'Status updated!');
        if (typeof window.loadServicesMaster === 'function') await window.loadServicesMaster();
    } catch (err) { alert('Status update failed: ' + err.message); }
};

window.openSpecificSubServiceModal = function(coName) {
    if (typeof openModal === 'function') openModal('modalService');
    setTimeout(() => {
        const modal = document.getElementById('modalService');
        if (!modal) return;
        document.getElementById('serviceId').value = '';
        document.getElementById('serviceName').value = '';
        document.getElementById('serviceBasePrice').value = '449';
        document.getElementById('serviceTime').value = '45 mins';
        document.getElementById('serviceStatus').value = 'Active';
        document.getElementById('serviceHighlight').value = 'Doorstep standard certified service';
        const title = modal.querySelector('h3');
        if (title) title.innerHTML = `<i class="fa-solid fa-plus text-brand-500"></i> Add Sub-Service under ${coName}`;
        const catSelect = document.getElementById('serviceCategory');
        if (catSelect) {
            const catLabel = catSelect.previousElementSibling;
            if (catLabel) catLabel.innerText = 'Co-Service';
            catSelect.innerHTML = `<option value="${coName}" selected>${coName}</option>`;
            catSelect.value = coName;
        }
        const nameInput = document.getElementById('serviceName');
        if (nameInput) {
            const nameLabel = nameInput.previousElementSibling;
            if (nameLabel) nameLabel.innerText = 'Sub-Service Title';
            nameInput.placeholder = 'e.g. Door Lock Repair, Jet Cleaning';
        }
        const timeField = document.getElementById('serviceTime')?.closest('.grid');
        if (timeField) timeField.style.display = '';
        const highlightField = document.getElementById('serviceHighlight')?.closest('.grid');
        if (highlightField) highlightField.style.display = '';
        const imageField = document.getElementById('serviceImageFile')?.closest('div')?.parentElement;
        if (imageField) imageField.style.display = '';
        const saveBtn = modal.querySelector('button[type="submit"]');
        if (saveBtn) saveBtn.innerText = 'Save Sub-Service';
        modal.querySelector('form').onsubmit = window.handleSaveSubServiceDB;
    }, 50);
};

window.handleSaveSubServiceDB = async function(e) {
    if (e) e.preventDefault();
    const payload = {
        id: document.getElementById('serviceId')?.value || '',
        headCategory: window.selectedMainCategory,
        coCategory: document.getElementById('serviceCategory')?.value || '',
        name: document.getElementById('serviceName')?.value.trim() || '',
        basePrice: parseInt(document.getElementById('serviceBasePrice')?.value) || 0,
        time: document.getElementById('serviceTime')?.value.trim() || '45 mins',
        status: document.getElementById('serviceStatus')?.value || 'Active',
        highlight: document.getElementById('serviceHighlight')?.value.trim() || '',
        image: document.getElementById('serviceImageBase64')?.value || ''
    };
    if (!payload.coCategory || !payload.name) { alert("Co-Service and Sub-Service Title are required."); return false; }
    try {
        const response = await fetch('/api/save_service.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });
        const data = await response.json();
        if (data.success) {
            if (typeof closeModal === 'function') closeModal('modalService');
            if (typeof showToast === 'function') showToast(`Sub-Service "${payload.name}" saved!`);
            if (typeof window.loadServicesMaster === 'function') await window.loadServicesMaster();
        } else {
            alert("Error: " + data.message);
        }
    } catch (error) { 
        alert("Server error: " + error.message); 
    }
    return false;
};

window.deleteSubService = async function(id) {
    if (!confirm(`Kya aap is Sub-Service ko delete karna chahte hain?`)) return;
    try {
        const response = await fetch('/api/delete_service.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id: id })
        });
        const data = await response.json();
        if(data.success) {
            if (typeof showToast === 'function') showToast(`Sub-Service deleted successfully!`);
            if (typeof window.loadServicesMaster === 'function') await window.loadServicesMaster();
        } else {
            alert("Error: " + data.message);
        }
    } catch (err) { 
        alert("Delete Failed: " + err.message); 
    }
};

window.editSubService = function(id) {
    const s = window.services.find(item => String(item.id) === String(id));
    if (!s) return;
    if (typeof openModal === 'function') openModal('modalService');
    setTimeout(() => {
        const modal = document.getElementById('modalService');
        if (!modal) return;
        document.getElementById('serviceId').value = s.id;
        document.getElementById('serviceName').value = s.name;
        document.getElementById('serviceBasePrice').value = s.basePrice;
        document.getElementById('serviceTime').value = s.time;
        document.getElementById('serviceStatus').value = s.status || 'Active';
        document.getElementById('serviceHighlight').value = s.highlight || '';
        document.getElementById('serviceImageBase64').value = s.image || '';
        document.getElementById('serviceImagePreview').src = s.image || 'https://via.placeholder.com/150';
        document.getElementById('serviceImageFile').value = '';

        const title = modal.querySelector('h3');
        if (title) title.innerHTML = `<i class="fa-solid fa-pen-to-square text-brand-500"></i> Edit Sub-Service`;

        const catSelect = document.getElementById('serviceCategory');
        if (catSelect) {
            catSelect.innerHTML = `<option value="${s.coCategory}" selected>${s.coCategory}</option>`;
            catSelect.value = s.coCategory;
        }

        const timeField = document.getElementById('serviceTime')?.closest('.grid');
        if (timeField) timeField.style.display = '';
        const highlightField = document.getElementById('serviceHighlight')?.closest('.grid');
        if (highlightField) highlightField.style.display = '';
        
        const saveBtn = modal.querySelector('button[type="submit"]');
        if (saveBtn) saveBtn.innerText = 'Update Sub-Service';

        modal.querySelector('form').onsubmit = window.handleSaveSubServiceDB;
    }, 50);
};


// FINAL Co-Service submit guard: one request per click; handles clicks on button icons too.
(function () {
    if (window.__coServiceSubmitGuardInstalled) return;
    window.__coServiceSubmitGuardInstalled = true;

    document.addEventListener('click', function (event) {
        const button = event.target && event.target.closest ? event.target.closest('button') : null;
        if (!button) return;
        const label = String(button.innerText || button.textContent || '').trim().toLowerCase();
        const isCoSave = button.id === 'saveCoServiceBtn' ||
            label === 'save co-service' || label === 'update co-service';
        if (!isCoSave) return;
        event.preventDefault();
        event.stopImmediatePropagation();
        if (typeof window.handleSaveRealCoService === 'function') {
            window.handleSaveRealCoService(event);
        }
    }, true);

    // Keep Enter-key/form submissions working, while the save lock prevents duplicate requests.
    document.addEventListener('submit', function (event) {
        const form = event.target;
        if (!form || !form.closest || !form.closest('#modalService')) return;
        const title = form.closest('#modalService').querySelector('h3');
        const titleText = String(title ? title.textContent : '').toLowerCase();
        const submitLabel = String((form.querySelector('button[type="submit"]') || {}).innerText || '').toLowerCase();
        if (titleText.includes('co-service') || submitLabel.includes('co-service')) {
            event.preventDefault();
            event.stopImmediatePropagation();
            if (typeof window.handleSaveRealCoService === 'function') {
                window.handleSaveRealCoService(event);
            }
        }
    }, true);
})();

</script>