{% extends "gbase.html" %}
{% load static %}

<!-- Aggiunto adesso e vediamo se lo prende -->
{% block css %}
{{ block.super }}

    <link href="{% static '/DataTables/dataTables.bootstrap5.min.css' %}" rel="stylesheet">
    <link href="{% static '/datepicker/css/datepicker.css' %}" rel="stylesheet">
    
    <link href="{% static '/smartwizard/css/smart_wizard_all.min.css' %}" rel="stylesheet">
    
    <!--
    <link href="https://unpkg.com/smartwizard@5/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
-->
{% endblock css %}

  

  <!-- =============================================== -->

  

    <!-- Main content -->


{% block right_col %}
            <!-- page content -->
        <div class="right_col" role="main">
            <div class="page-title">
              <div class="title_left">
                <h3>Form Wizards</h3>
              </div>

              <div class="title_right">
                <div class="col-md-5 col-sm-5  form-group row pull-right top_search">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                              <button class="btn btn-secondary" type="button">Go!</button>
                          </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="clearfix"></div>


                  <div class="x_title">
                    <h2>Form Wizards <small>Sessions</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="nav dropdown-menu" role="menu">
                          <li><a href="#">Settings 1</a>
                          </li>
                          <li><a href="#">Settings 2</a>
                          </li>
                        </ul>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>


                    <!-- Smart Wizard -->
                    <p>This is a basic form wizard example that inherits the colors from the selected scheme.</p>
                    
                    <div id="smartwizard" class="flex">
                        <ul class="nav wizard_steps">
                        <li>
                            <a href="#step-1" class="nav-link">
                                                <span class="step_descr">
                                                                Step 1<br />
                                                                <small>Finalita' della richiesta</small>
                                                            </span>
                                            </a>
                        </li>
                        <li>
                            <a href="#step-2" class="nav-link">
                            <span class="step_descr">
                                              Step 2<br />
                                              <small>Convenzioni Consip/MEPA</small>
                                          </span>
                          </a>
                        </li>
                        <li>
                            <a class="nav-link" href="#step-3">
                            <span class="step_descr">
                                Step 3<br />
                                <small>Descrizione beni/servizi</small>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a class="nav-link" href="#step-4">
                            <span class="step_descr">
                                Step 4<br />
                                <small>Obiettivi Funzione</small>
                                </span>
                                
                            </a>
                        </li>
                        <li>
                            <a class="nav-link" href="#step-5">
                            <span class="step_descr">
                                Step 5<br />
                                <small>Riepilogo Acquisto</small>
                                </span>
                                
                            </a>
                        </li>
                        <li>
                            <a class="nav-link" href="#step-6">
                                <span class="step_descr">
                                Step 6<br />
                                <small>Sottometti acquisto</small>
                                </span>                            </a>
                        </li>
                        </ul>
                        <form>
                        <div class="tab-content">
                       
                                    <div id="step-1" class="tab-pane " role="tabpanel">
                            
                                        <b> <h2 id="app" >Step 1 - Dati Richiedente e finalita' della richiesta [[ message ]]</h2> </b>
                                                
                                            <div class="row">
                                                <div class="col-lg-8">
                                                    <div class="form-group">
                                                                    <button style="z-index:100" id="pollastro" type="button" data-toggle="popover" title="Info" data-html="true" data-content="Inserire parole chiave per agevolare la tracciabilità e la ricerca della richiesta di acquisto" data-original-title="Info"><span class="fa fa-1x fa-info-circle" aria-hidden="true"></span></button>
                                                        <label>Specificare un titolo breve per questo acquisto in modo da poter essere facilmente ricercato</label>
                                                        <input id="titolobreve" name="titolobreve" type="text" class="form-control required">
                                                    </div>
                                                    <div class="form-group ">
                                                        <label>Pino Torinese, il 30-05-2020 <br> 
                                                        Il sottoscritto {{ user.last_name }} {{ user.first_name }}  per lo svolgimento dei compiti istituzionali legati a: </label>
                                                    </div>
                                                    
                                                <div class="input-group m-b">
                                                    <div class="form-check">
                                                    
                                                        <input class="form-check-input" type="radio" name="settore" value="ricercateconolgia" required>
                                                        <label class="form-check-label" for="pippo">
                                                            Ricerca,Trasferimento Tecnologico  </label>
                            
                                                    </div>
                                                </div>
                                                <div class="input-group m-b">
                                                    <div class="form-check ">
                                                        
                                                        <input class="form-check-input" type="radio" value="didattica" name="settore"  required>
                                                        <label class="form-check-label" for="pippo">
                                                            Didattica </label>
                                                    </div>
                                                </div> 
                                                <div class="input-group m-b">
                                                    <div class="form-check">
                                                        <input id="settore" class="form-check-input" type="radio" value="funzionamento" name="settore"   required>
                                                        <label class="form-check-label" for="pippo">
                                                            Funzionamento Struttura </label>
                                                    </div>
                                                </div>                  
                                                <div class="form-group">
                                                        <label>Dettagliare la motivazione e finalita' dell'acquisto</label>
                                                        <input id="motivazione" name="motivazione" type="text" class="form-control" required>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="text-center">
                                                        <div style="margin-top: 20px">
                                                        
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>
                                    <div id="step-2" class="tab-pane " role="tabpanel">
                            
                                            <h2 class="StepTitle">Step 2 - Programmabilità della spesa e convenzioni Consip/MEPA</h2>
                                            <b>dichiara che si tratta di </b><br><br>
                                                    <div class="row">

                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="tipoacquisto" id="tipoacquisto1" required="required" value="informatici" class="form-control ">
            
                                                            <span class="checkmark "></span>
                                                            <label class="form-check-label" for="tipoacquisto1">
                                                            <b>Beni/servizi informatici</b> <br> obbligo di ricorso a strumenti di 
                                                            approvvigionamento telematico quali ad esempio convenzioni CONSIP/MEPA
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="row">

                                                            <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="tipoacquisto" value="largoconsumo" required="required" id="tipoacquisto2" class="form-control ">
                                                            <label class="form-check-label" for="tipoacquisto2">
                                                            <b>Beni/servizi di largo consumo.</b> <br>Trattasi di acquisto programmabile 
                                                            di largo consumo e/o di uso ricorrente acquisibile attraverso le gare effettuate 
                                                            da parte dell'Amm.ne,
                                                            se attive. In mancanza, si chiede di provvedere in autonomia per garantire la funzionalità della 
                                                            Struttura e delle attività istituzionali.
                                                            </label>
                                                            </div>
                                                    </div>
                                                    <div class="row">

                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="tipoacquisto" value="altro" id="tipoacquisto3" required="required"  class="form-control ">
            
                                                            <span class="checkmark "></span>
                                                            <label class="form-check-label" for="tipoacquisto3">
                                                            <b>Altro</b>
                                                            </label>
                                                        </div>
                                                    </div>
                                                        
                                                    <div id="informaticiPlus" class="row  invisible ms-3"  >

                                                        <b>e quindi dichiara che</b> <br>
                                                                    <div class="row form-check ms-3">
                                                                        <label for="convenzione" class="container ">
                                                                    Esiste convenzione attiva per il bene/servizio che si desidera acquistare ( ove possibile indicare convenzione e lotto )
                                                                    <a class="" href="https://www.acquistinretepa.it/opencms/opencms/vetrina_iniziative.html?filter=CO" target="_blank" >	VEDI ELENCO CONVENZIONI CONSIP</a>

                                                                        <input type="radio" name="convenzione"  required="required"  class="form-check-input" value="esisteconvenzioneattiva" />
                                                                        <span class="checkmark"></span>
                                                                        </label>
                                                                        <div id="nomeconvenzione" class="  d-none " >
                                                                        <div class="row">
                                                                        <div class="col-8">
                                                                        <div class="input-group mb-3 ">
                                                                            <input type="text" name="nomeconvezione" class="form-control" placeholder="Indicare convenzione e lotto" aria-label="Example text with button addon" aria-describedby="button-addon1">
                                                                            <button class="btn btn-outline-secondary" type="button" id="button-addon1"><span class="fa fa-1x fa-info-circle" aria-hidden="true"></span></button>
                                                                        </div>
                                                                        </div>
                                                                        </div>

                                                                            <!-- 
                                                                            <input type="text" name="nomeconvezione" placeholder="Indicare convenzione e lotto" class="form-control" required> 
                                                                            <p style="margin-left:200px" > 
                                                                            <button  id="pollastro" type="button"  title="Info"  data-content="QUALORA IL LINK ALLA PAGINA NON DOVESSE FUNZIONARE, OCCORRE FRE UN REFERSH.SI CONSIGLI ADI VISUALIZZARE L'ELENCO DELLE CNVENZIONI UTILIZZANDO VISTA GRIGLIA." data-original-title="Info"><span class="fa fa-1x fa-info-circle" aria-hidden="true"></span></button>
                                                                            -->
                                                                        </div>
                                                                    </div>
                                                                        
                                                                    
                                                                    <div class="row form-check ms-3">
                                                                    <label class="container ">
                                                                Non esiste convenzione attiva per il bene/servizio che si desidera acquistare 
                                                                    <input type="radio" name="convenzione" value="nonesisteconvenzioneattiva" required="required"  class="form-check-input" />
                                                                    <span class="checkmark"></span>
                                                                </label>
                                                                </div>
                                                                <div class="row form-check ms-3">
                                                                <label class="container ">
                                                                Esiste convenzione attiva ma i beni/servizi presenti non sono compatibili con quello/i richeisto/i per la seguente motivazione 
                                                                    <input type="radio" name="convenzione"  value="nousareconvenzioneattiva" required="required"  class="form-check-input" />
                                                                    <span class="checkmark"></span>
                                                                </label>	
                                                                </div>
                                                                
                                                                <div id="motivonoconvenzione" class="d-none " style="margin-left:135px">
                                                                    <div class="row">
                                                                        <div class="col-8">
                                                                        <div class="input-group mb-3 ">
                                                                            <textarea  name="motivonoconvenzione" class="form-control" placeholder="Indicare motivazione"  ></textarea>
                                                                        </div>
                                                                        </div>
                                                                        </div>
                                                                </div>
                                                                <br>
                                                                <br>
                                                                <br>
                                                                
                                                        </div>
                                                        

                                            </div>

                                    <div id="step-3" class="tab-pane " role="tabpanel">                                           
                                        <h2 class="StepTitle">Step 3 - Descrizione beni/servizi da acquisire </h2>
                                            <div  style="margin-top: 20px">
                                                Avendo preso visione della normativa vigente e consapevole di quanto disposto dal DPR n. 445/2000 in tema di rilascio di false dichiarazioni,
                                                <br> <b>Richiede di acquisire il seguente bene/servizio il cui prezzo complessivo presunto ( IVA esclusa ) e' inferiore a Euro 40.000,00</b><br>
                                                Indicare per singolo articolo dell'ordine la quantita', il codice produttore, la descrizione ed il prezzo al netto dell'IVA trovati sul sito di acquistiinrete o nella documentazione della convenzione.
                                                <br><br><br>
                                                   
                                             </div>
                                             <div class="row">
                                             <div class="col-7">
                                                 <h4>Lista Articolo/i e Prezzo/i</h4>
                                             </div>
                                             <div class="col-5">
                                                <button title="Importa file xlsx" class="btn btn-success btn-xs  float-right">Importa file xlsx</button>
                                                <button title="Carica eventuali allegati " class="btn btn-success btn-xs  float-right">Carica Allegati</button>
                                             </div>
                                             </div>
                                             <br>
                                            <div class="row">

                                                    <div class="col-md-1">Q.ta`</div>
                                                    <div class="col-md-2">Codice CONSIP/MEPA</div>
                                                    <div class="col-md-4">Descrizione</div>
                                                    <div class="col-md-2">Prezzo Unitario (IVA esclusa )</div>

                                                    <div class="col-md-1 " >
                                                    <button title="Aggiungi un nuovo Articolo" class="btn btn-success btn-xs add-form-row float-right"><i class="fa fa-plus-square-o"></i></button>
                                                    </div>

                                             </div>
                                            <div class="row form-row added-row">

                                                    <div class="col-md-1"><input type="number" name="quantita" min="1" value="1"  class="form-control" ></div>
                                                    <div class="col-md-2"><input type="text" name="codiceproduttore" placeholder="" class="form-control"  ></div>
                                                    <div class="col-md-4"><input type="text" name="descrizionearticolo" placeholder="" class="form-control" ></div>
                                                    <div class="col-md-2"> <span class="input-number input-number-currency">
                                                        <input type="number" class="form-control"  name="prezzoarticolo" placeholder="0,00" min="0">
                                                    </span>
                                                    </div>

                                             </div>
                                             <br>
                                            <div class="row" >


                                                    <div class="col-md-1"></div>
                                                    <div class="col-md-2"><button title="Calcola il Totale" class="btn btn-success btn-xs calcolaTotale float-right">Calcola Totale</button></div>
                                                    <div class="col-md-4 "><span class="float-right">Totale :</span> </div>
                                                    <div class="col-md-2"><input id="importoTotale" type="text" name="totale" placeholder="" class="form-control" readonly></div>
                                             </div>
                                     </div>
                                    <div id="step-4"  class="tab-pane  " role="tabpanel">

                                        <h1> Obiettivi Funzione </h1>
                                        <p>Inserisci su quale/i obiettivo/i funzione bisogna caricare questo acquisto.
                                        Seleziona uno o piu' obiettivi funzione su cui caricare l'acquisto selezionando per ogni riga lo specifico obiettivo funzione.<br>
                                        Per aggiungere altre righe  clicca sul bottone "+" 
                                        </p>
                                            
                                        
                                        <div class="row form-row">
                                        <div class="col-md-4"></div>
                                            <div class="col-md-2"> <b>Prezzo Totale di questo acquisto <br> IVA esclusa </b> </div>
                                            <div class="col-md-2">
                                            <div class="input-group">
                                                <span class="input-group-addon">€</span>
                                                <input id="prezzototaleacquisto" type="text" name="totale"  readonly  min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency"  />               
                                            </div>
                                            </div>
                                            <div class="col-md-3"></div>
                                        </div>
                                        <div class="row form-row">

                                            <div class="col-md-2">Capitolo</div>
                                            <div class="col-md-4">Scegli Obiettivo Funzione </div>
                                            <div class="col-md-2">Prezzo (IVA esclusa )</div>
                                            <div class="col-md-3">Responsabile Fondi</div>


                                        </div> <br/>
                                        <div id="addsome" class="d-flex flex-column overflow-auto">
                                        <div class="row ofitem">
                                        <input type="hidden" name="idobiettivofunzione" value="ID_OB_FUN" >                     
                                        <div class="col-md-2"><input  type="text" name="capitolo" readonly value="CAPITOLO" class="form-control" ></div>
                                        <div class="col-md-4"><div class="input-group mb-3">
                                        <label class="input-group-text" for="inputGroupSelect01">Seleziona</label> 
                                        <select class="form-select" id="inputGroupSelect01">
                                            <option selected>Obiettivo Funzione</option>
                                            {% for one in ob_fun %}
                                                j={'id':{{one.id}},'of':'{{one.obiettivofunzione}}','descr': '{{one.descrizione}}',
                                                'responsabile':'{{one.emailresponsabile}}'};
                                                <option value="{{one.id}}">{{one.descrizione}}</option>
                                                obiettivifun[{{one.id}}]=j;

                                            {% endfor %}
                                            
                                        </select>
                                        </div>
    
                                        </div>
                                        <div class="col-md-2"> <div class="input-group"> 
                                            <span class="input-group-addon">€</span>
                                            <input  type="number" name="prezzoobfun" value="0" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency parzialeobfun"  />
                                        </div>
                                        </div>
                                        <div class="col-md-3"><input type="text" name="responsabilefondiobfun" readonly value="RESPONSABILEFONDI" class="form-control" ></div>
                                        
                                        <div class="col-md-1 " >
                                        <button title="Aggiungi un nuovo Obiettivo" class="btn btn-success btn-xs add-obiettivo-row float-right"><i class="fa fa-plus-square-o"></i></button>
                                        </div>
                                        </div> 
                                        </div>
                                        <br/>
                                        <div class="row form-row">
                                        <div class="col-md-4"></div>
                                            <div class="col-md-2"> <b>Somma dei capitoli </b> </div>
                                            <div class="col-md-2">
                                            <div class="input-group">
                                                <span class="input-group-addon">€</span>
                                                <input id="sommacapitoli" type="number" name="sommacapitoli" readonly value="0.0" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency" style="background-color:  red!important;" />                                            </div>
                                            </div>
                                            <div class="col-md-3"></div>
                                        </div>



                            
                            
                                        </div>                                   
                                    <div id="step-5" class="tab-pane" role="tabpanel">
                                        <h1>Riepilogo Acquisto</h1>
                                        <div class="row">
                                        <div class="col-3">
                                        <h2>Titolo breve per questo acquisto </h2>
                                        </div>
                                        <div class="col-5 titolobreve">

                                        </div>
                                        </div>
                                        <div id="vueriepilogo">
                                        <h2>Titolo breve per questo acquisto :<b> [[ titolobreve ]] </b> </h2>
                                        <p >
                                        
                                         <h2>Per svolgere compiti legati a : <b>[[ settore ]] </b> </h2>
                                        <h2> per il seguente uso :<b> [[ motivazione ]] </b> </h2>
                                        </p>
                                        <span class="convenzione " v-if="convenzione === 'informatici'">
                                        <h2> L'acquisto viene fatto utilizzando la convenzione/lotto : </h2> 
                                        </span>
                                        <span class="noconvenzione d-none">
                                        <h2> Non esiste una convenzione attiva che fornisca questo bene. </h2> 
                                        </span>                                       
                                        <span class="convenzionenonusabile d-none">
                                        <h2> Esiste una convenzione attiva ma i beni/servizi presenti non sono compatibili <br> con quello/i richeisto/i per la seguente motivazione:  </h2> 
                                        </span>
                                        </div>
                                        <div class="row">
                                        Il bene/servizio in oggetto e' composto dai seguenti articoli:

                                        </div>

                                        <div class="row">

                                                    <div class="col-md-1">Q.ta`</div>
                                                    <div class="col-md-2">Codice CONSIP/MEPA</div>
                                                    <div class="col-md-4">Descrizione</div>
                                                    <div class="col-md-2">Prezzo Unitario (IVA esclusa )</div>

                                                    

                                             </div>
                                        <div class="articolidiv ">
                                            
                                        </div>
                                        <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
                                        </div>

                                    <div id="step-6" class="tab-pane" role="tabpanel">
                                        <h1>Finish</h1>
                                        <h2>Terms and Conditions</h2>
                                        <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
                                        </div>                        
                        
                       
                        </div>
                        </form>
                    </div>                   
        </div>
        <!-- /page content -->
                       {% endblock right_col %}




{% block javascripts %}
{{ block.super }}

    <script src="{% static '/DataTables/jquery.dataTables5.min.js' %}"></script>

    <script src="{% static '/DataTables/dataTables.bootstrap5.min.js' %}"></script>
    <script src="{% static '/datepicker/js/bootstrap-datepicker.js' %}"></script>
    
    <script src="{% static '/smartwizard/js/jquery.smartWizard.min.js' %}"></script>
   
    <!--
    <script src="https://unpkg.com/smartwizard@5/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
 -->
    <script id="articoli-riepilogo-template" type="text/x-custom-template" >

<div class="row form-row riepilogo-added-row ">

                                                    <div class="col-md-1"><input type="number" name="quantita" min="1" value="1" readonly class="form-control" ></div>
                                                    <div class="col-md-2"><input type="text" name="codiceproduttore" placeholder="" readonly class="form-control"  ></div>
                                                    <div class="col-md-4"><input type="text" name="descrizionearticolo" placeholder="" readonly class="form-control" ></div>
                                                    <div class="col-md-2"> <span class="input-number input-number-currency">
                                                        <input type="number" class="form-control"  name="prezzoarticolo" readonly placeholder="0,00" min="0">
                                                    </span>
                                                    </div>

                                             </div>
</script>

    <script id="hidden-template" type="text/x-custom-template" >

<div class="row ofitem">
    <input type="hidden" name="idobiettivofunzione" value="ID_OB_FUN" >                     
    <div class="col-md-2"><input  type="text" name="capitolo" readonly value="CAPITOLO" class="form-control" ></div>
    <div class="col-md-4"><div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupSelect01">Seleziona</label>
  <select class="form-select" id="inputGroupSelect01">
    <option selected>Obiettivo Funzione</option>
    {% for one in ob_fun %}
        j={'id':{{one.id}},'of':'{{one.obiettivofunzione}}','descr': '{{one.descrizione}}',
        'responsabile':'{{one.emailresponsabile}}'};
        <option value="{{one.id}}">{{one.descrizione}}</option>
        obiettivifun[{{one.id}}]=j;

    {% endfor %}
    
  </select>
</div>
    <!-- <input type="text" name="obiettivofunzione" readonly value="DESCRIZIONE" class="form-control" >
    -->
    </div>
    <div class="col-md-2"> <div class="input-group"> 
        <span class="input-group-addon">€</span>
        <input  type="number" name="prezzoobfun" value="0" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency parzialeobfun"  />
    </div>
    </div>
    <div class="col-md-3"><input type="text" name="responsabilefondiobfun" readonly value="RESPONSABILEFONDI" class="form-control" ></div>
    <div class="col-md-1 " >
    <button title="Elimina questo Obiettivo" class=" btn btn-danger btn-xs remove-obiettivo-row float-right"><i class="fa fa-minus-square-o"></i></button>
    <button title="Aggiungi un nuovo Obiettivo" class="btn btn-success btn-xs add-obiettivo-row float-right"><i class="fa fa-plus-square-o"></i></button>

    </div>
    
</div> 
      </script>
<script>
var app3 = new Vue({
  el: '#informaticiPlus',
  data: {
    seen: false
  }
});

 $(document).on('change', 'input:radio[name="convenzione"]', function (event) {
      console.log("CONVENZIONE",$(this).val());
      if ($(this).val() == 'esisteconvenzioneattiva') {
      $('#nomeconvenzione').removeClass("d-none").addClass("d-block");
      } else {
      $('#nomeconvenzione').addClass("d-none");
       
      }
      if ( $(this).val() == 'nousareconvenzioneattiva') {
        $('#motivonoconvenzione').removeClass("d-none").addClass("d-block");
      } else {
          $('#motivonoconvenzione').addClass('d-none');
      }
 })
 $(document).on('change', 'input:radio[name="tipoacquisto"]', function (event) {
            //alert($(this).is(":checked"))
                console.log("OK",$(this).val());
                if ($(this).val() == 'informatici') {
                  $('#informaticiPlus').removeClass("invisible").addClass("visible");
                } else {
                $('#informaticiPlus').removeClass("visible").addClass("invisible");

                }
                console.log("App3 1",app3.seen);

            });  
 
function sommaCapitoli(){
    tot=0;
    $('.parzialeobfun').each(function() { 
        console.log('CAMBIO',$(this).val());
        //ptot=$('#sommacapitoli').val();
        //tot = parseFloat(ptot) + ( $(this).val().length > 0  ? parseFloat($(this).val()) : 0.0 )
        tot = tot+ ( $(this).val().length > 0  ? parseFloat($(this).val()) : 0.0 );
    })
    $('#sommacapitoli').val(tot);
            console.log(parseFloat($('#prezzototaleacquisto').val()), parseFloat($('#sommacapitoli').val()) );

    if ( parseFloat($('#prezzototaleacquisto').val()) == parseFloat($('#sommacapitoli').val() ) ) {
        $('#sommacapitoli').css("background-color",'#66ff00')
    } else {
         $('#sommacapitoli').css("background-color",'red')
       
    }
}
$(document).on('keyup','.parzialeobfun'   , function(event){
    sommaCapitoli();
    /*
    tot=0;
    $('.parzialeobfun').each(function() { 
        console.log('CAMBIO',$(this).val());
        //ptot=$('#sommacapitoli').val();
        //tot = parseFloat(ptot) + ( $(this).val().length > 0  ? parseFloat($(this).val()) : 0.0 )
        tot = tot+ ( $(this).val().length > 0  ? parseFloat($(this).val()) : 0.0 );
    })
    $('#sommacapitoli').val(tot);
            console.log(parseFloat($('#prezzototaleacquisto').val()), parseFloat($('#sommacapitoli').val()) );

    if ( parseFloat($('#prezzototaleacquisto').val()) == parseFloat($('#sommacapitoli').val() ) ) {
        $('#sommacapitoli').css("background-color",'#66ff00')
    } else {
         $('#sommacapitoli').css("background-color",'red')
       
    }
    
    console.log('Totale',tot)
    */
});

var app = new Vue({
       delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
$(document).on('click', '.add-form-row', function(e){
    e.preventDefault();
    cloneMore('.added-row:first');
    return false;
});
function addObiettivoFunzione(){
        neww = $("#hidden-template").html();//clone(true);
        $("#addsome").append(neww);
    }
$(document).on('click', '.add-obiettivo-row', function(e){
    e.preventDefault();
    addObiettivoFunzione();
    return false;
});
$(document).on('click', '.remove-obiettivo-row', function(e){
    e.preventDefault();
    deleteObiettivo($(this));
    return false;
}); 
function deleteObiettivo( btn) {
        btn.closest('.ofitem').remove();
        sommaCapitoli();
    return false;
};
function cloneMore(selector) {
        var newElement = $(selector).clone(true);
        //newElement.find('.remove-form-row').parent().remove();
        removebtn = '<div class="col-md-1" ><button class="btn btn-danger btn-xs  remove-form-row"><i class="fa fa-minus-square-o"></i></button></div>';
        newElement.append(removebtn);
        newElement.find("input[name='prezzoarticolo']").val('0,00');
        newElement.find("input[name='quantita']").val('1');
        newElement.find("input[name='codiceproduttore']").val('');
        newElement.find("input[name='descrizionearticolo']").val('');
        $('.added-row:last').after(newElement);
    
        return false;
}
 $(document).on('click', '.remove-form-row', function(e){
    e.preventDefault();
    deleteForm($(this));
    return false;
}); 
function deleteForm( btn) {
        btn.closest('.form-row').remove();
    return false;
};
$(document).on('click', '.calcolaTotale', function(e){
    e.preventDefault();
    calcolaTotale();
    return false;
});
function calcolaTotale() {
        //newElement.find("input[name='prezzo']").val('0,00)');
        tot=0;
        $('.form-row').find("input[name='prezzoarticolo']").each(function() {  

             tot= tot+ ( $(this).val().length > 0  ? parseFloat($(this).val()) : 0.0 );
                });
         $('#importoTotale').val(tot);
         $('#prezzototaleacquisto').val(tot);
};
$(document).ready(function(){
    var riepilogo = 0;
       var riepilogo = new Vue({
            delimiters: ['[[', ']]'],
            el: '#vueriepilogo',
            data: {
                titolobreve: $('#titolobreve').val(),
                settore: $("input[name='settore']:checked").val(),
                motivazione : $('#motivazione').val(),
                obfun : [],
                convenzione: $("input[name='tipoacquisto']:checked").val()
            }
        });
    // Toolbar extra buttons
var btnFinish = $('<button></button>').text('Finish')
                                           .addClass('btn btn-info')
                                           .on('click', function(){ alert('Finish Clicked'); });
var btnCancel = $('<button></button>').text('Cancel')
                                           .addClass('btn btn-danger')
                                           .on('click', function(){ $('#smartwizard').smartWizard("reset"); });

var myCurrentStepIndex = 0;
$('#smartwizard').smartWizard({
  selected: 0, // Initial selected step, 0 = first step
  theme: 'arrows', // theme for the wizard, related css need to include for other than default theme
  justified: true, // Nav menu justification. true/false
  darkMode:false, // Enable/disable Dark Mode if the theme supports. true/false
  autoAdjustHeight: false, // Automatically adjust content height
  cycleSteps: false, // Allows to cycle the navigation of steps
  backButtonSupport: true, // Enable the back button support
  enableURLhash: true, // Enable selection of the step based on url hash
  transition: {
      animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
      speed: '400', // Transion animation speed
      easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
  },
  toolbarSettings: {
      toolbarPosition: 'bottom', // none, top, bottom, both
      toolbarButtonPosition: 'right', // left, right, center
      showNextButton: true, // show/hide a Next button
      showPreviousButton: true, // show/hide a Previous button
      toolbarExtraButtons: [btnFinish, btnCancel] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
  },
  anchorSettings: {
      anchorClickable: true, // Enable/Disable anchor navigation
      enableAllAnchors: false, // Activates all anchors clickable all times
      markDoneStep: true, // Add done state on navigation
      markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
      removeDoneStepOnNavigateBack: true, // While navigate back done step after active step will be cleared
      enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
  },
  keyboardSettings: {
      keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
      keyLeft: [37], // Left key code
      keyRight: [39] // Right key code
  },
  lang: { // Language variables for button
      next: 'Next',
      previous: 'Previous'
  },
  disabledSteps: [], // Array Steps disabled
  errorSteps: [], // Highlight step with errors
  hiddenSteps: [] // Hidden steps
});
    
// Initialize the leaveStep event
$("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepIndex, nextStepIndex, stepDirection) {
   //console.log("get", $("#smartwizard").steps("getCurrentStep") );

   myCurrentStepIndex = currentStepIndex;
   if ( stepDirection == 'forward') {
       myCurrentStepIndex +=1 ;
   } else {
       myCurrentStepIndex -= 1 ;
   }
   console.log(currentStepIndex,myCurrentStepIndex,nextStepIndex);
   //return confirm("Do you want to leave the step " + currentStepIndex + "?");
});
var trueStep =0;
$("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection) {
   //alert("You are on step "+stepIndex+" now");
   console.log("SI ->",stepIndex);
   
   if ( stepDirection == 'forward') {
       
       trueStep = stepIndex+1;
       console.log("TrueStep ->",trueStep)
   } else {
       
       trueStep = stepIndex-1;
       console.log("TrueStep ->",trueStep);
   }
   
   if (trueStep == 4 ) {
       alert("step Riepilogo "+ stepIndex);
       
                riepilogo.titolobreve= $('#titolobreve').val();
                riepilogo.settore= $("input[name='settore']:checked").val();
                riepilogo.motivazione = $('#motivazione').val();
                riepilogo.obfun = []
                let articoli=[];
                $('.added-row').each(function(index){
                    row = {}
                    row['quantita'] = $(this).find("input[name='quantita']").val();
                    row['codiceproduttore'] = $(this).find("input[name='codiceproduttore']").val();
                    row['descrizionearticolo'] = $(this).find("input[name='descrizionearticolo']").val();
                    row['prezzoarticolo'] = $(this).find("input[name='prezzoarticolo']").val();
                    console.log(row);
                    articoli.push(row);
                });
                console.log(articoli);
                //var newElement = $('.riepilogo-added-row:first').clone(true);
                //var articoliTemplate = newElement;
                //$('.riepilogo-added-row:first').remove();
                $('.articolidiv').empty();
                $.each(articoli,function(index,item){
                    var articoliTemplate = $($('#articoli-riepilogo-template').html() ) ; //$('.riepilogo-added-row:first').clone(true);
                    //articoliTemplate.removeClass('d-none');
                    //newElement.find('.remove-form-row').parent().remove();
                    articoliTemplate.find("input[name='prezzoarticolo']").val(articoli[index].prezzoarticolo);
                    articoliTemplate.find("input[name='quantita']").val(articoli[index].quantita);
                    articoliTemplate.find("input[name='codiceproduttore']").val(articoli[index].codiceproduttore);
                    articoliTemplate.find("input[name='descrizionearticolo']").val(articoli[index].descrizionearticolo);
                    $('.articolidiv').append(articoliTemplate);
                    alert(index);

                })
                
                $("input[name='prezzoobfun']").each(function(index){
                    console.log( index + ": " + $( this ).val() );
                });
                $("input[name='idobiettivofunzione']").each(function(index){
                    console.log( index + ": " + $( this ).val() );
                });
                $("input[name='capitolo']").each(function(index){
                    console.log( index + ": " + $( this ).val() );
                });
                //console.log('POLLO',$("input[name='capitolo']").val());
            
   }
   console.log(stepDirection);
});
    var obiettivifun=[]
    {% for one in ob_fun %}
        j={'id':{{one.id}},'of':'{{one.obiettivofunzione}}','descr': '{{one.descrizione}}',
        'responsabile':'{{one.emailresponsabile}}'};
        
        obiettivifun[{{one.id}}]=j;

    {% endfor %}
    console.log(obiettivifun);
            $( document ).on('change',"#obiettivo",function(e) {
//alert("POLLO");
                head='<div class="row ">'+                              
                '<div class="col-md-5">Obiettivo Funzione</div>'+
                '<div class="col-md-2">Prezzo (IVA esclusa )</div></div>';
                //$("#addsome").append(head);
                $("#addsome").html('');
                $.each($("#obiettivo option:selected"), function(){  
                        indx =   $(this).val()   ;
                        neww = $("#hidden-template").html();//clone(true);
                        
                        //neww.find("input[name='descrizione']").val(obiettivifun[indx].descrizione);

                        //oooo = neww.replace('DESCRIZIONE',obiettivifun[indx].descr);
                        //ooo1 = oooo.replace('CAPITOLO',obiettivifun[indx].of);
                        //ooo = ooo1.replace('RESPONSABILEFONDI',obiettivifun[indx].responsabile);
                        //oo = ooo.replace('ID_OB_FUN',indx); 
                        $("#addsome").append(neww);
                        
                        //alert($(this).val());
                        //countries.push($(this).val());
                    })
    
   
        });
    
    $( document ).on('change',"#inputGroupSelect01",function(e) {
        console.log($(this).val());
        console.log(obiettivifun[$(this).val()]);
        console.log(obiettivifun[$(this).val()].of);
        console.log($(this).closest(".ofitem").find("input[name='capitolo']")) ; //.closest("input")); //[name='capitolo'").val('pollo'); //find("input[name='idobiettivofunzione'").val('POLLO');
        $(this).closest(".ofitem").find("input[name='capitolo']").val(obiettivifun[$(this).val()].of);
        $(this).closest(".ofitem").find("input[name='responsabilefondiobfun']").val(obiettivifun[$(this).val()].responsabile);
        $(this).closest(".ofitem").find("input[name='idobiettivofunzione']").val(obiettivifun[$(this).val()].id);
        
    })
});
    </script>
{% endblock javascripts %}