Add auto-fill MOC number feature with refresh button

app/templates/sets/add.html

@@ -65,8 +65,17 @@
                             <label for="set_number" class="form-label">
                                 Set Number <span class="text-danger">*</span>
                             </label>
-                            <input type="text" class="form-control" id="set_number" 
+                            <div class="input-group">
-                                   name="set_number" required placeholder="e.g., 10497">
+                                <input type="text" class="form-control" id="set_number" 
+                                       name="set_number" required placeholder="e.g., 10497">
+                                <button class="btn btn-outline-secondary" type="button" id="refreshMocNumber" 
+                                        style="display: none;" title="Get next MOC number">
+                                    <i class="bi bi-arrow-clockwise"></i>
+                                </button>
+                            </div>
+                            <div id="mocNumberInfo" class="form-text" style="display: none;">
+                                <i class="bi bi-info-circle"></i> Auto-generated MOC number (editable)
+                            </div>
                         </div>
                         
                         <div class="col-md-6 mb-3">
@@ -142,7 +151,7 @@
                                     <i class="bi bi-info-circle"></i> 
                                     <strong>MOC Tips:</strong>
                                     <ul class="mb-0 mt-2">
-                                        <li>Use any set number format (e.g., MOC-001, CUSTOM-2024, MYBUILD-01)</li>
+                                        <li>Set number is auto-generated but you can customize it</li>
                                         <li>Credit yourself or the original designer</li>
                                         <li>Add notes about techniques, inspiration, or building tips</li>
                                     </ul>
@@ -262,6 +271,27 @@ $(document).ready(function() {
 
 <script>
 $(document).ready(function() {
+    // Function to fetch and populate next MOC number
+    function fetchNextMocNumber() {
+        $.ajax({
+            url: '/api/moc/generate',
+            method: 'GET',
+            success: function(data) {
+                if (data.success) {
+                    $('#set_number').val(data.moc_number);
+                    console.log('Auto-filled MOC number:', data.moc_number);
+                } else {
+                    console.error('Failed to generate MOC number:', data.error);
+                }
+            },
+            error: function(xhr, status, error) {
+                console.error('Error fetching MOC number:', error);
+                // Fallback to a default if API fails
+                $('#set_number').val('MOC-10000');
+            }
+        });
+    }
+    
     // Handle set type selection (Official vs MOC)
     $('input[name="set_type"]').change(function() {
         const isMoc = $('#type_moc').is(':checked');
@@ -273,13 +303,20 @@ $(document).ready(function() {
             $('#bricksetSection').slideUp();
             $('#bricksetDivider').hide();
             
+            // Show refresh button and info text
+            $('#refreshMocNumber').show();
+            $('#mocNumberInfo').show();
+            
             // Clear Brickset populated fields (they might not apply to MOCs)
             $('#image_url').val('');
             
             // Update placeholder text for MOC context
-            $('#set_number').attr('placeholder', 'e.g., MOC-001, CUSTOM-2024');
+            $('#set_number').attr('placeholder', 'Auto-generated or custom');
             $('#theme').attr('placeholder', 'e.g., Custom, Space MOCs, My Creations');
             
+            // Auto-fill with next MOC number
+            fetchNextMocNumber();
+            
         } else {
             // Show Brickset, hide MOC section
             $('#mocSection').slideUp();
@@ -287,9 +324,14 @@ $(document).ready(function() {
             $('#bricksetSection').slideDown();
             $('#bricksetDivider').show();
             
+            // Hide refresh button and info text
+            $('#refreshMocNumber').hide();
+            $('#mocNumberInfo').hide();
+            
             // Clear MOC fields
             $('#moc_designer').val('');
             $('#moc_description').val('');
+            $('#set_number').val('');
             
             // Reset placeholder text for official sets
             $('#set_number').attr('placeholder', 'e.g., 10497');
@@ -297,6 +339,11 @@ $(document).ready(function() {
         }
     });
     
+    // Refresh MOC number button
+    $('#refreshMocNumber').click(function() {
+        fetchNextMocNumber();
+    });
+    
     // Initialize based on current selection (including URL parameter)
     const selectedType = $('input[name="set_type"]:checked').val();
     if (selectedType === 'moc') {