<?php
// Include database connection
require_once '../config/database.php';
// Start session if not already started
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
// Check if user is logged in and is admin
if (!isset($_SESSION['user_id']) || ($_SESSION['role'] !== 'admin' && $_SESSION['role'] !== 'director')) {
header('Location: login.php');
exit;
}
// Create site_settings table if it doesn't exist
$create_table_query = "CREATE TABLE IF NOT EXISTS site_settings (
id INT(11) NOT NULL AUTO_INCREMENT,
setting_key VARCHAR(50) NOT NULL,
setting_value TEXT,
PRIMARY KEY (id),
UNIQUE KEY (setting_key)
)";
mysqli_query($conn, $create_table_query);
$success_message = '';
$error_message = '';
// Get current settings
$settings_query = "SELECT * FROM site_settings";
$settings_result = mysqli_query($conn, $settings_query);
$settings = [];
if ($settings_result && mysqli_num_rows($settings_result) > 0) {
while ($row = mysqli_fetch_assoc($settings_result)) {
$settings[$row['setting_key']] = $row['setting_value'];
}
}
// Set default values if settings not found
$site_name = isset($settings['site_name']) ? $settings['site_name'] : 'Popular Computer Institute';
$site_tagline = isset($settings['site_tagline']) ? $settings['site_tagline'] : 'Computer Education Institute';
$site_logo = isset($settings['site_logo']) ? $settings['site_logo'] : '../assets/img/logo.png';
$primary_color = isset($settings['primary_color']) ? $settings['primary_color'] : '#4e73df';
$secondary_color = isset($settings['secondary_color']) ? $settings['secondary_color'] : '#2e59d9';
$navbar_style = isset($settings['navbar_style']) ? $settings['navbar_style'] : 'light';
$navbar_position = isset($settings['navbar_position']) ? $settings['navbar_position'] : 'fixed-top';
$enable_animations = isset($settings['enable_animations']) ? $settings['enable_animations'] : 'true';
$show_sitename_desktop = isset($settings['show_sitename_desktop']) ? $settings['show_sitename_desktop'] : 'true';
$show_sitename_mobile = isset($settings['show_sitename_mobile']) ? $settings['show_sitename_mobile'] : 'false';
$show_logo_desktop = isset($settings['show_logo_desktop']) ? $settings['show_logo_desktop'] : 'true';
$show_logo_mobile = isset($settings['show_logo_mobile']) ? $settings['show_logo_mobile'] : 'true';
$footer_text = isset($settings['footer_text']) ? $settings['footer_text'] : '© ' . date('Y') . ' ' . $site_name . '. All rights reserved.';
// Check if certificate fee setting exists, if not create it
$check_cert_fee = "SELECT id FROM site_settings WHERE setting_key = 'certificate_fee'";
$cert_fee_result = $conn->query($check_cert_fee);
if ($cert_fee_result && $cert_fee_result->num_rows === 0) {
$insert_cert_fee = "INSERT INTO site_settings (setting_key, setting_value, setting_group) VALUES ('certificate_fee', '700', 'payments')";
$conn->query($insert_cert_fee);
}
// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Basic Settings
$new_site_name = mysqli_real_escape_string($conn, $_POST['site_name']);
$new_site_tagline = mysqli_real_escape_string($conn, $_POST['site_tagline']);
$new_primary_color = mysqli_real_escape_string($conn, $_POST['primary_color']);
$new_secondary_color = mysqli_real_escape_string($conn, $_POST['secondary_color']);
// Navbar Settings
$new_navbar_style = mysqli_real_escape_string($conn, $_POST['navbar_style']);
$new_navbar_position = mysqli_real_escape_string($conn, $_POST['navbar_position']);
$new_show_sitename_desktop = isset($_POST['show_sitename_desktop']) ? $_POST['show_sitename_desktop'] : 'false';
$new_show_sitename_mobile = isset($_POST['show_sitename_mobile']) ? $_POST['show_sitename_mobile'] : 'false';
$new_show_logo_desktop = isset($_POST['show_logo_desktop']) ? $_POST['show_logo_desktop'] : 'false';
$new_show_logo_mobile = isset($_POST['show_logo_mobile']) ? $_POST['show_logo_mobile'] : 'false';
// Feature Settings
$new_enable_animations = isset($_POST['enable_animations']) ? 'true' : 'false';
// Footer Settings
$new_footer_text = mysqli_real_escape_string($conn, $_POST['footer_text']);
// Logo upload handling
$new_site_logo = $site_logo; // Default to current logo
if (isset($_FILES['site_logo']) && $_FILES['site_logo']['error'] === 0) {
$allowed_types = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'];
$file_type = $_FILES['site_logo']['type'];
if (in_array($file_type, $allowed_types)) {
$file_name = 'logo_' . time() . '_' . $_FILES['site_logo']['name'];
$upload_path = '../assets/img/' . $file_name;
if (move_uploaded_file($_FILES['site_logo']['tmp_name'], $upload_path)) {
$new_site_logo = 'assets/img/' . $file_name;
} else {
$error_message = 'Failed to upload logo. Please try again.';
}
} else {
$error_message = 'Invalid file type. Please upload JPEG, PNG, GIF, or SVG.';
}
}
// Update settings in database
$settings_to_update = [
'site_name' => $new_site_name,
'site_tagline' => $new_site_tagline,
'site_logo' => $new_site_logo,
'primary_color' => $new_primary_color,
'secondary_color' => $new_secondary_color,
'navbar_style' => $new_navbar_style,
'navbar_position' => $new_navbar_position,
'enable_animations' => $new_enable_animations,
'show_sitename_desktop' => $new_show_sitename_desktop,
'show_sitename_mobile' => $new_show_sitename_mobile,
'show_logo_desktop' => $new_show_logo_desktop,
'show_logo_mobile' => $new_show_logo_mobile,
'footer_text' => $new_footer_text
];
foreach ($settings_to_update as $key => $value) {
// Check if setting exists
$check_query = "SELECT * FROM site_settings WHERE setting_key = '$key'";
$check_result = mysqli_query($conn, $check_query);
if (mysqli_num_rows($check_result) > 0) {
// Update existing setting
$update_query = "UPDATE site_settings SET setting_value = '$value' WHERE setting_key = '$key'";
mysqli_query($conn, $update_query);
} else {
// Insert new setting
$insert_query = "INSERT INTO site_settings (setting_key, setting_value) VALUES ('$key', '$value')";
mysqli_query($conn, $insert_query);
}
}
// Show success message
$success_message = 'Settings updated successfully.';
// Update local variables to reflect new settings
$site_name = $new_site_name;
$site_tagline = $new_site_tagline;
$site_logo = $new_site_logo;
$primary_color = $new_primary_color;
$secondary_color = $new_secondary_color;
$navbar_style = $new_navbar_style;
$navbar_position = $new_navbar_position;
$enable_animations = $new_enable_animations;
$show_sitename_desktop = $new_show_sitename_desktop;
$show_sitename_mobile = $new_show_sitename_mobile;
$show_logo_desktop = $new_show_logo_desktop;
$show_logo_mobile = $new_show_logo_mobile;
$footer_text = $new_footer_text;
}
// Include header
include('includes/header.php');
?>
<div class="container-fluid">
<h1 class="h3 mb-4 text-gray-800">Website Settings</h1>
<?php if ($success_message): ?>
<div class="alert alert-success" role="alert">
<?php echo $success_message; ?>
</div>
<?php endif; ?>
<?php if ($error_message): ?>
<div class="alert alert-danger" role="alert">
<?php echo $error_message; ?>
</div>
<?php endif; ?>
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">UI Customization</h6>
<div>
<button class="btn btn-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#previewSection">
<i class="fas fa-eye"></i> Preview Changes
</button>
</div>
</div>
<div class="card-body">
<form method="post" action="" enctype="multipart/form-data">
<div class="row">
<!-- Settings Navigation -->
<div class="col-md-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="basic-tab" data-bs-toggle="pill" href="#basic" role="tab" aria-controls="basic" aria-selected="true">
<i class="fas fa-cog"></i> Basic Settings
</a>
<a class="nav-link" id="navbar-tab" data-bs-toggle="pill" href="#navbar" role="tab" aria-controls="navbar" aria-selected="false">
<i class="fas fa-bars"></i> Navbar Settings
</a>
<a class="nav-link" id="features-tab" data-bs-toggle="pill" href="#features" role="tab" aria-controls="features" aria-selected="false">
<i class="fas fa-magic"></i> Features
</a>
<a class="nav-link" id="footer-tab" data-bs-toggle="pill" href="#footer" role="tab" aria-controls="footer" aria-selected="false">
<i class="fas fa-shoe-prints"></i> Footer
</a>
<a class="nav-link" id="appearance-tab" data-bs-toggle="pill" href="#appearance" role="tab" aria-controls="appearance" aria-selected="false">
<i class="fas fa-paint-brush"></i> Appearance
</a>
</div>
</div>
<!-- Settings Content -->
<div class="col-md-9">
<div class="tab-content" id="v-pills-tabContent">
<!-- Basic Settings -->
<div class="tab-pane fade show active" id="basic" role="tabpanel" aria-labelledby="basic-tab">
<h5 class="border-bottom pb-2">Basic Information</h5>
<div class="form-group">
<label for="site_name">Site Name</label>
<input type="text" class="form-control" id="site_name" name="site_name" value="<?php echo $site_name; ?>" required>
</div>
<div class="form-group">
<label for="site_tagline">Site Tagline</label>
<input type="text" class="form-control" id="site_tagline" name="site_tagline" value="<?php echo $site_tagline; ?>">
</div>
<div class="form-group">
<label for="site_logo">Site Logo</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="site_logo" name="site_logo" accept="image/*">
<label class="custom-file-label" for="site_logo">Choose file...</label>
</div>
<small class="form-text text-muted">Recommended size: 200x50 pixels</small>
<?php if ($site_logo): ?>
<div class="mt-2">
<img src="../<?php echo $site_logo; ?>" alt="Current Logo" class="img-thumbnail" style="max-height: 80px;">
<small class="d-block">Current logo</small>
</div>
<?php endif; ?>
</div>
</div>
<!-- Navbar Settings -->
<div class="tab-pane fade" id="navbar" role="tabpanel" aria-labelledby="navbar-tab">
<h5 class="border-bottom pb-2">Navbar Customization</h5>
<div class="form-group">
<label>Navbar Style</label>
<div class="row mb-3">
<div class="col-md-6">
<div class="card h-100">
<div style="height: 60px; background-color: #ffffff;" class="d-flex align-items-center justify-content-center">
<span style="color: #333">Light Navbar</span>
</div>
<div class="card-body text-center">
<div class="custom-control custom-radio">
<input type="radio" id="navbar_style_light" name="navbar_style" class="custom-control-input" value="light" <?php echo ($navbar_style === 'light') ? 'checked' : ''; ?>>
<label class="custom-control-label" for="navbar_style_light">Light</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div style="height: 60px; background-color: #212529; color: white" class="d-flex align-items-center justify-content-center">
<span>Dark Navbar</span>
</div>
<div class="card-body text-center">
<div class="custom-control custom-radio">
<input type="radio" id="navbar_style_dark" name="navbar_style" class="custom-control-input" value="dark" <?php echo ($navbar_style === 'dark') ? 'checked' : ''; ?>>
<label class="custom-control-label" for="navbar_style_dark">Dark</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label>Navbar Position</label>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body text-center">
<div class="mb-3">
<i class="fas fa-arrow-up" style="font-size: 24px;"></i>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="navbar_position_fixed" name="navbar_position" class="custom-control-input" value="fixed-top" <?php echo ($navbar_position === 'fixed-top') ? 'checked' : ''; ?>>
<label class="custom-control-label" for="navbar_position_fixed">Fixed Top</label>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body text-center">
<div class="mb-3">
<i class="fas fa-thumbtack" style="font-size: 24px;"></i>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="navbar_position_sticky" name="navbar_position" class="custom-control-input" value="sticky-top" <?php echo ($navbar_position === 'sticky-top') ? 'checked' : ''; ?>>
<label class="custom-control-label" for="navbar_position_sticky">Sticky Top</label>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body text-center">
<div class="mb-3">
<i class="fas fa-arrows-alt-v" style="font-size: 24px;"></i>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="navbar_position_static" name="navbar_position" class="custom-control-input" value="static-top" <?php echo ($navbar_position === 'static-top') ? 'checked' : ''; ?>>
<label class="custom-control-label" for="navbar_position_static">Static Top</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group mt-4">
<h5 class="border-bottom pb-2">Brand Visibility</h5>
<div class="row">
<!-- Site Name Visibility -->
<div class="col-md-6">
<div class="card mb-4">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Site Name Visibility</h6>
</div>
<div class="card-body">
<div class="form-group">
<label for="show_sitename_desktop">On Desktop</label>
<select class="form-control" id="show_sitename_desktop" name="show_sitename_desktop">
<option value="true" <?php echo ($show_sitename_desktop == 'true') ? 'selected' : ''; ?>>Show</option>
<option value="false" <?php echo ($show_sitename_desktop == 'false') ? 'selected' : ''; ?>>Hide</option>
</select>
</div>
<div class="form-group mb-0">
<label for="show_sitename_mobile">On Mobile</label>
<select class="form-control" id="show_sitename_mobile" name="show_sitename_mobile">
<option value="true" <?php echo ($show_sitename_mobile == 'true') ? 'selected' : ''; ?>>Show</option>
<option value="false" <?php echo ($show_sitename_mobile == 'false') ? 'selected' : ''; ?>>Hide</option>
</select>
</div>
</div>
</div>
</div>
<!-- Logo Visibility -->
<div class="col-md-6">
<div class="card mb-4">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Logo Visibility</h6>
</div>
<div class="card-body">
<div class="form-group">
<label for="show_logo_desktop">On Desktop</label>
<select class="form-control" id="show_logo_desktop" name="show_logo_desktop">
<option value="true" <?php echo ($show_logo_desktop == 'true') ? 'selected' : ''; ?>>Show</option>
<option value="false" <?php echo ($show_logo_desktop == 'false') ? 'selected' : ''; ?>>Hide</option>
</select>
</div>
<div class="form-group mb-0">
<label for="show_logo_mobile">On Mobile</label>
<select class="form-control" id="show_logo_mobile" name="show_logo_mobile">
<option value="true" <?php echo ($show_logo_mobile == 'true') ? 'selected' : ''; ?>>Show</option>
<option value="false" <?php echo ($show_logo_mobile == 'false') ? 'selected' : ''; ?>>Hide</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="alert alert-info">
<i class="fas fa-info-circle"></i> You can control the visibility of both the site name and logo separately for desktop and mobile devices.
</div>
</div>
</div>
<!-- Features -->
<div class="tab-pane fade" id="features" role="tabpanel" aria-labelledby="features-tab">
<h5 class="border-bottom pb-2">Feature Settings</h5>
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="enable_animations" name="enable_animations" <?php echo ($enable_animations === 'true') ? 'checked' : ''; ?>>
<label class="custom-control-label" for="enable_animations">Enable Animations</label>
</div>
<small class="form-text text-muted">Enable animations for a more dynamic user experience</small>
</div>
<div class="alert alert-info">
<i class="fas fa-info-circle"></i> More features coming soon!
</div>
</div>
<!-- Footer Settings -->
<div class="tab-pane fade" id="footer" role="tabpanel" aria-labelledby="footer-tab">
<h5 class="border-bottom pb-2">Footer Settings</h5>
<div class="form-group">
<label for="footer_text">Footer Text</label>
<textarea class="form-control" id="footer_text" name="footer_text" rows="3"><?php echo $footer_text; ?></textarea>
<small class="form-text text-muted">You can use HTML tags</small>
</div>
</div>
<!-- Appearance Settings -->
<div class="tab-pane fade" id="appearance" role="tabpanel" aria-labelledby="appearance-tab">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Interface Appearance</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="primary_color">Primary Color</label>
<input type="color" class="form-control" id="primary_color" name="primary_color" value="<?php echo $primary_color; ?>">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="secondary_color">Secondary Color</label>
<input type="color" class="form-control" id="secondary_color" name="secondary_color" value="<?php echo $secondary_color; ?>">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="navbar_style">Navbar Style</label>
<select class="form-control" id="navbar_style" name="navbar_style">
<option value="light" <?php echo ($navbar_style == 'light') ? 'selected' : ''; ?>>Light</option>
<option value="dark" <?php echo ($navbar_style == 'dark') ? 'selected' : ''; ?>>Dark</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="navbar_position">Navbar Position</label>
<select class="form-control" id="navbar_position" name="navbar_position">
<option value="fixed-top" <?php echo ($navbar_position == 'fixed-top') ? 'selected' : ''; ?>>Fixed Top</option>
<option value="sticky-top" <?php echo ($navbar_position == 'sticky-top') ? 'selected' : ''; ?>>Sticky Top</option>
<option value="" <?php echo ($navbar_position == '') ? 'selected' : ''; ?>>Static (Default)</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="enable_animations">Enable Animations</label>
<select class="form-control" id="enable_animations" name="enable_animations">
<option value="true" <?php echo ($enable_animations == 'true') ? 'selected' : ''; ?>>Yes</option>
<option value="false" <?php echo ($enable_animations == 'false') ? 'selected' : ''; ?>>No</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-4 text-right">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save"></i> Save Settings
</button>
</div>
</form>
</div>
</div>
<!-- Preview Section (Hidden by default) -->
<div class="collapse mb-4" id="previewSection">
<div class="card shadow">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Preview</h6>
</div>
<div class="card-body">
<div id="preview-container" style="border: 1px solid #ddd; height: 400px; overflow: auto; position: relative;">
<nav id="preview-navbar" class="navbar navbar-expand-lg navbar-light" style="background-color: #ffffff;">
<div class="container">
<a class="navbar-brand" href="#" id="preview-brand">
<img id="preview-logo" src="../<?php echo $site_logo; ?>" alt="Logo" style="height: 40px; margin-right: 10px; display: <?php echo ($show_logo_desktop == 'true') ? 'inline-block' : 'none'; ?>;">
<span id="preview-site-name" style="display: <?php echo ($show_sitename_desktop == 'true') ? 'inline-block' : 'none'; ?>;"><?php echo $site_name; ?></span>
</a>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">Student</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">Exams</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
<div class="d-flex align-items-center">
<button class="btn btn-register me-2" id="preview-register">Register</button>
<button class="btn btn-login" id="preview-login">Login</button>
</div>
</div>
</div>
</nav>
<!-- Mobile view -->
<div style="margin-top: 20px; padding: 10px; border: 1px dashed #ccc;">
<h6 class="mb-2">Mobile Preview:</h6>
<div style="max-width: 320px; border: 1px solid #eee; padding: 10px; margin: 0 auto;">
<div style="display: flex; align-items: center;">
<img id="preview-logo-mobile" src="../<?php echo $site_logo; ?>" alt="Logo" style="height: 30px; margin-right: 10px; display: <?php echo ($show_logo_mobile == 'true') ? 'inline-block' : 'none'; ?>;">
<span id="preview-site-name-mobile" style="display: <?php echo ($show_sitename_mobile == 'true') ? 'inline-block' : 'none'; ?>;"><?php echo $site_name; ?></span>
<div style="margin-left: auto;">
<span style="font-size: 1.25rem;">☰</span>
</div>
</div>
</div>
</div>
<div style="padding: 20px;">
<h2 id="preview-heading"><?php echo $site_name; ?></h2>
<p id="preview-tagline"><?php echo $site_tagline; ?></p>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Sample Card</h5>
<p class="card-text">This is a sample card to preview your color scheme.</p>
<button class="btn btn-primary" id="preview-primary-btn">Primary Button</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Another Card</h5>
<p class="card-text">This is another sample card for preview.</p>
<button class="btn btn-secondary" id="preview-secondary-btn">Secondary Button</button>
</div>
</div>
</div>
</div>
</div>
<footer style="padding: 20px; background-color: #f8f9fc; margin-top: 20px;">
<div class="container">
<p id="preview-footer" class="mb-0 text-center"><?php echo $footer_text; ?></p>
</div>
</footer>
</div>
</div>
</div>
</div>
</div>
<?php
// Include footer
include('includes/footer.php');
?>
<!-- jQuery for Bootstrap file input -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Preview updates for navbar style
const navbarStyleInputs = document.querySelectorAll('input[name="navbar_style"]');
const previewNavbar = document.getElementById('preview-navbar');
navbarStyleInputs.forEach(input => {
input.addEventListener('change', function() {
if (this.value === 'light') {
previewNavbar.className = 'navbar navbar-expand-lg navbar-light';
previewNavbar.style.backgroundColor = '#ffffff';
} else {
previewNavbar.className = 'navbar navbar-expand-lg navbar-dark';
previewNavbar.style.backgroundColor = '#212529';
}
});
});
// Preview updates for site name
const siteNameInput = document.getElementById('site_name');
const previewSiteName = document.getElementById('preview-site-name');
const previewSiteNameMobile = document.getElementById('preview-site-name-mobile');
siteNameInput.addEventListener('input', function() {
previewSiteName.innerText = this.value;
previewSiteNameMobile.innerText = this.value;
});
// Preview updates for site name visibility on desktop
const showSitenameDesktop = document.getElementById('show_sitename_desktop');
showSitenameDesktop.addEventListener('change', function() {
previewSiteName.style.display = this.value === 'true' ? 'inline-block' : 'none';
});
// Preview updates for site name visibility on mobile
const showSitenameMobile = document.getElementById('show_sitename_mobile');
showSitenameMobile.addEventListener('change', function() {
previewSiteNameMobile.style.display = this.value === 'true' ? 'inline-block' : 'none';
});
// Preview updates for logo visibility on desktop
const showLogoDesktop = document.getElementById('show_logo_desktop');
const previewLogo = document.getElementById('preview-logo');
showLogoDesktop.addEventListener('change', function() {
previewLogo.style.display = this.value === 'true' ? 'inline-block' : 'none';
});
// Preview updates for logo visibility on mobile
const showLogoMobile = document.getElementById('show_logo_mobile');
const previewLogoMobile = document.getElementById('preview-logo-mobile');
showLogoMobile.addEventListener('change', function() {
previewLogoMobile.style.display = this.value === 'true' ? 'inline-block' : 'none';
});
// Logo upload preview
const logoInput = document.getElementById('site_logo');
logoInput.addEventListener('change', function() {
if (this.files && this.files[0]) {
const reader = new FileReader();
reader.onload = function(e) {
previewLogo.src = e.target.result;
previewLogoMobile.src = e.target.result;
};
reader.readAsDataURL(this.files[0]);
// Update custom file input label
const fileName = this.files[0].name;
const fileLabel = document.querySelector('.custom-file-label');
if (fileLabel) {
fileLabel.textContent = fileName;
}
}
});
});
</script>
