<?php
// Enable error reporting for debugging
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);


require_once __DIR__ . '/vendor/autoload.php';

$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
$dotenv->load();
// Database connection
$host = $_ENV['DB_HOST'] ?? 'localhost';
$port = $_ENV['DB_PORT'] ?? 3306;
$dbname = $_ENV['DB_NAME'] ?? '';
$user = $_ENV['DB_USER'] ?? '';
$pass = $_ENV['DB_PASS'] ?? '';

try {
    // Create a database connection using PDO
    $pdo = new PDO("mysql:host=$host;port=$port;dbname=$dbname", $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    // Log and display the error message
    error_log("Database connection error: " . $e->getMessage());
    die("ERROR: Could not connect. " . $e->getMessage());
}

// Retrieve the content and display status from the database
$stmt = $pdo->prepare("SELECT content, display FROM rich_editor_content WHERE id = 1");
$stmt->execute();
$contentRow = $stmt->fetch(PDO::FETCH_ASSOC);

// If no content is found, set defaults
if (!$contentRow) {
    $contentRow = ['content' => '', 'display' => 0];
}


try {
    $stmt = $pdo->query("SELECT * FROM seo_metadata WHERE id = 2");
    $seoData = $stmt->fetch(PDO::FETCH_ASSOC);
} catch(PDOException $e) {
    // Log and display the error message
    error_log("Error fetching SEO data: " . $e->getMessage());
    // Handle the error as needed
}
try {
    $stmt = $pdo->prepare("SELECT message_text, status FROM social_share_settings WHERE id = 1");
    $stmt->execute();
    $settings = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($settings) {
        $shareMessage = $settings['message_text'];
        $isSharingEnabled = $settings['status'];
    }
} catch (PDOException $e) {
    // Optional: Handle error if needed
}

try {
    // Fetch banners and AdSense content from the database
    $stmt = $pdo->query("SELECT * FROM banners_adsense");
    $contentData = $stmt->fetchAll(PDO::FETCH_ASSOC);

    // Check if content data is fetched successfully
    if ($contentData) {
        foreach ($contentData as $row) {
            switch ($row['type']) {
                case 'banner_top':
                    $banner1_html = $row['content'];
                    break;
                case 'banner_bottom':
                    $banner2_html = $row['content'];
                    break;
                case 'adsense':
                    $adsense_html = $row['content'];
                    break;
                default:
                    // Handle unknown type
                    break;
            }
        }
    } else {
        // Handle case when no content data is found
        echo "No content data found.";
    }
} catch (PDOException $e) {
    // Log and display the error message
    error_log("Error fetching content data: " . $e->getMessage());
    // Handle error gracefully
}

// Database connection
$host = $_ENV['DB_HOST'] ?? 'localhost';
$port = $_ENV['DB_PORT'] ?? 3306;
$dbname = $_ENV['DB_NAME'] ?? '';
$user = $_ENV['DB_USER'] ?? '';
$pass = $_ENV['DB_PASS'] ?? '';


try {
    // Create a PDO database connection
    $pdo = new PDO("mysql:host=$host;port=$port;dbname=$dbname", $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // Query to fetch enabled media types
    $query = "SELECT media_type, enabled FROM media_settings WHERE media_type IN ('document', 'image', 'mp3', 'video')";
    $stmt = $pdo->query($query);

    // Store the enabled status for each media type
    $visibility = [];
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $visibility[$row['media_type']] = $row['enabled'];  // 1 = enabled, 0 = disabled
    }

    // Define visibility based on database values
    $documentVisible = isset($visibility['document']) && $visibility['document'] == 1;
    $imageVisible = isset($visibility['image']) && $visibility['image'] == 1;
    $mp3Visible = isset($visibility['mp3']) && $visibility['mp3'] == 1;
    $videoVisible = isset($visibility['video']) && $visibility['video'] == 1;

} catch (PDOException $e) {
    // Handle error if connection fails
    echo "Database connection failed: " . $e->getMessage();
    exit;
}
try {
    // Create a database connection using PDO
    $pdo = new PDO("mysql:host=$host;port=$port;dbname=$dbname", $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // Check if maintenance mode is active
    $stmt = $pdo->query("SELECT * FROM maintenance_mode WHERE active = 1");
    $maintenanceMode = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($maintenanceMode) {
        // Maintenance mode is active, display maintenance message
        ?>
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Maintenance Mode</title>
            <style>
                body {
                    font-family: Arial, sans-serif;
                    background-color: #f4f4f4;
                    text-align: center;
                    padding: 50px;
                }

                .maintenance-message {
                    background-color: #fff;
                    border-radius: 10px;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                    padding: 20px;
                    max-width: 600px;
                    margin: 0 auto;
                }

                .maintenance-title {
                    font-size: 24px;
                    font-weight: bold;
                    margin-bottom: 20px;
                }

                .maintenance-content {
                    font-size: 18px;
                    line-height: 1.6;
                }
            </style>
        </head>
        <body>
            <div class="maintenance-message">
                <h2 class="maintenance-title"><?php echo $maintenanceMode['title']; ?></h2>
                <p class="maintenance-content"><?php echo $maintenanceMode['message']; ?></p>
            </div>
        </body>
        </html>
        <?php
        exit; // Stop executing further code
    }
} catch(PDOException $e) {
    // Log and display the error message
    error_log("Database connection error: " . $e->getMessage());
    die("ERROR: Could not connect. " . $e->getMessage());
}
  // Fetch How It Works data
$stmt = $pdo->query('SELECT icon_svg, icon_title, icon_description FROM how_it_works');
$how_it_works = $stmt->fetchAll();


// Fetch FAQ data
$stmt = $pdo->query('SELECT question, answer FROM faqs');
$faqs = $stmt->fetchAll();
// Close the database connection
$pdo = null;


$showWidget = $_ENV['GTRANSLATER'] === 'true';
$blog = $_ENV['BLOG'] === 'true';
$featureboxes = $_ENV['FEATURE_BOXES'] === 'true';
$tawkTowidgetlink = $_ENV['TAWKTO_WIDGET_LINK'];


$faq = $_ENV['FAQ'] === 'true';
// Get the Tawk.to widget link from the environment
$tawkToDirectLink = $_ENV['TAWKTO_WIDGET_LINK'];

// Get the Tawk.to widget link from the environment
$tawkToDirectLink = $_ENV['TAWKTO_WIDGET_LINK'];

$googleAnalyticsMeasurementID = $_ENV['GOOGLE_ANALYTICS']; // Get the Google Analytics Measurement ID from the environment


// Convert the direct link to the embed link
function convertToEmbedLink($directLink)
{
  // Extract the chat ID from the direct link
  $matches = [];
  preg_match('/\/chat\/([a-zA-Z0-9\/]+)\/?/', $directLink, $matches);

  if (isset($matches[1])) {
    // If the chat ID is found, construct the embed link
    $embedLink = "https://embed.tawk.to/{$matches[1]}";
    return $embedLink;
  } else {
    // If no chat ID is found, return the original link
    return $directLink;
  }
}

try {
    // Create a database connection using PDO
    $host = $_ENV['DB_HOST'] ?? 'localhost';
    $port = $_ENV['DB_PORT'] ?? 3306;
    $dbname = $_ENV['DB_NAME'] ?? '';
    $user = $_ENV['DB_USER'] ?? '';
    $pass = $_ENV['DB_PASS'] ?? '';

    $pdo = new PDO("mysql:host=$host;port=$port;dbname=$dbname", $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // Retrieve latest 4 articles from the database
    $stmt = $pdo->query("SELECT * FROM blog_articles ORDER BY created_at DESC LIMIT 4");
    $articles = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
} catch(PDOException $e) {
    // Log and display the error message
    error_log("Database connection error: " . $e->getMessage());
    die("ERROR: Could not connect. " . $e->getMessage());
}
// Convert Tawk.to direct link to embed link
$tawkToEmbedLink = convertToEmbedLink($tawkToDirectLink);


// Construct the URL for the homepage (or any page URL dynamically)
$domain = $_SERVER['HTTP_HOST'];
$pageUrl = "https://$domain/index.php";

// Structured data for the homepage with dynamic SEO data
$structuredData = [
    "@context" => "https://schema.org",
    "@type" => "WebPage",
    "url" => $pageUrl,
    "name" => $seoData['title'] ?? 'Default Title',  // Use dynamic data or a fallback
    "description" => $seoData['seo_description'] ?? 'Default Description',  // Dynamic or fallback
    "keywords" => $seoData['seo_keywords'] ?? ''  // Dynamic or empty fallback
];

// Convert the structured data to JSON-LD format
$structuredDataJson = json_encode($structuredData, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);

$currentUrl = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";


?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title><?= htmlspecialchars($seoData['title'] ?? '') ?></title>
  <!-- Favicon -->
  <link rel="icon" href="admin/uploads/favicon.png" type="image/x-icon">


<!-- Include Leaflet.js CSS and JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
   <!-- SEO Meta Tags -->
   <meta name="description" content="<?= htmlspecialchars($seoData['seo_description'] ?? '') ?>">
    <meta name="keywords" content="<?= htmlspecialchars($seoData['seo_keywords'] ?? '') ?>">

 <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
   
    <meta property="og:title" content="<?= htmlspecialchars($seoData['open_graph_title'] ?? '') ?>">
    <meta property="og:description" content="<?= htmlspecialchars($seoData['open_graph_description'] ?? '') ?>">
    <meta property="og:image" content="admin/uploads/opengraph.png">
  <link rel="stylesheet" href="styles.css">
  
  <link rel="stylesheet" href="static/assets/css/styles.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/canvas2svg@1.0.16/canvas2svg.min.js
"></script>


<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type="application/ld+json">
        <?= $structuredDataJson ?>
    </script>

  <div class="adsense-container"><?php echo $adsense_html; ?></div>


<script>
    async function fetchReCaptchaKey() {
        try {
            const response = await fetch('get_recaptcha_key.php');
            const data = await response.json();
            return data.siteKey;
        } catch (error) {
            console.error('Error fetching reCAPTCHA key:', error);
            return null;
        }
    }

    function loadReCaptchaScript() {
        const script = document.createElement('script');
        script.src = 'https://www.google.com/recaptcha/api.js';
        script.async = true;
        script.defer = true;
        document.body.appendChild(script);
    }

    // Callback function for the document form
    window.onReCaptchaSuccessDocument = function() {
        console.log("reCAPTCHA completed successfully for document upload.");
        const fileInput = document.getElementById('documentFile');
        if (fileInput) {
            fileInput.disabled = false;
            console.log("Document file input enabled.");
        }
    };

    // Callback function for the MP3 form
    window.onReCaptchaSuccessMP3 = function() {
        console.log("reCAPTCHA completed successfully for MP3 upload.");
        const mp3Input = document.getElementById('mp3File');
        if (mp3Input) {
            mp3Input.disabled = false;
            console.log("MP3 file input enabled.");
        }
    };
  // Callback function for the 'photos' form reCAPTCHA success
    window.onReCaptchaSuccessPhoto = function() {
        console.log("reCAPTCHA completed successfully for photo upload.");
        const fileInput = document.getElementById('photoFile');
        if (fileInput) {
            fileInput.disabled = false;
            console.log("Photo file input enabled.");
        }
    };
    // Callback function for the video form reCAPTCHA success
    window.onReCaptchaSuccessVideo = function() {
        console.log("reCAPTCHA completed successfully for video upload.");
        const videoInput = document.getElementById('videoFile');
        if (videoInput) {
            videoInput.disabled = false;
            console.log("Video file input enabled.");
        }
    };
    
</script>


<script>
document.addEventListener('click', function(event) {
  var target = event.target;

  for (var i = 0; i < 5; i++) {
    if (target.tagName === 'A' && (target.parentElement.classList.contains('banner-container') || target.parentElement.classList.contains('secondbanner-container'))) {
      event.preventDefault();
      var url = target.getAttribute('href');
      window.open(url, '_blank');
      break;
    }
    target = target.parentElement;
    if (!target) break;
  }
});
</script>


<script>
  document.addEventListener('DOMContentLoaded', function () {
    const darkModeSwitch = document.querySelector('.input43');
    const body = document.body;

    const darkModeEnabled = localStorage.getItem('darkModeEnabled') === 'true';

    if (darkModeEnabled) {
      body.classList.add('dark');
      darkModeSwitch.checked = true; 
    } else {
      body.classList.remove('dark');
      darkModeSwitch.checked = false;
    }

    darkModeSwitch.addEventListener('change', function () {
      console.log('Switch changed:', darkModeSwitch.checked);

      if (darkModeSwitch.checked) {
        body.classList.add('dark');
        localStorage.setItem('darkModeEnabled', 'true');
      } else {
        body.classList.remove('dark');
        localStorage.setItem('darkModeEnabled', 'false');
      }

      console.log('dark class added?', body.classList.contains('dark'));
    });
  });
</script>


</head>


<?php
require_once 'header.php';
?>

  <div class="main">
    <div class="pt60 pt96-M pb48 pb72-L">
        <div class="container tac">
            <div class="mb48">
                <div class="fs28 fs56-M fw7 c3 dark-c8 lh13 mb12"><?= htmlspecialchars($seoData['index_page_title'] ?? '') ?></div>
                <div class="c2 dark-c4 fs20 fs32-M"><?= htmlspecialchars($seoData['index_page_lead_paragraph'] ?? '') ?></div>
                </div>
                <label for="dataType" class="c2 dark-c4 fs20 fs32-M"> </label>
 <div class="bgc12 dark-bgc9 dark-c8  mb72-M bgc12" style="padding:25px;  border-radius:12px; 
 box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);">
    <select id="dataType" name="dataType" class="styled-select">
        <option value="link">Link</option>
        <option value="text">Text</option>
        <option value="email">Email</option>
        <option value="location">Location</option>
        <option value="phone">Phone</option>
        <option value="sms">SMS</option>
        <option value="whatsapp">WhatsApp</option>
        <option value="skype">Skype</option>
        <option value="zoom">Zoom</option>
        <option value="wifi">WiFi</option>
        <option value="vcard">vCard</option>
                <option value="event">Event</option>

        <option value="paypal">PayPal</option>
                <option value="crypto">Crypto</option>
 <?php if ($documentVisible): ?>
        <option value="document">Documents</option>
    <?php endif; ?>   
        <?php if ($mp3Visible): ?>

    <option value="mp3">MP3</option> 
                        <?php endif; ?>
                            <?php if ($imageVisible): ?>

                    <option value="photos">Photos</option> 
                        <?php endif; ?>
    <?php if ($videoVisible): ?>

                                                                                <option value="videos">Videos</option> 
    <?php endif; ?>


    </select>
    </div>

 <script>
document.addEventListener("DOMContentLoaded", function() {
    var select = document.getElementById('dataType');

    function toggleLinkOption() {
        Array.from(select.options).forEach(function(option) {
            if (option.value === 'link') {
                option.selected = true;
                var event = new Event('change', { bubbles: true });
                select.dispatchEvent(event);
                
                var optionButton = document.querySelector('.option[data-value="link"]');
                optionButton.classList.add('selected');
            }
        });
    }

    toggleLinkOption();
});


</script>

<script>


</script>
   

<style>


        body {
            background: <?php echo getCssValue('body', 'background', $pdo); ?>;
        }

        .c3 {
            color: <?php echo getCssValue('.c3', 'color', $pdo); ?>;
        }

        .dark body {
            background: <?php echo getCssValue('.dark body', 'background', $pdo); ?>;
        }

        .dark .dark-c8 {
            color: <?php echo getCssValue('.dark .dark-c8', 'color', $pdo); ?>;
        }
        
     .h1{
            color: <?php echo getCssValue('.c3', 'color', $pdo); ?>;
        }
  .h2{
            color: <?php echo getCssValue('.c3', 'color', $pdo); ?>;
        }
        .h3{
            color: <?php echo getCssValue('.c3', 'color', $pdo); ?>;
        }
:root {
    --dark-mode-bg-color: <?php echo getCssValue('.dark .dark-c8', 'color', $pdo); ?>;
}

input[type="submit"] {
    background-color: <?php echo getCssValue('.c3', 'color', $pdo); ?>; 
}

.dark input[type="submit"] {
    background-color: var(--dark-mode-bg-color); 
}
/* Style for each option button */
.select-container .option {
    padding: 8px 10px;
    border: 1px solid <?php echo getCssValue('.c3', 'color', $pdo); ?>;
    border-radius: 7px;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Hover effect */
.select-container .option:hover {
    border-color: <?php echo getCssValue('.c3', 'color', $pdo); ?>;
    box-shadow: 0 0 35px <?php echo getCssValue('.c3', 'color', $pdo); ?>;
}

/* Flexbox container */
.select-container {
    display: flex;
    align-items: center; /* Aligns items vertically to the center */
    justify-content: center; /* Aligns items horizontally to the center */
    gap: 12px; /* Adds space between items */
}

/* Selected option style */
.select-container .option.selected {
    border: 2.2px solid <?php echo getCssValue('.c3', 'color', $pdo); ?>;
    box-shadow: 0 0 20px <?php echo getCssValue('.c3', 'color', $pdo); ?>;
    transform: translate(-6px) scale(1.08) rotateX(5deg);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
    

    </style>
    
    
<body>

<body>
<div class="pb72">
        <div class="layout-wrapper">
            <div class="bgc12 dark-bgc9 py48 py72-L px16 br12 form-section" style="
 box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);">
                <div class="accordion-wrapper">
                    <div class="accordion">
                                <div id="dataInput"></div>
              <br>

<button class="accordion-btn tac fs24 fs40-M fw6 c3 dark-c8 mb24" style="border-radius:50px;">
    <svg class="icon wh60 c3 c3 dark-c8 mr8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M512 256c0 .9 0 1.8 0 2.7c-.4 36.5-33.6 61.3-70.1 61.3H344c-26.5 0-48 21.5-48 48c0 3.4 .4 6.7 1 9.9c2.1 10.2 6.5 20 10.8 29.9c6.1 13.8 12.1 27.5 12.1 42c0 31.8-21.6 60.7-53.4 62c-3.5 .1-7 .2-10.6 .2C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm0-96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM288 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>
    Colors
</button>
                       <div class="panel">
                             

<!-- Background Color Section -->
<div style="margin: 20px;">
    <label for="bgcolor" class="c2 dark-c4 fs20 fs32-M" style="font-size: 20px; margin-bottom: 10px;">
        Background Color:
    </label>
    <input type="color" id="bgcolor" name="bgcolor" value="#ffffff"
        style="width: 100%; height: 50px; border: none; border-radius: 5px; cursor: pointer; margin: 10px 0;">
    <br>
    
    <label for="transparent" class="c2 dark-c4 fs20 fs32-M"  style="font-size: 20px; margin-bottom: 10px;">
        <input type="checkbox" id="transparent" name="transparent"  style="cursor: pointer; margin-right: 5px;">
        Use Transparent Background
    </label>
</div>

<!-- Background Gradient Type -->
<div id="bg-gradient-section" >
    <label for="bgGradientType" class="c2 dark-c4 fs20 fs32-M" style="font-size:20px;">Background Gradient Type:</label>
    <select id="bgGradientType" name="bgGradientType" style="width: 100%; height: 40px; border-radius: 5px; margin: 10px 0;">
        <option value="none">None</option>
        <option value="linear">Linear</option>
        <option value="radial">Radial</option>
    </select>
</div>

<!-- Background Gradient Colors -->
<div id="bgGradientOptions" style="display: none; text-align: center; border-radius: 15px; max-width: 300px; width: 100%; margin: 0 auto; justify-content: center;">
    <label for="bgGradientStartColor" class="c2 dark-c4 fs20 fs32-M" style="font-size: 20px; margin-bottom: 10px; display: block;">
        Background Gradient Start Color:
    </label>
    <input 
        type="color" 
        id="bgGradientStartColor" 
        name="bgGradientStartColor" 
        value="#ffffff" 
        style="width: 100%; height: 40px; border: none; border-radius: 5px; cursor: pointer; margin-bottom: 20px;"
    />
    <br>
    <label for="bgGradientEndColor" class="c2 dark-c4 fs20 fs32-M" style="font-size: 20px; margin-bottom: 10px; display: block;">
        Background Gradient End Color:
    </label>
    <input 
        type="color" 
        id="bgGradientEndColor" 
        name="bgGradientEndColor" 
        value="#ffffff" 
        style="width: 100%; height: 40px; border: none; border-radius: 5px; cursor: pointer; margin-bottom: 20px;"
    />
</div>

<script>
    const bgcolorInput = document.getElementById("bgcolor");
    const transparentCheckbox = document.getElementById("transparent");
    const bgGradientSection = document.getElementById("bg-gradient-section");
    const bgGradientOptions = document.getElementById("bgGradientOptions");
    const bgGradientType = document.getElementById("bgGradientType");

    // Add event listener to transparent checkbox
    transparentCheckbox.addEventListener("change", function () {
        if (this.checked) {
            bgcolorInput.style.display = "none"; // Hide the color picker
            bgcolorInput.value = "transparent"; // Set the value to transparent
            bgGradientSection.style.display = "none"; // Hide the gradient type section
            bgGradientOptions.style.display = "none"; // Hide the gradient colors section
            bgGradientType.value = "none"; // Reset gradient type to 'None'
        } else {
            bgcolorInput.style.display = "block"; // Show the color picker
            bgcolorInput.value = "#ffffff"; // Default to white or retain previous color
            bgGradientSection.style.display = "block"; // Show the gradient type section
            bgGradientOptions.style.display = bgGradientType.value !== "none" ? "block" : "none"; // Show gradient options based on type
        }
    });

    // Add event listener to gradient type dropdown
    bgGradientType.addEventListener("change", function () {
        if (this.value === "none") {
            bgGradientOptions.style.display = "none"; // Hide the gradient colors section if 'None' is selected
        } else {
            bgGradientOptions.style.display = "block"; // Show the gradient colors section if a gradient type is selected
        }
    });

    // Initial check for gradient type on page load
    if (bgGradientType.value === "none") {
        bgGradientOptions.style.display = "none"; // Hide gradient options by default if 'None' is selected
    } else {
        bgGradientOptions.style.display = "block"; // Show gradient options if a type is selected
    }
</script>


<!-- Dots Color -->
<label for="dotsColor" class="c2 dark-c4 fs20 fs32-M"  style=" font-size: 20px; margin-bottom: 10px; display: block;">
  Dots Color:
</label>
<input 
  type="color" 
  id="dotsColor" 
  name="dotsColor" 
  value="#000000" 
  style="width: 100%; height: 40px; border: none; border-radius: 5px; cursor: pointer; margin-bottom: 20px;"
/>
<br>

<!-- Dots Gradient Type -->
    <label for="dotsGradientType"  class="c2 dark-c4 fs20 fs32-M" style ="font-size:20px;">Dots Gradient Type:</label>
    <select id="dotsGradientType" name="dotsGradientType">
        <option value="none">None</option>
        <option value="linear">Linear</option>
        <option value="radial">Radial</option>
    </select>
    <br>

    <!-- Dots Gradient Colors -->
    <div id="dotsGradientOptions" style="display:none;">
    <div style="text-align:center; border-radius:5px; max-width:300px; width:100%; margin:0 auto; justify-content:center;">
        <label for="dotsGradientStartColor" class="c2 dark-c4 fs20 fs32-M" style="font-size:20px;">Dots Gradient Start Color:</label>
        <input type="color" id="dotsGradientStartColor" name="dotsGradientStartColor" value="#000000" style="width :100%; height:40px; border:none; border-radius:5px; cutsor:pointer; margin-bottom:20px;">
        <br>
        
        <label for="dotsGradientEndColor" class="c2 dark-c4 fs20 fs32-M" style="font-size:20px;">Dots Gradient End Color:</label>
        <input type="color" id="dotsGradientEndColor" name="dotsGradientEndColor" value="#000000" style="width:100%; height:40px; border:none; border-radius:5px; cursor:pointer; margin-bottom:30px;">
    </div>
    </div>
    <!-- Corners Square Color -->
    <label for="cornersSquareColor" class="c2 dark-c4 fs20 fs32-M" style="font-size:20px;">Corners Square Color:</label>
    <input type="color" id="cornersSquareColor" name="cornersSquareColor" value="#000000" style="width:100%; height:40px; border:none;  border-radius:5px; cursor:pointer; margin-bottom:30px;">
    <br>

    <!-- Corners Square Gradient Type -->
    <label for="cornersSquareGradientType" class="c2 dark-c4 fs20 fs32-M"
    style="font-size:20px;">Corners Square Gradient Type:</label>
    <select id="cornersSquareGradientType" name="cornersSquareGradientType">
        <option value="none">None</option>
        <option value="linear">Linear</option>
        <option value="radial">Radial</option>
    </select>
    <br>

    <!-- Corners Square Gradient Colors -->
    <div id="cornersSquareGradientOptions" style="display:none;">
    <div style="text-align: center; border-radius: 15px; max-width: 300px; width:100%; margin:0 auto; justify-content:center;">
        <label for="cornersSquareGradientStartColor" class="c2 dark-c4 fs20 fs32-M" style="font-size:20px;">Corners Square Gradient Start Color:</label>
        <input type="color" id="cornersSquareGradientStartColor" name="cornersSquareGradientStartColor" value="#000000" style=
        "width:100%; height:40px;border:none; border-radius:5px; cursor:pointer; margin-bottom:30px;">
        <br>
        
        <label for="cornersSquareGradientEndColor" class="c2 dark-c4 fs20 fs32-M" style="font-size:20px;">Corners Square Gradient End Color:</label>
        <input type="color" id="cornersSquareGradientEndColor" name="cornersSquareGradientEndColor" value="#000000"  style="width: 100%; height:40px; border: none; border-radius:5px; cursor:pointer; margin -bottom: 30px;">
    </div>
</div>
    <!-- Corners Dot Color -->
    <label for="cornersDotColor" class="c2 dark-c4 fs20 fs32-M" style="font-size:20px;">Corners Dot Color:</label>
    <input type="color" id="cornersDotColor" name="cornersDotColor" value="#000000"style="width: 100%; height:40px; border: none; border-radius: 5px; cursor:pointer; margin-bottom: 30px;" >
    <br>

    <!-- Corners Dot Gradient Type -->
    <label for="cornersDotGradientType" class="c2 dark-c4 fs20 fs32-M" style="font-size:20px;">Corners Dot Gradient Type:</label>
    <select id="cornersDotGradientType" name="cornersDotGradientType">
        <option value="none">None</option>
        <option value="linear">Linear</option>
        <option value="radial">Radial</option>
    </select>
    <br>

    <!-- Corners Dot Gradient Colors -->
    <div id="cornersDotGradientOptions" style="display:none;">
        <div style="text-align: center; border-radius: 15px; max-width: 300px; width:100%; margin:0 auto; justify-content:center;">
       <label for="cornersDotGradientStartColor" class="c2 dark-c4 fs20 fs32-M" style="font-size:20px;">Corners Dot Gradient Start Color:</label>
        <input type="color" id="cornersDotGradientStartColor" name="cornersDotGradientStartColor" value="#000000"  style="width: 100%; height:40px; border: none; border-radius: 5px; cursor:pointer; margin-bottom: 30px;">
        <br>
        
        <label for="cornersDotGradientEndColor" class="c2 dark-c4 fs20 fs32-M"style="font-size:20px;">Corners Dot Gradient End Color:</label>
        <input type="color" id="cornersDotGradientEndColor" name="cornersDotGradientEndColor" value="#000000" style="width: 100%; height:40px; border: none; border-radius: 5px; cursor:pointer; margin-bottom: 30px;">
    </div>
</div>
</div>
<script>// Toggle gradient options visibility based on selection
function toggleGradientOptions(elementId, targetId) {
    const gradientType = document.getElementById(elementId).value;
    const gradientOptions = document.getElementById(targetId);
    
    if (gradientType === 'linear' || gradientType === 'radial') {
        gradientOptions.style.display = 'block';
    } else {
        gradientOptions.style.display = 'none';
    }
}

// Add event listeners for all gradient type dropdowns
document.getElementById('bgGradientType').addEventListener('change', function() {
    toggleGradientOptions('bgGradientType', 'bgGradientOptions');
});
document.getElementById('dotsGradientType').addEventListener('change', function() {
    toggleGradientOptions('dotsGradientType', 'dotsGradientOptions');
});
document.getElementById('cornersSquareGradientType').addEventListener('change', function() {
    toggleGradientOptions('cornersSquareGradientType', 'cornersSquareGradientOptions');
});
document.getElementById('cornersDotGradientType').addEventListener('change', function() {
    toggleGradientOptions('cornersDotGradientType', 'cornersDotGradientOptions');
});
</script>
<script> const options = {
    backgroundOptions: {
        gradient: {
            type: document.getElementById('bgGradientType').value,
            colorStops: [
                { offset: 0, color: document.getElementById('bgGradientStartColor').value },
                { offset: 1, color: document.getElementById('bgGradientEndColor').value }
            ]
        }
    },
    dotsOptions: {
        gradient: {
            type: document.getElementById('dotsGradientType').value,
            colorStops: [
                { offset: 0, color: document.getElementById('dotsGradientStartColor').value },
                { offset: 1, color: document.getElementById('dotsGradientEndColor').value }
            ]
        }
    },
    cornersSquareOptions: {
        gradient: {
            type: document.getElementById('cornersSquareGradientType').value,
            colorStops: [
                { offset: 0, color: document.getElementById('cornersSquareGradientStartColor').value },
                { offset: 1, color: document.getElementById('cornersSquareGradientEndColor').value }
            ]
        }
    },
    cornersDotOptions: {
        gradient: {
            type: document.getElementById('cornersDotGradientType').value,
            colorStops: [
                { offset: 0, color: document.getElementById('cornersDotGradientStartColor').value },
                { offset: 1, color: document.getElementById('cornersDotGradientEndColor').value }
            ]
        }
    }
};

// Use these options to create the QRCodeStyling object with the new gradient settings.
</script>
<button class="accordion-btn tac fs24 fs40-M fw6 c3 dark-c8 mb24" style="border-radius:50px;">
    <svg class="icon wh60 c3 c3 dark-c8 mr8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM199.4 312.6c31.2 31.2 81.9 31.2 113.1 0c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9c-50 50-131 50-181 0s-50-131 0-181s131-50 181 0c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0c-31.2-31.2-81.9-31.2-113.1 0s-31.2 81.9 0 113.1z"/></svg>
    Logo
</button>                 <div class="panel">
    <!-- Logo Upload Section -->
    <label for="logo" class="c2 dark-c4 fs20 fs32-M">Upload Logo:</label>
   <!-- Example for the Clear Button and Logo Preview -->
<input type="file" id="logo" name="logo" onchange="previewLogo()" 
    style="border: 2px dashed #6c757d; border-radius: 8px; padding: 10px; width: 100%; max-width: 300px; text-align: center; font-family: Arial, sans-serif; font-size: 14px; color: #6c757d; cursor: pointer; background-color: #f8f9fa;" />

<img id="logoPreview" src="" alt="Logo Preview" style="display: none;">

<style> #logoPreview {
    width: 50px; /* Set the desired width */
    height: 50px; /* Set the desired height */
    object-fit: contain; /* Ensures the aspect ratio is maintained */
    display: block; /* Ensures the image is displayed as a block */
    margin-top: 10px; /* Optional: Add some space above the image */
    margin-bottom: 10px; /* Optional: Add some space below the image */
}
</style>
<button type="button" id="cancelLogoButton" style="display:none;" onclick="cancelLogo()">Clear</button>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var cancelLogoButton = document.getElementById('cancelLogoButton');
    
    // Ensure the cancel button is correctly handled
    cancelLogoButton.addEventListener('click', function() {
        cancelLogo();
    });
});

// Handle logo file upload and preview
function previewLogo() {
    var logoInput = document.getElementById('logo');
    var cancelButton = document.getElementById('cancelLogoButton');
    var logoPreview = document.getElementById('logoPreview');

    // Show cancel button when a logo is uploaded
    cancelButton.style.display = 'inline-block';

    var reader = new FileReader();
    reader.onload = function(event) {
        logoPreview.src = event.target.result;
        logoPreview.style.display = 'inline'; // Show the logo preview
    };
    reader.readAsDataURL(logoInput.files[0]);
}

function cancelLogo() {
    // Hide the logo preview
    document.getElementById('logoPreview').style.display = 'none';

    // Reset the logo input field
    document.getElementById('logo').value = '';

    // Hide the cancel button again after clearing the logo
    document.getElementById('cancelLogoButton').style.display = 'none';

    // Re-enable the "Generate QR" button (assuming it's disabled by default)
    var submitButton = document.querySelector('input[type="submit"]');
    submitButton.disabled = false;
}

</script>

<style>
    
</style>


<div style="display: flex; flex-direction: column; gap: 20px; width: 300px; padding: 20px; margin:0 auto; border-radius: 8px; margin-top:3px;">
    <label for="logoSize" class="c2 dark-c4 fs20 fs32-M" style="font-size: 1.2rem; font-weight: 600;  margin-bottom: 8px;">Logo Size:</label>
    <input type="range" id="logoSize" name="logoSize" min="0.1" max="1" step="0.01" value="0.8" oninput="updateLogoSize()" style="width: 100%; -webkit-appearance: none; height: 6px; background: linear-gradient(to right, #4CAF50, #FFC107); border-radius: 3px; outline: none; cursor: pointer;">
    <span id="logoSizeValue" class="c2 dark-c4 fs20 fs32-M"  style="font-size: 1rem; font-weight: 500;  margin-top: 8px;">80%</span>

    <label for="logoMargin" class="c2 dark-c4 fs20 fs32-M" style="font-size: 1.2rem; font-weight: 600; margin-bottom: 8px;">Logo Margin:</label>
    <input type="range" id="logoMargin" name="logoMargin" min="0" max="100" step="1" value="0" oninput="updateLogoMargin()" style="width: 100%; -webkit-appearance: none; height: 6px; background: linear-gradient(to right, #4CAF50, #FFC107); border-radius: 3px; outline: none; cursor: pointer;">
    <span id="logoMarginValue" class="c2 dark-c4 fs20 fs32-M"  style="font-size: 1rem; font-weight: 500;  margin-top: 8px;">0px</span>
</div>

<br>
<script>
  // Select all watermark options
document.querySelectorAll('.watermark-option').forEach(option => {
    option.addEventListener('click', function () {
        // If the clicked option already has the 'selected' class, remove it (unselect)
        if (this.classList.contains('selected')) {
            this.classList.remove('selected');
        } else {
            // Remove 'selected' class from all options
            document.querySelectorAll('.watermark-option').forEach(el => el.classList.remove('selected'));
            
            // Add 'selected' class to the clicked option
            this.classList.add('selected');
        }
    });
});

</script>
   <!-- Watermark Selection Section -->
    <label for="watermark" class="c2 dark-c4 fs20 fs32-M">Select Watermark Logo:</label>

<br>
    <div id="watermarkContainer"  style="display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 30px; align-items: center; justify-items: center;">
 
        <img src="watermark/link.png" alt="Watermark 1" class="watermark-option" onclick="selectWatermark('watermark/link.png')">
        <img src="watermark/message.png" alt="Watermark 2" class="watermark-option" onclick="selectWatermark('watermark/message.png')">
        <img src="watermark/mail.png" alt="Watermark 3" class="watermark-option" onclick="selectWatermark('watermark/mail.png')">
                <img src="watermark/google-maps.png" alt="Watermark 4" class="watermark-option" onclick="selectWatermark('watermark/google-maps.png')">
                                <img src="watermark/call.png" alt="Watermark 5" class="watermark-option" onclick="selectWatermark('watermark/call.png')">
                                <img src="watermark/talk.png" alt="Watermark 6" class="watermark-option" onclick="selectWatermark('watermark/talk.png')">
                                <img src="watermark/whatsapp.png" alt="Watermark 7" class="watermark-option" onclick="selectWatermark('watermark/whatsapp.png')">
                                <img src="watermark/skype.png" alt="Watermark 8" class="watermark-option" onclick="selectWatermark('watermark/skype.png')">
                                                                <img src="watermark/zoom.png" alt="Watermark 9" class="watermark-option" onclick="selectWatermark('watermark/zoom.png')">
                                                                <img src="watermark/zoom1.png" alt="Watermark 10" class="watermark-option" onclick="selectWatermark('watermark/zoom1.png')">
                                                                
                                                                <img src="watermark/wifi.png" alt="Watermark 11" class="watermark-option" onclick="selectWatermark('watermark/wifi.png')">

                                                                <img src="watermark/man.png" alt="Watermark 12" class="watermark-option" onclick="selectWatermark('watermark/man.png')">

                                                                <img src="watermark/event.png" alt="Watermark 13" class="watermark-option" onclick="selectWatermark('watermark/event.png')">
                                                                <img src="watermark/paypal.png" alt="Watermark 14" class="watermark-option" onclick="selectWatermark('watermark/paypal.png')">
                                                                <img src="watermark/bitcoin.png" alt="Watermark 15" class="watermark-option" onclick="selectWatermark('watermark/bitcoin.png')">
                                                                <img src="watermark/bitcoin-cash.png" alt="Watermark 16" class="watermark-option" onclick="selectWatermark('watermark/bitcoin-cash.png')">
                                                                <img src="watermark/ethereum.png" alt="Watermark 17" class="watermark-option" onclick="selectWatermark('watermark/ethereum.png')">
                                                                <img src="watermark/pdf.png" alt="Watermark 18" class="watermark-option" onclick="selectWatermark('watermark/pdf.png')">
                                                                <img src="watermark/docs.png" alt="Watermark 19" class="watermark-option" onclick="selectWatermark('watermark/docs.png')">
                                                                <img src="watermark/google-drive.png" alt="Watermark 20" class="watermark-option" onclick="selectWatermark('watermark/google-drive.png')">
                                                                <img src="watermark/mp3.png" alt="Watermark 21" class="watermark-option" onclick="selectWatermark('watermark/mp3.png')">
                                                                <img src="watermark/apple.png" alt="Watermark 22" class="watermark-option" onclick="selectWatermark('watermark/apple.png')">
                                                                <img src="watermark/image-gallery.png" alt="Watermark 23" class="watermark-option" onclick="selectWatermark('watermark/image-gallery.png')">
                                                                <img src="watermark/youtube.png" alt="Watermark 24" class="watermark-option" onclick="selectWatermark('watermark/youtube.png')">
                                                                <img src="watermark/communication.png" alt="Watermark 25" class="watermark-option" onclick="selectWatermark('watermark/communication.png')">
                                                                <img src="watermark/twitter.png" alt="Watermark 26" class="watermark-option" onclick="selectWatermark('watermark/twitter.png')">
                                                                <img src="watermark/instagram.png" alt="Watermark 27" class="watermark-option" onclick="selectWatermark('watermark/instagram.png')">
                                                                <img src="watermark/tik-tok.png" alt="Watermark 28" class="watermark-option" onclick="selectWatermark('watermark/tik-tok.png')">
                                                                <img src="watermark/linkedin.png" alt="Watermark 29" class="watermark-option" onclick="selectWatermark('watermark/linkedin.png')">
                                                                <img src="watermark/gmail.png" alt="Watermark 30" class="watermark-option" onclick="selectWatermark('watermark/gmail.png')">
                                                                <img src="watermark/app-store.png" alt="Watermark 31" class="watermark-option" onclick="selectWatermark('watermark/app-store.png')">
                                                                <img src="watermark/playstore.png" alt="Watermark 32" class="watermark-option" onclick="selectWatermark('watermark/playstore.png')">

    </div>
</div>


<br>

<br>
<style>/* Container for the watermark images */
.watermark-container {
    display: flex;
    gap: 10px; /* Space between images */
    flex-wrap: wrap; /* Allows images to wrap on smaller screens */
    justify-content: center; /* Centers the images horizontally */
    margin: 20px 0;
}

/* Style for each watermark image */
.watermark-option {
    width: 45px; /* 30% smaller than 80px (80px * 0.7 = 56px) */
    height: auto; /* Maintain aspect ratio */
    cursor: pointer; /* Change cursor to pointer to indicate interactivity */
    border: 2px solid transparent; /* Border to highlight when selected */
    border-radius: 5px; /* Rounded corners for the border */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Smooth transition for hover and selection */
}


  /* Hover effect to slightly enlarge the image */
.watermark-option:hover {
    transform: scale(1.1); /* Enlarge the image on hover */
    border-color: #007bff; /* Add border color on hover */
    padding: 8px;
    border-radius: 50px;
}

/* Style for selected watermark image */
.watermark-option.selected {
    border-color: #00f; /* Blue border for the selected watermark */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.6); /* Add a glow effect for selected watermark */
}

/* Optional: add some margin at the bottom of the images */
.watermark-option + .watermark-option {
    margin-left: 10px;
}
</style>
<script>
    // Variable to store the selected video file
let selectedVideoFile = null;

// Function to handle video file selection
function handleVideoSelection(event) {
    const fileInput = event.target;
    const submitButton = document.querySelector('input[type="submit"]');
    
    // Check if a file is selected
    if (fileInput.files.length > 0) {
        selectedVideoFile = fileInput.files[0]; // Store the selected file
        submitButton.disabled = false; // Enable the submit button
    } else {
        selectedVideoFile = null; // No file selected
        submitButton.disabled = true; // Disable the submit button
    }
}

// Attach the event listener to the video file input
document.getElementById('videoFile').addEventListener('change', handleVideoSelection);
</script>

<script> // Variable to store the selected watermark
let selectedWatermark = null;

// Function to select or unselect the watermark
function selectWatermark(watermarkPath) {
    // Check if the same watermark is clicked again (unselect it)
    if (selectedWatermark === watermarkPath) {
        selectedWatermark = null; // Unselect watermark
    } else {
        selectedWatermark = watermarkPath; // Select watermark
    }

    // Update the UI to reflect selection
    document.querySelectorAll('.watermark-option').forEach((img) => {
        img.classList.toggle('selected', img.src.includes(selectedWatermark));
    });

    // Optionally, you can trigger enabling/disabling the "Generate QR" button
    toggleGenerateButtonState();
}

// Function to enable/disable the "Generate QR" button based on watermark selection
function toggleGenerateButtonState() {
    var submitButton = document.querySelector('input[type="submit"]');
    
    // If a watermark is selected, the button can be clicked to generate the QR
    if (selectedWatermark) {
        submitButton.disabled = false;
    } else {
        submitButton.disabled = false;  // Modify as needed
    }
}

</script>

<style>.watermark-option.selected {
    border: 1px solid #000;
    opacity: 0.8;
    border-radius:30px;
    padding:5px;
}
</style>


<button class="accordion-btn tac fs24 fs40-M fw6 c3 dark-c8 mb24" style="border-radius:50px;">
    <svg class="icon wh60 c3 c3 dark-c8 mr8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 80C0 53.5 21.5 32 48 32h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80zM64 96v64h64V96H64zM0 336c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V336zm64 16v64h64V352H64zM304 32h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H304c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48zm80 64H320v64h64V96zM256 304c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16v96c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16v64c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V304zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z"/></svg>
    QR Style
</button>   
                      <div class="panel">
    <!-- Corners Square Style -->
    <label for="cornersSquareStyle" class="c2 dark-c4 fs20 fs32-M">Corners Square Style:</label>
    <select id="cornersSquareStyle" name="cornersSquareStyle">
        <option value="square">Square</option>
        <option value="rounded">Rounded</option>
        <option value="extra-rounded">Extra Rounded</option>
    </select>
    <br>

    <!-- Corners Dot Style -->
    <label for="cornersDotStyle" class="c2 dark-c4 fs20 fs32-M">Corners Dot Style:</label>
    <select id="cornersDotStyle" name="cornersDotStyle">
        <option value="dot">Dot</option>
        <option value="square">Square</option>
    </select>
    <br>

    <!-- Dots Style -->
    <label for="dotsStyle" class="c2 dark-c4 fs20 fs32-M">Dots Style:</label>
    <select id="dotsStyle" name="dotsStyle">
                <option value="square">Square</option>

        <option value="rounded">Rounded</option>
            <option value="dots">Dot</option>

        <option value="classy">Classy</option>
        <option value="extra-rounded">Extra Rounded</option>
        <option value="classy-rounded">Classy Rounded</option>
    </select>


</div>


<button class="accordion-btn tac fs24 fs40-M fw6 c3 dark-c8 mb24" style="border-radius:50px;">
    <svg class="icon wh60 c3 c3 dark-c8 mr8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>
Options
</button>                          <div class="panel">
                            <label id="shape-label" for="shape" class="c2 dark-c4 fs20 fs32-M">Shape:</label>
<select id="shape" name="shape"></select>
<br>
<label id="quality-label" for="quality" class="c2 dark-c4 fs20 fs32-M">Quality:</label>
<select id="quality" name="quality"></select>

<label for="size" class="c2 dark-c4 fs20 fs32-M">Size:</label>
<select id="size" name="size">
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="medium-large" selected>Medium-Large</option>
    <option value="large">Large</option>
</select>


                            <br>
                            <label for="ecLevel" class="c2 dark-c4 fs20 fs32-M">Error Correction:</label>
                            <select id="ecLevel" name="ecLevel">
                                <option value="L">Low</option>
                                <option value="M">Medium</option>
                                <option value="Q">Quartile</option>
                                <option value="H">High</option>
                            </select>
                            <br>
                            <label for="format" class="c2 dark-c4 fs20 fs32-M">Format:</label>
<select id="format" name="format">
    <option value="png">PNG</option>
    <option value="jpeg">JPEG</option>
    <option value="webp">WebP</option>
    <option value="pdf">PDF</option> 
        <option value="svg">SVG</option> 

    
</select>

                        </div>
                    </div>
                </div>
            </div>


<div class="bgc12 dark-bgc9 py48 py72-L px16 br12 qr-section">
    <form id="qrForm">
        
        <br>
        <br>
       
    <div id="qr-container" class="icon  c3 dark-c8 ">
       <svg id="qr-placeholder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="384" height="384">
    <path d="M0 80C0 53.5 21.5 32 48 32h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80zM64 96v64h64V96H64zM0 336c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V336zm64 16v64h64V352H64zM304 32h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H304c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48zm80 64H320v64h64V96zM256 304c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16v96c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16v64c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V304zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z"/>
</svg>
<style>


  /* Responsive adjustments */
  @media (max-width: 768px) {
    #qr-container {
      padding: 0px;
    }
    #qr-placeholder {
      max-width: 250px; /* Smaller width for smaller devices */
    }
  }

  @media (max-width: 480px) {
    #qr-container {
      padding: 0px;
    }
    #qr-placeholder {
      max-width: 250px; /* Further adjustment for very small devices */
    }
  }
</style>
        <div id="qr-code" style="display: none;"></div>
<input type="submit" value="Generate QR" class="">
<div id="loading" style="display:none; font-size:14px; font-weight:bold;  padding:8px 16px; border-radius:4px; text-align:center;">
    Uploading and generating, please wait...
</div>


    </form>
    </div>
<button id="downloadBtn" style="display:none;" title="Download QR">
    <svg class="icon wh60 c3  dark-c8 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/>
    </svg>
</button>
<div class="banner-container"><?php echo $banner1_html; ?></div>
</div>

</div>
</div>


<script>
var shapeLabel = document.getElementById('shape-label');
var shapeSelect = document.getElementById('shape');
var qualityLabel = document.getElementById('quality-label');
var qualitySelect = document.getElementById('quality');

if (shapeLabel && shapeSelect) {
    shapeLabel.style.display = 'none'; 
    shapeSelect.style.display = 'none'; 
}

if (qualityLabel && qualitySelect) {
    qualityLabel.style.display = 'none'; 
    qualitySelect.style.display = 'none'; 
}
</script>
 <script>

document.addEventListener("DOMContentLoaded", function() {
    var logoSizeInput = document.getElementById("logoSize");
    var logoSizeValue = document.getElementById("logoSizeValue");
    logoSizeValue.textContent = (logoSizeInput.value * 100) + "%";
    logoSizeInput.addEventListener("input", function() {
        logoSizeValue.textContent = (this.value * 100) + "%";
    });

    var logoMarginInput = document.getElementById("logoMargin");
    var logoMarginValue = document.getElementById("logoMarginValue");
    logoMarginValue.textContent = logoMarginInput.value + "%";
    logoMarginInput.addEventListener("input", function() {
        logoMarginValue.textContent = this.value + "%";
    });
});
    </script>

 <script>
 
      document.addEventListener("DOMContentLoaded", function() {
    var accordionButtons = document.querySelectorAll('.accordion-btn');

    accordionButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            var panel = this.nextElementSibling;
            if (panel.style.display === "block") {
                panel.style.display = "none";
            } else {
                panel.style.display = "block";
            }
        });
    });
});

    </script>
    

        <script src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
<script src="js/qr.js"></script>
<script src="js/icons-types.js"></script>
<script src="js/input-Listener.js"></script>
<script src="js/qr-forms.js"></script>
<script src="js/fetchCryptoPrice.js"></script>


</div>

<div id="content">
        <div class="tac  ">
    <div class=" c2 dark-c4 fs16 fs20-S">
        <?php 
        // Check if content should be displayed
        if ($contentRow['display'] == 1) {
            echo '<p class=" fs16 fs18-S  c1 dark-c12 lh12">' . $contentRow['content'] . '</p>'; // Display raw HTML content
        }
        ?>
    </div>
</div>


</div>
<?php if ($featureboxes): ?>

   <div class="py48 py72-L">
        <div class="container">
        <div class="tac fs24 fs40-M fw6 c3 dark-c8 mb48 mb72-M">How it works
</div>            <div class="R gy48">
                <?php foreach ($how_it_works as $item): ?>
                    <div class="C-M tac">
                        <svg class="icon wh72 wh96-L c3 dark-c8 mb32">
                            <?php echo $item['icon_svg']; ?>
                        </svg>
                        <div class="fs24 c1 dark-c12 fw6 mb20"><?php echo htmlspecialchars($item['icon_title']); ?></div>
                        <div class="fs16 c2 dark-c4"><?php echo htmlspecialchars($item['icon_description']); ?></div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
<?php endif; ?>


<div class="secondbanner-container"><?php echo $banner2_html; ?></div>
</div>
<div class="pb72">
    <div class="container">
        <?php 
        try {
            // Create a PDO database connection
            $pdo = new PDO("mysql:host=$host;port=$port;dbname=$dbname", $user, $pass);
            $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

            // Query to fetch the settings from the scanner_settings table
            $query = "SELECT * FROM scanner_settings WHERE id = 1";
            $stmt = $pdo->query($query);

            // Fetch the settings and store them in an associative array
            $settings = $stmt->fetch(PDO::FETCH_ASSOC);

            if ($settings) {
                // Define whether the div should be enabled based on the settings
                $div_enabled = isset($settings['div_status']) && $settings['div_status'] == 1;
            } else {
                // If no settings are found, set $div_enabled to false
                $div_enabled = false;
            }
        } catch (PDOException $e) {
            // Handle error if connection fails
            echo "Database connection failed: " . $e->getMessage();
            exit;
        }
        ?>

        <?php if (isset($div_enabled) && $div_enabled): ?>
            <div class="bgc12 dark-bgc9 py48 py72-L px16 br12" style="text-align: center;">
                <!-- SVG Icon -->
                <div class="icon wh72 wh96-L c3 dark-c8 mb32 ma" style="max-width: 300px; margin: 0 auto;">
                    <?= isset($settings['svg_icon']) && !empty($settings['svg_icon']) ? html_entity_decode($settings['svg_icon']) : '<p>No SVG icon available</p>'; ?>
                </div>

                <!-- Large Heading -->
                <div class="fs20 fs24-S fw6 c1 dark-c12 mb16 lh13">
                    <?= isset($settings['large_heading']) && !empty($settings['large_heading']) ? htmlspecialchars($settings['large_heading']) : 'Large heading not available'; ?>
                </div>

                <!-- Small Heading -->
                <div class="c2 dark-c4 fs16 fs20-S mb24">
                    <?= isset($settings['small_heading']) && !empty($settings['small_heading']) ? htmlspecialchars($settings['small_heading']) : 'Small heading not available'; ?>
                </div>

             <!-- Button -->
<a href="<?= isset($settings['button_link']) && !empty($settings['button_link']) ? htmlspecialchars($settings['button_link']) : '/qr-code-scanner' ?>" 
   class="fs16 fs20-S fw6 c3 dark-c8 dark-bgc12 py12 px24 br8" 
   style="text-decoration: none;">
    <?= isset($settings['button_text']) && !empty($settings['button_text']) ? htmlspecialchars($settings['button_text']) : 'Button not available'; ?>
</a>

            </div>
        <?php endif; ?>
    </div>
</div>


<?php
require_once 'designblog.php';
?>

  
<?php
require_once 'designfaq.php';
?>


<style>


/* Hover effect for social share icons */
.social-sharing a:hover {
    transform: scale(1.2); /* Slightly enlarge the icon on hover */
    color: white; /* Change icon color on hover */
    padding: 10px; /* Add padding to create space around the icon */
    border-radius: 10%; /* Ensure background is circular on hover */
}

/* Adjustments for individual icons for better color matching */
.social-sharing .bi-linkedin:hover {
    background-color: #0077b5; /* LinkedIn color */
}

.social-sharing .bi-pinterest:hover {
    background-color: #e60023; /* Pinterest color */
}

.social-sharing .bi-facebook:hover {
    background-color: #3b5998; /* Facebook color */
}

.social-sharing .bi-reddit:hover {
    background-color: #ff4500; /* Reddit color */
}

.social-sharing .bi-twitter-x:hover {
    background-color: black; /* Twitter color */
}

.social-sharing .bi-telegram:hover {
    background-color: #0088cc; /* Telegram color */
}

.social-sharing .bi-whatsapp:hover {
    background-color: #25d366; /* WhatsApp color */
}

/* Style for the share message */
#share-message {
    text-align: center; /* Center the text */
    font-size: 1.2rem; /* Slightly smaller font size */
    font-weight: bold; /* Bold font */
    margin-bottom: 20px; /* Add space below the message */
}

/* Container for the social sharing icons */
.social-sharing {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap onto new lines if space is constrained */
    justify-content: center; /* Center the icons horizontally */
    gap: 20px; /* Space between icons */
    padding: 10px 0; /* Vertical padding for better spacing */
    margin: 0 auto; /* Center the container itself */
}

.social-sharing a {
    display: inline-flex; /* Align icon and text properly */
    justify-content: center; /* Center the icon */
    align-items: center; /* Center vertically */
    font-size: 1.5rem; /* Adjust icon size */
    width: 50px; /* Fixed size for icons */
    height: 50px; /* Fixed size for icons */
    line-height: 50px; /* Vertically center the icon */
    text-align: center; /* Center the text inside the link */
    border-radius: 50%; /* Make the icons circular */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    margin: 5px; /* Space between icons */
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
    #share-message {
        font-size: 1rem; /* Smaller font size for mobile */
        margin-bottom: 10px; /* Reduce space below message */
    }

    .social-sharing {
        gap: 10px; /* Smaller gap between icons */
        padding: 15px 0; /* Adjusted padding */
        width: 100%; /* Ensure full width for mobile */
        justify-content: center; /* Center the icons */
    }

    .social-sharing a {
        width: 40px; /* Smaller icons on mobile */
        height: 40px; /* Maintain circular shape */
        font-size: 1.2rem; /* Smaller icon size */
    }
}

/* For very small screens */
@media (max-width: 480px) {
    .social-sharing a {
        width: 35px; /* Further reduce icon size */
        height: 35px; /* Maintain circular shape */
    }
}


</style>

<?php if ($isSharingEnabled): ?>

<div id="social-share-section">
    
    <p id="share-message" class="fs20 fs24-S fw6 c1 dark-c12 mb16 lh13">
    <?php echo htmlspecialchars($shareMessage, ENT_QUOTES, 'UTF-8'); ?>
</p>

   
    <div class="social-sharing">
        <a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo urlencode($currentUrl); ?>" class="share-linkedin icon wh60 c3 dark-c8 mr8" title="Share on LinkedIn" target="_blank" rel="noopener noreferrer"><i class="bi bi-linkedin"></i></a>
        <a href="https://pinterest.com/pin/create/button/?url=<?php echo urlencode($currentUrl); ?>" class="share-pinterest icon wh60 c3 dark-c8 mr8" title="Share on Pinterest" target="_blank" rel="noopener noreferrer"><i class="bi bi-pinterest"></i></a>
        <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($currentUrl); ?>" class="share-facebook icon wh60 c3 dark-c8 mr8" title="Share on Facebook" target="_blank" rel="noopener noreferrer"><i class="bi bi-facebook"></i></a>
        <a href="https://reddit.com/submit?url=<?php echo urlencode($currentUrl); ?>" class="share-reddit icon wh60 c3 dark-c8 mr8" title="Share on Reddit" target="_blank" rel="noopener noreferrer"><i class="bi bi-reddit"></i></a>
        <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode($currentUrl); ?>" class="share-twitter icon wh60 c3 dark-c8 mr8" title="Share on X (Twitter)" target="_blank" rel="noopener noreferrer"><i class="bi bi-twitter-x"></i></a>
        <a href="https://telegram.me/share/url?url=<?php echo urlencode($currentUrl); ?>" class="share-telegram icon wh60 c3 dark-c8 mr8" title="Share on Telegram" target="_blank" rel="noopener noreferrer"><i class="bi bi-telegram"></i></a>
        <a href="https://wa.me/?text=<?php echo urlencode($currentUrl); ?>" class="share-whatsapp icon wh60 c3 dark-c8 mr8" title="Share on WhatsApp" target="_blank" rel="noopener noreferrer"><i class="bi bi-whatsapp"></i></a>

</div>
</div>


<?php endif; ?>
<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css' rel='stylesheet'>


  <script>
    function openTawkToChat() {
      <?php if (!empty($tawkToDirectLink)): ?>
        window.open('<?php echo $tawkToDirectLink; ?>', 'TawkToChatWindow', 'width=800,height=600');
      <?php endif; ?>
    }
  </script>
 

  <script type="text/javascript">
    var Tawk_API = Tawk_API || {},
      Tawk_LoadStart = new Date();
    (function () {
      var s1 = document.createElement("script"),
        s0 = document.getElementsByTagName("script")[0];
      s1.async = true;
      s1.src = '<?php echo $tawkToEmbedLink; ?>';
      s1.charset = 'UTF-8';
      s1.setAttribute('crossorigin', '*');
      s0.parentNode.insertBefore(s1, s0);
    })();
  </script>

<script async src="https://www.googletagmanager.com/gtag/js?id=<?php echo $googleAnalyticsMeasurementID; ?>"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '<?php echo $googleAnalyticsMeasurementID; ?>');
</script>


</body>

</html>
<?php
require_once 'footer.php';
?>