{{-- COMMENTS BY RAFFAELE
    Nel mese di Aprile 2022 ho aggiunto, sotto richiesta del responsabile sezione TELCO Angrelo Renna, il componente components.richiesta_indirizzo_di_spedizione che è visualizzato solo nel momento in cui si creano pratiche per la sezione TLC del tipo NUOVA ATTIVAZIONE o MIGRAZIONE --}}

<style>
    .chosen-container-single .chosen-single {
        background-color: #fff;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        border: 1px solid #e5e6e7;
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        color: #555555;
        display: block;
        height: 34px !important;
        overflow: hidden;
        line-height: 24px;
        padding: 0 0 0 9px;
        position: relative;
        text-decoration: none;
        white-space: nowrap;
        /* margin-right: 35px; */
        /* width: 100%!important; */
    }

    .chosen-container.chosen-container-single {
        width: 200px !important;
    }

</style>

{{-- RICHIESTE INDIRIZZO --}}
{{-- ************************************ --}}
<div class="ibox ">
    <div class="ibox-content">
        <div class="row">
            @component('components.richieste_indirizzo_element', ['title' => $title, 'inputName' => $inputName])
            @endcomponent
        </div>
    </div>
</div>

<div class="modal fade in" id="modal_{{ $title }}" data-backdrop="static" tabindex="-1" role="dialog"
    aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content animated fadeIn">

            {{-- HEADER --}}
            {{-- ************************************ --}}
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">Aggiungi Indirizzo</h4>
            </div>

            {{-- BODY --}}
            {{-- ************************************ --}}
            <div class="modal-body" style="display:inline-block;width: 100%;">

                <div class="row">

                    {{-- TOPONIMO --}}
                    {{-- ************************************ --}}
                    <div class="form-group col-md-5">
                        <label>&nbsp;Toponimo</label>
                        <select class="form-control" id="toponimo_{{ $inputName }}"
                            name="toponimo_{{ $inputName }}">

                            @foreach ($richieste_toponimi as $toponimo)
                                <option>{{ $toponimo->Value }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- SEDE LEGALE --}}
                    {{-- ************************************ --}}
                    <div class="form-group col-md-7"><label>Indirizzo</label> <input type="text"
                            id="{{ $inputName }}" name="{{ $inputName }}"
                            placeholder="inserisci indirizzo sede legale" class="form-control error">
                    </div>

                    {{-- CIVICO --}}
                    {{-- ************************************ --}}
                    <div class="form-group col-md-5">
                        <label>Civico</label>
                        <input type="text" id="civico_{{ $inputName }}" name="civico_indirizzo_{{ $inputName }}"
                            placeholder="inserisci civico" class="form-control error">
                    </div>

                    {{-- ESTENSIONE --}}
                    {{-- ************************************ --}}
                    <div class="form-group col-md-7">
                        <label>EstenSione</label>
                        <input id="ext_{{ $inputName }}" type="text" name="ext_{{ $inputName }}"
                            placeholder="inserisci estenzione" class="form-control">
                    </div>

                </div>

                <div class="row">

                    {{-- CAP --}}
                    {{-- ************************************ --}}
                    <div class="form-group col-md-5">
                        <label>Cap</label><br>
                        <select class="js-example-data-ajax form-control ajaxselect" id="cap_{{ $inputName }}"
                            onchange="capOnSelected_{{ $inputName }}(this)" name="cap_{{ $inputName }}">
                            <option></option>
                        </select>
                    </div>

                    {{-- COMUNE --}}
                    {{-- ************************************ --}}
                    <div class="form-group col-md-7"><label>Comune</label>
                        <select class="js-example-data-ajax form-control" id="comune_{{ $inputName }}"
                            onchange="comuneOnchange_{{ $inputName }}(this)" name="comune_{{ $inputName }}">
                            <option></option>
                        </select>
                    </div>

                    {{-- PROVINCIA --}}
                    {{-- ************************************ --}}
                    <div class="form-group col-md-5">
                        <label>Provincia</label>
                        <input type="text" name="provincia_{{ $inputName }}" id="provincia_{{ $inputName }}"
                            placeholder="inserisci provincia" class="form-control">
                    </div>

                    {{-- CODICE ISTAT --}}
                    {{-- ************************************ --}}
                    <div class="form-group col-md-7">
                        <label>Cod Istat</label>
                        <input type="text" name="cod_zona_{{ $inputName }}" id="istat_{{ $inputName }}"
                            placeholder="inserisci codice" class="form-control">
                    </div>

                </div>

                {{-- MAP --}}
                {{-- ************************************ --}}
                <div class="row">
                    <div class="col-lg-12">
                        <div id="map_{{ $inputName }}" style="width:100%; height:400px"></div>
                    </div>
                </div>

            </div>

            {{-- FOOTER --}}
            {{-- ************************************ --}}
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Annulla</button>
                <button type="button" onclick="{{ $title }}_setData()" id="salva_ut_btn"
                    class="btn btn-primary">Conferma</button>
            </div>

        </div>

    </div>

</div>

@section('scripts')
    @parent
    <script>
        var map_{{ $inputName }} = null;

        $(document).ready(function() {});

        $('#toponimo_{{ $inputName }}').val('VIA');

        var data = {
            toponimo_indirizzo_spedizione: null,
            indirizzo_indirizzo_spedizione: null,
            civico_indirizzo_spedizione: null,
            ext_indirizzo_spedizione: null,
            cap_indirizzo_spedizione: null,
            comune_indirizzo_spedizione: null,
            provincia_indirizzo_spedizione: null,
            istat_indirizzo_spedizione: null,
            lat: null,
            lon: null
        };

        var layer = null;

        $('#toponimo_{{ $inputName }}').chosen();

        $('#cap_{{ $inputName }}').ajaxChosen({
            dataType: 'json',
            type: 'POST',
            url: '/api/cap/list',
        }, {
            processItems: function(data) {
                return data;
            },
            loadingImg: '/images/loading.gif'
        });

        $("#modal_{{ $title }}").on('shown.bs.modal', function() {
            $('#cap_{{ $inputName }}').val("");
            $('#cap_{{ $inputName }}').trigger("chosen:updated");
            $('#civico_{{ $inputName }}').val("");
            $('#comune_{{ $inputName }}').val("");
            $('#ext_{{ $inputName }}').val("");
            $('#indirizzo_{{ $inputName }}').val("");
            $('#istat_{{ $inputName }}').val("");
            $('#provincia_{{ $inputName }}').val("");
            $('#toponimo_{{ $inputName }}').val("");
            $('#toponimo_{{ $inputName }}').trigger("chosen:updated");

            loadMap_{{ $title }}();
        });

        function capOnSelected_{{ $inputName }}(e) {
            $('#comune_{{ $inputName }}').empty().trigger("chosen:updated");
            $(e).find('option:selected').val($(e).find('option:selected').html());

            $.post("/api/comuni/list", {
                    cap: $(e).find('option:selected').html()
                })
                .done(function(data) {
                    $(data).each(function() {
                        $('#comune_{{ $inputName }}').append("<option data-zona='" + this.Istat + "'>" +
                            this.text + "</option>");
                    });
                    $('#comune_{{ $inputName }}').trigger("chosen:updated");
                    $('#comune_{{ $inputName }}').trigger('change');
                });
        }

        function CenterMap_{{ $inputName }}(long, lat) {
            map_{{ $inputName }}.getView().setCenter(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857'));
            map_{{ $inputName }}.getView().setZoom(16);
        }

        function comuneOnchange_{{ $inputName }}(e) {
            var zona = $(e).find('option:selected').data('zona');

            $.post("/api/zone/list", {
                    zona: zona
                })
                .done(function(data) {

                    $(data).each(function() {
                        console.log(this);
                        $('#provincia_{{ $inputName }}').val(this.CodProvincia);
                        $('#istat_{{ $inputName }}').val(this.Istat);
                        var toponimo = "";
                        if ($('#toponimo_{{ $inputName }}').val()) {
                            toponimo = $('#toponimo_{{ $inputName }}').val();
                        } else {
                            toponimo = "VIA";
                        }

                        indirizzo = toponimo + " " +
                            $('#indirizzo_{{ $inputName }}').val() + " " +
                            $('#civico_{{ $inputName }}').val() + " " +
                            $('#cap_{{ $inputName }}').val() + " " +
                            $('#comune_{{ $inputName }}').val();
                        geocode_{{ $inputName }}(indirizzo);
                    });
                });
        }

        function geocode_{{ $inputName }}($address) {

            // url encode the address
            $address = encodeURI($address);
            $url = '/richieste/getLatLong?address=' + $address;

            $.ajax({
                url: $url,
                dataType: "json",
                success: function(response) {
                    CenterMap_{{ $inputName }}(response[0].lon, response[0].lat);
                    data.lat = response[0].lat;
                    data.lon = response[0].lon;
                    if (layer) {
                        layer.getSource().clear();
                    }

                    layer = new ol.layer.Vector({
                        source: new ol.source.Vector({
                            features: [
                                new ol.Feature({
                                    geometry: new ol.geom.Point(ol.proj.fromLonLat([
                                        response[0].lon, response[0].lat
                                    ]))
                                })
                            ]
                        })
                    });

                    map_{{ $inputName }}.addLayer(layer);

                },
                error: function(xhr, status, error) {
                    console.log(status + '; ' + error);
                }
            });
        }

        function {{ $title }}_getData() {
            return data;
        }

        function loadMap_{{ $title }}() {

            $('#map_{{ $inputName }}').empty();

            map_{{ $inputName }} = new ol.Map({
                target: 'map_{{ $inputName }}',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                view: new ol.View({
                    center: ol.proj.fromLonLat([12.674297, 42.6384261]),
                    zoom: 6,
                    maxZoom: 25,
                    constrainOnlyCenter: true,
                })
            });
        };

        function {{ $title }}_setData() {

            if ($('#civico_{{ $inputName }}').val().length > 0) {

                if ($('#toponimo_{{ $inputName }}').val()) {
                    data.toponimo_indirizzo_spedizione = $('#toponimo_{{ $inputName }}').val();
                } else {
                    data.toponimo_indirizzo_spedizione = "VIA";
                }

                data.indirizzo_indirizzo_spedizione = $('#{{ $inputName }}').val();
                data.civico_indirizzo_spedizione = $('#civico_{{ $inputName }}').val();
                data.ext_indirizzo_spedizione = $('#ext_{{ $inputName }}').val();
                data.cap_indirizzo_spedizione = $('#cap_{{ $inputName }}').val();
                data.comune_indirizzo_spedizione = $('#comune_{{ $inputName }}').val();
                data.provincia_indirizzo_spedizione = $('#provincia_{{ $inputName }}').val();
                data.istat_indirizzo_spedizione = $('#istat_{{ $inputName }}').val();

                $('#e_toponimo_{{ $inputName }}').val(data.toponimo_indirizzo_spedizione);
                $('#e_toponimo_{{ $inputName }}').next().html(data.toponimo_indirizzo_spedizione);

                $('#e_indirizzo_{{ $inputName }}').val(data.indirizzo_indirizzo_spedizione);
                $('#e_indirizzo_{{ $inputName }}').next().html(data.indirizzo_indirizzo_spedizione);

                $('#e_civico_{{ $inputName }}').val(data.civico_indirizzo_spedizione);
                $('#e_civico_{{ $inputName }}').next().html(data.civico_indirizzo_spedizione);

                $('#e_ext_{{ $inputName }}').val(data.ext_indirizzo_spedizione);
                $('#e_ext_{{ $inputName }}').next().html(data.ext_indirizzo_spedizione);

                $('#e_cap_{{ $inputName }}').val(data.cap_indirizzo_spedizione);
                $('#e_cap_{{ $inputName }}').next().html(data.cap_indirizzo_spedizione);

                $('#e_comune_{{ $inputName }}').val(data.comune_indirizzo_spedizione);
                $('#e_comune_{{ $inputName }}').next().html(data.comune_indirizzo_spedizione);

                $('#e_provincia_{{ $inputName }}').val(data.provincia_indirizzo_spedizione);
                $('#e_provincia_{{ $inputName }}').next().html(data.provincia_indirizzo_spedizione);

                $('#e_cod_zona_{{ $inputName }}').val(data.istat_indirizzo_spedizione);
                $('#e_cod_zona_{{ $inputName }}').next().html(data.istat_indirizzo_spedizione);

                //set della mappa indirizzo element
                $('#elementDiv_{{ $title }}').fadeIn();

                loadMapE_{{ $title }}();

                $('#modal_{{ $title }}').modal('hide');

                CenterMap_{{ $title }}(data.lon, data.lat);

                if (layer_{{ $title }}) {
                    layer.getSource().clear();
                }

                layer_{{ $title }} = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        features: [
                            new ol.Feature({
                                geometry: new ol.geom.Point(ol.proj.fromLonLat([data.lon, data
                                    .lat
                                ]))
                            })
                        ]
                    })
                });
                map_{{ $inputName }}.addLayer(layer);

            }
        }
    </script>
@endsection