@extends('layouts.app')

<style>
    
    .toast-container {
        z-index: 1050; /* Assicura che il toast sia sopra gli altri elementi */
    }

    .toast {
        width           : 100%; /* Copre l'intera larghezza */
        border-radius   : 0; /* Rimuove gli angoli arrotondati */
        font-size       : 1rem; /* Migliora la leggibilità */
    }
    
</style>

@push('head-scripts')
<!-- Aggiungi eventuali script necessari per il funzionamento delle tab -->
@endpush

@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">

<section class="section contact">

    <div class="toast-container position-fixed top-0 start-0 w-100 p-3">
        <div class="toast align-items-center text-white bg-success border-0 w-100" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    <!-- Il messaggio verrà inserito qui -->
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>

    
  <div class="container dashboard m-0 p-0">
    <div class="card">
      <!-- Testata card con toolbar -->
      <h5 class="card-header d-flex justify-content-between align-items-center">
        <span>Impostazioni Generali</span>      
        @if(isset($toolBarScheda))            
          @component("components.toolBarModulo",["toolBarScheda" => $toolBarScheda]) @endcomponent
        @endif
      </h5>
      <!-- END Testata card con toolbar -->

      <div class="card-body pt-4">
        <!-- Aggiungi le tabs -->
        <ul class="nav nav-tabs" id="myTab" role="tablist">

          <li class="nav-item" role="presentation">
            <a class="nav-link active" id="interno-tab" data-bs-toggle="tab" href="#interno" role="tab" aria-controls="interno" aria-selected="true">Interno</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" id="taglio-tab" data-bs-toggle="tab" href="#taglio" role="tab" aria-controls="taglio" aria-selected="true">Taglio</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" id="alette-tab" data-bs-toggle="tab" href="#alette" role="tab" aria-controls="alette" aria-selected="true">Copertina</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" id="brossura-tab" data-bs-toggle="tab" href="#brossura" role="tab" aria-controls="brossura" aria-selected="true">Brossura</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" id="other-tab" data-bs-toggle="tab" href="#other" role="tab" aria-controls="other" aria-selected="false">Altri Parametri</a>
          </li>
          <!-- Puoi aggiungere altre tab qui -->
        </ul>

        <form id="formDati" novalidate method="POST" action="" enctype="multipart/form-data">
                <!-- Contenuti delle tabs -->
                <div class="tab-content mt-3" id="tabImpostazioniGenerali">
                    <!-- Tab Impostazioni generali -->
                    <div class="tab-pane fade show active" id="interno" role="tabpanel" aria-labelledby="interno-tab">

                      <fieldset id="fieldsetParametriDimensioniInterno">
                            <legend>Abbondanza Formato finale</legend>
                            
                            <div class="row g-3">
                                
                              <div class="col-md-3">
                                  <div class="form-floating">
                                  <input type="number" class="form-control" id="abbondanzaFormatoFinitoSopra" name="abbondanzaFormatoFinitoSopra" value="{{$dettaglioImpostazioniGenerali->abbondanzaFormatoFinitoSopra}}" required min="0" max="100">
                                  <label for="portaServer">Abbondanza Sopra: mm.</label>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                  <div class="form-floating">
                                  <input type="number" class="form-control" id="abbondanzaFormatoFinitoSotto" name="abbondanzaFormatoFinitoSotto" value="{{$dettaglioImpostazioniGenerali->abbondanzaFormatoFinitoSotto}}" required min="0" max="100">
                                  <label for="portaServer">Abbondanza Sotto: mm.</label>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                  <div class="form-floating">
                                  <input type="number" class="form-control" id="abbondanzaFormatoFinitoSinistra" name="abbondanzaFormatoFinitoSinistra" value="{{$dettaglioImpostazioniGenerali->abbondanzaFormatoFinitoSinistra}}" required min="0" max="100">
                                  <label for="portaServer">Abbondanza Sinistra: mm.</label>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                  <div class="form-floating">
                                  <input type="number" class="form-control" id="abbondanzaFormatoFinitoDestra" name="abbondanzaFormatoFinitoDestra" value="{{$dettaglioImpostazioniGenerali->abbondanzaFormatoFinitoDestra}}" required min="0" max="100">
                                  <label for="portaServer">Abbondanza Destra: mm.</label>
                                  </div>
                              </div>

                            </div> <!-- END .row -->

                        </fieldset>
                        
                        <input type="hidden" id="id" name="id" value="{{$dettaglioImpostazioniGenerali->id}}">

                    </div>

                    <div class="tab-pane fade" id="taglio" role="tabpanel" aria-labelledby="taglio-tab">
                        <fieldset id="fieldsetParametriTaglio">

                            <div class="row g-3">
                                
                            <div class="col-md-3">
                                <div class="form-floating">
                                <input type="number" class="form-control" id="difficoltaTaglioFogliati" name="difficoltaTaglioFogliati" value="{{$dettaglioImpostazioniGenerali->difficoltaTaglioFogliati}}" required min="0" max="100">
                                <label for="portaServer">Difficoltà taglio % (prodotti stesi)</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                              <div class="form-floating">
                              <input type="number" class="form-control" id="difficoltaTaglioSegnature" name="difficoltaTaglioSegnature" value="{{$dettaglioImpostazioniGenerali->difficoltaTaglioSegnature}}" required min="0" max="100">
                              <label for="portaServer">Difficoltà taglio % (segnature)</label>
                              </div>
                          </div>


                            </div> <!-- END .row -->
                        </fieldset>

                        <input type="hidden" id="id" name="id" value="{{$dettaglioImpostazioniGenerali->id}}">

                    </div>

                    <div class="tab-pane fade" id="alette" role="tabpanel" aria-labelledby="alette-tab">

                      <fieldset id="fieldsetParametriDimensioniCopertina">
                            <legend>Dimensioni / Abbondanza eXtra</legend>
                            <div class="row g-3">
                                
                              <div class="col-md-3">
                                  <div class="form-floating">
                                  <input type="number" class="form-control" id="copertinaLunghezzaMassima" name="copertinaLunghezzaMassima" value="{{$dettaglioImpostazioniGenerali->copertinaLunghezzaMassima}}" required min="0" max="100">
                                  <label for="portaServer">Lunghezza Massima: mm.</label>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                  <div class="form-floating">
                                  <input type="number" class="form-control" id="copertinaAltezzaMassima" name="copertinaAltezzaMassima" value="{{$dettaglioImpostazioniGenerali->copertinaAltezzaMassima}}" required min="0" max="100">
                                  <label for="portaServer">Altezza Massima: mm.</label>
                                  </div>
                              </div>


                            </div> <!-- END .row -->
                            <div class="row g-3">
                                
                              <div class="col-md-3">
                                  <div class="form-floating">
                                  <input type="number" class="form-control" id="copertinaExtraAbbondanzaSopra" name="copertinaExtraAbbondanzaSopra" value="{{$dettaglioImpostazioniGenerali->copertinaExtraAbbondanzaSopra}}" required min="0" max="100">
                                  <label for="portaServer">Abbondanza extra Sopra: mm.</label>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                  <div class="form-floating">
                                  <input type="number" class="form-control" id="copertinaExtraAbbondanzaSotto" name="copertinaExtraAbbondanzaSotto" value="{{$dettaglioImpostazioniGenerali->copertinaExtraAbbondanzaSotto}}" required min="0" max="100">
                                  <label for="portaServer">Abbondanza extra Sotto: mm.</label>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                  <div class="form-floating">
                                  <input type="number" class="form-control" id="copertinaExtraAbbondanzaSinistra" name="copertinaExtraAbbondanzaSinistra" value="{{$dettaglioImpostazioniGenerali->copertinaExtraAbbondanzaSinistra}}" required min="0" max="100">
                                  <label for="portaServer">Abbondanza extra Sinistra: mm.</label>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                  <div class="form-floating">
                                  <input type="number" class="form-control" id="copertinaExtraAbbondanzaDestra" name="copertinaExtraAbbondanzaDestra" value="{{$dettaglioImpostazioniGenerali->copertinaExtraAbbondanzaDestra}}" required min="0" max="100">
                                  <label for="portaServer">Abbondanza extra Destra: mm.</label>
                                  </div>
                              </div>

                            </div> <!-- END .row -->

                        </fieldset>
                        
                        <fieldset id="fieldsetParametriAlette">
                            <legend>Alette</legend>
                            <div class="row g-3">
                                
                              <div class="col-md-3">
                                  <div class="form-floating">
                                  <input type="number" class="form-control" id="alettaLavorazione" name="alettaLavorazione" value="{{$dettaglioImpostazioniGenerali->alettaLavorazione}}" required min="0" max="100">
                                  <label for="portaServer">Lavorazione: cm.</label>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                  <div class="form-floating">
                                  <input type="number" class="form-control" id="alettaMinima" name="alettaMinima" value="{{$dettaglioImpostazioniGenerali->alettaMinima}}" required min="0" max="100">
                                  <label for="portaServer">Lunghezza Minima: cm.</label>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                  <div class="form-floating">
                                  <input type="number" class="form-control" id="alettaIncremento" name="alettaIncremento" value="{{$dettaglioImpostazioniGenerali->alettaIncremento}}" required min="0" max="100">
                                  <label for="portaServer">Incremento cm.</label>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                <div class="form-floating">
                                <input type="number" class="form-control" id="alettaMassima" name="alettaMassima" value="{{$dettaglioImpostazioniGenerali->alettaMassima}}" required min="0" max="100">
                                <label for="portaServer">Lunghezza Massima: lato - cm.</label>
                                  </div>
                              </div>


                            </div> <!-- END .row -->

                        </fieldset>

                        <fieldset id="fieldsetParametriDorso">
                            <legend>Dorso</legend>
                            <div class="row g-3">
                                
                              <div class="col-md-3">
                                  <div class="form-floating">
                                  <input type="number" class="form-control" id="dorsoMinimo" name="dorsoMinimo" value="{{$dettaglioImpostazioniGenerali->dorsoMinimo}}" required min="0" max="100">
                                  <label for="portaServer">Spessore min: cm.</label>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                  <div class="form-floating">
                                  <input type="number" class="form-control" id="dorsoMassimo" name="dorsoMassimo" value="{{$dettaglioImpostazioniGenerali->dorsoMassimo}}" required min="0" max="100">
                                  <label for="portaServer">Spessore max : cm.</label>
                                  </div>
                              </div>


                            </div> <!-- END .row -->

                        </fieldset>

                        
                        <input type="hidden" id="id" name="id" value="{{$dettaglioImpostazioniGenerali->id}}">

                    </div>
                    <div class="tab-pane fade" id="brossura" role="tabpanel" aria-labelledby="brossura-tab">

                                          <fieldset id="fieldsetParametriBrossura">
                                                <legend>Riduzioni Brossura</legend>
                                                
                                                <div class="row g-3">
                                                    
                                                  <div class="col-md-3">
                                                      <div class="form-floating">
                                                      <input type="number" class="form-control" id="riduzioneBrossuraTesta" name="riduzioneBrossuraTesta" value="{{$dettaglioImpostazioniGenerali->riduzioneBrossuraTesta}}" required min="0" max="100">
                                                      <label for="portaServer">Sopra: mm.</label>
                                                      </div>
                                                  </div>
                                                  <div class="col-md-3">
                                                      <div class="form-floating">
                                                      <input type="number" class="form-control" id="riduzioneBrossuraPiede" name="riduzioneBrossuraPiede" value="{{$dettaglioImpostazioniGenerali->riduzioneBrossuraPiede}}" required min="0" max="100">
                                                      <label for="portaServer">Sotto: mm.</label>
                                                      </div>
                                                  </div>
                                                  <div class="col-md-3">
                                                      <div class="form-floating">
                                                      <input type="number" class="form-control" id="riduzioneBrossuraSinistra" name="riduzioneBrossuraSinistra" value="{{$dettaglioImpostazioniGenerali->riduzioneBrossuraSinistra}}" required min="0" max="100">
                                                      <label for="portaServer">Sinistra: mm.</label>
                                                      </div>
                                                  </div>
                                                  <div class="col-md-3">
                                                      <div class="form-floating">
                                                      <input type="number" class="form-control" id="riduzioneBrossuraDestra" name="riduzioneBrossuraDestra" value="{{$dettaglioImpostazioniGenerali->riduzioneBrossuraDestra}}" required min="0" max="100">
                                                      <label for="portaServer">Destra: mm.</label>
                                                      </div>
                                                  </div>
                                                  

                                                </div> <!-- END .row -->

                                            </fieldset>
                                            
                                            <input type="hidden" id="id" name="id" value="{{$dettaglioImpostazioniGenerali->id}}">

                    </div>

                    <!-- Tab per altri parametri (puoi aggiungere altri form qui) -->
                    <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="other-tab">
                        <!-- Qui puoi inserire il contenuto per gli altri tab, ad esempio un altro form -->
                        <p>Altri parametri qui...</p>
                    </div>

                </div> <!-- END .tab-content -->

           </form>
      </div>
    </div>
  </div>
</section>

@endsection

@push('scripts')

<script src="{{ asset('js/libPrintmanager.js') }}?v={{ time() }}"></script>

<script>

    jQuery(document).ready(function() {
      
        jQuery('#formDati input, select, textarea').each(function() {
            var currentValue = jQuery(this).val();
            jQuery(this).data('previous-value', currentValue);
        });
        
        jQuery('#formDati  [type="checkbox"]').each(function() {
            var currentValue = jQuery(this).is(':checked') ? 1 : 0;
            jQuery(this).data('previous-value', currentValue);
            jQuery(this).val(currentValue)
        });

        jQuery('#formDati [type="checkbox"]').on('change', function() {
            if(jQuery(this).is(':checked'))
                jQuery(this).val(1);
            else
                jQuery(this).val(0);
        });

        jQuery('#formDati input').on('focusout', function() {
               updateRecord("{{$modelloCorrente}}", this,1); 


        });


    });
  </script>

@endpush