{% extends 'base.html.twig' %}

{% block body_id 'macchine_edit' %}
{% block body_class 'bg-28 no-zoom' %}

{% block title %}{{ "Modifica Macchina"|trans }}{% endblock %}
{% block c4rg0_menuleft %}{% endblock %}
{% block stylesheets_last %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('static/css/macchine.css?v=20191230') }}">
    <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datepicker/css/bootstrap-datetimepicker.css') }}">
{% endblock %}

{% block body %}
    <div class="col-md-12">
        <section class="tile transparent" id="id-search-block" style="margin-top: 55px;">
            <div class="tile-widget color transparent-black rounded-top-corners">
                <div class="block-menu-filter menu-start">
                    <div class="btn-group btn-w100">
                        <h1>
                            <a href="{{ path('macchine_list') }}">
                                <i class="fa fa-list"></i>
                            </a>
                            {{ 'Modifica Macchina'|trans }}
                        </h1>
                    </div>
                </div>
                <div class="block-menu-filter menu-center">
                </div>
                <div class="block-menu-filter menu-end">
                    <div class="btn-group">
                        <a class="on-close-btn" href="{{ path('macchine_view', {'id': macchina.id}) }}" title="Back">
                            <div class="user-close">
                                <i class="fas fa-chevron-circle-left"></i>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div id="wrap">
        <div class="row">
            <div id="content" class="col-md-12">
                <form method="POST" action="{{ path('macchine_edit', {'id': macchina.id}) }}" id="macchinaForm">
                    <section class="tile color transparent-black">
                        <div class="tile-header">
                            <h1><strong>{{ 'Modifica Macchina'|trans }}: {{ macchina.nome }}</strong></h1>
                        </div>

                        <div class="tile-body">
                            <div align="center">
                                <span class="container text-center">
                                    <a href="{{ path('welcome_page') }}">
                                        <img class="logo" src="{{ asset(logoUrl) }}" height="auto" style="max-height:3vw;"/>
                                    </a>
                                </span>
                            </div>

                            <!-- Selezione Modello -->
                            <div class="row">
                                <div class="col-md-12">
                                    <section class="tile color transparent-black">
                                        <div class="tile-header">
                                            <h1><strong>{{ 'Modello'|trans }}</strong></h1>
                                        </div>
                                        <div class="tile-body">
                                            <div class="form-group">
                                                <label for="modello_id">{{ 'Modello'|trans }} *</label>
                                                <select class="form-control" id="modello_id" name="modello_id" required>
                                                    {% for modello in modelli %}
                                                        <option value="{{ modello.id }}" {% if modello.id == macchina.modello.id %}selected{% endif %}>
                                                            {{ modello.nome }} - {{ modello.produttore.nome }}
                                                        </option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div id="modelloDetails">
                                                <div class="row">
                                                    <div class="col-md-4 text-center">
                                                        {% if macchina.modello.immagine %}
                                                            <img id="modelloImage" src="{{ asset('static/images/devices/' ~ macchina.modello.immagine) }}" style="max-height: 200px;">
                                                        {% endif %}
                                                    </div>
                                                    <div class="col-md-8">
                                                        <h3 id="modelloNome">{{ macchina.modello.nome }}</h3>
                                                        <p><strong>{{ 'Produttore'|trans }}:</strong> <span id="modelloProduttore">{{ macchina.modello.produttore.nome }}</span></p>
                                                        <p><strong>{{ 'Descrizione'|trans }}:</strong> <span id="modelloDescrizione">{{ macchina.modello.descrizione|default('N/A') }}</span></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </div>

                            <!-- Selezione Azienda e Luogo -->
                            <div class="row">
                                <div class="col-md-6">
                                    <section class="tile color transparent-black">
                                        <div class="tile-header">
                                            <h1><strong>{{ 'Azienda'|trans }}</strong></h1>
                                        </div>
                                        <div class="tile-body">
                                            <div class="form-group">
                                                <label for="azienda_id">{{ 'Azienda'|trans }} *</label>
                                                <select class="form-control" id="azienda_id" name="azienda_id" required>
                                                    {% for az in aziende %}
                                                        <option value="{{ az.id }}" {% if az.id == macchina.luogo.azienda.id %}selected{% endif %}>
                                                            {{ az.nome }} - {{ az.ragioneSociale }}
                                                        </option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div id="aziendaDetails">
                                                <h4 id="aziendaNome">{{ macchina.luogo.azienda.nome }}</h4>
                                                <p><strong>{{ 'P.IVA'|trans }}:</strong> <span id="aziendaPIVA">{{ macchina.luogo.azienda.partitaIva }}</span></p>
                                                <p><strong>{{ 'Indirizzo'|trans }}:</strong> <span id="aziendaIndirizzo">{{ macchina.luogo.azienda.indirizzo1 }}</span></p>
                                            </div>
                                        </div>
                                    </section>
                                </div>

                                <div class="col-md-6">
                                    <section class="tile color transparent-black">
                                        <div class="tile-header">
                                            <h1><strong>{{ 'Luogo'|trans }}</strong></h1>
                                        </div>
                                        <div class="tile-body">
                                            <div class="form-group">
                                                <label for="luogo_id">{{ 'Luogo'|trans }} *</label>
                                                <select class="form-control" id="luogo_id" name="luogo_id" required>
                                                    {% for luogo in luoghi %}
                                                        <option value="{{ luogo.id }}" {% if luogo.id == macchina.luogo.id %}selected{% endif %}
                                                            data-lat="{{ luogo.latitudine }}" data-lon="{{ luogo.longitudine }}"
                                                            data-nome="{{ luogo.nome }}" data-indirizzo="{{ luogo.indirizzoComposto }}">
                                                            {{ luogo.nome }} - {{ luogo.descrizione }}
                                                        </option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div id="luogoDetails">
                                                <h4 id="luogoNome">{{ macchina.luogo.nome }}</h4>
                                                <p><strong>{{ 'Indirizzo'|trans }}:</strong> <span id="luogoIndirizzo">{{ macchina.luogo.indirizzoComposto }}</span></p>
                                                {% if macchina.luogo.latitudine and macchina.luogo.longitudine %}
                                                    <div id="luogoMap" style="height: 200px; margin-top: 10px;"></div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </div>

                            <!-- Dati Macchina -->
                            <div class="row">
                                <div class="col-md-12">
                                    <section class="tile color transparent-black">
                                        <div class="tile-header">
                                            <h1><strong>{{ 'Dati Macchina'|trans }}</strong></h1>
                                        </div>
                                        <div class="tile-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="nome">{{ 'Nome'|trans }} *</label>
                                                        <input type="text" class="form-control" id="nome" name="nome" value="{{ macchina.nome }}" required>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="numero_seriale">{{ 'Numero Seriale'|trans }} *</label>
                                                        <input type="text" class="form-control" id="numero_seriale" name="numero_seriale" value="{{ macchina.numeroSeriale }}" required>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="sistema">{{ 'Sistema'|trans }} *</label>
                                                        <input type="text" class="form-control" id="sistema" name="sistema" value="{{ macchina.sistema }}" required>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="data_produzione">{{ 'Data Produzione'|trans }} *</label>
                                                        <input type="text" class="form-control datepicker" id="data_produzione" name="data_produzione" 
                                                               value="{{ macchina.dataProduzione|date('Y-m-d') }}" required>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="versione_sw">{{ 'Versione Software'|trans }} *</label>
                                                        <input type="text" class="form-control" id="versione_sw" name="versione_sw" value="{{ macchina.versioneSw }}" required>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="descrizione">{{ 'Descrizione'|trans }}</label>
                                                        <textarea class="form-control" id="descrizione" name="descrizione" rows="3">{{ macchina.descrizione }}</textarea>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="versione_fw">{{ 'Versione Firmware'|trans }}</label>
                                                        <input type="text" class="form-control" id="versione_fw" name="versione_fw" value="{{ macchina.versioneFW }}">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="url_modello">{{ 'URL Modello'|trans }}</label>
                                                        <input type="url" class="form-control" id="url_modello" name="url_modello" value="{{ macchina.urlModello }}">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="url_sistema">{{ 'URL Sistema'|trans }}</label>
                                                        <input type="url" class="form-control" id="url_sistema" name="url_sistema" value="{{ macchina.urlSistema }}">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="url_datasheet">{{ 'URL DataSheet'|trans }}</label>
                                                        <input type="url" class="form-control" id="url_datasheet" name="url_datasheet" value="{{ macchina.urlDataSheet }}">
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="data_validita_licenza">{{ 'Data Validità Licenza'|trans }}</label>
                                                        <input type="text" class="form-control datepicker" id="data_validita_licenza" name="data_validita_licenza" 
                                                               value="{% if macchina.dataValiditaLicenza %}{{ macchina.dataValiditaLicenza|date('Y-m-d') }}{% endif %}">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="durata_licenza">{{ 'Durata Licenza (anni)'|trans }}</label>
                                                        <input type="number" class="form-control" id="durata_licenza" name="durata_licenza" value="{{ macchina.durataLicenza }}" min="0">
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="form-group">
                                                <label for="licenza">{{ 'Dati Licenza (JSON)'|trans }}</label>
                                                <textarea class="form-control" id="licenza" name="licenza" rows="3">{{ macchina.licenza }}</textarea>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </div>

                            <!-- Pulsanti -->
                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <button type="submit" class="btn btn-success btn-lg">
                                        <i class="fa fa-save"></i> {{ 'Salva Modifiche'|trans }}
                                    </button>
                                    <a href="{{ path('macchine_view', {'id': macchina.id}) }}" class="btn btn-default btn-lg">
                                        <i class="fa fa-times"></i> {{ 'Annulla'|trans }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </section>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('static/js/moment/moment.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/momentjs/moment-with-langs.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datepicker/bootstrap-datetimepicker.min.js') }}"></script>
    
    <script>
        $(document).ready(function() {
            var map = null;
            var marker = null;
            
            // Datepicker
            $('.datepicker').datetimepicker({
                format: 'YYYY-MM-DD',
                icons: {
                    time: "fa fa-clock-o",
                    date: "fa fa-calendar",
                    up: "fa fa-arrow-up",
                    down: "fa fa-arrow-down"
                }
            });
            
            // Inizializza mappa se presente
            {% if macchina.luogo.latitudine and macchina.luogo.longitudine %}
                initializeMap({{ macchina.luogo.latitudine }}, {{ macchina.luogo.longitudine }});
            {% endif %}
            
            // Selezione Modello
            $('#modello_id').change(function() {
                var modelloId = $(this).val();
                if (modelloId) {
                    $.ajax({
                        url: '{{ path('api_modello_details', {'id': 'MODELLO_ID'}) }}'.replace('MODELLO_ID', modelloId),
                        method: 'GET',
                        success: function(data) {
                            $('#modelloNome').text(data.nome);
                            $('#modelloProduttore').text(data.produttore.nome);
                            $('#modelloDescrizione').text(data.descrizione || 'N/A');
                            if (data.immagine) {
                                $('#modelloImage').attr('src', '{{ asset("static/images/devices/") }}' + data.immagine);
                            }
                        }
                    });
                }
            });
            
            // Selezione Azienda
            $('#azienda_id').change(function() {
                var aziendaId = $(this).val();
                if (aziendaId) {
                    // Carica i luoghi dell'azienda
                    $.ajax({
                        url: '{{ path('api_azienda_luoghi', {'id': 'AZIENDA_ID'}) }}'.replace('AZIENDA_ID', aziendaId),
                        method: 'GET',
                        success: function(data) {
                            var luogoSelect = $('#luogo_id');
                            var currentLuogoId = '{{ macchina.luogo.id }}';
                            
                            luogoSelect.empty();
                            
                            $.each(data, function(i, luogo) {
                                var selected = luogo.id == currentLuogoId ? 'selected' : '';
                                luogoSelect.append('<option value="' + luogo.id + '" ' + selected + 
                                    ' data-lat="' + luogo.lat + '" data-lon="' + luogo.lon + '"' +
                                    ' data-nome="' + luogo.nome + '" data-indirizzo="' + luogo.indirizzo + '">' +
                                    luogo.nome + ' - ' + luogo.descrizione + '</option>');
                            });
                        }
                    });
                }
            });
            
            // Selezione Luogo
            $('#luogo_id').change(function() {
                var selectedOption = $(this).find('option:selected');
                var lat = selectedOption.data('lat');
                var lon = selectedOption.data('lon');
                var nome = selectedOption.data('nome');
                var indirizzo = selectedOption.data('indirizzo');
                
                $('#luogoNome').text(nome);
                $('#luogoIndirizzo').text(indirizzo);
                
                // Aggiorna mappa se coordinate disponibili
                if (lat && lon) {
                    initializeMap(lat, lon);
                }
            });
            
            function initializeMap(lat, lon) {
                if (!map) {
                    map = new google.maps.Map(document.getElementById('luogoMap'), {
                        center: {lat: parseFloat(lat), lng: parseFloat(lon)},
                        zoom: 14
                    });
                    marker = new google.maps.Marker({
                        position: {lat: parseFloat(lat), lng: parseFloat(lon)},
                        map: map
                    });
                } else {
                    var newPos = {lat: parseFloat(lat), lng: parseFloat(lon)};
                    map.setCenter(newPos);
                    marker.setPosition(newPos);
                }
            }
        });
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvknuD3dQrqFqq6QUh0MWHYA3YNSwUADo"></script>
{% endblock %}