05/19 Fix geocode using Google Maps error

2026-05-19 16:08:10 -04:00
parent 023b2fdf46
commit eb991bd645
1 changed files with 1409 additions and 778 deletions
@@ -1,11 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Create QR Code - QR Management System</title>
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+      rel="stylesheet"
+    />
    <style>
      :root {
        --primary-color: #2563eb;
@@ -41,9 +43,11 @@
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          sans-serif;
-      background: linear-gradient(135deg,
+        background: linear-gradient(
+          135deg,
          var(--gray-50) 0%,
-          var(--gray-100) 100%);
+          var(--gray-100) 100%
+        );
        color: var(--gray-800);
        line-height: 1.6;
        min-height: 100vh;
@@ -519,17 +523,9 @@
      }

      @keyframes pulse {
-      0% {
-        transform: scale(1);
-      }
-
-      50% {
-        transform: scale(1.05);
-      }
-
-      100% {
-        transform: scale(1);
-      }
+        0% { transform: scale(1); }
+        50% { transform: scale(1.05); }
+        100% { transform: scale(1); }
      }

      /* Toast notification styles */
@@ -548,8 +544,13 @@
        font-size: 1.1rem;
      }
    </style>
+  <!-- CSRF token for AJAX requests (mirrors base_authenticated.html injection) -->
+  <script>
+    window.qrConfig = {
+      csrfToken: '{{ csrf_token() }}'
+    };
+  </script>
  </head>
-
  <body>
    <div class="container">
      <div class="form-container">
@@ -562,8 +563,7 @@
        </div>

        <div style="margin-top: 1rem; margin-bottom: 1rem;">
-        <a href="{{ url_for('qr_codes.import_bulk_qr_codes') }}" class="btn btn-outline"
-          style="display: inline-flex; align-items: center; gap: 0.5rem;">
+          <a href="{{ url_for('qr_codes.import_bulk_qr_codes') }}" class="btn btn-outline" style="display: inline-flex; align-items: center; gap: 0.5rem;">
            <i class="fas fa-file-excel"></i>
            Bulk Import from Excel
          </a>
@@ -586,9 +586,17 @@
                <i class="fas fa-tag"></i>
                QR Code Name <span style="color: var(--error-color)">*</span>
              </label>
-            <input type="text" id="name" name="name" required
-              placeholder="e.g., Main Office Entrance, Conference Room A" maxlength="100" />
-            <small class="form-help">A unique name to identify this QR code</small>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                required
+                placeholder="e.g., Main Office Entrance, Conference Room A"
+                maxlength="100"
+              />
+              <small class="form-help"
+                >A unique name to identify this QR code</small
+              >
              <div class="character-counter">
                <span id="nameCounter">0/100</span>
              </div>
@@ -619,10 +627,18 @@
                <i class="fas fa-map-marker-alt"></i>
                Location Name <span style="color: var(--error-color)">*</span>
              </label>
-              <input type="text" id="location" name="location" required
-                placeholder="e.g., Corporate Headquarters, Branch Office" maxlength="100" />
-              <small class="form-help">The name of the physical location where this QR code will be
-                used</small>
+              <input
+                type="text"
+                id="location"
+                name="location"
+                required
+                placeholder="e.g., Corporate Headquarters, Branch Office"
+                maxlength="100"
+              />
+              <small class="form-help"
+                >The name of the physical location where this QR code will be
+                used</small
+              >
              <div class="character-counter">
                <span id="locationCounter">0/100</span>
              </div>
@@ -666,17 +682,28 @@
                Complete Address
                <span style="color: var(--error-color)">*</span>
              </label>
-              <textarea id="location_address" name="location_address" required
-                placeholder="Enter the full address including street, city, state, and ZIP code" rows="3"
-                maxlength="500"></textarea>
-              <small class="form-help">Include all address details for accurate location
-                identification</small>
+              <textarea
+                id="location_address"
+                name="location_address"
+                required
+                placeholder="Enter the full address including street, city, state, and ZIP code"
+                rows="3"
+                maxlength="500"
+              ></textarea>
+              <small class="form-help"
+                >Include all address details for accurate location
+                identification</small
+              >
              <div class="character-counter">
                <span id="addressCounter">0/500</span>
              </div>

              <!-- Address Coordinates Section -->
-              <div class="coordinates-section" id="coordinatesSection" style="display: none">
+              <div
+                class="coordinates-section"
+                id="coordinatesSection"
+                style="display: none"
+              >
                <div class="coordinates-header">
                  <i class="fas fa-crosshairs"></i>
                  <h4>Address Coordinates</h4>
@@ -699,11 +726,20 @@
                  </div>

                  <div class="coordinates-actions">
-                    <button type="button" class="btn-coordinate" id="geocodeBtn">
+                    <button
+                      type="button"
+                      class="btn-coordinate"
+                      id="geocodeBtn"
+                    >
                      <i class="fas fa-search-location"></i>
                      Get Coordinates
                    </button>
-                    <button type="button" class="btn-coordinate" id="clearCoordinatesBtn" style="display: none">
+                    <button
+                      type="button"
+                      class="btn-coordinate"
+                      id="clearCoordinatesBtn"
+                      style="display: none"
+                    >
                      <i class="fas fa-times"></i>
                      Clear
                    </button>
@@ -725,12 +761,19 @@
                Event or Purpose
                <span style="color: var(--error-color)">*</span>
              </label>
-            <select id="location_event" name="location_event" required class="form-control">
+              <select
+                id="location_event"
+                name="location_event"
+                required
+                class="form-control"
+              >
                <option value="">Select Event Type</option>
                <option value="Check In">Check In</option>
                <option value="Check Out">Check Out</option>
              </select>
-            <small class="form-help">Select the event type for this QR code</small>
+              <small class="form-help"
+                >Select the event type for this QR code</small
+              >
            </div>

          </div>
@@ -746,21 +789,18 @@
              <p>Require a photo when employee check-in location is too far from the QR code</p>
            </div>
            <div class="form-group">
-            <label class="toggle-label" for="photo_verification_enabled"
-              style="display:flex;align-items:center;gap:0.75rem;cursor:pointer;">
-              <div class="toggle-switch" id="photoVerifyToggle"
-                style="position:relative;display:inline-block;width:52px;height:28px;">
+              <label class="toggle-label" for="photo_verification_enabled" style="display:flex;align-items:center;gap:0.75rem;cursor:pointer;">
+                <div class="toggle-switch" id="photoVerifyToggle" style="position:relative;display:inline-block;width:52px;height:28px;">
                  <input type="checkbox" id="photo_verification_enabled" name="photo_verification_enabled" value="1"
-                  checked style="opacity:0;width:0;height:0;position:absolute;" onchange="syncPhotoVerifyHidden(this)">
-                <span class="toggle-slider"
-                  style="position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:28px;transition:0.3s;"></span>
+                    checked
+                    style="opacity:0;width:0;height:0;position:absolute;"
+                    onchange="syncPhotoVerifyHidden(this)">
+                  <span class="toggle-slider" style="position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:28px;transition:0.3s;"></span>
                </div>
-              <span id="photoVerifyLabel"
-                style="font-weight:600;color:var(--gray-700);font-size:0.875rem;">Enabled</span>
+                <span id="photoVerifyLabel" style="font-weight:600;color:var(--gray-700);font-size:0.875rem;">Enabled</span>
              </label>
              <input type="hidden" name="photo_verification_enabled" id="photo_verification_hidden" value="1">
-            <small class="form-help">When disabled, photo verification is skipped for this QR code regardless of
-              distance</small>
+              <small class="form-help">When disabled, photo verification is skipped for this QR code regardless of distance</small>
            </div>
          </div>

@@ -783,8 +823,12 @@
              <select id="style_id" name="style_id" onchange="applyStylePreset()">
                <option value="">Custom Style</option>
                {% for style in styles %}
-              <option value="{{ style.id }}" data-fill="{{ style.fill_color }}" data-back="{{ style.back_color }}"
-                data-box-size="{{ style.box_size }}" data-border="{{ style.border }}"
+                <option 
+                  value="{{ style.id }}" 
+                  data-fill="{{ style.fill_color }}" 
+                  data-back="{{ style.back_color }}"
+                  data-box-size="{{ style.box_size }}"
+                  data-border="{{ style.border }}"
                  data-error-correction="{{ style.error_correction }}">
                  {{ style.name }}
                </option>
@@ -801,9 +845,21 @@
                  QR Code Color
                </label>
                <div class="color-input-group">
-                <input type="color" id="fill_color" name="fill_color" value="#000000" onchange="updatePreview()" />
-                <input type="text" id="fill_color_text" value="#000000" pattern="^#[0-9A-Fa-f]{6}$"
-                  placeholder="#000000" onchange="syncColorInput('fill')" />
+                  <input 
+                    type="color" 
+                    id="fill_color" 
+                    name="fill_color" 
+                    value="#000000"
+                    onchange="updatePreview()"
+                  />
+                  <input 
+                    type="text" 
+                    id="fill_color_text" 
+                    value="#000000" 
+                    pattern="^#[0-9A-Fa-f]{6}$"
+                    placeholder="#000000"
+                    onchange="syncColorInput('fill')"
+                  />
                </div>
                <span class="form-help">Color of the QR code modules</span>
              </div>
@@ -814,9 +870,21 @@
                  Background Color
                </label>
                <div class="color-input-group">
-                <input type="color" id="back_color" name="back_color" value="#FFFFFF" onchange="updatePreview()" />
-                <input type="text" id="back_color_text" value="#FFFFFF" pattern="^#[0-9A-Fa-f]{6}$"
-                  placeholder="#FFFFFF" onchange="syncColorInput('back')" />
+                  <input 
+                    type="color" 
+                    id="back_color" 
+                    name="back_color" 
+                    value="#FFFFFF"
+                    onchange="updatePreview()"
+                  />
+                  <input 
+                    type="text" 
+                    id="back_color_text" 
+                    value="#FFFFFF" 
+                    pattern="^#[0-9A-Fa-f]{6}$"
+                    placeholder="#FFFFFF"
+                    onchange="syncColorInput('back')"
+                  />
                </div>
                <span class="form-help">Background color of the QR code</span>
              </div>
@@ -830,8 +898,15 @@
                  Module Size
                </label>
                <div class="range-input-group">
-                <input type="range" id="box_size" name="box_size" min="5" max="20" value="10"
-                  oninput="updateRangeValue('box_size'); updatePreview()" />
+                  <input 
+                    type="range" 
+                    id="box_size" 
+                    name="box_size" 
+                    min="5" 
+                    max="20" 
+                    value="10"
+                    oninput="updateRangeValue('box_size'); updatePreview()"
+                  />
                  <span class="range-value" id="box_size_value">10px</span>
                </div>
                <span class="form-help">Size of each QR code module (affects overall size)</span>
@@ -843,8 +918,15 @@
                  Border Size
                </label>
                <div class="range-input-group">
-                <input type="range" id="border" name="border" min="1" max="10" value="4"
-                  oninput="updateRangeValue('border'); updatePreview()" />
+                  <input 
+                    type="range" 
+                    id="border" 
+                    name="border" 
+                    min="1" 
+                    max="10" 
+                    value="4"
+                    oninput="updateRangeValue('border'); updatePreview()"
+                  />
                  <span class="range-value" id="border_value">4 modules</span>
                </div>
                <span class="form-help">White border around the QR code</span>
@@ -897,6 +979,555 @@

          <!-- Hidden coordinate fields for form submission -->
          <input type="hidden" id="latitude" name="latitude" value="" />
+          <input type="hidden" id="longitude" name="longitude" value="" />
+          <input
+            type="hidden"
+            id="coordinate_accuracy"
+            name="coordinate_accuracy"
+            value=""
+          />
+
+          <!-- Form Actions -->
+          <div class="form-actions">
+            <a href="{{ url_for('dashboard.dashboard') }}" class="btn btn-secondary">
+              <i class="fas fa-arrow-left"></i>
+              Cancel
+            </a>
+            <button type="button" class="btn btn-outline" onclick="resetToDefaults()">
+              <i class="fas fa-undo"></i>
+              Reset Styling
+            </button>
+            <button type="submit" class="btn btn-primary" id="submitBtn">
+              <i class="fas fa-save"></i>
+              Create QR Code
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <script>
+      // Character counting functionality
+      function updateCharacterCount(inputId, counterId, maxLength) {
+        const input = document.getElementById(inputId);
+        const counter = document.getElementById(counterId);
+        
+        if (input && counter) {
+          const length = input.value.length;
+          counter.textContent = `${length}/${maxLength}`;
+          
+          if (length > maxLength * 0.9) {
+            counter.classList.add('warning');
+          } else {
+            counter.classList.remove('warning');
+          }
+        }
+      }
+
+      // QR Code Customization JavaScript Functions
+      function applyStylePreset() {
+        const styleSelect = document.getElementById('style_id');
+        const selectedOption = styleSelect.options[styleSelect.selectedIndex];
+        
+        if (selectedOption.value) {
+          // Apply preset values
+          const fillColor = selectedOption.getAttribute('data-fill');
+          const backColor = selectedOption.getAttribute('data-back');
+          const boxSize = selectedOption.getAttribute('data-box-size');
+          const border = selectedOption.getAttribute('data-border');
+          const errorCorrection = selectedOption.getAttribute('data-error-correction');
+          
+          // Update form inputs
+          document.getElementById('fill_color').value = fillColor;
+          document.getElementById('fill_color_text').value = fillColor;
+          document.getElementById('back_color').value = backColor;
+          document.getElementById('back_color_text').value = backColor;
+          document.getElementById('box_size').value = boxSize;
+          document.getElementById('border').value = border;
+          document.getElementById('error_correction').value = errorCorrection;
+          
+          // Update range value displays
+          updateRangeValue('box_size');
+          updateRangeValue('border');
+          
+          // Update preview
+          updatePreview();
+          
+          // Show toast notification
+          showToast(`Applied "${selectedOption.text}" style preset`, 'success');
+        }
+      }
+
+      function syncColorInput(type) {
+        const colorInput = document.getElementById(`${type}_color`);
+        const textInput = document.getElementById(`${type}_color_text`);
+        
+        let value = textInput.value.trim().toUpperCase();
+        
+        // Add # if missing
+        if (!value.startsWith('#')) {
+          value = '#' + value;
+        }
+        
+        // Validate hex format
+        if (/^#[0-9A-F]{6}$/i.test(value)) {
+          colorInput.value = value;
+          textInput.value = value;
+          updatePreview();
+        } else {
+          // Reset to previous valid value
+          textInput.value = colorInput.value;
+          showToast('Invalid color format. Use #RRGGBB format.', 'warning');
+        }
+      }
+
+      function updateRangeValue(inputId) {
+        const input = document.getElementById(inputId);
+        const valueDisplay = document.getElementById(`${inputId}_value`);
+        
+        if (inputId === 'box_size') {
+          valueDisplay.textContent = `${input.value}px`;
+        } else if (inputId === 'border') {
+          valueDisplay.textContent = `${input.value} modules`;
+        }
+      }
+
+      function updatePreview() {
+        const fillColor = document.getElementById('fill_color').value;
+        const backColor = document.getElementById('back_color').value;
+        const boxSize = document.getElementById('box_size').value;
+        const border = document.getElementById('border').value;
+        
+        // Update preview QR modules
+        const qrSample = document.getElementById('qr_sample');
+        const qrModules = qrSample.querySelectorAll('.qr-module:not(.empty)');
+        
+        // Apply colors to QR modules
+        qrModules.forEach(module => {
+          module.style.backgroundColor = fillColor;
+        });
+        
+        // Apply background color
+        qrSample.style.backgroundColor = backColor;
+        
+        // Apply border (padding represents border)
+        const borderPx = Math.max(4, parseInt(border) * 2);
+        qrSample.style.padding = `${borderPx}px`;
+        
+        // Apply module size effect (simulate with scale)
+        const scale = Math.max(0.7, Math.min(1.3, parseInt(boxSize) / 10));
+        qrSample.style.transform = `scale(${scale})`;
+        
+        // Sync text inputs with color inputs
+        document.getElementById('fill_color_text').value = fillColor.toUpperCase();
+        document.getElementById('back_color_text').value = backColor.toUpperCase();
+        
+        // Add animation class
+        const preview = document.getElementById('qr_preview');
+        preview.style.animation = 'none';
+        setTimeout(() => {
+          preview.style.animation = 'pulse 0.3s ease-in-out';
+        }, 10);
+      }
+
+      function resetToDefaults() {
+        document.getElementById('style_id').value = '';
+        document.getElementById('fill_color').value = '#000000';
+        document.getElementById('fill_color_text').value = '#000000';
+        document.getElementById('back_color').value = '#FFFFFF';
+        document.getElementById('back_color_text').value = '#FFFFFF';
+        document.getElementById('box_size').value = '10';
+        document.getElementById('border').value = '4';
+        document.getElementById('error_correction').value = 'L';
+        
+        updateRangeValue('box_size');
+        updateRangeValue('border');
+        updatePreview();
+        
+        showToast('Reset to default QR code styling', 'info');
+      }
+
+      function showToast(message, type = 'info') {
+        // Create toast notification
+        const toast = document.createElement('div');
+        toast.className = `toast toast-${type}`;
+        toast.innerHTML = `
+          <div class="toast-content">
+            <i class="fas ${getToastIcon(type)}"></i>
+            <span>${message}</span>
+          </div>
+        `;
+        
+        toast.style.cssText = `
+          position: fixed;
+          top: 20px;
+          right: 20px;
+          background: white;
+          border-radius: 8px;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+          padding: 1rem;
+          z-index: 1000;
+          opacity: 0;
+          transform: translateX(100%);
+          transition: all 0.3s ease;
+          border-left: 4px solid ${getToastColor(type)};
+          max-width: 350px;
+        `;
+        
+        document.body.appendChild(toast);
+        
+        setTimeout(() => {
+          toast.style.opacity = '1';
+          toast.style.transform = 'translateX(0)';
+        }, 100);
+        
+        setTimeout(() => {
+          toast.style.opacity = '0';
+          toast.style.transform = 'translateX(100%)';
+          setTimeout(() => {
+            if (document.body.contains(toast)) {
+              document.body.removeChild(toast);
+            }
+          }, 300);
+        }, 3000);
+      }
+
+      function getToastIcon(type) {
+        const icons = {
+          success: 'fa-check-circle',
+          error: 'fa-exclamation-circle',
+          warning: 'fa-exclamation-triangle',
+          info: 'fa-info-circle'
+        };
+        return icons[type] || icons.info;
+      }
+
+      function getToastColor(type) {
+        const colors = {
+          success: '#059669',
+          error: '#dc2626',
+          warning: '#d97706',
+          info: '#0891b2'
+        };
+        return colors[type] || colors.info;
+      }
+
+      // Form validation
+      function validateQRCustomization() {
+        const fillColor = document.getElementById('fill_color_text').value;
+        const backColor = document.getElementById('back_color_text').value;
+        
+        // Check if colors are too similar
+        if (fillColor.toLowerCase() === backColor.toLowerCase()) {
+          showToast('QR code color and background color cannot be the same', 'error');
+          return false;
+        }
+        
+        // Check contrast (basic check)
+        if (getColorBrightness(fillColor) === getColorBrightness(backColor)) {
+          showToast('Warning: Low contrast may affect QR code readability', 'warning');
+        }
+        
+        return true;
+      }
+
+      function getColorBrightness(hex) {
+        const r = parseInt(hex.substr(1, 2), 16);
+        const g = parseInt(hex.substr(3, 2), 16);
+        const b = parseInt(hex.substr(5, 2), 16);
+        return (r * 299 + g * 587 + b * 114) / 1000;
+      }
+
+      // Geocoding functionality - Enhanced version to match your original
+      let coordinatesData = {
+        latitude: null,
+        longitude: null,
+        accuracy: null
+      };
+
+      function geocodeAddress(address) {
+        showStatus('info', 'Getting coordinates...');
+        
+        // Show loading state
+        const geocodeBtn = document.getElementById('geocodeBtn');
+        geocodeBtn.innerHTML = '<span class="loading-spinner"></span> Getting coordinates...';
+        geocodeBtn.disabled = true;
+        
+        // Try your API first, then fallback to OSM
+        fetch('/api/geocode', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
+          },
+          body: JSON.stringify({ address: address })
+        })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            // Update coordinates from your API
+            coordinatesData = {
+              latitude: data.data.latitude,
+              longitude: data.data.longitude,
+              accuracy: data.data.accuracy || 'geocoded'
+            };
+            
+            updateCoordinatesDisplay();
+            updateHiddenFields();
+            showStatus('success', data.message || 'Coordinates found successfully');
+            showCoordinatesSection();
+          } else {
+            // Fallback to OpenStreetMap Nominatim API
+            fallbackToOSMGeocoding(address);
+          }
+        })
+        .catch(error => {
+          console.error('Primary geocoding error:', error);
+          // Fallback to OpenStreetMap Nominatim API
+          fallbackToOSMGeocoding(address);
+        })
+        .finally(() => {
+          // Reset button state
+          geocodeBtn.innerHTML = '<i class="fas fa-search-location"></i> Get Coordinates';
+          geocodeBtn.disabled = false;
+        });
+      }
+
+      function fallbackToOSMGeocoding(address) {
+        // Using OpenStreetMap Nominatim API as fallback when Google Maps fails
+        const encodedAddress = encodeURIComponent(address);
+        const url = `https://nominatim.openstreetmap.org/search?format=json&q=${encodedAddress}&limit=1`;
+        
+        fetch(url)
+          .then(response => response.json())
+          .then(data => {
+            if (data && data.length > 0) {
+              const result = data[0];
+              coordinatesData = {
+                latitude: parseFloat(result.lat),
+                longitude: parseFloat(result.lon),
+                accuracy: 'geocoded'
+              };
+              
+              updateCoordinatesDisplay();
+              updateHiddenFields();
+              showStatus('success', 'Coordinates found successfully (OpenStreetMap fallback - Google Maps unavailable)');
+              showCoordinatesSection();
+            } else {
+              showStatus('warning', 'No coordinates found for this address');
+            }
+          })
+          .catch(error => {
+            console.error('Fallback geocoding error:', error);
+            showStatus('error', 'Failed to get coordinates. Please try again.');
+          });
+      }
+
+      function updateCoordinatesDisplay() {
+        const latDisplay = document.getElementById('latitudeDisplay');
+        const lngDisplay = document.getElementById('longitudeDisplay');
+        const clearBtn = document.getElementById('clearCoordinatesBtn');
+
+        if (coordinatesData.latitude && coordinatesData.longitude) {
+          latDisplay.textContent = coordinatesData.latitude.toFixed(10);
+          lngDisplay.textContent = coordinatesData.longitude.toFixed(10);
+          clearBtn.style.display = 'inline-flex';
+          
+          // Update button text
+          document.getElementById('geocodeBtn').innerHTML = '<i class="fas fa-search-location"></i> Update Coordinates';
+        } else {
+          latDisplay.textContent = '---.----------';
+          lngDisplay.textContent = '---.----------';
+          clearBtn.style.display = 'none';
+          
+          // Reset button text
+          document.getElementById('geocodeBtn').innerHTML = '<i class="fas fa-search-location"></i> Get Coordinates';
+        }
+      }
+
+      function updateHiddenFields() {
+        console.log('📝 Updating hidden coordinate fields');
+
+        // Update hidden form fields with coordinate data
+        const latitudeField = document.getElementById('latitude');
+        const longitudeField = document.getElementById('longitude');
+        const accuracyField = document.getElementById('coordinate_accuracy');
+
+        if (coordinatesData.latitude && coordinatesData.longitude) {
+          latitudeField.value = coordinatesData.latitude;
+          longitudeField.value = coordinatesData.longitude;
+          accuracyField.value = coordinatesData.accuracy || 'geocoded';
+
+          console.log('✓ Hidden fields updated:', {
+            latitude: latitudeField.value,
+            longitude: longitudeField.value,
+            accuracy: accuracyField.value,
+          });
+        } else {
+          // Clear fields if no coordinates
+          latitudeField.value = '';
+          longitudeField.value = '';
+          accuracyField.value = '';
+          
+          console.log('✓ Hidden fields cleared');
+        }
+      }
+
+      function clearCoordinates() {
+        coordinatesData = {
+          latitude: null,
+          longitude: null,
+          accuracy: null
+        };
+        
+        updateCoordinatesDisplay();
+        updateHiddenFields();
+        showStatus('info', 'Coordinates cleared');
+      }
+
+      function showCoordinatesSection() {
+        const section = document.getElementById('coordinatesSection');
+        if (section) {
+          section.style.display = 'block';
+        }
+      }
+
+      function showStatus(type, message) {
+        const statusDiv = document.getElementById('coordinateStatus');
+        if (statusDiv) {
+          statusDiv.innerHTML = `<div class="status-${type}" style="padding: 0.5rem; border-radius: 4px; margin-top: 0.5rem; font-size: 0.875rem;">${message}</div>`;
+          
+          setTimeout(() => {
+            statusDiv.innerHTML = '';
+          }, 5000);
+        }
+      }
+
+      // Initialize on page load
+      document.addEventListener('DOMContentLoaded', function() {
+        // Set up character counters
+        document.getElementById('name').addEventListener('input', () => updateCharacterCount('name', 'nameCounter', 100));
+        document.getElementById('location').addEventListener('input', () => updateCharacterCount('location', 'locationCounter', 100));
+        document.getElementById('location_address').addEventListener('input', () => updateCharacterCount('location_address', 'addressCounter', 500));
+        
+        // Set up initial values
+        updateRangeValue('box_size');
+        updateRangeValue('border');
+        updatePreview();
+        
+        // Add form validation
+        const form = document.getElementById('createQRForm');
+        if (form) {
+          form.addEventListener('submit', function(e) {
+            if (!validateQRCustomization()) {
+              e.preventDefault();
+              return false;
+            }
+          });
+        }
+        
+        // Add color input synchronization
+        document.getElementById('fill_color').addEventListener('change', function() {
+          document.getElementById('fill_color_text').value = this.value.toUpperCase();
+          updatePreview();
+        });
+        
+        document.getElementById('back_color').addEventListener('change', function() {
+          document.getElementById('back_color_text').value = this.value.toUpperCase();
+          updatePreview();
+        });
+
+        // Initialize geocoding functionality with automatic section showing
+        const addressInput = document.getElementById('location_address');
+        const coordinatesSection = document.getElementById('coordinatesSection');
+        const geocodeBtn = document.getElementById('geocodeBtn');
+        const clearBtn = document.getElementById('clearCoordinatesBtn');
+
+        // Show coordinates section when address has content (like your original)
+        addressInput.addEventListener('input', function() {
+          const address = this.value.trim();
+          if (address.length > 10) {
+            coordinatesSection.style.display = 'block';
+          } else {
+            coordinatesSection.style.display = 'none';
+            clearCoordinates();
+          }
+        });
+
+        geocodeBtn.addEventListener('click', function() {
+          const address = document.getElementById('location_address').value.trim();
+          if (address.length > 10) {
+            geocodeAddress(address);
+          } else {
+            showStatus('error', 'Please enter a complete address first');
+          }
+        });
+
+        clearBtn.addEventListener('click', clearCoordinates);
+      });
+    </script>
+
+    <!-- ===== Dynamic QR Type Toggle ===== -->
+    <script>
+      function toggleQRTypeSection() {
+        var type      = document.getElementById('qr_type').value;
+        var stdName   = document.getElementById('standardLocationNameGroup');
+        var stdDetails= document.getElementById('standardLocationDetailsSection');
+        var locInput  = document.getElementById('location');
+        var addrInput = document.getElementById('location_address');
+
+        if (type === 'dynamic') {
+          if (stdName)   stdName.style.display    = 'none';
+          if (stdDetails)stdDetails.style.display = 'none';
+          if (locInput)  locInput.removeAttribute('required');
+          if (addrInput) addrInput.removeAttribute('required');
+        } else {
+          if (stdName)   stdName.style.display    = 'block';
+          if (stdDetails)stdDetails.style.display = 'block';
+          if (locInput)  locInput.setAttribute('required', '');
+          if (addrInput) addrInput.setAttribute('required', '');
+        }
+      }
+    </script>
+    <!-- ===== END Dynamic QR Type Toggle ===== -->
+
+    <style>
+      /* Photo Verification Toggle */
+      #photo_verification_enabled:checked + .toggle-slider { background: var(--success-color, #10b981); }
+      .toggle-slider::before {
+        content: "";
+        position: absolute;
+        height: 20px;
+        width: 20px;
+        left: 4px;
+        bottom: 4px;
+        background: white;
+        border-radius: 50%;
+        transition: 0.3s;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+      }
+      #photo_verification_enabled:checked + .toggle-slider::before { transform: translateX(24px); }
+    </style>
+
+    <script>
+      function syncPhotoVerifyHidden(checkbox) {
+        document.getElementById('photo_verification_hidden').value = checkbox.checked ? '1' : '0';
+        document.getElementById('photoVerifyLabel').textContent = checkbox.checked ? 'Enabled' : 'Disabled';
+        document.getElementById('photoVerifyLabel').style.color = checkbox.checked ? 'var(--success-color, #10b981)' : 'var(--error-color, #ef4444)';
+      }
+      // Remove duplicate hidden field on submit (keep only the one synced by checkbox)
+      document.addEventListener('DOMContentLoaded', function() {
+        var form = document.getElementById('createQRForm');
+        if (form) {
+          form.addEventListener('submit', function() {
+            var cb = document.getElementById('photo_verification_enabled');
+            document.getElementById('photo_verification_hidden').value = cb && cb.checked ? '1' : '0';
+          });
+        }
+      });
+    </script>
+  </body>
+</html>"latitude" name="latitude" value="" />
        <input type="hidden" id="longitude" name="longitude" value="" />
        <input type="hidden" id="coordinate_accuracy" name="coordinate_accuracy" value="" />