<!DOCTYPE html>
<?php include 'includes/head.php'; ?>
<body id="default_theme" class="it_service service">
<!-- loader -->
<div class="bg_load"> <img class="loader_animation" src="images/loaders/loader_1.png" alt="#" /> </div>
<!-- end loader -->
<!-- header -->
<header id="default_header" class="header_style_1">
  <!-- header top -->
  <?php include 'includes/topbar.php'; ?>
  <!-- end header top -->
  <!-- header bottom -->
  <?php include 'includes/navbar.php'; ?>
  <!-- header bottom end -->
</header>
<!-- end header -->
<!-- inner page banner -->
<div id="inner_banner" class="section inner_banner_section">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="title-holder">
            <div class="title-holder-cell text-left">
              <h1 class="page-title">Générateur de QR Code</h1>
              <ol class="breadcrumb">
                <li><a href="index.php">Accueil</a></li>
                <li class="active">QR Code</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end inner page banner -->
<!-- Custom CSS for QR Generator -->
<style>
.qr-type-tabs .nav-tabs {
    border-bottom: 2px solid #007bff;
    display: flex;
    flex-wrap: wrap;
}
.qr-type-tabs .nav-tabs li {
    margin-bottom: -2px;
    margin-right: 5px;
}
.qr-type-tabs .nav-tabs li a {
    padding: 10px 15px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px 5px 0 0;
    color: #495057;
    text-decoration: none;
    display: block;
}
.qr-type-tabs .nav-tabs li.active a,
.qr-type-tabs .nav-tabs li a:hover {
    background: #007bff;
    color: white;
    border-color: #007bff;
}
.tab-content {
    padding: 20px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0 5px 5px 5px;
}
.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #495057;
}
.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
}
.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
.btn-primary {
    background: #007bff;
    color: white;
}
.btn-primary:hover {
    background: #0056b3;
}
.btn-success {
    background: #28a745;
    color: white;
}
.btn-lg {
    font-size: 16px;
    padding: 15px 40px;
}
#qr-result canvas {
    max-width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 5px;
}
</style>

<!-- QR Code Generator Section -->
<div class="section padding_layout_1">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="main_heading text_align_center">
            <h2>Générateur de QR Code</h2>
            <p class="large">Créez vos codes QR personnalisés facilement et rapidement</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="row">
      <div class="col-md-8">
        <div class="qr-generator-form" style="background: #f8f9fa; padding: 30px; border-radius: 10px;">
          
          <!-- QR Type Tabs -->
          <div class="qr-type-tabs" style="margin-bottom: 30px;">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#link-tab" onclick="showTab(event, 'link-tab')">Link</a></li>
              <li><a href="#location-tab" onclick="showTab(event, 'location-tab')">Location</a></li>
              <li><a href="#email-tab" onclick="showTab(event, 'email-tab')">E-mail</a></li>
              <li><a href="#text-tab" onclick="showTab(event, 'text-tab')">Text</a></li>
              <li><a href="#call-tab" onclick="showTab(event, 'call-tab')">Appel</a></li>
              <li><a href="#sms-tab" onclick="showTab(event, 'sms-tab')">SMS</a></li>
              <li><a href="#whatsapp-tab" onclick="showTab(event, 'whatsapp-tab')">WhatsApp</a></li>
              <li><a href="#wifi-tab" onclick="showTab(event, 'wifi-tab')">Wi-Fi</a></li>
            </ul>
          </div>

          <!-- Tab Content -->
          <div class="tab-content">
            <!-- Link Tab -->
            <div class="tab-pane active" id="link-tab">
              <div class="form-group">
                <label>URL du lien</label>
                <input type="url" class="form-control" id="link-input" placeholder="https://example.com" style="padding: 12px; border-radius: 6px;">
              </div>
            </div>
            
            <!-- Location Tab -->
            <div class="tab-pane" id="location-tab">
              <div class="form-group">
                <label>Adresse</label>
                <input type="text" class="form-control" id="location-input" placeholder="123 Rue Example, Ville" style="padding: 12px; border-radius: 6px;">
              </div>
            </div>
            
            <!-- Email Tab -->
            <div class="tab-pane" id="email-tab">
              <div class="form-group">
                <label>Adresse e-mail</label>
                <input type="email" class="form-control" id="email-input" placeholder="contact@example.com" style="padding: 12px; border-radius: 6px;">
              </div>
              <div class="form-group">
                <label>Sujet (optionnel)</label>
                <input type="text" class="form-control" id="email-subject" placeholder="Sujet de l'e-mail" style="padding: 12px; border-radius: 6px;">
              </div>
            </div>
            
            <!-- Text Tab -->
            <div class="tab-pane" id="text-tab">
              <div class="form-group">
                <label>Texte</label>
                <textarea class="form-control" id="text-input" rows="4" placeholder="Votre texte ici..." style="padding: 12px; border-radius: 6px;"></textarea>
              </div>
            </div>
            
            <!-- Call Tab -->
            <div class="tab-pane" id="call-tab">
              <div class="form-group">
                <label>Numéro de téléphone</label>
                <input type="tel" class="form-control" id="phone-input" placeholder="+33123456789" style="padding: 12px; border-radius: 6px;">
              </div>
            </div>
            
            <!-- SMS Tab -->
            <div class="tab-pane" id="sms-tab">
              <div class="form-group">
                <label>Numéro de téléphone</label>
                <input type="tel" class="form-control" id="sms-phone" placeholder="+33123456789" style="padding: 12px; border-radius: 6px;">
              </div>
              <div class="form-group">
                <label>Message (optionnel)</label>
                <textarea class="form-control" id="sms-message" rows="3" placeholder="Votre message..." style="padding: 12px; border-radius: 6px;"></textarea>
              </div>
            </div>
            
            <!-- WhatsApp Tab -->
            <div class="tab-pane" id="whatsapp-tab">
              <div class="form-group">
                <label>Numéro WhatsApp</label>
                <input type="tel" class="form-control" id="whatsapp-phone" placeholder="+33123456789" style="padding: 12px; border-radius: 6px;">
              </div>
              <div class="form-group">
                <label>Message (optionnel)</label>
                <textarea class="form-control" id="whatsapp-message" rows="3" placeholder="Bonjour..." style="padding: 12px; border-radius: 6px;"></textarea>
              </div>
            </div>
            
            <!-- WiFi Tab -->
            <div class="tab-pane" id="wifi-tab">
              <div class="form-group">
                <label>Nom du réseau (SSID)</label>
                <input type="text" class="form-control" id="wifi-ssid" placeholder="MonWiFi" style="padding: 12px; border-radius: 6px;">
              </div>
              <div class="form-group">
                <label>Mot de passe</label>
                <input type="password" class="form-control" id="wifi-password" placeholder="motdepasse123" style="padding: 12px; border-radius: 6px;">
              </div>
              <div class="form-group">
                <label>Type de sécurité</label>
                <select class="form-control" id="wifi-security" style="padding: 12px; border-radius: 6px;">
                  <option value="WPA">WPA/WPA2</option>
                  <option value="WEP">WEP</option>
                  <option value="">Aucune</option>
                </select>
              </div>
            </div>
          </div>

          <!-- Customization Options -->
          <div class="qr-customization" style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e9ecef;">
            <h4>Options de personnalisation</h4>
            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  <label>Couleur d'arrière-plan</label>
                  <input type="color" class="form-control" id="bg-color" value="#ffffff" style="height: 45px;">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label>Couleur de premier plan</label>
                  <input type="color" class="form-control" id="fg-color" value="#000000" style="height: 45px;">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label>Taille</label>
                  <select class="form-control" id="qr-size" style="padding: 12px;">
                    <option value="200">200x200</option>
                    <option value="300" selected>300x300</option>
                    <option value="400">400x400</option>
                    <option value="500">500x500</option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          <!-- Generate Button -->
          <div class="text-center" style="margin-top: 30px;">
            <button class="btn btn-primary btn-lg" onclick="generateQRCode()" style="padding: 12px 40px; font-size: 16px; border-radius: 6px; background: #007bff; border: none;">
              <i class="fa fa-qrcode"></i> Générer le QR Code
            </button>
          </div>
        </div>
      </div>
      
      <!-- QR Code Preview -->
      <div class="col-md-4">
        <div class="qr-preview" style="background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center;">
          <h4>Aperçu du QR Code</h4>
          <div id="qr-result" style="margin: 20px 0; min-height: 300px; display: flex; align-items: center; justify-content: center; border: 2px dashed #e9ecef; border-radius: 10px;">
            <p style="color: #6c757d;">Votre QR code apparaîtra ici</p>
          </div>
          <div id="download-section" style="display: none;">
            <a href="#" id="download-link" class="btn btn-success" download="qrcode.png">
              <i class="fa fa-download"></i> Télécharger PNG
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Features Section -->
<div class="section padding_layout_1 light_silver">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="main_heading text_align_center">
            <h2>Pourquoi utiliser nos QR Codes ?</h2>
            <p class="large">Des fonctionnalités avancées pour tous vos besoins</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 service_blog">
        <div class="full">
          <div class="service_blog_inner text-center">
            <div class="icon text_align_center"><i class="fa fa-qrcode" style="font-size: 48px; color: #007bff;"></i></div>
            <h4 class="service-heading">Haute Qualité</h4>
            <p>Génération de QR codes en haute résolution, parfaits pour l'impression et l'affichage numérique.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 service_blog">
        <div class="full">
          <div class="service_blog_inner text-center">
            <div class="icon text_align_center"><i class="fa fa-palette" style="font-size: 48px; color: #28a745;"></i></div>
            <h4 class="service-heading">Personnalisable</h4>
            <p>Choisissez vos couleurs, taille et style pour créer des QR codes qui correspondent à votre marque.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 service_blog">
        <div class="full">
          <div class="service_blog_inner text-center">
            <div class="icon text_align_center"><i class="fa fa-bolt" style="font-size: 48px; color: #ffc107;"></i></div>
            <h4 class="service-heading">Instantané</h4>
            <p>Création et téléchargement instantanés, sans inscription ni limites d'utilisation.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end section -->
<div class="section padding_layout_1">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="main_heading text_align_left">
            <h2>Experienced Staff</h2>
            <p class="large">Our experts have been featured in press numerous times.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <div class="full team_blog_colum">
          <div class="it_team_img"> <img class="img-responsive" src="images/it_service/team-member-1.jpg" alt="#"> </div>
          <div class="team_feature_head">
            <h4>Dean Michael</h4>
          </div>
          <div class="team_feature_social">
            <div class="social_icon">
              <ul class="list-inline">
                <li><a class="fa fa-facebook" href="https://www.facebook.com/" title="Facebook" target="_blank"></a></li>
                <li><a class="fa fa-google-plus" href="https://plus.google.com/" title="Google+" target="_blank"></a></li>
                <li><a class="fa fa-twitter" href="https://twitter.com" title="Twitter" target="_blank"></a></li>
                <li><a class="fa fa-linkedin" href="https://www.linkedin.com" title="LinkedIn" target="_blank"></a></li>
                <li><a class="fa fa-instagram" href="https://www.instagram.com" title="Instagram" target="_blank"></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="full team_blog_colum">
          <div class="it_team_img"> <img class="img-responsive" src="images/it_service/team-member-2.jpg" alt="#"> </div>
          <div class="team_feature_head">
            <h4>Ruby Jake</h4>
          </div>
          <div class="team_feature_social">
            <div class="social_icon">
              <ul class="list-inline">
                <li><a class="fa fa-facebook" href="https://www.facebook.com/" title="Facebook" target="_blank"></a></li>
                <li><a class="fa fa-google-plus" href="https://plus.google.com/" title="Google+" target="_blank"></a></li>
                <li><a class="fa fa-twitter" href="https://twitter.com" title="Twitter" target="_blank"></a></li>
                <li><a class="fa fa-linkedin" href="https://www.linkedin.com" title="LinkedIn" target="_blank"></a></li>
                <li><a class="fa fa-instagram" href="https://www.instagram.com" title="Instagram" target="_blank"></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="full team_blog_colum">
          <div class="it_team_img"> <img class="img-responsive" src="images/it_service/team-member-3.jpg" alt="#"> </div>
          <div class="team_feature_head">
            <h4>David Hussay</h4>
          </div>
          <div class="team_feature_social">
            <div class="social_icon">
              <ul class="list-inline">
                <li><a class="fa fa-facebook" href="https://www.facebook.com/" title="Facebook" target="_blank"></a></li>
                <li><a class="fa fa-google-plus" href="https://plus.google.com/" title="Google+" target="_blank"></a></li>
                <li><a class="fa fa-twitter" href="https://twitter.com" title="Twitter" target="_blank"></a></li>
                <li><a class="fa fa-linkedin" href="https://www.linkedin.com" title="LinkedIn" target="_blank"></a></li>
                <li><a class="fa fa-instagram" href="https://www.instagram.com" title="Instagram" target="_blank"></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="full team_blog_colum">
          <div class="it_team_img"> <img class="img-responsive" src="images/it_service/team-member-1.jpg" alt="#"> </div>
          <div class="team_feature_head">
            <h4>Dean Michael</h4>
          </div>
          <div class="team_feature_social">
            <div class="social_icon">
              <ul class="list-inline">
                <li><a class="fa fa-facebook" href="https://www.facebook.com/" title="Facebook" target="_blank"></a></li>
                <li><a class="fa fa-google-plus" href="https://plus.google.com/" title="Google+" target="_blank"></a></li>
                <li><a class="fa fa-twitter" href="https://twitter.com" title="Twitter" target="_blank"></a></li>
                <li><a class="fa fa-linkedin" href="https://www.linkedin.com" title="LinkedIn" target="_blank"></a></li>
                <li><a class="fa fa-instagram" href="https://www.instagram.com" title="Instagram" target="_blank"></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- section -->
<div class="section padding_layout_1 testmonial_section white_fonts">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="main_heading text_align_left">
            <h2 style="text-transform: none;">What Clients Say?</h2>
            <p class="large">Here are testimonials from clients..</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-7">
        <div class="full">
          <div id="testimonial_slider" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ul class="carousel-indicators">
              <li data-target="#testimonial_slider" data-slide-to="0" class="active"></li>
              <li data-target="#testimonial_slider" data-slide-to="1"></li>
              <li data-target="#testimonial_slider" data-slide-to="2"></li>
            </ul>
            <!-- The slideshow -->
            <div class="carousel-inner">
              <div class="carousel-item active">
                <div class="testimonial-container">
                  <div class="testimonial-content"> You guys rock! Thank you for making it painless, pleasant and most of all hassle free! I wish I would have thought of it first. 
                    I am really satisfied with my first laptop service.</div>
                  <div class="testimonial-photo"> <img src="images/it_service/client1.jpg" class="img-responsive" alt="#" width="150" height="150"> </div>
                  <div class="testimonial-meta">
                    <h4>Maria Anderson</h4>
                    <span class="testimonial-position">CFO, Tech NY</span> </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="testimonial-container">
                  <div class="testimonial-content"> You guys rock! Thank you for making it painless, pleasant and most of all hassle free! I wish I would have thought of it first. 
                    I am really satisfied with my first laptop service.</div>
                  <div class="testimonial-photo"> <img src="images/it_service/client2.jpg" class="img-responsive" alt="#" width="150" height="150"> </div>
                  <div class="testimonial-meta">
                    <h4>Maria Anderson</h4>
                    <span class="testimonial-position">CFO, Tech NY</span> </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="testimonial-container">
                  <div class="testimonial-content"> You guys rock! Thank you for making it painless, pleasant and most of all hassle free! I wish I would have thought of it first. 
                    I am really satisfied with my first laptop service.</div>
                  <div class="testimonial-photo"> <img src="images/it_service/client3.jpg" class="img-responsive" alt="#" width="150" height="150"> </div>
                  <div class="testimonial-meta">
                    <h4>Maria Anderson</h4>
                    <span class="testimonial-position">CFO, Tech NY</span> </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-5">
        <div class="full"> </div>
      </div>
    </div>
  </div>
</div>
<!-- end section -->
<!-- section -->
<div class="section">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="contact_us_section">
            <div class="call_icon"> <img src="images/it_service/phone_icon.png" alt="#" /> </div>
            <div class="inner_cont">
              <h2>REQUEST A FREE QUOTE</h2>
              <p>Get answers and advice from people you want it from.</p>
            </div>
            <div class="button_Section_cont"> <a class="btn dark_gray_bt" href="it_contact.html">Contact us</a> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end section -->
<!-- section -->
<div class="section padding_layout_1" style="padding: 50px 0;">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <ul class="brand_list">
            <li><img src="images/it_service/brand_icon1.png" alt="#" /></li>
            <li><img src="images/it_service/brand_icon2.png" alt="#" /></li>
            <li><img src="images/it_service/brand_icon3.png" alt="#" /></li>
            <li><img src="images/it_service/brand_icon4.png" alt="#" /></li>
            <li><img src="images/it_service/brand_icon5.png" alt="#" /></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end section -->
<!-- Modal -->
<div class="modal fade" id="search_bar" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-8 col-md-8 col-sm-8 offset-lg-2 offset-md-2 offset-sm-2 col-xs-10 col-xs-offset-1">
            <div class="navbar-search">
              <form action="#" method="get" id="search-global-form" class="search-global">
                <input type="text" placeholder="Type to search" autocomplete="off" name="s" id="search" value="" class="search-global__input">
                <button class="search-global__btn"><i class="fa fa-search"></i></button>
                <div class="search-global__note">Begin typing your search above and press return to search.</div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Model search bar -->
<!-- footer -->
<?php include 'includes/footer.php'; ?>
<!-- end footer -->
<!-- js section -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- menu js -->
<script src="js/menumaker.js"></script>
<!-- wow animation -->
<script src="js/wow.js"></script>
<!-- custom js -->
<script src="js/custom.js"></script>
<!-- QR Code Generator Script -->
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
<script>
// Global variable to track active tab
let currentActiveTab = 'link-tab';

// Function to switch tabs
function showTab(event, tabId) {
    event.preventDefault();
    
    // Remove active class from all tabs
    document.querySelectorAll('.nav-tabs li').forEach(li => li.classList.remove('active'));
    document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
    
    // Add active class to clicked tab
    event.target.parentElement.classList.add('active');
    document.getElementById(tabId).classList.add('active');
    
    // Update current active tab
    currentActiveTab = tabId;
}

function generateQRCode() {
    console.log('Generating QR Code for tab:', currentActiveTab);
    
    // Get customization options
    const bgColor = document.getElementById('bg-color').value || '#ffffff';
    const fgColor = document.getElementById('fg-color').value || '#000000';
    const size = parseInt(document.getElementById('qr-size').value) || 300;
    
    let qrText = '';
    
    // Generate QR text based on active tab
    try {
        switch(currentActiveTab) {
            case 'link-tab':
                qrText = document.getElementById('link-input').value.trim();
                if (!qrText) {
                    alert('Veuillez entrer une URL');
                    return;
                }
                // Add http:// if no protocol specified
                if (!qrText.match(/^https?:\/\//)) {
                    qrText = 'http://' + qrText;
                }
                break;
                
            case 'location-tab':
                const location = document.getElementById('location-input').value.trim();
                if (!location) {
                    alert('Veuillez entrer une adresse');
                    return;
                }
                qrText = location; // Simple text for location
                break;
                
            case 'email-tab':
                const email = document.getElementById('email-input').value.trim();
                const subject = document.getElementById('email-subject').value.trim();
                if (!email) {
                    alert('Veuillez entrer une adresse e-mail');
                    return;
                }
                qrText = `mailto:${email}${subject ? '?subject=' + encodeURIComponent(subject) : ''}`;
                break;
                
            case 'text-tab':
                qrText = document.getElementById('text-input').value.trim();
                if (!qrText) {
                    alert('Veuillez entrer du texte');
                    return;
                }
                break;
                
            case 'call-tab':
                const phone = document.getElementById('phone-input').value.trim();
                if (!phone) {
                    alert('Veuillez entrer un numéro de téléphone');
                    return;
                }
                qrText = `tel:${phone}`;
                break;
                
            case 'sms-tab':
                const smsPhone = document.getElementById('sms-phone').value.trim();
                const smsMessage = document.getElementById('sms-message').value.trim();
                if (!smsPhone) {
                    alert('Veuillez entrer un numéro de téléphone');
                    return;
                }
                qrText = `sms:${smsPhone}${smsMessage ? '?body=' + encodeURIComponent(smsMessage) : ''}`;
                break;
                
            case 'whatsapp-tab':
                const waPhone = document.getElementById('whatsapp-phone').value.trim();
                const waMessage = document.getElementById('whatsapp-message').value.trim();
                if (!waPhone) {
                    alert('Veuillez entrer un numéro WhatsApp');
                    return;
                }
                const cleanPhone = waPhone.replace(/[^0-9]/g, '');
                qrText = `https://wa.me/${cleanPhone}${waMessage ? '?text=' + encodeURIComponent(waMessage) : ''}`;
                break;
                
            case 'wifi-tab':
                const ssid = document.getElementById('wifi-ssid').value.trim();
                const password = document.getElementById('wifi-password').value.trim();
                const security = document.getElementById('wifi-security').value;
                if (!ssid) {
                    alert('Veuillez entrer le nom du réseau Wi-Fi');
                    return;
                }
                qrText = `WIFI:T:${security};S:${ssid};P:${password};H:false;;`;
                break;
                
            default:
                alert('Veuillez sélectionner un type de QR code');
                return;
        }
        
        console.log('QR Text:', qrText);
        
        // Clear previous result
        const resultDiv = document.getElementById('qr-result');
        resultDiv.innerHTML = '<p>Génération en cours...</p>';
        
        // Generate QR Code using canvas
        const canvas = document.createElement('canvas');
        
        QRCode.toCanvas(canvas, qrText, {
            width: size,
            height: size,
            color: {
                dark: fgColor,
                light: bgColor
            },
            margin: 1,
            errorCorrectionLevel: 'M'
        }, function (error) {
            if (error) {
                console.error('QR Code Error:', error);
                resultDiv.innerHTML = '<p style="color: red;">Erreur lors de la génération: ' + error.message + '</p>';
                return;
            }
            
            // Display QR code
            resultDiv.innerHTML = '';
            resultDiv.appendChild(canvas);
            
            // Setup download link
            const downloadSection = document.getElementById('download-section');
            const downloadLink = document.getElementById('download-link');
            
            // Convert canvas to blob and create download URL
            canvas.toBlob(function(blob) {
                if (downloadLink.href && downloadLink.href.startsWith('blob:')) {
                    URL.revokeObjectURL(downloadLink.href);
                }
                const url = URL.createObjectURL(blob);
                downloadLink.href = url;
                downloadLink.download = 'qrcode-' + Date.now() + '.png';
                downloadSection.style.display = 'block';
            }, 'image/png');
        });
        
    } catch (error) {
        console.error('Generate QR Error:', error);
        alert('Erreur lors de la génération du QR code: ' + error.message);
    }
}

// Initialize when page loads
document.addEventListener('DOMContentLoaded', function() {
    console.log('QR Generator initialized');
    
    // Set initial active tab
    currentActiveTab = 'link-tab';
    
    // Make sure the first tab is active
    document.querySelector('.nav-tabs li').classList.add('active');
    document.getElementById('link-tab').classList.add('active');
});
</script>
</body>
</html>
