<?php
// Shared banner include: reads site settings (DB/File) and outputs the banner HTML
// Expected to be included where HTML <body> is open and Bootstrap is available.

// Load settings helper if available
$siteConfig = [];
try {
    // Try to get database connection if not already available
    if (!isset($pdo)) {
        if (file_exists(__DIR__ . '/../config/database.php')) {
            require_once __DIR__ . '/../config/database.php';
        }
    }
    
    if (file_exists(__DIR__ . '/site_settings.php')) {
        require_once __DIR__ . '/site_settings.php';
        if (isset($pdo)) {
            $dbSettings = get_all_settings($pdo);
            foreach ($dbSettings as $k => $v) $siteConfig[$k] = $v;
        }
    }
} catch (Exception $e) {
    error_log("Banner error: " . $e->getMessage());
    $siteConfig = [];
}

if (empty($siteConfig) && file_exists(__DIR__ . '/../config/site.php')) {
    $siteConfig = include __DIR__ . '/../config/site.php';
}

$site_name = $siteConfig['site_name'] ?? getenv('SITE_NAME') ?: 'আপনার প্রতিষ্ঠানের নাম';
$site_address = $siteConfig['site_address'] ?? getenv('SITE_ADDRESS') ?: 'ঠিকানা: গ্রাম/থানা, জেলা, বাংলাদেশ';
$headerImg = $siteConfig['header_image'] ?? (file_exists(__DIR__ . '/../assets/images/header.jpg') ? '../assets/images/header.jpg' : (file_exists(__DIR__ . '/../assets/images/header.png') ? '../assets/images/header.png' : ''));
$logoImg = $siteConfig['logo_image'] ?? (file_exists(__DIR__ . '/../assets/images/logo.jpg') ? '../assets/images/logo.jpg' : (file_exists(__DIR__ . '/../assets/images/logo.png') ? '../assets/images/logo.png' : ''));

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

// Watermark settings
$watermark_enabled = isset($siteConfig['watermark_enabled']) ? $siteConfig['watermark_enabled'] : '1';
$watermark_type = isset($siteConfig['watermark_type']) ? $siteConfig['watermark_type'] : 'text';
$watermark_texts = isset($siteConfig['watermark_texts']) ? $siteConfig['watermark_texts'] : "শিক্ষা জাতির মূলধন\nশিক্ষাই মানুষকে মুক্তি দেয়\nবিদ্যা মানুষের সবচেয়ে বড় সম্পদ\nশিক্ষার মাধ্যমে জাতি উন্নয়ন লাভ করে\nশিক্ষা ছাড়া কোন কিছুই সম্ভব নয়\nবিদ্যা নিকেতন - জ্ঞানের আলোয় আলোকিত\nশিক্ষার মাধ্যমে মানুষ সম্পূর্ণ মানবিক গুণাবলী অর্জন করে";
$watermark_font_size = isset($siteConfig['watermark_font_size']) ? intval($siteConfig['watermark_font_size']) : 24;
$watermark_opacity = isset($siteConfig['watermark_opacity']) ? floatval($siteConfig['watermark_opacity']) : 0.15;
$watermark_speed = isset($siteConfig['watermark_speed']) ? intval($siteConfig['watermark_speed']) : 40;
$watermark_animation = isset($siteConfig['watermark_animation']) ? $siteConfig['watermark_animation'] : 'slide_bidirectional';
$watermark_image_paths = isset($siteConfig['watermark_image_paths']) ? $siteConfig['watermark_image_paths'] : '';
$watermark_image_width = isset($siteConfig['watermark_image_width']) ? intval($siteConfig['watermark_image_width']) : 300;
$watermark_image_height = isset($siteConfig['watermark_image_height']) ? intval($siteConfig['watermark_image_height']) : 150;

// DSHE text setting
$dshe_text = $siteConfig['dshe_text'] ?? 'মাধ্যমিক ও উচ্চ শিক্ষা অধিদপ্তরের নির্দেশনা অনুযায়ী তৈরী করা হয়েছে';
$dshe_text_color = $siteConfig['dshe_text_color'] ?? '#FFC107'; // Default yellow color
$dshe_text_animation = $siteConfig['dshe_text_animation'] ?? 'none';
$dshe_animation_duration = isset($siteConfig['dshe_animation_duration']) ? floatval($siteConfig['dshe_animation_duration']) : 2.0; // Default 2 seconds
$site_name_size = isset($siteConfig['site_name_size']) ? floatval($siteConfig['site_name_size']) : 2.5; // Default 2.5 rem

// Convert texts to array for display
$watermark_texts_array = explode("\n", $watermark_texts);
// Convert image paths to array
$watermark_image_paths_array = !empty($watermark_image_paths) ? explode(',', $watermark_image_paths) : [];
?>

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<style>
.educational-watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}
.watermark-text-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.watermark-item {
  position: absolute;
  font-size: <?php echo $watermark_font_size; ?>px;
  font-weight: bold;
  color: rgba(255, 255, 255, <?php echo $watermark_opacity; ?>);
  white-space: nowrap;
  transform-origin: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-family: 'Hind Siliguri', sans-serif;
  opacity: 0;
}

.watermark-item:nth-child(1) { top: 20%; }
.watermark-item:nth-child(2) { top: 40%; }
.watermark-item:nth-child(3) { top: 70%; }
.watermark-item:nth-child(4) { top: 30%; }
.watermark-item:nth-child(5) { top: 60%; }
.watermark-item:nth-child(6) { top: 10%; }
.watermark-item:nth-child(7) { top: 80%; }

/* Custom animation for DSHE text */
@keyframes pulse-animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes bounce-animation {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

@keyframes fade-animation {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.watermark-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.watermark-image {
  width: <?php echo $watermark_image_width; ?>px;
  height: <?php echo $watermark_image_height; ?>px;
  object-fit: contain;
  max-width: <?php echo $watermark_image_width; ?>px;
  max-height: <?php echo $watermark_image_height; ?>px;
}
@keyframes rotateWatermark {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 1; }
}

@keyframes slideRightLeft {
  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;
  }
}
</style>

<!-- Dynamic DSHE text animation styles -->
<style>
<?php if ($dshe_text_animation !== 'none'): ?>
.dshe-text-pulse {
    animation: pulse-animation <?php echo $dshe_animation_duration; ?>s infinite;
}

.dshe-text-bounce {
    animation: bounce-animation <?php echo $dshe_animation_duration; ?>s infinite;
}

.dshe-text-fade {
    animation: fade-animation <?php echo ($dshe_animation_duration * 1.5); ?>s infinite;
}
<?php endif; ?>
</style>

<!-- DSHE Style Banner with Background Image -->
<div class="container-fluid" style="position: relative; padding: 0;">
  <?php if ($headerImg): ?>
    <div style="background: url('<?php echo htmlspecialchars($headerImg); ?>') center/cover no-repeat; height: 200px; position: relative;">
      <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: <?php echo htmlspecialchars($overlay_color); ?>;"></div>
  <?php else: ?>
    <div style="background: linear-gradient(135deg, #006747 0%, #004d35 100%); height: 200px; position: relative;">
  <?php endif; ?>
  
  <!-- Watermark Effect -->
  <?php if ($watermark_enabled === '1'): ?>
    <div class="educational-watermark">
      <?php if ($watermark_type === 'text'): ?>
        <div class="watermark-text-container">
          <?php foreach ($watermark_texts_array as $index => $text): ?>
            <?php if (!empty(trim($text))): ?>
              <div class="watermark-item" data-index="<?php echo $index; ?>"><?php echo htmlspecialchars($text); ?></div>
            <?php endif; ?>
          <?php endforeach; ?>
        </div>
      <?php elseif ($watermark_type === 'image' && !empty($watermark_image_paths_array)): ?>
        <div class="watermark-image-container" style="opacity: <?php echo $watermark_opacity; ?>;">
          <!-- We'll cycle through images with JavaScript -->
          <?php foreach ($watermark_image_paths_array as $index => $image_path): ?>
              <img src="<?php echo './' . htmlspecialchars($image_path); ?>" alt="Watermark <?php echo $index + 1; ?>" class="watermark-image" style="display: <?php echo $index === 0 ? 'block' : 'none'; ?>; width: <?php echo $watermark_image_width; ?>px; height: <?php echo $watermark_image_height; ?>px; object-fit: contain;">
          <?php endforeach; ?>
        </div>      <?php endif; ?>
    </div>
  <?php endif; ?>
  
  <!-- Foreground Content -->
  <div class="container" style="position: relative; height: 100%; display: flex; align-items: center; z-index: 2;">
    <div class="row align-items-center" style="width: 100%;">
      <?php if ($logo_pos == 'right'): ?>
        <div class="col-md-10 <?php echo $site_name_pos == 'center' ? 'text-center' : ($site_name_pos == 'right' ? 'text-end' : 'text-start'); ?>">
          <h1 class="display-6 fw-bold text-white mb-1" style="font-size: <?php echo $site_name_size; ?>rem; text-align: <?php echo $site_name_pos; ?>;"><?php echo htmlspecialchars($site_name); ?></h1>
          <p class="text-white mb-0" style="text-align: <?php echo $site_address_pos; ?>;"><?php echo htmlspecialchars($site_address); ?></p>
          <?php
          // Map animations to custom CSS classes for better control
          $dshe_animation_class = '';
          if ($dshe_text_animation !== 'none') {
              switch ($dshe_text_animation) {
                  case 'pulse':
                      $dshe_animation_class = 'dshe-text-pulse';
                      break;
                  case 'bounce':
                      $dshe_animation_class = 'dshe-text-bounce';
                      break;
                  case 'fadeIn':
                  case 'fadeOut':
                      $dshe_animation_class = 'dshe-text-fade';
                      break;
                  default:
                      $dshe_animation_class = 'animate__animated animate__' . $dshe_text_animation . ' animate__infinite';
                      break;
              }
          }
          ?>
          <p class="fw-bold mb-0 <?php echo $dshe_animation_class; ?>" style="text-align: center; color: <?php echo htmlspecialchars($dshe_text_color); ?>;"><?php echo htmlspecialchars($dshe_text); ?></p>
        </div>
        <div class="col-md-2 text-center">
          <?php if ($logoImg): ?>
            <img src="<?php echo $logoImg; ?>" alt="Logo" class="img-fluid" style="max-height: <?php echo $logo_size; ?>px; opacity: <?php echo $logo_opacity; ?>;">
          <?php else: ?>
            <div class="bg-light border rounded-circle d-flex align-items-center justify-content-center" style="width: <?php echo $logo_size; ?>px; height: <?php echo $logo_size; ?>px; margin: 0 auto; opacity: <?php echo $logo_opacity; ?>;">
              <i class="fas fa-school fa-2x text-success"></i>
            </div>
          <?php endif; ?>
        </div>
      <?php elseif ($logo_pos == 'center'): ?>
        <div class="col-md-12 text-center">
          <?php if ($logoImg): ?>
            <img src="<?php echo $logoImg; ?>" alt="Logo" class="img-fluid" style="max-height: <?php echo $logo_size; ?>px; margin: 0 auto; opacity: <?php echo $logo_opacity; ?>;">
          <?php else: ?>
            <div class="bg-light border rounded-circle d-flex align-items-center justify-content-center" style="width: <?php echo $logo_size; ?>px; height: <?php echo $logo_size; ?>px; margin: 0 auto; opacity: <?php echo $logo_opacity; ?>;">
              <i class="fas fa-school fa-2x text-success"></i>
            </div>
          <?php endif; ?>
          <h1 class="display-6 fw-bold text-white mb-1" style="font-size: <?php echo $site_name_size; ?>rem; text-align: <?php echo $site_name_pos; ?>;"><?php echo htmlspecialchars($site_name); ?></h1>
          <p class="text-white mb-0" style="text-align: <?php echo $site_address_pos; ?>;"><?php echo htmlspecialchars($site_address); ?></p>
          <?php
          // Map animations to custom CSS classes for better control
          $dshe_animation_class = '';
          if ($dshe_text_animation !== 'none') {
              switch ($dshe_text_animation) {
                  case 'pulse':
                      $dshe_animation_class = 'dshe-text-pulse';
                      break;
                  case 'bounce':
                      $dshe_animation_class = 'dshe-text-bounce';
                      break;
                  case 'fadeIn':
                  case 'fadeOut':
                      $dshe_animation_class = 'dshe-text-fade';
                      break;
                  default:
                      $dshe_animation_class = 'animate__animated animate__' . $dshe_text_animation . ' animate__infinite';
                      break;
              }
          }
          ?>
          <p class="fw-bold mb-0 <?php echo $dshe_animation_class; ?>" style="text-align: center; color: <?php echo htmlspecialchars($dshe_text_color); ?>;"><?php echo htmlspecialchars($dshe_text); ?></p>
        </div>
      <?php else: ?>
        <div class="col-md-2 text-center">
          <?php if ($logoImg): ?>
            <img src="<?php echo $logoImg; ?>" alt="Logo" class="img-fluid" style="max-height: <?php echo $logo_size; ?>px; opacity: <?php echo $logo_opacity; ?>;">
          <?php else: ?>
            <div class="bg-light border rounded-circle d-flex align-items-center justify-content-center" style="width: <?php echo $logo_size; ?>px; height: <?php echo $logo_size; ?>px; margin: 0 auto; opacity: <?php echo $logo_opacity; ?>;">
              <i class="fas fa-school fa-2x text-success"></i>
            </div>
          <?php endif; ?>
        </div>
        <div class="col-md-10 <?php echo $site_name_pos == 'center' ? 'text-center' : ($site_name_pos == 'right' ? 'text-end' : 'text-start'); ?>">
          <h1 class="display-6 fw-bold text-white mb-1" style="font-size: <?php echo $site_name_size; ?>rem; text-align: <?php echo $site_name_pos; ?>;"><?php echo htmlspecialchars($site_name); ?></h1>
          <p class="text-white mb-0" style="text-align: <?php echo $site_address_pos; ?>;"><?php echo htmlspecialchars($site_address); ?></p>
          <?php
          // Map animations to custom CSS classes for better control
          $dshe_animation_class = '';
          if ($dshe_text_animation !== 'none') {
              switch ($dshe_text_animation) {
                  case 'pulse':
                      $dshe_animation_class = 'dshe-text-pulse';
                      break;
                  case 'bounce':
                      $dshe_animation_class = 'dshe-text-bounce';
                      break;
                  case 'fadeIn':
                  case 'fadeOut':
                      $dshe_animation_class = 'dshe-text-fade';
                      break;
                  default:
                      $dshe_animation_class = 'animate__animated animate__' . $dshe_text_animation . ' animate__infinite';
                      break;
              }
          }
          ?>
          <p class="fw-bold mb-0 <?php echo $dshe_animation_class; ?>" style="text-align: center; color: <?php echo htmlspecialchars($dshe_text_color); ?>;"><?php echo htmlspecialchars($dshe_text); ?></p>
        </div>
      <?php endif; ?>
    </div>
  </div>
  </div>
</div>

<!-- Border separator -->
<div style="height: 4px; background: #F42A41;"></div>

<script>
// Enhanced watermark animation with support for different animation types
document.addEventListener('DOMContentLoaded', function() {
    // Handle text watermark animation
    const watermarkItems = document.querySelectorAll('.watermark-item');
    const speed = <?php echo $watermark_speed; ?>;
    const animationType = '<?php echo $watermark_animation; ?>';
    
    if (watermarkItems.length > 0 && '<?php echo $watermark_type; ?>' === 'text') {
        // Animate each watermark item based on selected animation type
        watermarkItems.forEach((item, index) => {
            switch(animationType) {
                case 'slide':
                    animateWatermarkSlide(item, index, speed, 'right-to-left');
                    break;
                case 'fade':
                    animateWatermarkFade(item, index, speed);
                    break;
                case 'rotate':
                    animateWatermarkRotate(item, index, speed);
                    break;
                case 'slide_bidirectional':
                default:
                    animateWatermarkItem(item, index, speed);
                    break;
            }
        });
    }
    
    // Handle image watermark cycling
    const imageContainers = document.querySelectorAll('.watermark-image-container');
    if (imageContainers.length > 0 && '<?php echo $watermark_type; ?>' === 'image') {
        imageContainers.forEach(container => {
            cycleWatermarkImages(container, <?php echo $watermark_speed; ?>);
        });
    }
});

// Original bidirectional slide animation
function animateWatermarkItem(item, index, speed) {
    // Randomly choose direction: 0 = left to right, 1 = right to left
    const direction = Math.random() > 0.5 ? 1 : 0;
    const delay = index * 3000; // Stagger the animations
    
    // Set initial position based on direction
    if (direction === 0) {
        // Left to right
        item.style.left = '-100%';
        item.style.right = 'auto';
        item.style.transform = 'translateX(0)';
    } else {
        // Right to left
        item.style.left = 'auto';
        item.style.right = '-100%';
        item.style.transform = 'translateX(0)';
    }
    
    // Apply animation with delay
    setTimeout(() => {
        item.style.transition = `all ${speed/2}s linear`;
        item.style.opacity = '1';
        
        if (direction === 0) {
            // Move from left to right
            item.style.left = '100%';
            item.style.right = 'auto';
        } else {
            // Move from right to left
            item.style.left = 'auto';
            item.style.right = '100%';
        }
        
        // Fade out at the end and restart
        setTimeout(() => {
            item.style.opacity = '0';
            // Restart the animation after a pause
            setTimeout(() => {
                animateWatermarkItem(item, index, speed);
            }, 1000);
        }, (speed/2 - 1) * 1000);
    }, delay);
}

// Right to left slide animation
function animateWatermarkSlide(item, index, speed, direction) {
    // Set initial position (right side)
    item.style.left = '100%';
    item.style.right = 'auto';
    item.style.opacity = '0';
    
    // Apply animation with delay
    const delay = index * 2000;
    setTimeout(() => {
        item.style.transition = `all ${speed/2}s linear`;
        item.style.opacity = '1';
        item.style.left = '-100%';
        
        // Restart the animation after completion
        setTimeout(() => {
            item.style.transition = 'none';
            item.style.left = '100%';
            item.style.opacity = '0';
            
            // Restart after a brief pause
            setTimeout(() => {
                animateWatermarkSlide(item, index, speed, direction);
            }, 500);
        }, (speed/2) * 1000);
    }, delay);
}

// Fade in/out animation
function animateWatermarkFade(item, index, speed) {
    // Set initial state
    item.style.opacity = '0';
    
    // Apply animation with delay
    const delay = index * 2000;
    setTimeout(() => {
        item.style.transition = `opacity ${speed/4}s ease-in-out`;
        
        // Fade in
        item.style.opacity = '<?php echo $watermark_opacity; ?>';
        
        // Fade out after half the cycle
        setTimeout(() => {
            item.style.opacity = '0';
            
            // Restart after a brief pause
            setTimeout(() => {
                animateWatermarkFade(item, index, speed);
            }, 500);
        }, (speed/2) * 1000);
    }, delay);
}

// Rotate animation
function animateWatermarkRotate(item, index, speed) {
    // Set initial position
    item.style.opacity = '<?php echo $watermark_opacity; ?>';
    item.style.left = '50%';
    item.style.top = (20 + (index * 10)) % 80 + '%';
    item.style.transform = 'translate(-50%, -50%) rotate(0deg)';
    
    // Apply rotation animation
    item.style.transition = `transform ${speed}s linear`;
    item.style.transform = 'translate(-50%, -50%) rotate(360deg)';
    
    // Restart after completion
    setTimeout(() => {
        item.style.transition = 'none';
        item.style.transform = 'translate(-50%, -50%) rotate(0deg)';
        
        // Restart after a brief pause
        setTimeout(() => {
            animateWatermarkRotate(item, index, speed);
        }, 500);
    }, speed * 1000);
}

function cycleWatermarkImages(container, speed) {
    const images = container.querySelectorAll('.watermark-image');
    if (images.length < 1) return;
    
    // If there's only one image, just display it
    if (images.length === 1) {
        images[0].style.display = 'block';
        return;
    }
    
    let currentIndex = 0;
    
    // Initially show the first image
    images[currentIndex].style.display = 'block';
    
    function showNextImage() {
        // Hide current image
        images[currentIndex].style.display = 'none';
        
        // Move to next image
        currentIndex = (currentIndex + 1) % images.length;
        
        // Show next image
        images[currentIndex].style.display = 'block';
        
        // Schedule next image change
        setTimeout(showNextImage, speed * 250); // Change image every quarter of the animation cycle
    }
    
    // Start cycling images
    setTimeout(showNextImage, speed * 250);
}</script>