TenerifeProp/public/admin/settings.html

<!-- Settings Section -->
<div class="section" id="section-settings">
    <div class="page-header">
        <h1 class="page-title">Configuración</h1>
        <p class="page-subtitle">Ajustes del sitio</p>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Información General</h5>
                </div>
                <div class="card-body">
                    <form id="settingsForm">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Nombre del Sitio</label>
                                <input type="text" class="form-control" name="site_name" id="setting_site_name">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Email de Contacto</label>
                                <input type="email" class="form-control" name="email" id="setting_email">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Teléfono</label>
                                <input type="text" class="form-control" name="phone" id="setting_phone">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">WhatsApp</label>
                                <input type="text" class="form-control" name="whatsapp" id="setting_whatsapp">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Dirección</label>
                                <textarea class="form-control" name="address" id="setting_address" rows="2"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Redes Sociales</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Facebook</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-facebook"></i></span>
                                <input type="url" class="form-control" name="social_facebook" id="setting_facebook">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Instagram</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-instagram"></i></span>
                                <input type="url" class="form-control" name="social_instagram" id="setting_instagram">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Twitter</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-twitter"></i></span>
                                <input type="url" class="form-control" name="social_twitter" id="setting_twitter">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">LinkedIn</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-linkedin"></i></span>
                                <input type="url" class="form-control" name="social_linkedin" id="setting_linkedin">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" form="settingsForm" class="btn btn-primary">
                    <i class="bi bi-check-lg me-2"></i>Guardar Cambios
                </button>
                <button type="button" class="btn btn-outline-secondary" onclick="loadSettings()">
                    <i class="bi bi-arrow-clockwise me-2"></i>Restablecer
                </button>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Mapa</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Centro del Mapa (Lat)</label>
                        <input type="number" step="0.0001" class="form-control" name="map_lat" id="setting_map_lat">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Centro del Mapa (Lng)</label>
                        <input type="number" step="0.0001" class="form-control" name="map_lng" id="setting_map_lng">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Zoom</label>
                        <input type="number" class="form-control" name="map_zoom" id="setting_map_zoom">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
async function loadSettings() {
    try {
        const res = await API.getSettings();
        if (res.success && res.data) {
            Object.keys(res.data).forEach(key => {
                const el = document.getElementById('setting_' + key);
                if (el) el.value = res.data[key];
            });
        }
    } catch (e) {
        console.error('Failed to load settings:', e);
    }
}

document.getElementById('settingsForm')?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = {};
    formData.forEach((v, k) => data[k] = v);
    
    try {
        await API.updateSettings(data);
        alert('Configuración guardada');
    } catch (e) {
        alert('Error al guardar');
    }
});
</script>