{{-- Modal Contatore --}}
<div id="modal-contatore" 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-purple-100">
                <i class="fas fa-tachometer-alt text-purple-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-contatore">
                    Nuovo Contatore
                </h3>
                
                <div class="mt-4">
                    <form id="form-contatore" class="space-y-4">
                        <input type="hidden" id="contatore_id" name="id">
                        
                        <div>
                            <label for="contatore_nome" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Nome Contatore *
                            </label>
                            <input type="text" 
                                   id="contatore_nome" 
                                   name="nome" 
                                   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. Contatore Gas Scale">
                        </div>
                        
                        <div>
                            <label for="contatore_tipo" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Tipo *
                            </label>
                            <select id="contatore_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="gas">Gas</option>
                                <option value="elettricita">Elettricità</option>
                                <option value="acqua">Acqua</option>
                                <option value="riscaldamento">Riscaldamento</option>
                                <option value="altro">Altro</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="contatore_ubicazione" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Ubicazione *
                            </label>
                            <input type="text" 
                                   id="contatore_ubicazione" 
                                   name="ubicazione" 
                                   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. Cantina, Terrazza, Scale">
                        </div>
                        
                        <div>
                            <label for="contatore_unita_misura" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Unità di Misura *
                            </label>
                            <select id="contatore_unita_misura" 
                                    name="unita_misura" 
                                    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 unità</option>
                                <option value="mc">mc (metri cubi)</option>
                                <option value="kwh">kWh (kilowattora)</option>
                                <option value="litri">Litri</option>
                                <option value="altro">Altro</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="contatore_numero_serie" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                Numero di Serie
                            </label>
                            <input type="text" 
                                   id="contatore_numero_serie" 
                                   name="numero_serie" 
                                   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="Numero di serie del contatore">
                        </div>
                        
                        <div class="mt-6 flex justify-end space-x-3">
                            <button type="button" 
                                    onclick="closeModal('modal-contatore')"
                                    class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
                                Annulla
                            </button>
                            <button type="button" 
                                    onclick="saveContatore()"
                                    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>