From 4dfa99862293984bc4bca60de36bc799b7192b98 Mon Sep 17 00:00:00 2001
From: Nguyen Ngo <da.nguyen8744@gmail.com>
Date: Tue, 12 Aug 2025 10:02:50 -0400
Subject: [PATCH] resolve conflict

---
 templates/qr_destination.html | 1157 +++++++++++++++++++++++++++++++++
 1 file changed, 1157 insertions(+)
 create mode 100644 templates/qr_destination.html
diff --git a/templates/qr_destination.html b/templates/qr_destination.html
new file mode 100644
index 0000000..1924017
--- /dev/null
+++ b/templates/qr_destination.html
@@ -0,0 +1,1157 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ qr_code.location_event }}</title>
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      /* Enhanced CSS Variables with Orange Color Scheme */
+      :root {
+        --primary-color: #2563eb;
+        --primary-hover: #1d4ed8;
+        --orange-color: #ea580c;
+        --orange-hover: #dc2626;
+        --success-color: #10b981;
+        --warning-color: #f59e0b;
+        --error-color: #ef4444;
+        --text-primary: #1f2937;
+        --text-secondary: #6b7280;
+        --background-light: #f8fafc;
+        --border-color: #e5e7eb;
+        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        --border-radius: 0.5rem;
+        --transition: all 0.2s ease-in-out;
+        
+        /* Language Color Coding - High Contrast Theme */
+        --english-color: #1e40af;
+        --english-bg: rgba(59, 130, 246, 0.1);
+        --spanish-color: #15803d;
+        --spanish-bg: rgba(34, 197, 94, 0.1);
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      /* Language Color Classes - Enhanced Contrast */
+      .english-text {
+        color: #1e40af !important;
+        font-weight: 700;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+
+      .spanish-text {
+        color: #15803d !important;
+        font-weight: 700;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+
+      .bilingual-container {
+        background: rgba(255, 255, 255, 0.98);
+        border-radius: 8px;
+        padding: 16px 20px;
+        margin: 8px 0;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 255, 255, 0.8);
+      }
+
+      .language-separator {
+        color: #64748b;
+        font-weight: 500;
+        margin: 0 12px;
+        font-size: 1.1em;
+      }
+
+      /* Dynamic Background Based on Location Event */
+      body {
+        font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+        min-height: 100vh;
+        padding: 1rem;
+        color: var(--text-primary);
+        line-height: 1.6;
+        transition: var(--transition);
+      }
+
+      /* Check In Event - Blue Background (Default) */
+      body.check-in {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      }
+
+      /* Check Out Event - Orange Background */
+      body.check-out {
+        background: linear-gradient(135deg, #ff7849 0%, #ff4757 100%);
+      }
+
+      .destination-container {
+        max-width: 500px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+      }
+
+      .language-selector {
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 1rem;
+      }
+
+      .language-toggle {
+        background: rgba(255, 255, 255, 0.2);
+        border: 1px solid rgba(255, 255, 255, 0.3);
+        border-radius: var(--border-radius);
+        color: white;
+        padding: 0.5rem 1rem;
+        cursor: pointer;
+        transition: var(--transition);
+        backdrop-filter: blur(10px);
+        font-size: 0.9rem;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        outline: none;
+      }
+
+      .language-toggle:hover {
+        background: rgba(255, 255, 255, 0.3) !important;
+        border-color: rgba(255, 255, 255, 0.5) !important;
+        transform: translateY(-1px);
+      }
+
+      .language-toggle:active {
+        background: rgba(255, 255, 255, 0.4) !important;
+        transform: translateY(0);
+      }
+
+      .language-toggle:focus {
+        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
+      }
+
+      .language-toggle i {
+        font-size: 1rem;
+        color: white !important;
+      }
+
+      .destination-header {
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: var(--border-radius);
+        padding: 2rem;
+        text-align: center;
+        box-shadow: var(--shadow-lg);
+        backdrop-filter: blur(10px);
+        opacity: 0;
+        transform: translateY(20px);
+        transition: all 0.6s ease-out;
+      }
+
+      .destination-header.active {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      /* Dynamic Header Icon Colors */
+      .header-icon {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto 1.5rem;
+        box-shadow: var(--shadow-lg);
+        transition: var(--transition);
+      }
+
+      /* Check In - Blue Icon */
+      .check-in .header-icon {
+        background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+      }
+
+      /* Check Out - Orange Icon */
+      .check-out .header-icon {
+        background: linear-gradient(135deg, var(--orange-color), var(--orange-hover));
+      }
+
+      .header-icon i {
+        font-size: 2.5rem;
+        color: white;
+      }
+
+      /* Company Logo Styling */
+      .company-logo {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        border-radius: 8px;
+      }
+
+      .fallback-icon {
+        font-size: 2.5rem;
+        color: white;
+      }
+
+      .destination-header h1 {
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: var(--text-primary);
+        margin-bottom: 0.5rem;
+        line-height: 1.2;
+      }
+
+      .location-info {
+        color: var(--text-secondary);
+        font-size: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+      }
+
+      /* Dynamic Location Info Icon Colors */
+      .check-in .location-info i {
+        color: var(--primary-color);
+      }
+
+      .check-out .location-info i {
+        color: var(--orange-color);
+      }
+
+      .checkin-card {
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: var(--border-radius);
+        padding: 2rem;
+        box-shadow: var(--shadow-lg);
+        backdrop-filter: blur(10px);
+        opacity: 0;
+        transform: translateY(20px);
+        transition: all 0.6s ease-out 0.2s;
+      }
+
+      .checkin-card.active {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      .checkin-header {
+        text-align: center;
+        margin-bottom: 2rem;
+      }
+
+      .checkin-header h2 {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: var(--text-primary);
+        margin-bottom: 0.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+      }
+
+      /* Dynamic Header Icon Colors */
+      .check-in .checkin-header h2 i {
+        color: var(--primary-color);
+      }
+
+      .check-out .checkin-header h2 i {
+        color: var(--orange-color);
+      }
+
+      .checkin-header p {
+        color: var(--text-secondary);
+        font-size: 0.95rem;
+        line-height: 1.5;
+      }
+
+      .form-group {
+        margin-bottom: 1.5rem;
+      }
+
+      .form-group label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-weight: 500;
+        color: var(--text-primary);
+        margin-bottom: 0.5rem;
+        font-size: 0.95rem;
+      }
+
+      /* Dynamic Label Icon Colors */
+      .check-in .form-group label i {
+        color: var(--primary-color);
+      }
+
+      .check-out .form-group label i {
+        color: var(--orange-color);
+      }
+
+      .form-control {
+        width: 100%;
+        padding: 0.875rem 1rem;
+        border: 2px solid var(--border-color);
+        border-radius: var(--border-radius);
+        font-size: 1rem;
+        transition: var(--transition);
+        background: white;
+      }
+
+      .form-control:focus {
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+      }
+
+      /* Dynamic Focus Colors */
+      .check-in .form-control:focus {
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+      }
+
+      .check-out .form-control:focus {
+        border-color: var(--orange-color);
+        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
+      }
+
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        padding: 1.2rem 2rem;
+        font-size: 1.2rem;
+        font-weight: 700;
+        border: none;
+        border-radius: var(--border-radius);
+        cursor: pointer;
+        transition: var(--transition);
+        text-decoration: none;
+        width: 100%;
+        text-shadow: none;
+        letter-spacing: 0.5px;
+      }
+
+      /* Dynamic Button Colors - Dark Salmon Theme */
+      .check-in .btn-primary {
+        background: #e9967a;
+        color: #ffffff;
+        border: 2px solid #e9967a;
+      }
+
+      .check-out .btn-primary {
+        background: #e9967a;
+        color: #ffffff;
+        border: 2px solid #e9967a;
+      }
+
+      .btn-primary:hover {
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-lg);
+      }
+
+      .check-in .btn-primary:hover {
+        background: #cd853f;
+        border-color: #cd853f;
+      }
+
+      .check-out .btn-primary:hover {
+        background: #cd853f;
+        border-color: #cd853f;
+      }
+
+      .btn-primary:active {
+        transform: translateY(0);
+      }
+
+      .btn:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+        transform: none !important;
+      }
+
+      .success-card {
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: var(--border-radius);
+        padding: 2rem;
+        text-align: center;
+        box-shadow: var(--shadow-lg);
+        backdrop-filter: blur(10px);
+        display: none;
+      }
+
+      .success-card.show {
+        display: block;
+        animation: slideUp 0.5s ease-out;
+      }
+
+      @keyframes slideUp {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .success-icon {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto 1.5rem;
+        font-size: 3rem;
+        color: white;
+      }
+
+      /* Dynamic Success Icon Colors - Green Theme */
+      .check-in .success-icon {
+        background: #10b981;
+      }
+
+      .check-out .success-icon {
+        background: #10b981;
+      }
+
+      .success-card h2 {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--text-primary);
+        margin-bottom: 1rem;
+      }
+
+      .success-details {
+        background: var(--background-light);
+        border-radius: var(--border-radius);
+        padding: 1.5rem;
+        margin-top: 1.5rem;
+      }
+
+      .detail-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0;
+        border-bottom: 1px solid var(--border-color);
+      }
+
+      .detail-row:last-child {
+        border-bottom: none;
+      }
+
+      .detail-label {
+        font-weight: 500;
+        color: var(--text-secondary);
+      }
+
+      .detail-value {
+        font-weight: 600;
+        color: var(--text-primary);
+        text-align: right;
+      }
+
+      .status-message {
+        position: fixed;
+        top: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 1rem 1.5rem;
+        border-radius: var(--border-radius);
+        font-weight: 500;
+        z-index: 1000;
+        display: none;
+        box-shadow: var(--shadow-lg);
+      }
+
+      .status-message.show {
+        display: block;
+        animation: slideDown 0.3s ease-out;
+      }
+
+      .status-message.success {
+        background: var(--success-color);
+        color: white;
+      }
+
+      .status-message.error {
+        background: var(--error-color);
+        color: white;
+      }
+
+      .status-message.processing {
+        background: var(--warning-color);
+        color: white;
+      }
+
+      @keyframes slideDown {
+        from {
+          opacity: 0;
+          transform: translateX(-50%) translateY(-10px);
+        }
+        to {
+          opacity: 1;
+          transform: translateX(-50%) translateY(0);
+        }
+      }
+
+      .loading-spinner {
+        border: 3px solid rgba(255, 255, 255, 0.3);
+        border-radius: 50%;
+        border-top: 3px solid white;
+        width: 20px;
+        height: 20px;
+        animation: spin 1s linear infinite;
+        margin-right: 0.5rem;
+      }
+
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+
+      .fade-transition {
+        opacity: 0;
+        transform: translateY(20px);
+        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+      }
+
+      .fade-transition.active {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      /* Language Legend */
+      .language-legend {
+        display: flex;
+        justify-content: center;
+        gap: 1.5rem;
+        margin: 1rem 0;
+        padding: 12px;
+        background: rgba(255, 255, 255, 0.9);
+        border-radius: 8px;
+        backdrop-filter: blur(10px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 0.875rem;
+        font-weight: 500;
+      }
+
+      .legend-color {
+        width: 16px;
+        height: 16px;
+        border-radius: 4px;
+      }
+
+      .english-legend {
+        background: #1e40af;
+      }
+
+      .spanish-legend {
+        background: #15803d;
+      }
+
+      /* Responsive Design */
+      @media (max-width: 640px) {
+        .destination-container {
+          padding: 0.5rem;
+        }
+
+        .destination-header,
+        .checkin-card,
+        .success-card {
+          padding: 1.5rem;
+        }
+
+        .destination-header h1 {
+          font-size: 1.5rem;
+        }
+
+        .checkin-header h2 {
+          font-size: 1.25rem;
+        }
+
+        .detail-row {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0.25rem;
+        }
+
+        .detail-value {
+          text-align: left;
+        }
+
+        .language-legend {
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+      }
+    </style>
+  </head>
+  <body class="{% if qr_code.location_event == 'Check Out' %}check-out{% else %}check-in{% endif %}">
+    <div class="destination-container">
+      <!-- Header Section with Dynamic Styling and Color-Coded Languages -->
+      <div class="destination-header fade-transition active">
+        <div class="header-icon">
+          <!-- Company Logo -->
+          <img 
+            src="{{ url_for('static', filename='images/logo.png') }}" 
+            alt="Company Logo"
+            class="company-logo"
+            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
+          />
+          <!-- Fallback QR Icon (hidden by default, shown if logo fails to load) -->
+          <i class="fas fa-qrcode fallback-icon" style="display: none;"></i>
+        </div>
+        {% if qr_code.location_event == 'Check In' %}
+          <h1>
+            <span class="english-text">{{ qr_code.location_event }}</span>
+            <span class="language-separator">/</span>
+            <span class="spanish-text">Entrada</span>
+          </h1>
+        {% else %}
+          <h1>
+            <span class="english-text">{{ qr_code.location_event }}</span>
+            <span class="language-separator">/</span>
+            <span class="spanish-text">Salida</span>
+          </h1>
+        {% endif %} 
+        <p class="location-info">
+          <i class="fas fa-map-marker-alt"></i>
+          {{ qr_code.location }}
+        </p>
+      </div>
+
+      <!-- Status Message -->
+      <div id="statusMessage" class="status-message">
+        <div class="status-content">
+          <i class="fas fa-info-circle"></i>
+          <span>Status message</span>
+        </div>
+      </div>
+
+      <!-- Check-in Form with Dynamic Styling and Color-Coded Instructions -->
+      <div class="checkin-card fade-transition active">
+        <div class="checkin-header">
+          <div class="bilingual-container">
+            <p>
+              <span class="english-text">Please enter your Employee ID.</span>
+              <span class="language-separator">/</span>
+              <span class="spanish-text">Por favor ingrese su ID de empleado.</span>
+            </p>
+          </div>
+        </div>
+
+        <form id="checkinForm" onsubmit="return false;">
+          <div class="form-group">
+            <label for="employee_id">
+              <i class="fas fa-id-card"></i>
+              <span class="english-text">Employee ID</span>
+              <span class="language-separator">/</span>
+              <span class="spanish-text">ID de Empleado</span>
+            </label>
+            <input
+              type="text"
+              id="employee_id"
+              name="employee_id"
+              class="form-control"
+              placeholder="Enter your ID / Ingrese su ID"
+              required
+              autocomplete="off"
+            />
+          </div>
+
+          <button type="submit" class="btn btn-primary" id="submitButton">
+            {% if qr_code.location_event == 'Check In' %}
+              <i class="fas fa-sign-in-alt"></i>
+              <span class="english-text">Check In</span>
+              <span class="language-separator">/</span>
+              <span class="spanish-text">Registrar Entrada</span>
+            {% else %}
+              <i class="fas fa-sign-out-alt"></i>
+              <span class="english-text">Check Out</span>
+              <span class="language-separator">/</span>
+              <span class="spanish-text">Registrar Salida</span>
+            {% endif %}
+          </button>
+        </form>
+      </div>
+
+      <!-- Success Card -->
+      <div class="success-card" id="successCard">
+        <div class="success-icon">
+          <i class="fas fa-check"></i>
+        </div>
+        <h2>
+          <span class="english-text">Success!</span>
+          <span class="language-separator">/</span>
+          <span class="spanish-text">¡Éxito!</span>
+        </h2>
+        <div class="bilingual-container">
+          <p>
+            <span class="english-text">Your submission has been recorded successfully.</span>
+            <span class="language-separator">/</span>
+            <span class="spanish-text">Su registro ha sido guardado exitosamente.</span>
+          </p>
+        </div>
+        <div class="success-details" id="successDetails">
+          <!-- Success details will be populated here -->
+        </div>
+      </div>
+    </div>
+
+    <!-- Enhanced JavaScript with preserved functionality -->
+    <script src="{{ url_for('static', filename='js/qr_destination.js') }}"></script>
+    <script>
+      // Use different variable name to avoid conflict with external JS
+      let currentUserLocation = {
+        latitude: null,
+        longitude: null,
+        accuracy: null,
+        altitude: null,
+        timestamp: null,
+        source: "manual",
+        address: null,
+      };
+      let locationCaptureActive = false;
+
+      // Initialize the page when DOM is loaded
+      document.addEventListener('DOMContentLoaded', function() {
+        console.log('🚀 QR Destination page loaded successfully');
+        console.log('📱 Enhanced with color-coded bilingual support');
+        
+        // Initialize Employee ID auto-fill FIRST (before other functionality)
+        initializeEmployeeIdAutoFill();
+        
+        // Then initialize other functionality
+        initializeFormHandling();
+        initializeLocationCapture();
+        
+        // Add fade-in animations
+        setTimeout(() => {
+          document.querySelectorAll('.fade-transition').forEach(el => {
+            el.classList.add('active');
+          });
+        }, 100);
+      });
+
+      // FIXED Employee ID auto-fill functionality
+      function initializeEmployeeIdAutoFill() {
+        console.log("👤 Initializing Employee ID auto-fill functionality");
+        
+        const employeeIdInput = document.getElementById('employee_id');
+        if (!employeeIdInput) {
+          console.log("❌ Employee ID input not found");
+          return;
+        }
+
+        // Load and auto-fill last used Employee ID immediately
+        try {
+          const lastEmployeeId = localStorage.getItem('qr_last_employee_id');
+          console.log(`📱 Checking localStorage for last employee ID: ${lastEmployeeId}`);
+          
+          if (lastEmployeeId && lastEmployeeId.trim() !== '') {
+            employeeIdInput.value = lastEmployeeId.trim();
+            console.log(`✅ Auto-filled employee ID: ${lastEmployeeId}`);
+            
+            // Visual feedback that it's auto-filled
+            employeeIdInput.style.backgroundColor = '#f0f9ff';
+            setTimeout(() => {
+              employeeIdInput.style.backgroundColor = '';
+            }, 2000);
+          } else {
+            console.log(`📱 No previous employee ID found`);
+          }
+        } catch (error) {
+          console.log(`❌ Error loading employee ID: ${error.message}`);
+        }
+
+        // Save Employee ID when it's entered successfully
+        employeeIdInput.addEventListener('input', function() {
+          const currentId = this.value.trim();
+          if (currentId.length >= 2) { // Save if at least 2 characters
+            try {
+              localStorage.setItem('qr_last_employee_id', currentId);
+              console.log(`💾 Saved employee ID: ${currentId}`);
+            } catch (error) {
+              console.log(`❌ Error saving employee ID: ${error.message}`);
+            }
+          }
+        });
+
+        console.log("✅ Employee ID auto-fill initialized successfully");
+      }
+
+      // Initialize location services (renamed to avoid conflicts)
+      function initializeLocationCapture() {
+        console.log("📍 Initializing enhanced location capture");
+        requestUserLocationData();
+      }
+
+      // Request location data from device (renamed to avoid conflicts)
+      function requestUserLocationData() {
+        if (locationCaptureActive) {
+          console.log("📍 Location request already active, skipping");
+          return;
+        }
+
+        if (!navigator.geolocation) {
+          console.log("❌ Geolocation not supported");
+          currentUserLocation.source = "manual";
+          return;
+        }
+
+        locationCaptureActive = true;
+        console.log("📍 Requesting enhanced location data...");
+
+        const options = {
+          enableHighAccuracy: true,
+          timeout: 10000,
+          maximumAge: 300000,
+        };
+
+        navigator.geolocation.getCurrentPosition(
+          handleEnhancedLocationSuccess,
+          handleEnhancedLocationError,
+          options
+        );
+      }
+
+      // Handle successful location capture (renamed to avoid conflicts)
+      function handleEnhancedLocationSuccess(position) {
+        console.log("✅ Enhanced location obtained successfully");
+
+        currentUserLocation = {
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+          accuracy: position.coords.accuracy,
+          altitude: position.coords.altitude,
+          timestamp: new Date(),
+          source: "gps",
+          address: null,
+        };
+
+        console.log("📍 Enhanced location data:", currentUserLocation);
+
+        // Reverse geocode to get address
+        reverseGeocodeEnhanced(currentUserLocation.latitude, currentUserLocation.longitude);
+
+        locationCaptureActive = false;
+      }
+
+      // Handle location capture errors (renamed to avoid conflicts)
+      function handleEnhancedLocationError(error) {
+        console.log("❌ Enhanced location error:", error.message);
+        currentUserLocation.source = "manual";
+        locationCaptureActive = false;
+      }
+
+      // Reverse geocode coordinates to address (renamed to avoid conflicts)
+      function reverseGeocodeEnhanced(lat, lng) {
+        console.log(`🌍 Starting enhanced reverse geocoding for: ${lat}, ${lng}`);
+
+        // Using Nominatim (OpenStreetMap) reverse geocoding service
+        const url = `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json&addressdetails=1&zoom=18`;
+
+        fetch(url, {
+          method: "GET",
+          headers: {
+            "User-Agent": "QR-Attendance-System/1.0",
+          },
+        })
+          .then((response) => response.json())
+          .then((data) => {
+            if (data && data.display_name) {
+              currentUserLocation.address = data.display_name;
+              console.log(`✅ Enhanced reverse geocoded address: ${currentUserLocation.address}`);
+            } else {
+              console.log(`⚠️ No address found, using coordinates as fallback`);
+              currentUserLocation.address = `${lat.toFixed(10)}, ${lng.toFixed(10)}`;
+            }
+          })
+          .catch((error) => {
+            console.error(`❌ Enhanced reverse geocoding error:`, error);
+            // Fallback to coordinates if reverse geocoding fails
+            currentUserLocation.address = `${lat.toFixed(10)}, ${lng.toFixed(10)}`;
+          });
+      }
+
+      // Enhanced form handling with bilingual status messages
+      function initializeFormHandling() {
+        const form = document.getElementById('checkinForm');
+        const submitButton = document.getElementById('submitButton');
+        
+        console.log('🔧 Initializing enhanced form handling...');
+        console.log('Form element:', form);
+        console.log('Submit button:', submitButton);
+        
+        if (form && submitButton) {
+          // Remove any existing event listeners
+          form.removeEventListener('submit', handleEnhancedFormSubmission);
+          submitButton.removeEventListener('click', handleEnhancedFormSubmission);
+          
+          // Add form submit event listener
+          form.addEventListener('submit', function(e) {
+            console.log('📝 Enhanced form submit event triggered');
+            e.preventDefault();
+            handleEnhancedFormSubmission();
+          });
+          
+          // Also add click event listener to button as backup
+          submitButton.addEventListener('click', function(e) {
+            console.log('🖱️ Enhanced button click event triggered');
+            e.preventDefault();
+            handleEnhancedFormSubmission();
+          });
+          
+          console.log('✅ Enhanced form handling initialized successfully');
+        } else {
+          console.error('❌ Form or submit button not found!');
+        }
+      }
+
+      // Handle form submission with location data (renamed to avoid conflicts)
+      function handleEnhancedFormSubmission() {
+        console.log('🚀 handleEnhancedFormSubmission called');
+        
+        const employeeId = document.getElementById('employee_id').value.trim();
+        const submitButton = document.getElementById('submitButton');
+        
+        console.log('Employee ID:', employeeId);
+        console.log('Submit button:', submitButton);
+        
+        if (!employeeId) {
+          console.log('❌ No employee ID provided');
+          showStatusMessage('Please enter your Employee ID / Por favor ingrese su ID de empleado', 'error');
+          return;
+        }
+
+        console.log('✅ Employee ID valid, proceeding with enhanced submission');
+
+        // Save Employee ID to localStorage for next time
+        try {
+          localStorage.setItem('qr_last_employee_id', employeeId);
+          console.log(`💾 Saved employee ID for next time: ${employeeId}`);
+        } catch (error) {
+          console.log(`❌ Error saving employee ID: ${error.message}`);
+        }
+
+        // Disable button and show processing
+        if (submitButton) {
+          submitButton.disabled = true;
+          submitButton.innerHTML = `
+            <div class="loading-spinner"></div>
+            <span class="english-text">Processing</span>
+            <span class="language-separator">/</span>
+            <span class="spanish-text">Procesando</span>
+          `;
+        }
+
+        showStatusMessage('Processing check-in... / Procesando registro...', 'processing');
+
+        // Get current URL to determine QR URL
+        const pathParts = window.location.pathname.split('/');
+        const qrUrl = pathParts[pathParts.length - 1];
+        
+        console.log('QR URL:', qrUrl);
+        console.log('Current enhanced location data:', currentUserLocation);
+
+        // Prepare form data with location information
+        const formData = new FormData();
+        formData.append('employee_id', employeeId);
+        
+        // Add location data to form submission
+        if (currentUserLocation.latitude !== null) {
+          formData.append('latitude', currentUserLocation.latitude.toString());
+        }
+        if (currentUserLocation.longitude !== null) {
+          formData.append('longitude', currentUserLocation.longitude.toString());
+        }
+        if (currentUserLocation.accuracy !== null) {
+          formData.append('accuracy', currentUserLocation.accuracy.toString());
+        }
+        if (currentUserLocation.altitude !== null) {
+          formData.append('altitude', currentUserLocation.altitude.toString());
+        }
+        if (currentUserLocation.address) {
+          formData.append('address', currentUserLocation.address);
+        }
+        formData.append('location_source', currentUserLocation.source);
+
+        console.log('📤 Submitting enhanced form with location data:', {
+          employee_id: employeeId,
+          latitude: currentUserLocation.latitude,
+          longitude: currentUserLocation.longitude,
+          accuracy: currentUserLocation.accuracy,
+          altitude: currentUserLocation.altitude,
+          address: currentUserLocation.address,
+          location_source: currentUserLocation.source
+        });
+
+        // Submit to backend
+        fetch(`/qr/${qrUrl}/checkin`, {
+          method: 'POST',
+          body: formData
+        })
+        .then(response => {
+          console.log('📨 Received enhanced response:', response);
+          return response.json();
+        })
+        .then(data => {
+          console.log('📨 Enhanced response data:', data);
+          if (data.success) {
+            showStatusMessage('Submission successful! / Envío exitoso', 'success');
+            showEnhancedSuccessCard(data);
+          } else {
+            showStatusMessage(data.message || 'Submission failed / Envío fallido', 'error');
+            resetEnhancedSubmitButton();
+          }
+        })
+        .catch(error => {
+          console.error('❌ Enhanced fetch error:', error);
+          showStatusMessage('Network error / Error de red', 'error');
+          resetEnhancedSubmitButton();
+        });
+      }
+
+      // Reset submit button (renamed to avoid conflicts)
+      function resetEnhancedSubmitButton() {
+        const submitButton = document.getElementById('submitButton');
+        submitButton.disabled = false;
+        
+        // Get the current location event from the page
+        const isCheckOut = document.body.classList.contains('check-out');
+        
+        if (isCheckOut) {
+          submitButton.innerHTML = `
+            <i class="fas fa-sign-out-alt"></i>
+            <span class="english-text">Check Out</span>
+            <span class="language-separator">/</span>
+            <span class="spanish-text">Registrar Salida</span>
+          `;
+        } else {
+          submitButton.innerHTML = `
+            <i class="fas fa-sign-in-alt"></i>
+            <span class="english-text">Check In</span>
+            <span class="language-separator">/</span>
+            <span class="spanish-text">Registrar Entrada</span>
+          `;
+        }
+      }
+
+      // Enhanced status message display with color coding
+      function showStatusMessage(message, type) {
+        const statusMessage = document.getElementById('statusMessage');
+        const statusSpan = statusMessage.querySelector('span');
+        
+        statusSpan.innerHTML = message;
+        statusMessage.className = `status-message ${type} show`;
+        
+        setTimeout(() => {
+          statusMessage.classList.remove('show');
+        }, 5000);
+      }
+
+      // Enhanced success display with bilingual details (renamed to avoid conflicts)
+      function showEnhancedSuccessCard(data) {
+        const successCard = document.getElementById('successCard');
+        const checkinCard = document.querySelector('.checkin-card');
+        const successDetails = document.getElementById('successDetails');
+        
+        // Hide check-in form
+        checkinCard.style.display = 'none';
+        
+        // Get employee ID from form input (since data.employee_id might be undefined)
+        const employeeIdInput = document.getElementById('employee_id');
+        const employeeId = data.employee_id || (employeeIdInput ? employeeIdInput.value.trim() : 'N/A');
+        
+        // Use QR code location instead of GPS address for main location display
+        const qrLocationElement = document.querySelector('.location-info');
+        let qrLocationName = 'Unknown Location';
+        if (qrLocationElement) {
+          // Extract text content, removing the icon
+          const locationText = qrLocationElement.textContent || qrLocationElement.innerText;
+          qrLocationName = locationText.trim();
+        }
+        
+        // Get location event (Check In or Check Out)
+        const isCheckOut = document.body.classList.contains('check-out');
+        const locationEvent = isCheckOut ? 'Check Out' : 'Check In';
+        const locationEventSpanish = isCheckOut ? 'Salida' : 'Entrada';
+        
+        // Alternative: try to get from page title or header
+        if (qrLocationName === 'Unknown Location') {
+          const headerElement = document.querySelector('.destination-header h1');
+          if (headerElement) {
+            // Extract just the location event part (Check In/Check Out)
+            qrLocationName = data.location || 'Check-in Location';
+          }
+        }
+
+        successDetails.innerHTML = `
+          <div class="detail-row">
+            <span class="detail-label">
+              <span class="english-text">Employee ID</span>
+              <span class="language-separator">/</span>
+              <span class="spanish-text">ID de Empleado</span>
+            </span>
+            <span class="detail-value">${employeeId}</span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">
+              <span class="english-text">Event</span>
+              <span class="language-separator">/</span>
+              <span class="spanish-text">Evento</span>
+            </span>
+            <span class="detail-value">
+              <span class="english-text">${locationEvent}</span>
+              <span class="language-separator">/</span>
+              <span class="spanish-text">${locationEventSpanish}</span>
+            </span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">
+              <span class="english-text">Time</span>
+              <span class="language-separator">/</span>
+              <span class="spanish-text">Hora</span>
+            </span>
+            <span class="detail-value">${data.timestamp || new Date().toLocaleString()}</span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">
+              <span class="english-text">Location</span>
+              <span class="language-separator">/</span>
+              <span class="spanish-text">Ubicación</span>
+            </span>
+            <span class="detail-value">${qrLocationName}</span>
+          </div>
+        `;
+        
+        // Show success card
+        successCard.classList.add('show');
+        
+        console.log('✅ Enhanced success card displayed with:', {
+          employeeId: employeeId,
+          locationEvent: locationEvent,
+          qrLocation: qrLocationName,
+          timestamp: data.timestamp || new Date().toLocaleString()
+        });
+      }
+    </script>
+  </body>
+</html>
\ No newline at end of file
