{{-- COMMENTS BY RAFFAELE
    Codice formattato ed ottimizzato nel mese di Aprile 2022 --}}

<div class="ibox " id="box_s9" style="display:none">
    <div class="ibox-content">

        <div class="row">
            <div
                style='padding-bottom: 23px;border-bottom:3px solid #019688;width: 100%;display: inline-block;margin-bottom: 7px;'>

                <div class="col-lg-12">
                    <h2>Dati Tecnici</h2>
                    <div class="col-lg-6 col-md-6" style="border-right: 3px solid #019688;padding-top: 40px;">

                        <div class="row tipoeegas">

                            {{-- TIPOLOGIA CONTRATTO --}}
                            <div class="col-md-4">
                                <label>&nbsp;Uso Fornitura</label>
                                <select class="form-control" onfocus="checkDesc8(this)"
                                    name="richiesta[tipo_contratto]" id='tipo_contratto'>
                                </select>
                            </div>

                        </div>

                        <div class="row" style="padding-top: 30px;">

                            {{-- TIPOLOGIA E MODALITA' ALLACCIO --}}
                            <div id="allaccio">

                                <div class="col-md-4">
                                    <label for="exampleFormControlSelect1">&nbsp;Modalità Allaccio</label>
                                    <select class="form-control" name="richiesta[modalita_allaccio]"
                                        onfocus="checkDesc8(this)" id="modalita_allaccio">
                                        <option>Nessuna Selezione</option>
                                        <option>Con Attivazione</option>
                                        <option>Senza Attivazione</option>
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label for="exampleFormControlSelect1">&nbsp;Tipologia Allaccio</label>
                                    <select class="form-control" name="richiesta[tipologia_allaccio]"
                                        onfocus="checkDesc8(this)" id="tipologia_allaccio">
                                        <option>Nessuna Selezione</option>
                                        <option>Permanente</option>
                                        <option>Temporaneo</option>
                                    </select>
                                </div>

                            </div>

                        </div>

                        {{-- POD/PDR --}}
                        <div class="row">

                            <div class="col-md-8"><label>Pdp</label> <input type="text" name="richiesta[pdp]"
                                    onfocus="checkDesc8(this)" id="pdp" placeholder="inserisci pod/pdr"
                                    class="form-control {{ $errors->has('pdp') ? 'errore' : '' }}"
                                    value="{{ old('richiesta.pdp') }}">
                            </div>

                        </div>

                        {{-- SEZIONE TELEFONIA --}}
                        {{-- ************************************ --}}
                        <div class="row isTelefonia" style="padding-top: 30px;">
                            <div class="row">

                                {{-- CODICE MIGRAZIONE --}}
                                <div class="col-lg-4 col-md-12 col-sm-12"><label>Codice Migrazione</label> <input
                                        type="text" name="richiesta[tel_cod_migrazione]" onfocus="checkDesc8(this)"
                                        id="tel_cod_migrazione" placeholder="inserisci codice migrazione"
                                        class="form-control {{ $errors->has('pdp') ? 'errore' : '' }}"
                                        value="{{ old('richiesta.pdp') }}">
                                </div>

                                {{-- NUMERO TELEFONICAO --}}
                                <div class="col-lg-4 col-md-12 col-sm-12"><label>Telefono</label> <input type="text"
                                        name="richiesta[tel_numero_att]" onfocus="checkDesc8(this)" id="tel_numero_att"
                                        placeholder="inserisci numero"
                                        class="form-control {{ $errors->has('pdp') ? 'errore' : '' }}"
                                        value="{{ old('richiesta.pdp') }}">
                                </div>

                            </div>

                            <div class="row">

                                {{-- IP STATICO --}}
                                <div class="col-lg-4 col-md-12 col-sm-12" style="padding-top: 4%;"><label>Ip
                                        Statico</label> <input type="text" name="richiesta[tel_ip]"
                                        onfocus="checkDesc8(this)" id="tel_ip" placeholder="inserisci ip statico"
                                        class="form-control">
                                </div>

                                {{-- NOLEGGIO ROUTER --}}
                                <div class="col-lg-4 col-md-12 col-sm-12" style="padding-top: 4%;"><label>Noleggio
                                        Router</label>
                                    <select class="form-control" onfocus="checkDesc8(this)"
                                        name="richiesta[tel_router]" onfocus="checkDesc8(this)" id="tel_router">
                                        <option>NO</option>
                                        <option>SI</option>
                                    </select>
                                </div>
                            </div>

                            {{-- TIPOLOGIA SERVIZIO: VOCE, CONNETTIVITA', MOBILE --}}
                            <div class="col-lg-8 col-md-12 col-sm-12" style="padding-top: 4%;"><label>Servizio</label>
                                <div class='input-group'>
                                    <select class="form-control" onfocus="checkDesc8(this)"
                                        name="richiesta[tel_servizio]" onfocus="checkDesc8(this)" id="tel_servizio">
                                        <option>Voce</option>
                                        <option>Connettivit&agrave;</option>
                                        <option>Mobile</option>
                                    </select>

                                    <span class="input-group-btn">
                                        <button type="button" onclick="ServiceaddInput()"
                                            class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></button>
                                    </span>

                                </div>
                            </div>

                            {{-- DIV PER APPEND DEI SERVIZI SELEZIONATI TRAMITE LA FUNZIONE ServiceaddInput() --}}
                            <div class="col-lg-8 col-md-12 col-sm-12 serviceInput">
                            </div>

                        </div>

                        {{-- SEZIONE ENERGIA ELETTRICA --}}
                        {{-- ************************************ --}}
                        <div class="row" style="padding-top: 30px;">

                            <div class="col-md-2"><label id="lbl_potdisp">Pot disp</label> <input
                                    onfocus="checkDesc8(this)" id="potenza_impianto" type="text"
                                    name="richiesta[potenza_impianto]" placeholder="inserisci potenza impianto"
                                    class="form-control {{ $errors->has('potenza_impianto') ? 'errore' : '' }}"
                                    value="{{ old('richiesta.potenza_impianto') }}">
                            </div>

                            <div class="col-md-3 isEE"><label id="lbl_potimp">Pot Imp</label> <input
                                    onfocus="checkDesc8(this)" id="potenza_impegnata" type="text"
                                    name="richiesta[potenza_impegnata]" placeholder="inserisci potenza impegnata"
                                    class="form-control {{ $errors->has('potenza_impegnata') ? 'errore' : '' }}"
                                    value="{{ old('richiesta.potenza_impegnata') }}">
                            </div>

                            <div class="col-md-3 isEE"><label>Tensione</label> <input type="text"
                                    onfocus="checkDesc8(this)" id="tensione" name="richiesta[tensione]"
                                    placeholder="inserisci tensione"
                                    class="form-control isEE {{ $errors->has('tensione') ? 'errore' : '' }}"
                                    value="{{ old('richiesta.tensione') }}">
                            </div>

                        </div>

                        {{-- SEZIONE GAS --}}
                        {{-- ************************************ --}}
                        <div class="row isGas" style="padding-top: 30px;">

                            {{-- PROFILO PRELIEVO --}}
                            <div class="form-group col-md-4">
                                <label>&nbsp;Profilo Prelievo</label>
                                <select class="form-control" id="profilo_prelievo" name="richiesta[profilo_prelievo]">
                                    <option value="C1 - Riscaldamento">C1 - Riscaldamento</option>
                                    <option value="C2 - Cottura cibi e/o produzione di acqua calda sanitaria">C2 -
                                        Cottura cibi e/o produzione di acqua calda sanitaria</option>
                                    <option
                                        value="C3 - Riscaldamento + cottura cibi e/o produzione di acqua calda sanitaria">
                                        C3 - Riscaldamento + cottura cibi e/o produzione di acqua calda sanitaria
                                    </option>
                                    <option value="C4 - Condizionamento">C4 - Condizionamento</option>
                                    <option value="C5 - Uso Condizionamento + Riscaldamento">C5 - Uso Condizionamento +
                                        Riscaldamento</option>
                                    <option value="T1 - Tecnologico (artigianale-industriale)">T1 - Tecnologico
                                        (artigianale-industriale)</option>
                                    <option value="T2 - Tecnologico + Riscaldamento">T2 - Tecnologico + Riscaldamento
                                    </option>
                                </select>
                            </div>

                            {{-- CLASSE PRELIEVO --}}
                            <div class="form-group col-md-4">
                                <label>&nbsp;Classe Prelievo</label>
                                <select class="form-control" id="classe_prelievo" name="richiesta[classe_prelievo]">
                                    <option></option>
                                    <option value="7 gg">7 gg</option>
                                    <option value="Escluso festivi">Escluso festivi</option>
                                </select>
                            </div>

                        </div>

                        <div class="row isGas">

                            {{-- CODICE REMI --}}
                            <div class="form-group col-md-2">
                                <label>&nbsp;Codice REMI</label>
                                <input type="text" name="richiesta[remi]" id="remi" placeholder="inserisci codice remi"
                                    class="form-control">
                            </div>

                            {{-- MATRICOLA CONTATORE --}}
                            <div class="form-group col-md-3">
                                <label>&nbsp;Matricola Contatore</label>
                                <input type="text" name="richiesta[matricola_contatore]" id="matricola_contatore"
                                    placeholder="inserisci matricola" class="form-control">
                            </div>

                            {{-- MATRICOLA CORRETTORE --}}
                            <div class="form-group col-md-3">
                                <label>&nbsp;Matricola Correttore</label>
                                <input type="text" name="richiesta[matricola_correttore]" id="matricola_correttore"
                                    placeholder="inserisci matricola" class="form-control">
                            </div>

                        </div>

                        <div class="row isGas" style="padding-top: 30px;">

                            <table class="form-group col-md-8">
                                <tr>
                                    <td class="form-group col-md-4">

                                        {{-- FORNITORE USCENTE --}}
                                        <div>
                                            <label for="fornitore">Fornitore Uscente</label>
                                            <select class="form-control col-md-8" id="fornitore"
                                                name="fornitoreUscente">
                                                @foreach ($fornitori as $fornitore)
                                                    <option value="{{ $fornitore['RagioneSociale'] }}">
                                                        {{ $fornitore['RagioneSociale'] }} -
                                                        {{ $fornitore['PartitaIVA'] }}</option>
                                                @endforeach
                                            </select>

                                        </div>
                                        
                                    </td>

                                    <td class="form-group col-md-4">

                                        {{-- DISTRIBUTORE --}}
                                        <div>
                                            <label for="distributore">Distributore</label>
                                            <select class="form-control col-md-8" id="distributore" name="distributore">
                                                @foreach ($distributori as $distributore)
                                                    <option value="{{ $distributore['RagioneSociale'] }}">
                                                        {{ $distributore['RagioneSociale'] }} -
                                                        {{ $distributore['PartitaIVA'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                    </td>
                                </tr>
                            </table>

                        </div>

                        <div class="row" style="padding-top: 30px;">

                            {{-- CONSUMO ANNUO --}}
                            <div class="form-group col-md-8">
                                <label>&nbsp;Consumo Annuo</label>
                                <input type="text" name="richiesta[consumo_annuo]" id="consumo_annuo"
                                    placeholder="inserisci consumo annuo" class="form-control">
                            </div>

                        </div>

                        {{-- SEZIONE FOTOVOLTAICO --}}
                        {{-- ************************************ --}}
                        @component('components.richiesta_dati_tecnici_fotovoltaico')
                        @endcomponent

                        {{-- SEZIONE FORNITURA --}}
                        {{-- ************************************ --}}
                        @component('components.richieste_modal_indirizzo', ['title' => 'indirizzo_di_fornitura', 'richieste_toponimi' => $toponimi, 'inputName' => 'fornitura'])
                        @endcomponent

                        <div class="row text-center indirizzo_warning"
                            style='display:none;background-color: #fdf7c3;color: #f44336;padding: 10px;border: 1px solid red;margin-right: -5px;'>
                            <div class="col-lg-12">
                                <i class="fa fa-exclamation-triangle fa-4x"></i>
                                <span style='font-size: x-large;'>&nbsp;Aggiungi Indirizzo di fornitura</span>
                            </div>
                        </div>


                        <div class="row" style='padding-top: 30px;'>
                            <button id="add_indirizzo" class="btn btn-primary btn-lg btn-block" type="button"
                                onclick="$('.indirizzo_warning').hide();" data-toggle="modal"
                                data-target="#modal_indirizzo_di_fornitura"><i class="fa fa-plus"></i>&nbsp;Aggiungi
                                Indirizzo di Fornitura</button>
                        </div>

                    </div>

                    {{-- SEZIONE INFO BOX --}}
                    {{-- ************************************ --}}
                    <div class="col-lg-6 col-md-6">

                        <div id='info_box_8'>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        {{-- SEZIONE TASTI --}}
        {{-- ************************************ --}}
        <div class="row" style='padding-top: 55px;'>
            <div class="col-lg-12" style="text-align: center;">
                <button class="btn btn-danger btn-lg" type="button" onclick="previousStep9()">Indietro</button>
                <button onclick="nextStep9()" class="btn btn-primary btn-lg" type="button">Procedi</button>
            </div>
        </div>

    </div>

</div>

@section('scripts')
    @parent
    <script>
        var services = "";

        function checkDataTypeForSite() {

            servizio = $('[name="richiesta[servizio]"]:checked').val();
            
            if (servizio == "EE") {
                $('.isEE').show();
                $('.isGas').hide();
                $('.isTelefonia').hide();
                $('#potenza_impianto').parent().show();
                $('#consumo_annuo').parent().show();
                $('#pdp').parent().show();
            }

            if (servizio == "G") {
                $('.isEE').hide();
                $('.isGas').show();
                $('.isTelefonia').hide();
                $('#potenza_impianto').parent().show();
                $('#consumo_annuo').parent().show();
                $('#pdp').parent().show();

            }

            if (servizio == "T") {
                $('.isEE').hide();
                $('.isGas').hide();
                $('.isTelefonia').show();
                $('#potenza_impianto').parent().hide();
                $('#consumo_annuo').parent().hide();
                $('.isFotovoltaico').hide();
                $('#pdp').parent().hide();
            }

            if ($('#richiesta_id').val() == "1") {
                $('#allaccio').show();
            } else {
                $('#allaccio').hide();
            }

            if ($('#richiesta_id').val() == "17") {
                $('.isFotovoltaico').show();
            } else {
                $('.isFotovoltaico').hide();
            }

        }

        function checkDesc8(e) {
            $('#info_box_8').empty();
            var html = "";

            if ($(e).attr('id') == 'tipo_contratto') {
                html =
                    '<span style="text-align: center;font-size: larger;display: block;margin-top: 60px;">Inserire la tipologia di fornitura del cliente</span>';
            } else if ($(e).attr('id') == 'modalita_allaccio') {
                html =
                    '<span style="text-align: center;font-size: larger;display: block;margin-top: 60px;">Nei preventivi nuovo impianto si può  contestualmente eseguire  l\'attivazione  o meno </span>';
            } else if ($(e).attr('id') == 'tipologia_allaccio') {
                html =
                    '<span style="text-align: center;font-size: larger;display: block;margin-top: 60px;">Gli allacci possono essere di tipo temporaneo(ad esempio nel caso di contatori per cantieri) oppure permanenti </span>';
            } else if ($(e).attr('id') == 'pdp') {
                html =
                    '<span style="text-align: center;font-size: larger;display: block;margin-top: 60px;">Codice identificativo del punto di fornitura (POD nel caso di energia elettrica PDR nel caso di gas)</span>';
            } else if ($(e).attr('id') == 'tel_cod_migrazione') {
                html =
                    '<span style="text-align: center;font-size: larger;display: block;margin-top: 60px;">Codice identificativo del servizio telefonico)</span>';
            } else if ($(e).attr('id') == 'tel_numero_att') {
                html =
                    '<span style="text-align: center;font-size: larger;display: block;margin-top: 60px;">Numero telefonico da attivare per il servizio telefonia</span>';
            } else if ($(e).attr('id') == 'tel_servizio') {
                html =
                    '<span style="text-align: center;font-size: larger;display: block;margin-top: 60px;">Tipo di servizio telefonico da attivare</span>';
            } else if ($(e).attr('id') == 'tensione') {
                html = '<span style="text-align: left;font-size: larger;display: block;margin-top: 10px;"></span>';
            } else if ($(e).attr('id') == 'potenza_impianto') {
                html =
                    '<span style="text-align: LEFT;font-size: larger;display: block;margin-top: 60px;">LSi parla di potenza disponibile in riferimento alla potenza realmente a disposizione delle utenze e corrisponde al massimo prelevabile senza che il cliente sia disalimentato,Per il Gas invece la potenza, chiamata anche portata termica, si misura in kW oppure in kcal/h.</span>';
            } else if ($(e).attr('id') == 'potenza_impegnata') {
                html =
                    '<span style="text-align: LEFT;font-size: larger;display: block;margin-top: 60px;">È il livello di potenza indicato nei contratti e reso disponibile dal venditore (tecnicamente si parla di potenza contrattualmente impegnata)</span>';
            }

            $('#info_box_8').html(html);
        }

        function nextStep9() {
            $('.tel_dyn_serv').empty();

            let table =
                "<table class='table' style='margin-top: 4%;margin-bottom: 5%;'><thead><tr><th>Servizio</th><th>Tipologia</th></tr></thead><tbody>";

            $(".tlc").each(function(index) {

                table += "<tr>" + "<td>" + $(this).data('servizio') + "</td>" + "<td>" + $(this).val() + "</td>" +
                    "</tr>";

                console.log(index + ": " + $(this).data('servizio'));
            });

            let app = "</tbody></table>";

            $('.tel_dyn_serv').append(table + app);

            if ($('#richiesta_id').val() != "11" && $('#richiesta_id').val() != "28") {
                error = 0;
                if ($('#e_indirizzo_fornitura').val() == "") {
                    $('.indirizzo_warning').show();

                    error++;
                } else {
                    $('.indirizzo_warning').hide();
                    if (error > 0) {
                        error--;
                    }
                }

                if (servizio != "T") {
                    var valid = validate.single($('#consumo_annuo').val(), {
                        presence: {
                            allowEmpty: false
                        }
                    });
                    renderValidationValue($('#consumo_annuo'), valid, "il campo è richiesto");
                    if ($('#richiesta_id').val() != "1") {
                        var valid = validate.single($('#pdp').val(), {
                            presence: {
                                allowEmpty: false
                            },
                            format: "^[a-zA-Z0-9]{14}$"
                        });
                        renderValidationValue($('#pdp'), valid, "il campo deve essere di 14 cifre/caratteri");
                    }
                }

                if (servizio == "EE") {

                    if ($('#richiesta_id').val() == "1" || $('#richiesta_id').val() == "3" || $('#richiesta_id').val() ==
                        "20") {

                        var valid = validate.single($('#potenza_impegnata').val(), {
                            presence: {
                                allowEmpty: false
                            },
                            numericality: {
                                strict: true
                            }
                        });

                        renderValidationValue($('#potenza_impegnata'), valid, "il campo non è formalmente corretto");
                    }

                    if ($('#potenza_impianto').val() !== "") {

                        var valid = validate.single($('#potenza_impianto').val(), {
                            numericality: {
                                strict: true
                            }
                        });

                        renderValidationValue($('#potenza_impianto'), valid, "il campo non è formalmente corretto");
                    }

                    if ($('#tensione').val() !== "") {
                        var valid = validate.single($('#tensione').val(), {
                            numericality: {
                                strict: true
                            }
                        });

                        renderValidationValue($('#tensione'), valid, "il campo non è formalmente corretto");
                    }
                }

                if (servizio == "G") {
                    if ($('#richiesta_id').val() == "1" || $('#richiesta_id').val() == "3" || $('#richiesta_id').val() ==
                        "20") {

                        var valid = validate.single($('#remi').val(), {
                            presence: {
                                allowEmpty: false
                            }
                        });

                        renderValidationValue($('#remi'), valid, "il campo è richiesto");

                        var valid = validate.single($('#classe_prelievo').val(), {
                            presence: {
                                allowEmpty: false
                            }
                        });

                        renderValidationValue($('#classe_prelievo'), valid, "il campo è richiesto");

                        var valid = validate.single($('#profilo_prelievo').val(), {
                            presence: {
                                allowEmpty: false
                            }
                        });

                        renderValidationValue($('#profilo_prelievo'), valid, "il campo è richiesto");
                    }

                }

                if (servizio == "T") {
                    //validazione dei servizi
                    // $('.tlc').eq(1).data('servizio')
                    let servicesRequested = false;

                    $('.tlc').each(function(index) {
                        if ($('.tlc').eq(index).data('servizio') == "voce" || $('.tlc').eq(index).data(
                                'servizio') == "connettività") {
                            servicesRequested = true;
                        }
                    });

                    if (!servicesRequested) {
                        error = 1;
                        alertify.alert('Attenzione', 'Selezionare almeno un servizio voce o connettività');
                    } else error = 0;

                }

                if ($('#e_indirizzo_fornitura').val() == "") {
                    return;
                }
            }

            if (error == 0) {

                $('#box_s9').hide();

                //Solo se la pratica è NUOVA ATTIVAZIONE (id=21) TLC o MIGRAZIONE TLC (id=30) bisogna inserire i dati per un eventuale INDIRIZZO DI SPEDIZIONE e quindi bisogna visualizzare box_s9b
                if ($('#richiesta_id').val() == "21" || $('#richiesta_id').val() == "30") {
                    $('#box_s9b').fadeIn();
                } else {
                    $('#box_s10').fadeIn();
                }
            }

        }

        function previousStep9() {
            if ($('#richiesta_id').val() == "24" || $('#richiesta_id').val() == "22" || $('#richiesta_id').val() == "25") {
                $('#box_s9').hide();
                $('#box_s4').fadeIn();
            } else {
                $('#box_s9').hide();
                $('#box_s8').fadeIn();
            }

            error = 0;
        }

        function removeInput(e) {
            $(e).parent().parent().parent().remove();
        }

        function ServiceaddInput() {

            switch ($('#tel_servizio').val()) {
                case 'Voce':
                    let inputa =
                        "<div class='col-lg-12' style='padding-top:2%'><label>Tipo linea voce</label><div class='input-group'><select class='form-control tlc'  data-servizio='voce' name='richiesta[voce][][tel_servizio]'><option>voip flat</option> <option>voip a consumo</option></select><span class='input-group-btn'><button type='button' onclick='removeInput(this)' class='btn btn-danger btn-sm'><i class='fa fa-trash'></i></button></span></div></div>";

                    $('.serviceInput').append(inputa);

                    var s = "<h4>Servizio Voce</h4>";
                    var s1 = "<p id='r_tel_voce_'>Tipo linea:</p>";
                    services += s + s1;

                    "<h4>Servizio Voce</h4><p>Test</p>";
                    break;

                case 'Connettività':
                    let inputb =
                        "<div class='col-lg-12' style='padding-top:2%'><label>Tipo Connettività</label><div class='input-group'><select class='form-control tlc' data-servizio='connettivit&agrave'  name='richiesta[connettivita][][tipo_connettivita]'><option>POWER FIBRA</option> <option>POWER FIBRA lite</option><option>POWER SMART</option><option>POWER FWA</option><option>POWER WIRELESS 30</option><option>POWER WIRELESS 20</option></select><span class='input-group-btn'><button type='button' onclick='removeInput(this)' class='btn btn-danger btn-sm'><i class='fa fa-trash'></i></button></span></div></div>";
                    $('.serviceInput').append(inputb);

                    var s = "<h4>Servizio Connettività</h4>";
                    var s1 = "<p>Tipo Connettività:</p>";
                    services += s + s1;
                    break;

                case 'Mobile':
                    let inputc =
                        "<div class='col-lg-12' style='padding-top:2%'><label>Tipo Tariffa Mobile</label><div class='input-group'><input type='text' name='richiesta[mobile][][prezzo]' data-servizio='mobile' placeholder='inserisci tariffa' class='form-control tlc'><span class='input-group-btn'><button type='button' onclick='removeInput(this)' class='btn btn-danger btn-sm'><i class='fa fa-trash'></i></button></span></div></div>";

                    $('.serviceInput').append(inputc);

                    var s = "<h4>Servizio Mobile</h4>";
                    var s1 = "<p>Tariffa mobile:</p>";
                    services += s + s1;
                    break;
            }

        }
    </script>
@endsection