From f81e3cea7f92c5021aaa01612b050803f6ae59ad Mon Sep 17 00:00:00 2001
From: NguyenND <ngodanguyen@gmail.com>
Date: Tue, 19 May 2026 16:18:31 -0400
Subject: [PATCH] 05/19 Implement Changing QR code name when editing

---
 templates/edit_qr_code.html | 573 ++++++++++++++++++++----------------
 1 file changed, 320 insertions(+), 253 deletions(-)

diff --git a/templates/edit_qr_code.html b/templates/edit_qr_code.html
index 88ea880..f08f9de 100644
--- a/templates/edit_qr_code.html
+++ b/templates/edit_qr_code.html
@@ -4,10 +4,7 @@
 {% block extra_head %}
 <style>
   /* Photo Verification Toggle */
-  #photo_verification_enabled:checked+.toggle-slider {
-    background: var(--success-color, #10b981);
-  }
-
+  #photo_verification_enabled:checked + .toggle-slider { background: var(--success-color, #10b981); }
   .toggle-slider::before {
     content: "";
     position: absolute;
@@ -18,12 +15,9 @@
     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);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
   }
+  #photo_verification_enabled:checked + .toggle-slider::before { transform: translateX(24px); }
 </style>
 <style>
   :root {
@@ -312,7 +306,7 @@
     background: var(--primary-color);
     cursor: pointer;
     border: 2px solid white;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
   }
 
   .range-input-group input[type="range"]::-moz-range-thumb {
@@ -322,7 +316,7 @@
     background: var(--primary-color);
     cursor: pointer;
     border: 2px solid white;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
   }
 
   .range-value {
@@ -567,18 +561,18 @@
     .form-row {
       grid-template-columns: 1fr;
     }
-
+    
     .qr-preview-container {
       flex-direction: column;
       text-align: center;
     }
-
+    
     .range-input-group {
       flex-direction: column;
       gap: 0.5rem;
       align-items: stretch;
     }
-
+    
     .range-value {
       text-align: center;
     }
@@ -602,17 +596,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 */
@@ -647,7 +633,7 @@
       </div>
 
       <form method="POST" class="form" id="editQRForm">
-        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <!-- Basic Information Section -->
         <div class="form-section">
           <div class="section-header">
@@ -661,15 +647,27 @@
           <div class="form-group">
             <label for="name">
               <i class="fas fa-tag"></i>
-              QR Code Name <span style="color: var(--error-color)">*</span>
+              QR Code Name
+              <span style="color: var(--secondary-color); font-size: 0.75rem; font-weight: 400; margin-left: 0.4rem;">
+                <i class="fas fa-lock"></i> Cannot be changed
+              </span>
             </label>
-            <input type="text" id="name" name="name" required value="{{ qr_code.name }}"
-              data-original="{{ qr_code.name }}" 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">{{ qr_code.name|length }}/100</span>
-            </div>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              required
+              value="{{ qr_code.name }}"
+              data-original="{{ qr_code.name }}"
+              placeholder="e.g., Main Office Entrance, Conference Room A"
+              maxlength="100"
+              readonly
+              style="background: var(--gray-100, #f1f5f9); cursor: not-allowed; color: var(--gray-700, #334155);"
+            />
+            <small class="form-help">
+              <i class="fas fa-info-circle"></i>
+              QR code name cannot be changed after creation as it is linked to the QR URL.
+            </small>
           </div>
 
           <!-- ===== ADDED: QR Code Type selector ===== -->
@@ -680,10 +678,8 @@
               <span style="color: var(--error-color)">*</span>
             </label>
             <select id="qr_type" name="qr_type" class="form-control" onchange="toggleQRTypeSection()">
-              <option value="standard" {% if qr_code.qr_type !='dynamic' %}selected{% endif %}>Standard — Fixed Location
-              </option>
-              <option value="dynamic" {% if qr_code.qr_type=='dynamic' %}selected{% endif %}>Dynamic — Employee Selects
-                Location</option>
+              <option value="standard" {% if qr_code.qr_type != 'dynamic' %}selected{% endif %}>Standard — Fixed Location</option>
+              <option value="dynamic" {% if qr_code.qr_type == 'dynamic' %}selected{% endif %}>Dynamic — Employee Selects Location</option>
             </select>
             <small class="form-help">
               <strong>Standard:</strong> employee checks in at one fixed location.<br>
@@ -693,23 +689,30 @@
           <!-- ===== END ADDED ===== -->
 
           <!-- ADDED: wrapper to hide/show for standard QR only -->
-          <div id="standardLocationNameGroup" {% if qr_code.qr_type=='dynamic' %}style="display:none;" {% endif %}>
-            <div class="form-group">
-              <label for="location">
-                <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" {% if qr_code.qr_type !='dynamic' %}required{% endif %}
-                value="{{ qr_code.location if qr_code.qr_type != 'dynamic' else '' }}"
-                data-original="{{ qr_code.location }}" 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">{{ qr_code.location|length if qr_code.qr_type != 'dynamic' else '0'
-                  }}/100</span>
-              </div>
+          <div id="standardLocationNameGroup" {% if qr_code.qr_type == 'dynamic' %}style="display:none;"{% endif %}>
+          <div class="form-group">
+            <label for="location">
+              <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"
+              {% if qr_code.qr_type != 'dynamic' %}required{% endif %}
+              value="{{ qr_code.location if qr_code.qr_type != 'dynamic' else '' }}"
+              data-original="{{ qr_code.location }}"
+              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">{{ qr_code.location|length if qr_code.qr_type != 'dynamic' else '0' }}/100</span>
             </div>
+          </div>
           </div><!-- end standardLocationNameGroup -->
 
           <div class="form-group">
@@ -717,11 +720,10 @@
               <i class="fas fa-folder"></i>
               Project (Optional)
             </label>
-            <select id="project_id" name="project_id" class="form-select"
-              data-original="{{ qr_code.project_id or '' }}">
+            <select id="project_id" name="project_id" class="form-select" data-original="{{ qr_code.project_id or '' }}">
               <option value="">Select a project (Optional)</option>
               {% for project in projects %}
-              <option value="{{ project.id }}" {% if qr_code.project_id==project.id %}selected{% endif %}>
+              <option value="{{ project.id }}" {% if qr_code.project_id == project.id %}selected{% endif %}>
                 {{ project.name }} ({{ project.qr_count }} QR codes)
               </option>
               {% endfor %}
@@ -734,81 +736,96 @@
         </div>
 
         <!-- Location Details Section — hidden when Dynamic QR type is selected -->
-        <div id="standardLocationDetailsSection" {% if qr_code.qr_type=='dynamic' %}style="display:none;" {% endif %}>
-          <div class="form-section">
-            <div class="section-header">
-              <h3>
-                <i class="fas fa-building"></i>
-                Location Details
-              </h3>
-              <p>Update the complete address and event information</p>
-            </div>
-
-            <div class="form-group">
-              <label for="location_address">
-                <i class="fas fa-home"></i>
-                Complete Address
-                <span style="color: var(--error-color)">*</span>
-              </label>
-              <textarea id="location_address" name="location_address" required
-                data-original="{{ qr_code.location_address }}"
-                placeholder="Enter the full address including street, city, state, and ZIP code" rows="3"
-                maxlength="500">{{ qr_code.location_address }}</textarea>
-              <small class="form-help">Include all address details for accurate location
-                identification</small>
-              <div class="character-counter">
-                <span id="addressCounter">{{ qr_code.location_address|length }}/500</span>
-              </div>
-
-              <!-- Address Coordinates Section -->
-              <div class="coordinates-section" id="coordinatesSection">
-                <div class="coordinates-header">
-                  <i class="fas fa-crosshairs"></i>
-                  <h4>Address Coordinates</h4>
-                </div>
-
-                <div class="coordinates-content">
-                  <div class="coordinate-display">
-                    <div class="coordinate-info">
-                      <div class="coordinate-value" id="latitudeDisplay">
-                        {% if qr_code.has_coordinates %}
-                        {{ "%.6f"|format(qr_code.address_latitude) }}
-                        {% else %}
-                        ---.----------
-                        {% endif %}
-                      </div>
-                      <div class="coordinate-label">Latitude</div>
-                    </div>
-                    <div class="coordinate-info">
-                      <div class="coordinate-value" id="longitudeDisplay">
-                        {% if qr_code.has_coordinates %}
-                        {{ "%.6f"|format(qr_code.address_longitude) }}
-                        {% else %}
-                        ---.----------
-                        {% endif %}
-                      </div>
-                      <div class="coordinate-label">Longitude</div>
-                    </div>
-                  </div>
-
-                  <div class="coordinates-actions">
-                    <button type="button" class="btn-coordinate" id="geocodeBtn">
-                      <i class="fas fa-search-location"></i>
-                      {% if qr_code.has_coordinates %}Update{% else %}Get{% endif %} Coordinates
-                    </button>
-                    <button type="button" class="btn-coordinate" id="clearCoordinatesBtn"
-                      style="display: {% if qr_code.has_coordinates %}inline-flex{% else %}none{% endif %};">
-                      <i class="fas fa-times"></i>
-                      Clear
-                    </button>
-                  </div>
-
-                  <div id="coordinateStatus"></div>
-                </div>
-              </div>
-            </div>
-
+        <div id="standardLocationDetailsSection" {% if qr_code.qr_type == 'dynamic' %}style="display:none;"{% endif %}>
+        <div class="form-section">
+          <div class="section-header">
+            <h3>
+              <i class="fas fa-building"></i>
+              Location Details
+            </h3>
+            <p>Update the complete address and event information</p>
           </div>
+
+          <div class="form-group">
+            <label for="location_address">
+              <i class="fas fa-home"></i>
+              Complete Address
+              <span style="color: var(--error-color)">*</span>
+            </label>
+            <textarea
+              id="location_address"
+              name="location_address"
+              required
+              data-original="{{ qr_code.location_address }}"
+              placeholder="Enter the full address including street, city, state, and ZIP code"
+              rows="3"
+              maxlength="500"
+            >{{ qr_code.location_address }}</textarea>
+            <small class="form-help"
+              >Include all address details for accurate location
+              identification</small
+            >
+            <div class="character-counter">
+              <span id="addressCounter">{{ qr_code.location_address|length }}/500</span>
+            </div>
+
+            <!-- Address Coordinates Section -->
+            <div class="coordinates-section" id="coordinatesSection">
+              <div class="coordinates-header">
+                <i class="fas fa-crosshairs"></i>
+                <h4>Address Coordinates</h4>
+              </div>
+
+              <div class="coordinates-content">
+                <div class="coordinate-display">
+                  <div class="coordinate-info">
+                    <div class="coordinate-value" id="latitudeDisplay">
+                      {% if qr_code.has_coordinates %}
+                      {{ "%.6f"|format(qr_code.address_latitude) }}
+                      {% else %}
+                      ---.----------
+                      {% endif %}
+                    </div>
+                    <div class="coordinate-label">Latitude</div>
+                  </div>
+                  <div class="coordinate-info">
+                    <div class="coordinate-value" id="longitudeDisplay">
+                      {% if qr_code.has_coordinates %}
+                      {{ "%.6f"|format(qr_code.address_longitude) }}
+                      {% else %}
+                      ---.----------
+                      {% endif %}
+                    </div>
+                    <div class="coordinate-label">Longitude</div>
+                  </div>
+                </div>
+
+                <div class="coordinates-actions">
+                  <button
+                    type="button"
+                    class="btn-coordinate"
+                    id="geocodeBtn"
+                  >
+                    <i class="fas fa-search-location"></i>
+                    {% if qr_code.has_coordinates %}Update{% else %}Get{% endif %} Coordinates
+                  </button>
+                  <button
+                    type="button"
+                    class="btn-coordinate"
+                    id="clearCoordinatesBtn"
+                    style="display: {% if qr_code.has_coordinates %}inline-flex{% else %}none{% endif %};"
+                  >
+                    <i class="fas fa-times"></i>
+                    Clear
+                  </button>
+                </div>
+
+                <div id="coordinateStatus"></div>
+              </div>
+            </div>
+          </div>
+
+        </div>
         </div><!-- end standardLocationDetailsSection -->
 
         <!-- Event or Purpose — always visible for both Standard and Dynamic QR -->
@@ -819,14 +836,20 @@
               Event or Purpose
               <span style="color: var(--error-color)">*</span>
             </label>
-            <select id="location_event" name="location_event" required class="form-control"
-              data-original="{{ qr_code.location_event }}">
+            <select
+              id="location_event"
+              name="location_event"
+              required
+              class="form-control"
+              data-original="{{ qr_code.location_event }}"
+            >
               <option value="">Select Event Type</option>
-              <option value="Check In" {% if qr_code.location_event=='Check In' %}selected{% endif %}>Check In</option>
-              <option value="Check Out" {% if qr_code.location_event=='Check Out' %}selected{% endif %}>Check Out
-              </option>
+              <option value="Check In" {% if qr_code.location_event == 'Check In' %}selected{% endif %}>Check In</option>
+              <option value="Check Out" {% if qr_code.location_event == 'Check Out' %}selected{% endif %}>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>
@@ -842,26 +865,21 @@
             <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;">
-                <input type="checkbox" id="photo_verification_enabled" name="photo_verification_enabled" value="1" {% if
-                  qr_code.photo_verification_enabled !=False %}checked{% endif %}
+            <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"
+                  {% if qr_code.photo_verification_enabled != False %}checked{% endif %}
                   style="opacity:0;width:0;height:0;position:absolute;">
-                <span class="toggle-slider"
-                  style="position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:28px;transition:0.3s;"></span>
+                <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;font-size:0.875rem;
+              <span id="photoVerifyLabel" style="font-weight:600;font-size:0.875rem;
                 {% if qr_code.photo_verification_enabled != False %}color:var(--success-color,#10b981){% else %}color:var(--error-color,#ef4444){% endif %}">
                 {% if qr_code.photo_verification_enabled != False %}Enabled{% else %}Disabled{% endif %}
               </span>
             </label>
             <input type="hidden" name="photo_verification_enabled" id="photo_verification_hidden"
               value="{% if qr_code.photo_verification_enabled != False %}1{% else %}0{% endif %}">
-            <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>
 
@@ -884,9 +902,13 @@
             <select id="style_id" name="style_id" onchange="applyStylePreset()">
               <option value="">Custom Style</option>
               {% for style in styles %}
-              <option value="{{ style.id }}" {% if qr_code.style_id==style.id %}selected{% endif %}
-                data-fill="{{ style.fill_color }}" data-back="{{ style.back_color }}"
-                data-box-size="{{ style.box_size }}" data-border="{{ style.border }}"
+              <option 
+                value="{{ style.id }}" 
+                {% if qr_code.style_id == style.id %}selected{% endif %}
+                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>
@@ -903,10 +925,21 @@
                 QR Code Color
               </label>
               <div class="color-input-group">
-                <input type="color" id="fill_color" name="fill_color" value="{{ qr_code.fill_color or '#000000' }}"
-                  onchange="updatePreview()" />
-                <input type="text" id="fill_color_text" value="{{ qr_code.fill_color or '#000000' }}"
-                  pattern="^#[0-9A-Fa-f]{6}$" placeholder="#000000" onchange="syncColorInput('fill')" />
+                <input 
+                  type="color" 
+                  id="fill_color" 
+                  name="fill_color" 
+                  value="{{ qr_code.fill_color or '#000000' }}"
+                  onchange="updatePreview()"
+                />
+                <input 
+                  type="text" 
+                  id="fill_color_text" 
+                  value="{{ qr_code.fill_color or '#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>
@@ -917,10 +950,21 @@
                 Background Color
               </label>
               <div class="color-input-group">
-                <input type="color" id="back_color" name="back_color" value="{{ qr_code.back_color or '#FFFFFF' }}"
-                  onchange="updatePreview()" />
-                <input type="text" id="back_color_text" value="{{ qr_code.back_color or '#FFFFFF' }}"
-                  pattern="^#[0-9A-Fa-f]{6}$" placeholder="#FFFFFF" onchange="syncColorInput('back')" />
+                <input 
+                  type="color" 
+                  id="back_color" 
+                  name="back_color" 
+                  value="{{ qr_code.back_color or '#FFFFFF' }}"
+                  onchange="updatePreview()"
+                />
+                <input 
+                  type="text" 
+                  id="back_color_text" 
+                  value="{{ qr_code.back_color or '#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>
@@ -934,8 +978,15 @@
                 Module Size
               </label>
               <div class="range-input-group">
-                <input type="range" id="box_size" name="box_size" min="5" max="20" value="{{ qr_code.box_size or 10 }}"
-                  oninput="updateRangeValue('box_size'); updatePreview()" />
+                <input 
+                  type="range" 
+                  id="box_size" 
+                  name="box_size" 
+                  min="5" 
+                  max="20" 
+                  value="{{ qr_code.box_size or 10 }}"
+                  oninput="updateRangeValue('box_size'); updatePreview()"
+                />
                 <span class="range-value" id="box_size_value">{{ qr_code.box_size or 10 }}px</span>
               </div>
               <span class="form-help">Size of each QR code module (affects overall size)</span>
@@ -947,8 +998,15 @@
                 Border Size
               </label>
               <div class="range-input-group">
-                <input type="range" id="border" name="border" min="1" max="10" value="{{ qr_code.border or 4 }}"
-                  oninput="updateRangeValue('border'); updatePreview()" />
+                <input 
+                  type="range" 
+                  id="border" 
+                  name="border" 
+                  min="1" 
+                  max="10" 
+                  value="{{ qr_code.border or 4 }}"
+                  oninput="updateRangeValue('border'); updatePreview()"
+                />
                 <span class="range-value" id="border_value">{{ qr_code.border or 4 }} modules</span>
               </div>
               <span class="form-help">White border around the QR code</span>
@@ -962,11 +1020,10 @@
               Error Correction Level
             </label>
             <select id="error_correction" name="error_correction" onchange="updatePreview()">
-              <option value="L" {% if qr_code.error_correction=='L' %}selected{% endif %}>Low (7% recovery)</option>
-              <option value="M" {% if qr_code.error_correction=='M' %}selected{% endif %}>Medium (15% recovery)</option>
-              <option value="Q" {% if qr_code.error_correction=='Q' %}selected{% endif %}>Quartile (25% recovery)
-              </option>
-              <option value="H" {% if qr_code.error_correction=='H' %}selected{% endif %}>High (30% recovery)</option>
+              <option value="L" {% if qr_code.error_correction == 'L' %}selected{% endif %}>Low (7% recovery)</option>
+              <option value="M" {% if qr_code.error_correction == 'M' %}selected{% endif %}>Medium (15% recovery)</option>
+              <option value="Q" {% if qr_code.error_correction == 'Q' %}selected{% endif %}>Quartile (25% recovery)</option>
+              <option value="H" {% if qr_code.error_correction == 'H' %}selected{% endif %}>High (30% recovery)</option>
             </select>
             <span class="form-help">Higher levels allow QR code to work even if partially damaged</span>
           </div>
@@ -1001,12 +1058,24 @@
         </div>
 
         <!-- Hidden coordinate fields for form submission -->
-        <input type="hidden" id="address_latitude" name="address_latitude"
-          value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% endif %}" />
-        <input type="hidden" id="address_longitude" name="address_longitude"
-          value="{% if qr_code.has_coordinates %}{{ qr_code.address_longitude }}{% endif %}" />
-        <input type="hidden" id="coordinate_accuracy" name="coordinate_accuracy"
-          value="{% if qr_code.has_coordinates %}{{ qr_code.coordinate_accuracy }}{% endif %}" />
+        <input
+          type="hidden"
+          id="address_latitude"
+          name="address_latitude"
+          value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% endif %}"
+        />
+        <input
+          type="hidden"
+          id="address_longitude"
+          name="address_longitude"
+          value="{% if qr_code.has_coordinates %}{{ qr_code.address_longitude }}{% endif %}"
+        />
+        <input
+          type="hidden"
+          id="coordinate_accuracy"
+          name="coordinate_accuracy"
+          value="{% if qr_code.has_coordinates %}{{ qr_code.coordinate_accuracy }}{% endif %}"
+        />
 
         <!-- Form Actions -->
         <div class="form-actions">
@@ -1091,11 +1160,9 @@
         <div class="detail-row">
           <strong>Colors:</strong>
           <span>
-            <span
-              style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.fill_color or '#000000' }}; border-radius: 2px; margin-right: 4px;"></span>
+            <span style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.fill_color or '#000000' }}; border-radius: 2px; margin-right: 4px;"></span>
             on
-            <span
-              style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.back_color or '#FFFFFF' }}; border: 1px solid #ccc; border-radius: 2px; margin-left: 4px;"></span>
+            <span style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.back_color or '#FFFFFF' }}; border: 1px solid #ccc; border-radius: 2px; margin-left: 4px;"></span>
           </span>
         </div>
       </div>
@@ -1108,11 +1175,11 @@
   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 {
@@ -1125,7 +1192,7 @@
   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');
@@ -1133,7 +1200,7 @@
       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;
@@ -1142,14 +1209,14 @@
       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');
     }
@@ -1158,14 +1225,14 @@
   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;
@@ -1181,7 +1248,7 @@
   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') {
@@ -1194,31 +1261,31 @@
     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';
@@ -1236,11 +1303,11 @@
     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');
   }
 
@@ -1254,7 +1321,7 @@
         <span>${message}</span>
       </div>
     `;
-
+    
     toast.style.cssText = `
       position: fixed;
       top: 20px;
@@ -1270,14 +1337,14 @@
       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%)';
@@ -1313,58 +1380,58 @@
   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;
     }
-
+    
     return true;
   }
 
   // Geocoding functionality
   function geocodeAddress(address) {
     showStatus('info', 'Getting coordinates...');
-
+    
     // Using server API which prefers Google Maps with OpenStreetMap fallback
     const encodedAddress = encodeURIComponent(address);
-
+    
     // First try the server API
     fetch('/api/geocode', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
+          'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
       },
       body: JSON.stringify({ address: address })
     })
-      .then(response => response.json())
-      .then(data => {
-        if (data.success) {
-          const lat = data.data.latitude;
-          const lng = data.data.longitude;
-
-          updateCoordinates(lat, lng, 'geocoded');
-          showStatus('success', data.message || 'Coordinates updated successfully');
-        } else {
-          showStatus('warning', data.message || 'No coordinates found for this address');
-        }
-      })
-      .catch(error => {
-        console.error('Geocoding error:', error);
-        showStatus('error', 'Failed to get coordinates. Please try again.');
-      });
+    .then(response => response.json())
+    .then(data => {
+      if (data.success) {
+        const lat = data.data.latitude;
+        const lng = data.data.longitude;
+        
+        updateCoordinates(lat, lng, 'geocoded');
+        showStatus('success', data.message || 'Coordinates updated successfully');
+      } else {
+        showStatus('warning', data.message || 'No coordinates found for this address');
+      }
+    })
+    .catch(error => {
+      console.error('Geocoding error:', error);
+      showStatus('error', 'Failed to get coordinates. Please try again.');
+    });
   }
 
   function updateCoordinates(lat, lng, accuracy) {
     document.getElementById('address_latitude').value = lat;
     document.getElementById('address_longitude').value = lng;
     document.getElementById('coordinate_accuracy').value = accuracy;
-
+    
     document.getElementById('latitudeDisplay').textContent = lat.toFixed(10);
     document.getElementById('longitudeDisplay').textContent = lng.toFixed(10);
-
+    
     document.getElementById('clearCoordinatesBtn').style.display = 'inline-flex';
     document.getElementById('geocodeBtn').innerHTML = '<i class="fas fa-search-location"></i> Update Coordinates';
   }
@@ -1373,13 +1440,13 @@
     document.getElementById('address_latitude').value = '';
     document.getElementById('address_longitude').value = '';
     document.getElementById('coordinate_accuracy').value = '';
-
+    
     document.getElementById('latitudeDisplay').textContent = '---.----------';
     document.getElementById('longitudeDisplay').textContent = '---.----------';
-
+    
     document.getElementById('clearCoordinatesBtn').style.display = 'none';
     document.getElementById('geocodeBtn').innerHTML = '<i class="fas fa-search-location"></i> Get Coordinates';
-
+    
     showStatus('info', 'Coordinates cleared');
   }
 
@@ -1387,7 +1454,7 @@
     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);
@@ -1402,7 +1469,7 @@
   }
 
   // Initialize on page load
-  document.addEventListener('DOMContentLoaded', function () {
+  document.addEventListener('DOMContentLoaded', function() {
     // Set up character counters
     document.getElementById('name').addEventListener('input', () => {
       updateCharacterCount('name', 'nameCounter', 100);
@@ -1416,33 +1483,33 @@
       updateCharacterCount('location_address', 'addressCounter', 500);
       updateCurrentInfo();
     });
-
+    
     // Set up event listener for location_event
     document.getElementById('location_event').addEventListener('change', updateCurrentInfo);
-
+    
     // Set up initial values for QR customization
     updateRangeValue('box_size');
     updateRangeValue('border');
     updatePreview();
-
+    
     // Add form validation
     const form = document.getElementById('editQRForm');
     if (form) {
-      form.addEventListener('submit', function (e) {
+      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').addEventListener('change', function() {
       document.getElementById('fill_color_text').value = this.value.toUpperCase();
       updatePreview();
     });
-
-    document.getElementById('back_color').addEventListener('change', function () {
+    
+    document.getElementById('back_color').addEventListener('change', function() {
       document.getElementById('back_color_text').value = this.value.toUpperCase();
       updatePreview();
     });
@@ -1451,7 +1518,7 @@
     const geocodeBtn = document.getElementById('geocodeBtn');
     const clearBtn = document.getElementById('clearCoordinatesBtn');
 
-    geocodeBtn.addEventListener('click', function () {
+    geocodeBtn.addEventListener('click', function() {
       const address = document.getElementById('location_address').value.trim();
       if (address.length > 10) {
         geocodeAddress(address);
@@ -1467,38 +1534,38 @@
 <!-- ===== 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 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 (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 (stdName)   stdName.style.display    = 'block';
+      if (stdDetails)stdDetails.style.display = 'block';
+      if (locInput)  locInput.setAttribute('required', '');
       if (addrInput) addrInput.setAttribute('required', '');
     }
   }
 
-  document.addEventListener('DOMContentLoaded', function () {
+  document.addEventListener('DOMContentLoaded', function() {
     toggleQRTypeSection();
   });
 </script>
 <!-- ===== END Dynamic QR Type Toggle ===== -->
 <script>
   // Photo Verification Toggle
-  document.addEventListener('DOMContentLoaded', function () {
+  document.addEventListener('DOMContentLoaded', function() {
     var cb = document.getElementById('photo_verification_enabled');
     var hidden = document.getElementById('photo_verification_hidden');
     var label = document.getElementById('photoVerifyLabel');
     if (cb) {
-      cb.addEventListener('change', function () {
+      cb.addEventListener('change', function() {
         hidden.value = cb.checked ? '1' : '0';
         label.textContent = cb.checked ? 'Enabled' : 'Disabled';
         label.style.color = cb.checked ? 'var(--success-color, #10b981)' : 'var(--error-color, #ef4444)';