<?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();

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

// Default watermark settings
$default_watermark_settings = [
    'watermark_enabled' => '1',
    'watermark_texts' => "শিক্ষা জাতির মূলধন\nশিক্ষাই মানুষকে মুক্তি দেয়\nবিদ্যা মানুষের সবচেয়ে বড় সম্পদ\nশিক্ষার মাধ্যমে জাতি উন্নয়ন লাভ করে\nশিক্ষা ছাড়া কোন কিছুই সম্ভব নয়\nবিদ্যা নিকেতন - জ্ঞানের আলোয় আলোকিত\nশিক্ষার মাধ্যমে মানুষ সম্পূর্ণ মানবিক গুণাবলী অর্জন করে",
    'watermark_font_size' => '24',
    'watermark_opacity' => '0.15',
    'watermark_speed' => '40',
    'watermark_animation' => 'slide_bidirectional',
    'watermark_type' => 'text', // text or image
    'watermark_image_paths' => '', // Comma-separated list of image paths
    'watermark_image_width' => '300', // Custom width for image watermark
    'watermark_image_height' => '150' // Custom height for image watermark
];

// Load existing watermark settings
$watermark_settings = [];
foreach ($default_watermark_settings as $key => $default_value) {
    $watermark_settings[$key] = get_setting($pdo, $key, $default_value);
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Process form submission
    $watermark_settings['watermark_enabled'] = isset($_POST['watermark_enabled']) ? '1' : '0';
    $watermark_settings['watermark_texts'] = trim($_POST['watermark_texts']);
    $watermark_settings['watermark_font_size'] = intval($_POST['watermark_font_size']);
    $watermark_settings['watermark_opacity'] = floatval($_POST['watermark_opacity']);
    $watermark_settings['watermark_speed'] = intval($_POST['watermark_speed']);
    $watermark_settings['watermark_animation'] = $_POST['watermark_animation'];
    $watermark_settings['watermark_type'] = $_POST['watermark_type'];
    $watermark_settings['watermark_image_width'] = isset($_POST['watermark_image_width']) ? intval($_POST['watermark_image_width']) : 300;
    $watermark_settings['watermark_image_height'] = isset($_POST['watermark_image_height']) ? intval($_POST['watermark_image_height']) : 150;
    
    // Handle multiple watermark image uploads
    $uploaded_image_paths = [];
    if (!empty($_FILES['watermark_images']['name'][0]) && is_array($_FILES['watermark_images']['name'])) {
        $file_count = count($_FILES['watermark_images']['name']);
        
        for ($i = 0; $i < $file_count; $i++) {
            if (!empty($_FILES['watermark_images']['name'][$i]) && $_FILES['watermark_images']['error'][$i] == 0) {
                $tmp = $_FILES['watermark_images']['tmp_name'][$i];
                $info = @getimagesize($tmp);
                $maxSize = 2 * 1024 * 1024; // 2MB
                
                if (!$info) {
                    $errors[] = 'ওয়াটারমার্ক ইমেজ একটি ভ্যালিড ইমেজ ফাইল নয়: ' . $_FILES['watermark_images']['name'][$i];
                } elseif (!in_array($info['mime'], ['image/png', 'image/jpeg', 'image/gif'])) {
                    $errors[] = 'ওয়াটারমার্ক ইমেজ PNG, JPEG অথবা GIF হতে হবে: ' . $_FILES['watermark_images']['name'][$i];
                } elseif ($_FILES['watermark_images']['size'][$i] > $maxSize) {
                    $errors[] = 'ওয়াটারমার্ক ইমেজ ২MB এর কম হতে হবে: ' . $_FILES['watermark_images']['name'][$i];
                } else {
                    $extension = pathinfo($_FILES['watermark_images']['name'][$i], PATHINFO_EXTENSION);
                    $assetsDir = __DIR__ . '/../assets/images';
                    if (!is_dir($assetsDir)) mkdir($assetsDir, 0755, true);
                    
                    // Create unique filename
                    $filename = 'watermark_' . time() . '_' . $i . '.' . $extension;
                    $dest = $assetsDir . '/' . $filename;
                    
                    if (move_uploaded_file($tmp, $dest)) {
                        $uploaded_image_paths[] = 'assets/images/' . $filename;
                    } else {
                        $errors[] = 'ওয়াটারমার্ক ইমেজ আপলোড করতে ব্যর্থ হয়েছে: ' . $_FILES['watermark_images']['name'][$i];
                    }
                }
            }
        }
    }
    
    // Combine existing images with newly uploaded ones
    $existing_image_paths = [];
    if (isset($_POST['existing_watermark_images']) && is_array($_POST['existing_watermark_images'])) {
        $existing_image_paths = $_POST['existing_watermark_images'];
    } elseif (!empty($watermark_settings['watermark_image_paths'])) {
        $existing_image_paths = explode(',', $watermark_settings['watermark_image_paths']);
    }
    
    // Merge existing and new images
    $all_image_paths = array_merge($existing_image_paths, $uploaded_image_paths);
    
    // Remove any duplicates and empty values
    $all_image_paths = array_filter(array_unique($all_image_paths));
    
    // Update the image paths
    $watermark_settings['watermark_image_paths'] = implode(',', $all_image_paths);
    
    // Handle image deletion
    if (isset($_POST['delete_image'])) {
        $delete_path = $_POST['delete_image'];
        $image_paths = explode(',', $watermark_settings['watermark_image_paths']);
        $new_image_paths = [];
        
        foreach ($image_paths as $path) {
            if ($path !== $delete_path) {
                $new_image_paths[] = $path;
            } else {
                // Delete the actual file
                $full_path = __DIR__ . '/../' . $path;
                if (file_exists($full_path)) {
                    unlink($full_path);
                }
            }
        }
        
        $watermark_settings['watermark_image_paths'] = implode(',', $new_image_paths);
    }
    
    // Save settings if no errors
    if (empty($errors)) {
        try {
            foreach ($watermark_settings as $key => $value) {
                set_setting($pdo, $key, $value);
            }
            $message = 'ওয়াটারমার্ক সেটিংস সফলভাবে সেভ হয়েছে।';
        } catch (Exception $e) {
            $errors[] = 'সেটিংস সেভ করতে সমস্যা হয়েছে: ' . $e->getMessage();
        }
    }
    
    // Reload settings after saving
    foreach ($default_watermark_settings as $key => $default_value) {
        $watermark_settings[$key] = get_setting($pdo, $key, $default_value);
    }
}

// Convert texts to array for display
$watermark_texts_array = explode("\n", $watermark_settings['watermark_texts']);
// Convert image paths to array
$watermark_image_paths_array = !empty($watermark_settings['watermark_image_paths']) ? explode(',', $watermark_settings['watermark_image_paths']) : [];
?>
<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ওয়াটারমার্ক সেটিংস</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body { 
            font-family: 'Hind Siliguri', 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; 
        }
        @media(min-width:992px){ 
            .yashore-grid { 
                display:grid; 
                grid-template-columns: 320px 1fr; 
                gap:18px; 
            } 
        }
        /* Watermark Preview Styles */
        .watermark-item-preview {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        .image-preview-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        .image-preview-item {
            position: relative;
            width: 80px;
            height: 80px;
        }
        .image-preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 5px;
        }
        .image-preview-item .delete-btn {
            position: absolute;
            top: -8px;
            right: -8px;
            background: #dc3545;
            color: white;
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
    </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($_SESSION['username'] ?? 'অ্যাডমিন'); ?></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="watermarkPreview" style="position:relative; border-radius:6px; overflow:hidden; height:200px; background:linear-gradient(135deg, #006747 0%, #004d35 100%);">
                        <div class="educational-watermark-preview" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;">
                            <?php if ($watermark_settings['watermark_type'] === 'text' && $watermark_settings['watermark_enabled'] === '1'): ?>
                                <div class="watermark-text-container-preview" style="position: relative; width: 100%; height: 100%;">
                                    <?php foreach ($watermark_texts_array as $index => $text): ?>
                                        <?php if (!empty(trim($text))): ?>
                                            <div class="watermark-item-preview" 
                                                 style="position: absolute; 
                                                        font-size: <?php echo $watermark_settings['watermark_font_size']; ?>px; 
                                                        font-weight: bold; 
                                                        color: rgba(255, 255, 255, <?php echo $watermark_settings['watermark_opacity']; ?>); 
                                                        white-space: nowrap; 
                                                        transform-origin: center; 
                                                        top: <?php echo (20 + ($index * 10)) % 80; ?>%; 
                                                        left: <?php echo (10 + ($index * 15)) % 70; ?>%; 
                                                        transform: rotate(<?php echo ($index * 5 - 10); ?>deg);">
                                                <?php echo htmlspecialchars($text); ?>
                                            </div>
                                        <?php endif; ?>
                                    <?php endforeach; ?>
                                </div>
                            <?php elseif ($watermark_settings['watermark_type'] === 'image' && $watermark_settings['watermark_enabled'] === '1' && !empty($watermark_image_paths_array)): ?>
                                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: <?php echo $watermark_settings['watermark_opacity']; ?>;">
                                    <img src="./<?php echo $watermark_image_paths_array[0]; ?>" style="width: <?php echo $watermark_settings['watermark_image_width']; ?>px; height: <?php echo $watermark_settings['watermark_image_height']; ?>px; object-fit: contain;">
                                </div>
                            <?php endif; ?>
                        </div>
                        
                        <div style="position:relative; z-index:2; display:flex; align-items:center; padding:12px; height: 100%;">
                            <div style="color:white; width: 100%; text-align: center;">
                                <div style="font-weight:700; font-size: 1.5rem;">প্রতিষ্ঠানের নাম</div>
                                <div style="font-size:14px; margin-top: 8px;">ঠিকানা: গ্রাম/থানা, জেলা, বাংলাদেশ</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-3">
                    <h6>ওয়াটারমার্ক সেটিংস</h6>
                    <ul class="small">
                        <li>স্ট্যাটাস: <?php echo $watermark_settings['watermark_enabled'] === '1' ? 'সক্রিয়' : 'নিষ্ক্রিয়'; ?></li>
                        <li>ধরন: <?php echo $watermark_settings['watermark_type'] === 'text' ? 'টেক্সট' : 'ইমেজ'; ?></li>
                        <li>ফন্ট সাইজ: <?php echo $watermark_settings['watermark_font_size']; ?>px</li>
                        <li>স্বচ্ছতা: <?php echo $watermark_settings['watermark_opacity']; ?></li>
                        <li>অ্যানিমেশন: <?php echo $watermark_settings['watermark_animation']; ?></li>
                        <?php if ($watermark_settings['watermark_type'] === 'image'): ?>
                            <li>ইমেজ সংখ্যা: <?php echo count($watermark_image_paths_array); ?></li>
                            <li>ইমেজ প্রস্থ: <?php echo $watermark_settings['watermark_image_width']; ?>px</li>
                            <li>ইমেজ উচ্চতা: <?php echo $watermark_settings['watermark_image_height']; ?>px</li>
                        <?php endif; ?>
                    </ul>
                </div>
            </div>

            <div class="yashore-panel">
                <form method="post" enctype="multipart/form-data">
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="watermark_enabled" name="watermark_enabled" value="1" <?php echo $watermark_settings['watermark_enabled'] === '1' ? 'checked' : ''; ?>>
                        <label class="form-check-label" for="watermark_enabled">ওয়াটারমার্ক সক্রিয় করুন</label>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">ওয়াটারমার্ক ধরন</label>
                        <select name="watermark_type" class="form-select" id="watermarkType">
                            <option value="text" <?php echo $watermark_settings['watermark_type'] === 'text' ? 'selected' : ''; ?>>টেক্সট</option>
                            <option value="image" <?php echo $watermark_settings['watermark_type'] === 'image' ? 'selected' : ''; ?>>ইমেজ</option>
                        </select>
                    </div>
                    
                    <div id="textOptions" style="<?php echo $watermark_settings['watermark_type'] === 'text' ? '' : 'display:none;'; ?>">
                        <div class="mb-3">
                            <label class="form-label">ওয়াটারমার্ক টেক্সটসমূহ</label>
                            <textarea name="watermark_texts" class="form-control" rows="7" placeholder="প্রতিটি লাইনে একটি করে টেক্সট লিখুন"><?php echo htmlspecialchars($watermark_settings['watermark_texts']); ?></textarea>
                            <div class="form-text">প্রতিটি লাইনে একটি করে টেক্সট লিখুন</div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">ফন্ট সাইজ (পিক্সেল)</label>
                            <input type="number" name="watermark_font_size" class="form-control" value="<?php echo htmlspecialchars($watermark_settings['watermark_font_size']); ?>" min="12" max="48">
                        </div>
                    </div>
                    
                    <div id="imageOptions" style="<?php echo $watermark_settings['watermark_type'] === 'image' ? '' : 'display:none;'; ?>">
                        <div class="mb-3">
                            <label class="form-label">ওয়াটারমার্ক ইমেজসমূহ</label>
                            <input type="file" name="watermark_images[]" accept="image/*" class="form-control" multiple>
                            <div class="form-text">একাধিক ইমেজ নির্বাচন করুন (PNG, JPEG, GIF - প্রতিটি ২MB এর কম)</div>
                            
                            <?php if (!empty($watermark_image_paths_array)): ?>
                                <div class="image-preview-container">
                                    <?php foreach ($watermark_image_paths_array as $index => $image_path): ?>
                                        <?php if (file_exists(__DIR__ . '/../' . $image_path)): ?>
                                            <div class="image-preview-item">
                                                <img src="./<?php echo htmlspecialchars($image_path); ?>" alt="Watermark <?php echo $index + 1; ?>">
                                                <button type="submit" name="delete_image" value="<?php echo htmlspecialchars($image_path); ?>" class="delete-btn" onclick="return confirm('আপনি কি নিশ্চিত যে এই ইমেজটি মুছে ফেলতে চান?')">✕</button>
                                                <input type="hidden" name="existing_watermark_images[]" value="<?php echo htmlspecialchars($image_path); ?>">
                                            </div>
                                        <?php endif; ?>
                                    <?php endforeach; ?>
                                </div>
                            <?php endif; ?>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">ওয়াটারমার্ক ইমেজ প্রস্থ (পিক্সেল)</label>
                                <input type="number" name="watermark_image_width" class="form-control" value="<?php echo htmlspecialchars($watermark_settings['watermark_image_width']); ?>" min="50" max="6000">
                                <div class="form-text">ইমেজ ওয়াটারমার্কের প্রস্থ সেট করুন (পিক্সেলে)</div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">ওয়াটারমার্ক ইমেজ উচ্চতা (পিক্সেল)</label>
                                <input type="number" name="watermark_image_height" class="form-control" value="<?php echo htmlspecialchars($watermark_settings['watermark_image_height']); ?>" min="50" max="2000">
                                <div class="form-text">ইমেজ ওয়াটারমার্কের উচ্চতা সেট করুন (পিক্সেলে)</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">স্বচ্ছতা (0-1)</label>
                        <input type="number" step="0.01" min="0" max="1" name="watermark_opacity" class="form-control" value="<?php echo htmlspecialchars($watermark_settings['watermark_opacity']); ?>">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">অ্যানিমেশন গতি (সেকেন্ড)</label>
                        <input type="number" name="watermark_speed" class="form-control" value="<?php echo htmlspecialchars($watermark_settings['watermark_speed']); ?>" min="10" max="120">
                        <div class="form-text">অ্যানিমেশন সম্পূর্ণ হতে কত সেকেন্ড সময় লাগবে</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">অ্যানিমেশন ধরন</label>
                        <select name="watermark_animation" class="form-select">
                            <option value="slide_bidirectional" <?php echo $watermark_settings['watermark_animation'] === 'slide_bidirectional' ? 'selected' : ''; ?>>বাম↔ডান উভয়দিকে (Bidirectional)</option>
                            <option value="slide" <?php echo $watermark_settings['watermark_animation'] === 'slide' ? 'selected' : ''; ?>>ডান থেকে বাম (Right to Left)</option>
                            <option value="fade" <?php echo $watermark_settings['watermark_animation'] === 'fade' ? 'selected' : ''; ?>>ফেড ইন/আউট</option>
                            <option value="rotate" <?php echo $watermark_settings['watermark_animation'] === 'rotate' ? 'selected' : ''; ?>>রোটেট</option>
                        </select>
                    </div>
                    
                    <button class="btn btn-primary" type="submit">সেভ করুন</button>
                    <a href="index.php" class="btn btn-secondary ms-2">ড্যাশবোর্ডে ফিরে যান</a>
                </form>
            </div>
        </div>
    </div>
    
    <script>
        // Toggle between text and image options
        document.getElementById('watermarkType').addEventListener('change', function() {
            if (this.value === 'text') {
                document.getElementById('textOptions').style.display = '';
                document.getElementById('imageOptions').style.display = 'none';
            } else {
                document.getElementById('textOptions').style.display = 'none';
                document.getElementById('imageOptions').style.display = '';
            }
        });
        
        // Add file selection feedback
        document.addEventListener('DOMContentLoaded', function() {
            const fileInput = document.querySelector('input[type="file"][name="watermark_images[]"]');
            if (fileInput) {
                fileInput.addEventListener('change', function() {
                    if (this.files.length > 0) {
                        console.log(this.files.length + ' file(s) selected');
                    }
                });
            }
            
            // Preview animation based on selected animation type
            const animationSelect = document.querySelector('select[name="watermark_animation"]');
            const previewItems = document.querySelectorAll('.watermark-item-preview');
            const previewImageContainer = document.querySelector('#watermarkPreview img'); // Image preview container
            const speedInput = document.querySelector('input[name="watermark_speed"]');
            
            function applyPreviewAnimation() {
                const animationType = animationSelect.value;
                const speed = parseInt(speedInput.value) || 40;
                
                // Apply animation to text items if they exist
                if (previewItems.length > 0) {
                    previewItems.forEach((item, index) => {
                        // Reset any existing animations
                        item.style.animation = '';
                        item.style.transition = '';
                        item.style.transform = '';
                        item.style.opacity = '1';
                                    
                        // Apply new animation based on type
                        switch(animationType) {
                            case 'slide_bidirectional':
                                // For preview, we'll just show a simple back and forth animation
                                item.style.animation = `previewSlideBidirectional ${speed}s infinite`;
                                break;
                            case 'slide':
                                // Right to left slide
                                item.style.animation = `previewSlideRightLeft ${speed/2}s infinite`;
                                break;
                            case 'fade':
                                // Fade in/out
                                item.style.animation = `previewFadeInOut ${speed/2}s infinite`;
                                break;
                            case 'rotate':
                                // Rotate animation
                                item.style.animation = `previewRotate ${speed}s infinite`;
                                break;
                            default:
                                // Default to fade for unknown types
                                item.style.animation = `previewFadeInOut ${speed/2}s infinite`;
                        }
                    });
                }
                            
                // Apply animation to image preview if it exists
                if (previewImageContainer) {
                    // Get custom image size values
                    const imageWidthInput = document.querySelector('input[name="watermark_image_width"]');
                    const imageHeightInput = document.querySelector('input[name="watermark_image_height"]');
                    const customWidth = imageWidthInput ? parseInt(imageWidthInput.value) || 300 : 300;
                    const customHeight = imageHeightInput ? parseInt(imageHeightInput.value) || 150 : 150;
                                
                    // Update image size
                    previewImageContainer.style.width = customWidth + 'px';
                    previewImageContainer.style.height = customHeight + 'px';
                    previewImageContainer.style.objectFit = 'contain';
                                
                    // Reset any existing animations
                    previewImageContainer.style.animation = '';
                    previewImageContainer.style.transition = '';
                    previewImageContainer.style.transform = '';
                                
                    // Apply new animation based on type
                    switch(animationType) {
                        case 'slide_bidirectional':
                            previewImageContainer.style.animation = `previewSlideBidirectional ${speed}s infinite`;
                            break;
                        case 'slide':
                            previewImageContainer.style.animation = `previewSlideRightLeft ${speed/2}s infinite`;
                            break;
                        case 'fade':
                            previewImageContainer.style.animation = `previewFadeInOut ${speed/2}s infinite`;
                            break;
                        case 'rotate':
                            previewImageContainer.style.animation = `previewRotate ${speed}s infinite`;
                            break;
                        default:
                            previewImageContainer.style.animation = `previewFadeInOut ${speed/2}s infinite`;
                    }
                }
            }
            
            // Add CSS for preview animations
            const style = document.createElement('style');
            style.textContent = `
                @keyframes previewSlideBidirectional {
                    0% { transform: translateX(100%); opacity: 0; }
                    10% { opacity: 1; }
                    40% { transform: translateX(0); opacity: 1; }
                    50% { transform: translateX(0); opacity: 1; }
                    90% { transform: translateX(-100%); opacity: 1; }
                    100% { transform: translateX(-150%); opacity: 0; }
                }
                
                @keyframes previewSlideRightLeft {
                    0% { transform: translateX(100%); opacity: 0; }
                    10% { opacity: 1; }
                    40% { transform: translateX(0); opacity: 1; }
                    70% { transform: translateX(-100%); opacity: 1; }
                    80% { opacity: 0; }
                    100% { transform: translateX(-150%); opacity: 0; }
                }
                
                @keyframes previewFadeInOut {
                    0%, 100% { opacity: 0; }
                    20%, 80% { opacity: 1; }
                }
                
                @keyframes previewRotate {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            `;
            document.head.appendChild(style);
            
            // Apply animation when selections change
            if (animationSelect) {
                animationSelect.addEventListener('change', applyPreviewAnimation);
                speedInput.addEventListener('input', applyPreviewAnimation);
                
                // Add event listeners for image size inputs
                const imageWidthInput = document.querySelector('input[name="watermark_image_width"]');
                const imageHeightInput = document.querySelector('input[name="watermark_image_height"]');
                
                if (imageWidthInput) {
                    imageWidthInput.addEventListener('input', applyPreviewAnimation);
                }
                
                if (imageHeightInput) {
                    imageHeightInput.addEventListener('input', applyPreviewAnimation);
                }
                
                // Apply initial animation
                applyPreviewAnimation();
            }
        });
    </script>
</body>
</html>