<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
session_start();

// Include access control functions
require_once '../includes/access_control.php';
require_once '../config/database.php';
require_once __DIR__ . '/../includes/site_settings.php';

// Admin only
require_admin();

$configPath = __DIR__ . '/../config/site.php';
$assetsDir = __DIR__ . '/../assets/images';
if (!is_dir($assetsDir)) mkdir($assetsDir, 0755, true);

$message = '';
$errors = [];

// Load existing config
$siteConfig = file_exists($configPath) ? include $configPath : [];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $site_name = trim($_POST['site_name'] ?? '');
    $site_address = trim($_POST['site_address'] ?? '');
    $contact_address = trim($_POST['contact_address'] ?? '');
    $contact_phone = trim($_POST['contact_phone'] ?? '');
    $contact_email = trim($_POST['contact_email'] ?? '');
    $dshe_text = trim($_POST['dshe_text'] ?? '');

    // Handle uploads with validation and backups
    // Header image: allow jpeg/png, max 5MB
    if (!empty($_FILES['header_image']['name']) && $_FILES['header_image']['error'] == 0) {
        $tmp = $_FILES['header_image']['tmp_name'];
        $info = @getimagesize($tmp);
        $maxHeader = 5 * 1024 * 1024;
        if (!$info) {
            $errors[] = 'Header image is not a valid image file.';
        } elseif (!in_array($info['mime'], ['image/jpeg', 'image/png'])) {
            $errors[] = 'Header image must be JPEG or PNG.';
        } elseif ($_FILES['header_image']['size'] > $maxHeader) {
            $errors[] = 'Header image must be <= 5MB.';
        } else {
            $extension = pathinfo($_FILES['header_image']['name'], PATHINFO_EXTENSION);
            $dest = $assetsDir . '/header.' . $extension;

            if (move_uploaded_file($tmp, $dest)) {
                $siteConfig['header_image'] = 'assets/images/header.' . $extension;
            } else {
                $errors[] = 'Failed to move uploaded header image.';
            }
        }
    }

    // Logo image: allow png/jpg, max 2MB
    if (!empty($_FILES['logo_image']['name']) && $_FILES['logo_image']['error'] == 0) {
        $tmp = $_FILES['logo_image']['tmp_name'];
        $info = @getimagesize($tmp);
        $maxLogo = 2 * 1024 * 1024;
        if (!$info) {
            $errors[] = 'Logo is not a valid image file.';
        } elseif (!in_array($info['mime'], ['image/png', 'image/jpeg'])) {
            $errors[] = 'Logo must be PNG or JPEG.';
        } elseif ($_FILES['logo_image']['size'] > $maxLogo) {
            $errors[] = 'Logo image must be <= 2MB.';
        } else {
            $extension = pathinfo($_FILES['logo_image']['name'], PATHINFO_EXTENSION);
            $dest = $assetsDir . '/logo.' . $extension;

            if (move_uploaded_file($tmp, $dest)) {
                $siteConfig['logo_image'] = 'assets/images/logo.' . $extension;
            } else {
                $errors[] = 'Failed to move uploaded logo image.';
            }
        }
    }

    $siteConfig['site_name'] = $site_name ?: ($siteConfig['site_name'] ?? 'আপনার প্রতিষ্ঠানের নাম');
    $siteConfig['site_address'] = $site_address ?: ($siteConfig['site_address'] ?? 'ঠিকানা: গ্রাম/থানা, জেলা, বাংলাদেশ');
    $siteConfig['contact_address'] = $contact_address ?: ($siteConfig['contact_address'] ?? "কুড়ুলগাছি মাধ্যমিক বিদ্যালয়\nদামুড়হুদা, চুয়াডাঙ্গা, বাংলাদেশ");
    $siteConfig['contact_phone'] = $contact_phone ?: ($siteConfig['contact_phone'] ?? '+8801 ******');
    $siteConfig['contact_email'] = $contact_email ?: ($siteConfig['contact_email'] ?? 'info@school.edu.bd');
    $siteConfig['dshe_text'] = $dshe_text ?: ($siteConfig['dshe_text'] ?? 'মাধ্যমিক ও উচ্চ শিক্ষা অধিদপ্তরের নির্দেশনা অনুযায়ী তৈরী করা হয়েছে');
    
    // DSHE text customization settings
    $dshe_text_color = trim($_POST['dshe_text_color'] ?? '');
    $dshe_text_animation = trim($_POST['dshe_text_animation'] ?? '');
    $dshe_animation_duration = isset($_POST['dshe_animation_duration']) ? floatval($_POST['dshe_animation_duration']) : (float)($siteConfig['dshe_animation_duration'] ?? 2.0);
    
    $siteConfig['dshe_text_color'] = $dshe_text_color ?: ($siteConfig['dshe_text_color'] ?? '#FFC107'); // Default to yellow warning color
    $siteConfig['dshe_text_animation'] = $dshe_text_animation ?: ($siteConfig['dshe_text_animation'] ?? 'none');
    $siteConfig['dshe_animation_duration'] = $dshe_animation_duration;
    
    // Site name size setting
    $site_name_size = isset($_POST['site_name_size']) ? floatval($_POST['site_name_size']) : (float)($siteConfig['site_name_size'] ?? 2.5);
    $siteConfig['site_name_size'] = $site_name_size;

    // New customizer fields
    $logo_opacity = isset($_POST['logo_opacity']) ? floatval($_POST['logo_opacity']) : (float)($siteConfig['logo_opacity'] ?? 0.9);
    $logo_size = isset($_POST['logo_size']) ? intval($_POST['logo_size']) : intval($siteConfig['logo_size'] ?? 100);
    $logo_pos = isset($_POST['logo_pos']) ? $_POST['logo_pos'] : ($siteConfig['logo_pos'] ?? 'left');
    $site_name_pos = isset($_POST['site_name_pos']) ? $_POST['site_name_pos'] : ($siteConfig['site_name_pos'] ?? 'left');
    $site_address_pos = isset($_POST['site_address_pos']) ? $_POST['site_address_pos'] : ($siteConfig['site_address_pos'] ?? 'left');
    $overlay_color = isset($_POST['overlay_color']) ? $_POST['overlay_color'] : ($siteConfig['overlay_color'] ?? 'rgba(0,0,0,0.35)');

    $siteConfig['logo_opacity'] = $logo_opacity;
    $siteConfig['logo_size'] = $logo_size;
    $siteConfig['logo_pos'] = $logo_pos;
    $siteConfig['site_name_pos'] = $site_name_pos;
    $siteConfig['site_address_pos'] = $site_address_pos;
    $siteConfig['overlay_color'] = $overlay_color;

    // Persist to DB (preferred) and fallback to file
    $dbSaved = false;
    try {
        // Ensure table exists
        $pdo->exec("CREATE TABLE IF NOT EXISTS site_settings (
            id INT AUTO_INCREMENT PRIMARY KEY,
            `key` VARCHAR(191) NOT NULL UNIQUE,
            `value` TEXT NULL,
            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
            updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;");

        // Save each setting
        set_setting($pdo, 'site_name', $siteConfig['site_name']);
        set_setting($pdo, 'site_address', $siteConfig['site_address']);
        set_setting($pdo, 'contact_address', $siteConfig['contact_address']);
        set_setting($pdo, 'contact_phone', $siteConfig['contact_phone']);
        set_setting($pdo, 'contact_email', $siteConfig['contact_email']);
        set_setting($pdo, 'header_image', $siteConfig['header_image'] ?? '');
        set_setting($pdo, 'logo_image', $siteConfig['logo_image'] ?? '');
        set_setting($pdo, 'logo_opacity', $siteConfig['logo_opacity']);
        set_setting($pdo, 'logo_size', $siteConfig['logo_size']);
        set_setting($pdo, 'logo_pos', $siteConfig['logo_pos']);
        set_setting($pdo, 'site_name_pos', $siteConfig['site_name_pos']);
        set_setting($pdo, 'site_address_pos', $siteConfig['site_address_pos']);
        set_setting($pdo, 'overlay_color', $siteConfig['overlay_color']);
        set_setting($pdo, 'dshe_text', $siteConfig['dshe_text']);
        set_setting($pdo, 'dshe_text_color', $siteConfig['dshe_text_color']);
        set_setting($pdo, 'dshe_text_animation', $siteConfig['dshe_text_animation']);
        set_setting($pdo, 'dshe_animation_duration', $siteConfig['dshe_animation_duration']);
        set_setting($pdo, 'site_name_size', $siteConfig['site_name_size']);

        $dbSaved = true;
        $message = 'সেটিংস ডাটাবেজে সেভ হয়েছে।';
    } catch (Exception $e) {
        // fallback to file
        $export = var_export($siteConfig, true);
        $php = "<?php\n// Site configuration (generated)\nreturn $export;\n";
        if (file_put_contents($configPath, $php) !== false) {
            $message = 'সেটিংস ফাইলে সেভ হয়েছে (DB তে সমস্যা)।';
        } else {
            $message = 'কনফিগ ফাইল লেখার সময় সমস্যা হয়েছে।';
        }
    }


}

?>
<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>সাইট সেটিংস</title>
    <link href="../assets/css/style.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Yashore Board-inspired styles -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Bangla:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Noto Sans Bangla', 'Helvetica', Arial, sans-serif; background:#f4f7fb; }
        .yashore-header { background: linear-gradient(90deg,#0b4f6c,#0e7c86); color:white; padding:18px 24px; border-radius:8px; margin-bottom:18px; }
        .yashore-title { font-size:1.25rem; font-weight:700; }
        .yashore-sub { opacity:0.9; font-size:0.95rem; }
        .yashore-panel { background:white; border-radius:8px; padding:18px; box-shadow:0 6px 24px rgba(12,38,64,0.06); }
        .yashore-left { background: linear-gradient(180deg,#072b44,#064a5f); color:white; border-radius:8px; padding:20px; }
        .yashore-left h5 { color:#fff; }
        .form-label { font-weight:600; }
        .btn-primary { background:#0b6b86; border-color:#0b6b86; }
        #bannerPreview { height:160px; }
        @media(min-width:992px){ .yashore-grid { display:grid; grid-template-columns: 320px 1fr; gap:18px; } }
    </style>
</head>
<body class="p-4">
    <?php if (file_exists(__DIR__ . '/../includes/banner.php')) { require_once __DIR__ . '/../includes/banner.php'; } ?>
    <div class="container">
        <div class="yashore-header d-flex align-items-center justify-content-between">
            <div>
                <div class="yashore-title">সাইট সেটিংস</div>
                <div class="yashore-sub">যশোর বোর্ড স্টাইল - সাইট কনফিগারেশন</div>
            </div>
            <div>
                <small>ব্যবহারকারী: <?php echo htmlspecialchars($siteConfig['site_name'] ?? $siteConfig['site_name'] ?? 'অ্যাডমিন'); ?></small>
            </div>
        </div>
        <?php if ($message): ?>
            <div class="alert alert-success"><?php echo htmlspecialchars($message); ?></div>
        <?php endif; ?>
        <?php if (!empty($errors)): ?>
            <div class="alert alert-danger">
                <ul class="mb-0">
                    <?php foreach ($errors as $err): ?>
                        <li><?php echo htmlspecialchars($err); ?></li>
                    <?php endforeach; ?>
                </ul>
            </div>
        <?php endif; ?>

        <div class="yashore-grid">
            <div class="yashore-left">
                <h5>প্রিভিউ</h5>
                <p class="small">রিয়েল-টাইম প্রিভিউ দেখুন এবং পরিবর্তন সেভ করুন।</p>
                <div class="mt-3">
                    <div id="bannerPreview" style="position:relative; border-radius:6px; overflow:hidden;">
                        <div id="previewImage" style="position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(0.85);"></div>
                        <div id="previewOverlay" style="position:absolute; inset:0; background:<?php echo htmlspecialchars($siteConfig['overlay_color'] ?? 'rgba(0,0,0,0.35)'); ?>;"></div>
                        <div style="position:relative; z-index:2; display:flex; align-items:center; padding:12px;">
                            <img id="previewLogo" src="../<?php echo !empty($siteConfig['logo_image']) ? $siteConfig['logo_image'] : 'assets/images/logo.png'; ?>" style="height:<?php echo htmlspecialchars($siteConfig['logo_size'] ?? 100); ?>px; margin-right:12px; opacity:<?php echo htmlspecialchars($siteConfig['logo_opacity'] ?? 0.9); ?>;" width="<?php echo htmlspecialchars($siteConfig['logo_size'] ?? 100); ?>">
                            <div style="color:white; width: 100%;">
                                <div style="font-weight:700; text-align: <?php echo $siteConfig['site_name_pos'] ?? 'left'; ?>;"><?php echo htmlspecialchars($siteConfig['site_name'] ?? 'আপনার প্রতিষ্ঠানের নাম'); ?></div>
                                <div style="font-size:12px; text-align: <?php echo $siteConfig['site_address_pos'] ?? 'left'; ?>;"><?php echo htmlspecialchars($siteConfig['site_address'] ?? 'ঠিকানা...'); ?></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="yashore-panel">
        <form method="post" enctype="multipart/form-data">
            <div class="mb-3">
                <label class="form-label">সাইট নাম</label>
                <input type="text" name="site_name" class="form-control" value="<?php echo htmlspecialchars($siteConfig['site_name'] ?? ''); ?>">
            </div>
            <div class="mb-3">
                <label class="form-label">ঠিকানা</label>
                <input type="text" name="site_address" class="form-control" value="<?php echo htmlspecialchars($siteConfig['site_address'] ?? ''); ?>">
            </div>
            <div class="mb-3">
                <label class="form-label">যোগাযোগের ঠিকানা</label>
                <textarea name="contact_address" class="form-control" rows="3"><?php echo htmlspecialchars($siteConfig['contact_address'] ?? "কুড়ুলগাছি মাধ্যমিক বিদ্যালয়\nদামুড়হুদা, চুয়াডাঙ্গা, বাংলাদেশ"); ?></textarea>
                <div class="form-text">পাবলিক পেজে যোগাযোগ সেকশনে দেখানো হবে</div>
            </div>
            <div class="mb-3">
                <label class="form-label">যোগাযোগের ফোন নম্বর</label>
                <input type="text" name="contact_phone" class="form-control" value="<?php echo htmlspecialchars($siteConfig['contact_phone'] ?? '+8801 ******'); ?>">
                <div class="form-text">পাবলিক পেজে যোগাযোগ সেকশনে দেখানো হবে</div>
            </div>
            <div class="mb-3">
                <label class="form-label">যোগাযোগের ইমেইল</label>
                <input type="email" name="contact_email" class="form-control" value="<?php echo htmlspecialchars($siteConfig['contact_email'] ?? 'info@school.edu.bd'); ?>">
                <div class="form-text">পাবলিক পেজে যোগাযোগ সেকশনে দেখানো হবে</div>
            </div>
            <div class="mb-3">
                <label class="form-label">DSHE টেক্সট</label>
                <input type="text" name="dshe_text" class="form-control" value="<?php echo htmlspecialchars($siteConfig['dshe_text'] ?? 'মাধ্যমিক ও উচ্চ শিক্ষা অধিদপ্তরের নির্দেশনা অনুযায়ী তৈরী করা হয়েছে'); ?>">
                <div class="form-text">হেডারে প্রদর্শিত DSHE নির্দেশনা টেক্সট</div>
            </div>
            <div class="mb-3">
                <label class="form-label">DSHE টেক্সট কালার</label>
                <input type="color" name="dshe_text_color" class="form-control form-control-color" value="<?php echo htmlspecialchars($siteConfig['dshe_text_color'] ?? '#FFC107'); ?>">
                <div class="form-text">টেক্সটের কালার সিলেক্ট করুন</div>
            </div>
            <div class="mb-3">
                <label class="form-label">DSHE টেক্সট এনিমেশন</label>
                <select name="dshe_text_animation" class="form-select">
                    <option value="none" <?php echo (isset($siteConfig['dshe_text_animation']) && $siteConfig['dshe_text_animation']=='none') ? 'selected' : ''; ?>>কোনো এনিমেশন নেই</option>
                    <option value="fadeIn" <?php echo (isset($siteConfig['dshe_text_animation']) && $siteConfig['dshe_text_animation']=='fadeIn') ? 'selected' : ''; ?>>ফেইড ইন</option>
                    <option value="fadeOut" <?php echo (isset($siteConfig['dshe_text_animation']) && $siteConfig['dshe_text_animation']=='fadeOut') ? 'selected' : ''; ?>>ফেইড আউট</option>
                    <option value="pulse" <?php echo (isset($siteConfig['dshe_text_animation']) && $siteConfig['dshe_text_animation']=='pulse') ? 'selected' : ''; ?>>পালস্</option>
                    <option value="bounce" <?php echo (isset($siteConfig['dshe_text_animation']) && $siteConfig['dshe_text_animation']=='bounce') ? 'selected' : ''; ?>>বাউন্স</option>
                    <option value="slideInUp" <?php echo (isset($siteConfig['dshe_text_animation']) && $siteConfig['dshe_text_animation']=='slideInUp') ? 'selected' : ''; ?>>উপরে থেকে স্লাইড</option>
                    <option value="slideInDown" <?php echo (isset($siteConfig['dshe_text_animation']) && $siteConfig['dshe_text_animation']=='slideInDown') ? 'selected' : ''; ?>>নিচ থেকে স্লাইড</option>
                </select>
                <div class="form-text">টেক্সটের এনিমেশন স্টাইল সিলেক্ট করুন</div>
            </div>
            <div class="mb-3">
                <label class="form-label">DSHE টেক্সট এনিমেশন ডিউরেশন (সেকেন্ড)</label>
                <input type="number" step="0.1" min="0.5" max="10" name="dshe_animation_duration" class="form-control" value="<?php echo htmlspecialchars($siteConfig['dshe_animation_duration'] ?? 2.0); ?>">
                <div class="form-text">এনিমেশন ডিউরেশন সেকেন্ডে (0.5 থেকে 10 সেকেন্ড পর্যন্ত)</div>
            </div>
            <div class="mb-3">
                <label class="form-label">সাইট নামের সাইজ (রেম)</label>
                <input type="number" step="0.1" min="1" max="5" name="site_name_size" class="form-control" value="<?php echo htmlspecialchars($siteConfig['site_name_size'] ?? 2.5); ?>">
                <div class="form-text">সাইট নামের ফন্ট সাইজ (রেম এককে, 1 থেকে 5 রেম পর্যন্ত)</div>
            </div>
            <div class="mb-3">
                <label class="form-label">Header Image (header.jpg)</label>
                <input type="file" name="header_image" accept="image/*" class="form-control">
                <?php if (!empty($siteConfig['header_image']) && file_exists(__DIR__ . '/../' . $siteConfig['header_image'])): ?>
                    <img src="../<?php echo $siteConfig['header_image']; ?>" class="img-fluid mt-2" style="max-height:120px">
                <?php endif; ?>
            </div>
            <div class="mb-3">
                <label class="form-label">Logo Image (logo.png)</label>
                <input type="file" name="logo_image" accept="image/*" class="form-control">
                <?php if (!empty($siteConfig['logo_image']) && file_exists(__DIR__ . '/../' . $siteConfig['logo_image'])): ?>
                    <img src="../<?php echo $siteConfig['logo_image']; ?>" class="mt-2" style="max-height:80px">
                <?php endif; ?>
            </div>
            <hr>
            <h5>ব্যানার কাস্টমাইজার</h5>
            <div class="mb-3">
                <label class="form-label">Logo opacity (0-1)</label>
                <input type="number" step="0.01" min="0" max="1" name="logo_opacity" class="form-control" value="<?php echo htmlspecialchars($siteConfig['logo_opacity'] ?? 0.9); ?>">
            </div>
            <div class="mb-3">
                <label class="form-label">Logo size (%)</label>
                <input type="number" name="logo_size" min="10" max="300" class="form-control" value="<?php echo htmlspecialchars($siteConfig['logo_size'] ?? 100); ?>">
                <div class="form-text">Logo size as percentage (10-300%). Default is 100%.</div>
            </div>
            <div class="mb-3">
                <label class="form-label">Logo position</label>
                <select name="logo_pos" class="form-select">
                    <option value="left" <?php echo (isset($siteConfig['logo_pos']) && $siteConfig['logo_pos']=='left') ? 'selected' : ''; ?>>Left</option>
                    <option value="center" <?php echo (isset($siteConfig['logo_pos']) && $siteConfig['logo_pos']=='center') ? 'selected' : ''; ?>>Center</option>
                    <option value="right" <?php echo (isset($siteConfig['logo_pos']) && $siteConfig['logo_pos']=='right') ? 'selected' : ''; ?>>Right</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Site Name position</label>
                <select name="site_name_pos" class="form-select">
                    <option value="left" <?php echo (isset($siteConfig['site_name_pos']) && $siteConfig['site_name_pos']=='left') ? 'selected' : ''; ?>>Left</option>
                    <option value="center" <?php echo (isset($siteConfig['site_name_pos']) && $siteConfig['site_name_pos']=='center') ? 'selected' : ''; ?>>Center</option>
                    <option value="right" <?php echo (isset($siteConfig['site_name_pos']) && $siteConfig['site_name_pos']=='right') ? 'selected' : ''; ?>>Right</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Site Address position</label>
                <select name="site_address_pos" class="form-select">
                    <option value="left" <?php echo (isset($siteConfig['site_address_pos']) && $siteConfig['site_address_pos']=='left') ? 'selected' : ''; ?>>Left</option>
                    <option value="center" <?php echo (isset($siteConfig['site_address_pos']) && $siteConfig['site_address_pos']=='center') ? 'selected' : ''; ?>>Center</option>
                    <option value="right" <?php echo (isset($siteConfig['site_address_pos']) && $siteConfig['site_address_pos']=='right') ? 'selected' : ''; ?>>Right</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Overlay color (CSS rgba)</label>
                <input type="text" name="overlay_color" class="form-control" value="<?php echo htmlspecialchars($siteConfig['overlay_color'] ?? 'rgba(0,0,0,0.35)'); ?>">
                <div class="form-text">উদাহরণ: rgba(0,0,0,0.35) বা rgba(255,255,255,0.2)</div>
            </div>
            <button class="btn btn-primary" type="submit">সেভ করুন</button>
            <a href="../index.php" class="btn btn-secondary ms-2">ড্যাশবোর্ডে ফিরে যান</a>
        </form>
            <hr>
            <h5>প্রিভিউ</h5>
            <div id="bannerPreview" style="position:relative; border:1px solid #ddd; border-radius:8px; overflow:hidden; height:140px; display:flex; align-items:center;">
                <div id="previewImage" style="position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(0.85);"></div>
                <div id="previewOverlay" style="position:absolute; inset:0; background:<?php echo htmlspecialchars($siteConfig['overlay_color'] ?? 'rgba(0,0,0,0.35)'); ?>;"></div>
                <div style="position:relative; z-index:2; width:100%; padding:12px; display:flex; align-items:center;">
                    <img id="previewLogo" src="../<?php echo !empty($siteConfig['logo_image']) ? $siteConfig['logo_image'] : 'assets/images/logo.png'; ?>" style="height:<?php echo htmlspecialchars($siteConfig['logo_size'] ?? 100); ?>px; margin-right:12px; opacity:<?php echo htmlspecialchars($siteConfig['logo_opacity'] ?? 0.9); ?>;" width="<?php echo htmlspecialchars($siteConfig['logo_size'] ?? 100); ?>">
                    <div style="color:white; width: 100%;">
                        <div style="font-weight:700; text-align: <?php echo $siteConfig['site_name_pos'] ?? 'left'; ?>;"><?php echo htmlspecialchars($siteConfig['site_name'] ?? 'আপনার প্রতিষ্ঠানের নাম'); ?></div>
                        <div style="font-size:12px; text-align: <?php echo $siteConfig['site_address_pos'] ?? 'left'; ?>;"><?php echo htmlspecialchars($siteConfig['site_address'] ?? 'ঠিকানা...'); ?></div>
                    </div>
                </div>
            </div>

            <script>
                // Live preview handlers
                const previewImage = document.getElementById('previewImage');
                const previewOverlay = document.getElementById('previewOverlay');
                const previewLogo = document.getElementById('previewLogo');

                function updatePreview() {
                    const overlay = document.querySelector('input[name="overlay_color"]').value;
                    const opacity = document.querySelector('input[name="logo_opacity"]').value;
                    const size = document.querySelector('input[name="logo_size"]').value;
                    const logoPos = document.querySelector('select[name="logo_pos"]').value;
                    const siteNamePos = document.querySelector('select[name="site_name_pos"]').value;
                    const siteAddressPos = document.querySelector('select[name="site_address_pos"]').value;
                    
                    previewOverlay.style.background = overlay;
                    previewLogo.style.opacity = opacity;
                    previewLogo.style.height = size + 'px';
                    previewLogo.style.width = size + 'px'; // Set width to be equal to height for square aspect ratio
                    previewLogo.style.margin = logoPos === 'center' ? '0 auto 0 0' : (logoPos === 'right' ? '0 0 0 auto' : '0 12px 0 0');
                    
                    // Update site name and address positioning
                    const siteName = document.querySelector('div[style*="font-weight:700"]');
                    const siteAddress = document.querySelector('div[style*="font-size:12px"]');
                    
                    if (siteName) {
                        siteName.style.textAlign = siteNamePos;
                    }
                    if (siteAddress) {
                        siteAddress.style.textAlign = siteAddressPos;
                    }
                }

                ['overlay_color','logo_opacity','logo_size','logo_pos','site_name_pos','site_address_pos'].forEach(name => {
                    const el = document.querySelector('[name="' + name + '"]');
                    if (el) el.addEventListener('input', updatePreview);
                });
                // initialize
                updatePreview();
            </script>
    </div>
</body>
</html>
