{{-- Modal Chiave --}}
<div id="modal-chiave" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
        <div class="mt-3">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100">
                <i class="fas fa-key text-yellow-600"></i>
            </div>
            
            <div class="mt-5 text-center">
                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title-chiave">
                    Nuova Chiave
                </h3>
                
                <div class="mt-4">
                    <form id="form-chiave" class="space-y-4">
                        <input type="hidden" id="chiave_id" name="id">
                        
                        <div>
                            <label for="chiave_codice" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Codice Chiave *
                            </label>
                            <input type="text" 
                                   id="chiave_codice" 
                                   name="codice" 
                                   required
                                   class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                                   placeholder="es. CH001, PORTONE-A">
                        </div>
                        
                        <div>
                            <label for="chiave_descrizione" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Descrizione *
                            </label>
                            <input type="text" 
                                   id="chiave_descrizione" 
                                   name="descrizione" 
                                   required
                                   class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                                   placeholder="es. Chiave Portone Principale">
                        </div>
                        
                        <div>
                            <label for="chiave_tipo" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Tipo *
                            </label>
                            <select id="chiave_tipo" 
                                    name="tipo" 
                                    required
                                    class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Seleziona tipo</option>
                                <option value="portone">Portone</option>
                                <option value="ascensore">Ascensore</option>
                                <option value="cantina">Cantina</option>
                                <option value="terrazza">Terrazza</option>
                                <option value="garage">Garage</option>
                                <option value="altro">Altro</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="chiave_zona" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Zona/Piano
                            </label>
                            <input type="text" 
                                   id="chiave_zona" 
                                   name="zona" 
                                   class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                                   placeholder="es. Piano Terra, Primo Piano">
                        </div>
                        
                        <div>
                            <label for="chiave_numero_copie" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Numero di Copie
                            </label>
                            <input type="number" 
                                   id="chiave_numero_copie" 
                                   name="numero_copie" 
                                   min="1"
                                   value="1"
                                   class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        </div>
                        
                        <div>
                            <label for="chiave_note" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Note
                            </label>
                            <textarea id="chiave_note" 
                                      name="note" 
                                      rows="2"
                                      class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                                      placeholder="Note aggiuntive"></textarea>
                        </div>
                        
                        <div class="mt-6 flex justify-end space-x-3">
                            <button type="button" 
                                    onclick="closeModal('modal-chiave')"
                                    class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
                                Annulla
                            </button>
                            <button type="button" 
                                    onclick="saveChiave()"
                                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                                Salva
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>