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

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

{% block title %}{{ "Nuova 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>
                            {{ 'Nuova Macchina'|trans }}
                        </h1>
                    </div>
                </div>
                <div class="block-menu-filter menu-end">
                    <div class="btn-group">
                        <a class="on-close-btn" href="{{ path('macchine_list') }}" 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_new') }}" id="macchinaForm">
                    <section class="tile color transparent-black">
                        <div class="tile-header">
                            <h1><strong>{{ 'Inserimento Nuova Macchina'|trans }}</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>

                            <!-- Step 1: Selezione Modello -->
                            <div class="row step-section" id="step1">
                                <div class="col-md-12">
                                    <section class="tile color transparent-black">
                                        <div class="tile-header">
                                            <h1><strong>Step 1: {{ 'Selezione 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>
                                                    <option value="">{{ 'Seleziona un modello'|trans }}</option>
                                                    {% for modello in modelli %}
                                                        <option value="{{ modello.id }}">
                                                            {{ modello.nome }} - {{ modello.produttore.nome }}
                                                        </option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div id="modelloDetails" style="display:none;">
                                                <div class="row">
                                                    <div class="col-md-4 text-center">
                                                        <img id="modelloImage" src="" style="max-height: 200px;">
                                                    </div>
                                                    <div class="col-md-8">
                                                        <h3 id="modelloNome"></h3>
                                                        <p><strong>{{ 'Produttore'|trans }}:</strong> <span id="modelloProduttore"></span></p>
                                                        <p><strong>{{ 'Descrizione'|trans }}:</strong> <span id="modelloDescrizione"></span></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </div>

                            <!-- Step 2: Selezione Azienda e Luogo -->
                            <div class="row step-section" id="step2" style="display:none;">
                                <div class="col-md-6">
                                    <section class="tile color transparent-black">
                                        <div class="tile-header">
                                            <h1><strong>Step 2: {{ 'Selezione 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>
                                                    <option value="">{{ 'Seleziona un\'azienda'|trans }}</option>
                                                    {% for az in aziende %}
                                                        <option value="{{ az.id }}" {% if loop.first %}selected{% endif %}>
                                                            {{ az.nome }} - {{ az.ragioneSociale }}
                                                        </option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div id="aziendaDetails" style="display:none;">
                                                <h4 id="aziendaNome"></h4>
                                                <p><strong>{{ 'P.IVA'|trans }}:</strong> <span id="aziendaPIVA"></span></p>
                                                <p><strong>{{ 'Indirizzo'|trans }}:</strong> <span id="aziendaIndirizzo"></span></p>
                                            </div>
                                        </div>
                                    </section>
                                </div>

                                <div class="col-md-6">
                                    <section class="tile color transparent-black">
                                        <div class="tile-header">
                                            <h1><strong>Step 3: {{ 'Selezione 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 disabled>
                                                    <option value="">{{ 'Seleziona prima un\'azienda'|trans }}</option>
                                                </select>
                                            </div>
                                            <div id="luogoDetails" style="display:none;">
                                                <h4 id="luogoNome"></h4>
                                                <p><strong>{{ 'Indirizzo'|trans }}:</strong> <span id="luogoIndirizzo"></span></p>
                                                <div id="luogoMap" style="height: 200px; margin-top: 10px;"></div>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </div>

                            <!-- Step 4: Dati Macchina -->
                            <div class="row step-section" id="step3" style="display:none;">
                                <div class="col-md-12">
                                    <section class="tile color transparent-black">
                                        <div class="tile-header">
                                            <h1><strong>Step 4: {{ '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" 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" required>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="sistema">{{ 'Sistema'|trans }} *</label>
                                                        <input type="text" class="form-control" id="sistema" name="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" 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" 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"></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">
                                                    </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">
                                                    </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">
                                                    </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">
                                                    </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">
                                                    </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" 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">{"key":"","scadenza":""}</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" id="submitBtn" disabled>
                                        <i class="fa fa-save"></i> {{ 'Salva Macchina'|trans }}
                                    </button>
                                    <a href="{{ path('macchine_list') }}" 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"
                }
            });
            
            // Step 1: 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);
                            }
                            $('#modelloDetails').show();
                            $('#step2').show();
                            
                            // Trigger azienda selection
                            $('#azienda_id').trigger('change');
                        }
                    });
                } else {
                    $('#modelloDetails').hide();
                    $('#step2').hide();
                    $('#step3').hide();
                    $('#submitBtn').prop('disabled', true);
                }
            });
            
            // Step 2: 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');
                            luogoSelect.empty();
                            luogoSelect.append('<option value="">{{ 'Seleziona un luogo'|trans }}</option>');
                            
                            $.each(data, function(i, luogo) {
                                var selected = i === 0 ? '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>');
                            });
                            
                            luogoSelect.prop('disabled', false);
                            
                            // Mostra dettagli azienda
                            var selectedOption = $('#azienda_id option:selected');
                            $('#aziendaNome').text(selectedOption.text());
                            $('#aziendaDetails').show();
                            
                            // Trigger luogo selection
                            luogoSelect.trigger('change');
                        }
                    });
                } else {
                    $('#luogo_id').prop('disabled', true);
                    $('#luogo_id').html('<option value="">{{ 'Seleziona prima un\'azienda'|trans }}</option>');
                    $('#aziendaDetails').hide();
                    $('#step3').hide();
                    $('#submitBtn').prop('disabled', true);
                }
            });
            
            // Step 3: Selezione Luogo
            $('#luogo_id').change(function() {
                var luogoId = $(this).val();
                if (luogoId) {
                    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);
                    $('#luogoDetails').show();
                    
                    // Mostra mappa se coordinate disponibili
                    if (lat && lon) {
                        initializeMap(lat, lon);
                    }
                    
                    $('#step3').show();
                    $('#submitBtn').prop('disabled', false);
                } else {
                    $('#luogoDetails').hide();
                    $('#step3').hide();
                    $('#submitBtn').prop('disabled', true);
                }
            });
            
            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 %}