@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
<div class="row mb-2">
    <div class="col-sm-6">
    <h1>Modifica dati tecnici</h1>
    </div>
    @include('layouts.navbar')
    </div>
    @include('layouts.breadcrumb')
@stop
@php
    $colori = [
        'BIANCO' => ['#FFFFFF', 'black', 'BIANCO - 9016'],
        'AVORIO' => ['#FFFF99', 'black', 'AVORIO - 416'],
        'GIALLO' => ['#FFFF00', 'black', 'GIALLO'],
        'ROSSO' => ['#FF0000', 'white', 'ROSSO - 3000'],
        'MARRONE' => ['#8B4513', 'white', 'MARRONE'],
        'ANTRACITE' => ['#363636', 'white', 'ANTRACITE - 7016'],
        'GRIGIO1' => ['#D6D6D6', 'black', 'GRIGIO - 7035'],
        'GRIGIO2' => ['#B8B8B8', 'black', 'GRIGIO - 7038'],
        'BLU' => ['#0073E6', 'white', 'BLU'],
        'VERDE' => ['#008000', 'white', 'VERDE'],
        'VERDECHIARO' => ['#6BBE44', 'black', 'VERDE CHIARO'],
    ];
@endphp

@section('content')
<form method="post" action="{{ route('tecnici.store',$commessa->id) }}">
    @csrf
<table class="table table-striped table-bordered">
    <tr>
        <td>Tipologia struttura</td>
        <td><select name="tipologia" class="form-control">
            <option @if($tecnico->tipologia=='CTS') selected=selected @endif>CTS</option>
            <option @if($tecnico->tipologia=='CTSM') selected=selected @endif>CTSM</option>
            <option @if($tecnico->tipologia=='CTZ') selected=selected @endif>CTZ</option>
            <option @if($tecnico->tipologia=='CTZM') selected=selected @endif>CTZM</option>
            <option @if($tecnico->tipologia=='CTDZ') selected=selected @endif>CTDZ</option>
            <option @if($tecnico->tipologia=='CTDZM') selected=selected @endif>CTDZM</option>
            <option @if($tecnico->tipologia=='CTZTR') selected=selected @endif>CTZTR</option>
            <option @if($tecnico->tipologia=='CTZA') selected=selected @endif>CTZA</option>
            <option @if($tecnico->tipologia=='CTDZA') selected=selected @endif>CTDZA</option>
            </select>
        </td>
        <td width="25%">Larghezza interna</td>
    <td width="25%"><input class="form-control" name="larghezzainterna" type="number" value="{{ $tecnico->larghezzainterna}}"/></td>
    </tr>
<tr>
    <td width="25%">Larghezza esterna</td>
    <td width="25%"><input class="form-control" name="larghezzaesterna" type="number" value="{{ $tecnico->larghezzaesterna}}"/></td>
    <td width="25%">Larghezza interasse</td>
    <td width="25%"><input class="form-control" name="interasse" type="number" value="{{ $tecnico->interasse}}"/>
       
    </td>
</tr>
<tr>
    <td width="25%">Lunghezza massima</td>
    <td width="25%"><input class="form-control" name="lunghezzamassima" type="number" value="{{ $tecnico->lunghezzamassima}}"/></td>
    <td width="25%">Altezza Utile</td>
    <td width="25%"><input class="form-control" name="altezzautile" type="number" value="{{ $tecnico->altezzautile}}"/>
       
    </td>
</tr>
<tr>
    <td width="25%">Altezza massima</td>
    <td width="25%"><input class="form-control" name="altezzamassima" type="number" value="{{ $tecnico->altezzamassima}}"/></td>
    <td width="25%">Altezza sottotrave</td>
    <td width="25%"><input class="form-control" name="altezzasottotrave" type="number" value="{{ $tecnico->altezzasottotrave}}"/>
       
    </td>
</tr>
<tr>
    <td>Tipologia binario a terra sx</td>
    <td><select name="binariosx" class="form-control">
        <option></option>
        <option @if($tecnico->binariosx=='Tassellato') selected=selected @endif>Tassellato</option>
        <option @if($tecnico->binariosx=='Carrabile') selected=selected @endif>Carrabile</option>
        <option @if($tecnico->binariosx=='Vedi note') selected=selected @endif>Vedi note</option>
        </select></td>
    <td>Tipologia binario a terra dx</td>
    <td><select name="binariodx" class="form-control">
        <option></option>
        <option @if($tecnico->binariodx=='Tassellato') selected=selected @endif>Tassellato</option>
        <option @if($tecnico->binariodx=='Carrabile') selected=selected @endif>Carrabile</option>
        <option @if($tecnico->binariodx=='Vedi note') selected=selected @endif>Vedi note</option>
        </select></td>
</tr>
<tr>
    <td>Interasse pilastri lato muro</td>
    <td>
        <div id="pilastri-muro-container">
            @foreach ($tecnico->pilastrolatomurointerasse ?? [] as $index => $interasse)
                <div class="input-group mb-2">
                    <input type="text" 
                           name="pilastrolatomurointerasse[]" 
                           placeholder="{{ ['primo', 'secondo', 'terzo', 'quarto', 'quinto', 'sesto', 'settimo', 'ottavo', 'nono'][$index] }}" 
                           class="form-control" 
                           value="{{ $interasse }}">
                    <div class="input-group-append">
                        <select name="tipotendalateralemuro[]" class="form-control">
                            <option value=""></option>
                            <option value="interno/esterno" @selected(isset($tecnico->tipotendalateralemuro[$index]) && $tecnico->tipotendalateralemuro[$index] == 'interno/esterno')>interno/esterno</option>
                            <option value="laterale sx" @selected(isset($tecnico->tipotendalateralemuro[$index]) && $tecnico->tipotendalateralemuro[$index] == 'laterale sx')>laterale sx</option>
                            <option value="centrale" @selected(isset($tecnico->tipotendalateralemuro[$index]) && $tecnico->tipotendalateralemuro[$index] == 'centrale')>centrale</option>
                            <option value="laterale dx" @selected(isset($tecnico->tipotendalateralemuro[$index]) && $tecnico->tipotendalateralemuro[$index] == 'laterale dx')>laterale dx</option>
                        </select>
                    </div>
                    <select name="coloretendamuro[]" class="form-control">
                        <option value=""></option>
                        @foreach ($colori as $valore => [$bgColor, $textColor, $etichetta])
                            <option value="{{ $valore }}" 
                                style="background-color: {{ $bgColor }}; color: {{ $textColor }};" 
                                data-bgcolor="{{ $bgColor }}" 
                                data-textcolor="{{ $textColor }}"
                                @selected(isset($tecnico->coloretendamuro[$index]) && $tecnico->coloretendamuro[$index] == $valore)>
                                {{ $etichetta }}
                            </option>
                        @endforeach
                    </select>
                    <button type="button" class="btn btn-danger" onclick="this.parentElement.remove()">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            @endforeach
        </div>
        <button type="button" class="btn btn-success btn-sm" onclick="aggiungiInterasse('pilastri-muro-container')">
            <i class="fas fa-plus"></i> Aggiungi interasse
        </button>
    </td>
    <td>Interasse pilastri lato opposto</td>
    <td>
        <div id="pilastri-opposto-container">
            @foreach ($tecnico->pilastrooppostointerasse ?? [] as $index => $interasse)
                <div class="input-group mb-2">
                    <input type="text" 
                           name="pilastrooppostointerasse[]" 
                           placeholder="{{ ['primo', 'secondo', 'terzo', 'quarto', 'quinto', 'sesto', 'settimo', 'ottavo', 'nono'][$index] }}" 
                           class="form-control" 
                           value="{{ $interasse }}">
                    <div class="input-group-append">
                        <select name="tipotendalateraleopposto[]" class="form-control">
                            <option value=""></option>
                            <option value="interno/esterno" @selected(isset($tecnico->tipotendalateraleopposto[$index]) && $tecnico->tipotendalateraleopposto[$index] == 'interno/esterno')>interno/esterno</option>
                            <option value="laterale sx" @selected(isset($tecnico->tipotendalateraleopposto[$index]) && $tecnico->tipotendalateraleopposto[$index] == 'laterale sx')>laterale sx</option>
                            <option value="centrale" @selected(isset($tecnico->tipotendalateraleopposto[$index]) && $tecnico->tipotendalateraleopposto[$index] == 'centrale')>centrale</option>
                            <option value="laterale dx" @selected(isset($tecnico->tipotendalateraleopposto[$index]) && $tecnico->tipotendalateraleopposto[$index] == 'laterale dx')>laterale dx</option>
                        </select>
                    </div>
                    <select name="coloretendaopposto[]" class="form-control">
                        <option value=""></option>
                        @foreach ($colori as $valore => [$bgColor, $textColor, $etichetta])
                            <option value="{{ $valore }}" 
                                style="background-color: {{ $bgColor }}; color: {{ $textColor }};" 
                                data-bgcolor="{{ $bgColor }}" 
                                data-textcolor="{{ $textColor }}"
                                @selected(isset($tecnico->coloretendaopposto[$index]) && $tecnico->coloretendaopposto[$index] == $valore)>
                                {{ $etichetta }}
                            </option>
                        @endforeach
                    </select>
                    <button type="button" class="btn btn-danger" onclick="this.parentElement.remove()">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            @endforeach
        </div>
        <button type="button" class="btn btn-success btn-sm" onclick="aggiungiInterasse('pilastri-opposto-container')">
            <i class="fas fa-plus"></i> Aggiungi interasse
        </button>
    </td>
</tr>
<tr>
    <td>Note pilastri</td>
    <td colspan="3"><textarea class="form-control" name="notepilastri">{{ $tecnico->notepilastri }}</textarea></td>
</tr>
<tr>
    <td>Frontalino anteriore</td>
    <td>
        <select name="frontalinoanteriore" class="form-control">
            <option></option>
            @foreach ($colori as $valore => [$bgColor, $textColor, $etichetta])
        <option value="{{ $valore }}" 
            style="background-color: {{ $bgColor }}; color: {{ $textColor }};" 
            data-bgcolor="{{ $bgColor }}" 
            data-textcolor="{{ $textColor }}"
            @selected($tecnico->frontalinoanteriore == $valore)>
            {{ $etichetta }}
        </option>
    @endforeach
        </select></td>
    <td>Frontalino posteriore</td>
    <td> <select name="frontalinoposteriore" class="form-control" onchange="this.style.backgroundColor=this.options[this.selectedIndex].getAttribute('data-bgcolor'); this.style.color=this.options[this.selectedIndex].getAttribute('data-textcolor');">>
        <option></option>
        @foreach ($colori as $valore => [$bgColor, $textColor, $etichetta])
        <option value="{{ $valore }}" 
            style="background-color: {{ $bgColor }}; color: {{ $textColor }};" 
            data-bgcolor="{{ $bgColor }}" 
            data-textcolor="{{ $textColor }}"
            @selected($tecnico->frontalinoposteriore == $valore)>
            {{ $etichetta }}
        </option>
    @endforeach
    </select></td>
</tr>
<tr>
    <td>Tenda anteriore</td>
    <td> <select name="tendaanteriore" class="form-control">
        <option></option>
        @foreach ($colori as $valore => [$bgColor, $textColor, $etichetta])
        <option value="{{ $valore }}" 
            style="background-color: {{ $bgColor }}; color: {{ $textColor }};" 
            data-bgcolor="{{ $bgColor }}" 
            data-textcolor="{{ $textColor }}"
            @selected($tecnico->tendaanteriore == $valore)>
            {{ $etichetta }}
        </option>
    @endforeach
    </select><br />
    <select name="tipotendaanteriore" class="form-control">
        <option></option>
        <option value="interno/esterno" @selected($tecnico->tipotendaanteriore == 'interno/esterno')>interno/esterno</option>
        <option value="laterale sx" @selected($tecnico->tipotendaanteriore == 'laterale sx')>laterale sx</option>
        <option value="centrale" @selected($tecnico->tipotendaanteriore == 'centrale')>centrale</option>
        <option value="laterale dx" @selected($tecnico->tipotendaanteriore == 'laterale dx')>laterale dx</option>
    </select></td>
    <td>Tenda posteriore</td>
    <td> <select name="tendaposteriore" class="form-control">
        <option></option>
        @foreach ($colori as $valore => [$bgColor, $textColor, $etichetta])
        <option value="{{ $valore }}" 
            style="background-color: {{ $bgColor }}; color: {{ $textColor }};" 
            data-bgcolor="{{ $bgColor }}" 
            data-textcolor="{{ $textColor }}"
            @selected($tecnico->tendaposteriore == $valore)>
            {{ $etichetta }}
        </option>
    @endforeach
    </select><br />
    <select name="tipotendaposteriore" class="form-control">
        <option></option>
        <option value="interno/esterno" @selected($tecnico->tipotendaposteriore == 'interno/esterno')>interno/esterno</option>
        <option value="laterale sx" @selected($tecnico->tipotendaposteriore == 'laterale sx')>laterale sx</option>
        <option value="centrale" @selected($tecnico->tipotendaposteriore == 'centrale')>centrale</option>
        <option value="laterale dx" @selected($tecnico->tipotendaposteriore == 'laterale dx')>laterale dx</option>
    </select></td>
</tr>
<tr>
    <td>Telo tetto</td>
    <td> <select name="telotetto" class="form-control">
        <option></option>
        @foreach ($colori as $valore => [$bgColor, $textColor, $etichetta])
        <option value="{{ $valore }}" 
            style="background-color: {{ $bgColor }}; color: {{ $textColor }};" 
            data-bgcolor="{{ $bgColor }}" 
            data-textcolor="{{ $textColor }}"
            @selected($tecnico->telotetto == $valore)>
            {{ $etichetta }}
        </option>
    @endforeach
    </select><br />
    <select name="tipotelotetto" class="form-control">
        <option></option>
        <option @selected($tecnico->tipotelotetto == 'telo anticondensa')>telo anticondensa</option>
        <option @selected($tecnico->tipotelotetto == 'telo coibentato')>telo coibentato</option>
        <option @selected($tecnico->tipotelotetto == 'doppio telo')>doppio telo</option>
        <option @selected($tecnico->tipotelotetto == 'controsoffitto')>controsoffitto</option>
    </select></td>
    <td>Telo lato sinistro</td>
    <td> <select name="telolatosx" class="form-control">
        <option></option>
        @foreach ($colori as $valore => [$bgColor, $textColor, $etichetta])
        <option value="{{ $valore }}" 
            style="background-color: {{ $bgColor }}; color: {{ $textColor }};" 
            data-bgcolor="{{ $bgColor }}" 
            data-textcolor="{{ $textColor }}"
            @selected($tecnico->telolatosx == $valore)>
            {{ $etichetta }}
        </option>
    @endforeach
    </select></td>
</tr>
<tr>
    <td>Telo lato destro</td>
    <td> <select name="telolatodx" class="form-control">
        <option></option>
        @foreach ($colori as $valore => [$bgColor, $textColor, $etichetta])
        <option value="{{ $valore }}" 
            style="background-color: {{ $bgColor }}; color: {{ $textColor }};" 
            data-bgcolor="{{ $bgColor }}" 
            data-textcolor="{{ $textColor }}"
            @selected($tecnico->telolatodx == $valore)>
            {{ $etichetta }}
        </option>
    @endforeach
    </select></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td>Tamponamenti muro tunnel anteriore</td>
    <td> 
        <select class="form-control" name="tamponamentianteriore">
            <option></option>
            <option @selected($tecnico->tamponamentianteriore == 'Lamiera')>Lamiera</option>
            <option @selected($tecnico->tamponamentianteriore == 'Pannello')>Pannello</option>
            <option @selected($tecnico->tamponamentianteriore == 'Telo')>Telo</option>


        </select>
        <br />        
        
        <select name="tamponamentianteriorecolore" class="form-control">
        <option></option>
        @foreach ($colori as $valore => [$bgColor, $textColor, $etichetta])
        <option value="{{ $valore }}" 
            style="background-color: {{ $bgColor }}; color: {{ $textColor }};" 
            data-bgcolor="{{ $bgColor }}" 
            data-textcolor="{{ $textColor }}"
            @selected($tecnico->tamponamentianteriorecolore == $valore)>
            {{ $etichetta }}
        </option>
        @endforeach
    </select></td>
    <td>Tamponamenti muro tunnel posteriore</td>
    <td> 
        <select class="form-control" name="tamponamentiposteriore">
            <option></option>
            <option @selected($tecnico->tamponamentiposteriore == 'Lamiera')>Lamiera</option>
            <option @selected($tecnico->tamponamentiposteriore == 'Pannello')>Pannello</option>
            <option @selected($tecnico->tamponamentiposteriore == 'Telo')>Telo</option>


        </select>
        <br />        
        
        <select name="tamponamentiposteriorecolore" class="form-control">
        <option></option>
        @foreach ($colori as $valore => [$bgColor, $textColor, $etichetta])
        <option value="{{ $valore }}" 
            style="background-color: {{ $bgColor }}; color: {{ $textColor }};" 
            data-bgcolor="{{ $bgColor }}" 
            data-textcolor="{{ $textColor }}"
            @selected($tecnico->tamponamentiposteriorecolore == $valore)>
            {{ $etichetta }}
        </option>
        @endforeach
    </select></td>
</tr>
<tr>
    <td>Tipologia parete destra</td>
    <td>
        <select name="tipologiaparetedx" class="form-control">
            <option></option>
            <option @selected($tecnico->tipologiaparetedx == 'Prefabbricato liscio')>Prefabbricato liscio</option>
            <option @selected($tecnico->tipologiaparetedx == 'Prefabbricato granigliato')>Prefabbricato granigliato</option>
            <option @selected($tecnico->tipologiaparetedx == 'Prefabbricato con coste sporgenti')>Prefabbricato con coste sporgenti</option>
            <option @selected($tecnico->tipologiaparetedx == 'Muro rasato')>Muro rasato</option>
            <option @selected($tecnico->tipologiaparetedx == 'Finestre')>Finestre</option>
            <option @selected($tecnico->tipologiaparetedx == 'Pannello sandwich')>Pannello sandwich</option>
            <option @selected($tecnico->tipologiaparetedx == 'Tunnel in tela')>Tunnel in tela</option>
            <option @selected($tecnico->tipologiaparetedx == 'Altro specificare')>Altro specificare</option>
        </select>

        <td>Tipologia parete sinistra</td>
        <td>
            <select name="tipologiaparetesx" class="form-control">
                <option></option>
                <option @selected($tecnico->tipologiaparetesx == 'Prefabbricato liscio')>Prefabbricato liscio</option>
                <option @selected($tecnico->tipologiaparetesx == 'Prefabbricato granigliato')>Prefabbricato granigliato</option>
                <option @selected($tecnico->tipologiaparetesx == 'Prefabbricato con coste sporgenti')>Prefabbricato con coste sporgenti</option>
                <option @selected($tecnico->tipologiaparetesx == 'Muro rasato')>Muro rasato</option>
                <option @selected($tecnico->tipologiaparetesx == 'Finestre')>Finestre</option>
                <option @selected($tecnico->tipologiaparetesx == 'Pannello sandwich')>Pannello sandwich</option>
                <option @selected($tecnico->tipologiaparetesx == 'Tunnel in tela')>Tunnel in tela</option>
                <option @selected($tecnico->tipologiaparetesx == 'Altro specificare')>Altro specificare</option>
            </select>
    </td>
</tr>
<tr>
    <td>Tipologia parete anteriore</td>
    <td>
        <select  name="tipologiapareteanteriore" class="form-control">
            <option></option>
            <option @selected($tecnico->tipologiapareteanteriore == 'Prefabbricato liscio')>Prefabbricato liscio</option>
            <option @selected($tecnico->tipologiapareteanteriore == 'Prefabbricato granigliato')>Prefabbricato granigliato</option>
            <option @selected($tecnico->tipologiapareteanteriore == 'Prefabbricato con coste sporgenti')>Prefabbricato con coste sporgenti</option>
            <option @selected($tecnico->tipologiapareteanteriore == 'Muro rasato')>Muro rasato</option>
            <option @selected($tecnico->tipologiapareteanteriore == 'Finestre')>Finestre</option>
            <option @selected($tecnico->tipologiapareteanteriore == 'Pannello sandwich')>Pannello sandwich</option>
            <option @selected($tecnico->tipologiapareteanteriore == 'Tunnel in tela')>Tunnel in tela</option>
            <option @selected($tecnico->tipologiapareteanteriore == 'Altro specificare')>Altro specificare</option>
        </select>

        <td>Tipologia parete posteriore</td>
        <td>
            <select  name="tipologiapareteposteriore" class="form-control">
                <option></option>
                <option @selected($tecnico->tipologiapareteposteriore == 'Prefabbricato liscio')>Prefabbricato liscio</option>
                <option @selected($tecnico->tipologiapareteposteriore == 'Prefabbricato granigliato')>Prefabbricato granigliato</option>
                <option @selected($tecnico->tipologiapareteposteriore == 'Prefabbricato con coste sporgenti')>Prefabbricato con coste sporgenti</option>
                <option @selected($tecnico->tipologiapareteposteriore == 'Muro rasato')>Muro rasato</option>
                <option @selected($tecnico->tipologiapareteposteriore == 'Finestre')>Finestre</option>
                <option @selected($tecnico->tipologiapareteposteriore == 'Pannello sandwich')>Pannello sandwich</option>
                <option @selected($tecnico->tipologiapareteposteriore == 'Tunnel in tela')>Tunnel in tela</option>
                <option @selected($tecnico->tipologiapareteposteriore == 'Altro specificare')>Altro specificare</option>
            </select>
    </td>
</tr>
<tr>
    <td>Consegna</td>
    <td>
        <select name="consegna" class="form-control">
            <option value=""></option>
            <option value="bilico" @selected($tecnico->consegna == 'bilico')>Bilico</option>
            <option value="motrice" @selected($tecnico->consegna == 'motrice')>Motrice</option>
        </select>
    </td>
    <td>Tipo di pavimentazione esistente</td>
    <td>
        <input type="text" name="pavimentazione" class="form-control" value="{{ $tecnico->pavimentazione }}">
    </td>
</tr>
<tr>
    <td>Deposito genio civile</td>
    <td>
        <select name="depositogeniocivile" class="form-control">
            <option value=""></option>
            <option value="1" @selected($tecnico->depositogeniocivile == '1')>Si</option>
            <option value="0" @selected($tecnico->depositogeniocivile == '0')>No</option>
        </select>
    </td>
    <td></td>
    <td></td>
</tr>
</table>
<input class="btn btn-primary" value="Salva" type="submit"/>
<a class="btn btn-danger" href="{{ route('stampe.pdfTecnici',$commessa->id) }}" target="_blank" style="margin-left: 10px;">
    <i class="fas fa-file-pdf"></i> Stampa PDF
</a>
</form>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <style>
        .input-group {
            flex-wrap: nowrap !important;
            margin-bottom: 10px !important;
        }

        .input-group > * {
            margin-right: 5px !important;
        }

        .input-group-text {
            white-space: nowrap;
            display: flex;
            align-items: center;
            padding: 0.375rem 0.75rem;
            background-color: #e9ecef;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }

        .input-group select {
            min-width: 150px;
        }

        .input-group input[type="checkbox"] {
            margin-right: 5px;
        }

        .btn-danger {
            padding: 0.375rem 0.75rem;
            margin-left: 5px;
        }

        .btn-success {
            margin-top: 10px;
        }

        #pilastri-muro-container,
        #pilastri-opposto-container {
            margin-bottom: 15px;
        }
    </style>
@stop

@section('js')
<script>
    function aggiornaColoriSelect(select) {
        let optionSelezionata = select.options[select.selectedIndex];
        select.style.backgroundColor = optionSelezionata.getAttribute('data-bgcolor');
        select.style.color = optionSelezionata.getAttribute('data-textcolor');
    }

    function inizializzaSelect() {
        document.querySelectorAll('select').forEach(select => {
            aggiornaColoriSelect(select);
            select.addEventListener('change', function() {
                aggiornaColoriSelect(this);
            });
        });
    }

    function gestisciVisibilitaColore(select, selectColore) {
        selectColore.disabled = select.value === '';
        if (select.value === '') {
            selectColore.value = '';
            selectColore.style.backgroundColor = '';
            selectColore.style.color = '';
        }
    }

    function inizializzaCheckboxColore() {
        document.querySelectorAll('[name="tipotendalateralemuro[]"]').forEach((select, index) => {
            const selectColore = document.querySelectorAll('[name="coloretendamuro[]"]')[index];
            gestisciVisibilitaColore(select, selectColore);
            select.addEventListener('change', () => gestisciVisibilitaColore(select, selectColore));
        });

        document.querySelectorAll('[name="tipotendalateraleopposto[]"]').forEach((select, index) => {
            const selectColore = document.querySelectorAll('[name="coloretendaopposto[]"]')[index];
            gestisciVisibilitaColore(select, selectColore);
            select.addEventListener('change', () => gestisciVisibilitaColore(select, selectColore));
        });
    }

    function aggiungiInterasse(containerId) {
        const container = document.getElementById(containerId);
        const count = container.children.length + 1;
        const ordinals = ['primo', 'secondo', 'terzo', 'quarto', 'quinto', 'sesto', 'settimo', 'ottavo', 'nono'];
        
        if (count <= ordinals.length) {
            const div = document.createElement('div');
            div.className = 'input-group mb-2';
            
            // Input per l'interasse
            const input = document.createElement('input');
            input.type = 'text';
            input.name = containerId === 'pilastri-muro-container' ? 'pilastrolatomurointerasse[]' : 'pilastrooppostointerasse[]';
            input.placeholder = ordinals[count - 1];
            input.className = 'form-control';
            
            // Select per il tipo di tenda
            const selectDiv = document.createElement('div');
            selectDiv.className = 'input-group-append';
            const select = document.createElement('select');
            select.className = 'form-control';
            select.name = containerId === 'pilastri-muro-container' ? 'tipotendalateralemuro[]' : 'tipotendalateraleopposto[]';
            
            const opzioni = [
                '',
                'interno/esterno',
                'laterale sx',
                'centrale',
                'laterale dx'
            ];

            opzioni.forEach(opzione => {
                const option = document.createElement('option');
                option.value = opzione;
                option.textContent = opzione;
                select.appendChild(option);
            });

            selectDiv.appendChild(select);

            // Select per i colori
            const selectColori = document.createElement('select');
            selectColori.name = containerId === 'pilastri-muro-container' ? 'coloretendamuro[]' : 'coloretendaopposto[]';
            selectColori.className = 'form-control';
            selectColori.disabled = true;
            
            // Opzione vuota per i colori
            const optionVuota = document.createElement('option');
            optionVuota.value = '';
            selectColori.appendChild(optionVuota);

            // Aggiungi le opzioni dei colori
            const colori = {
                'BIANCO': ['#FFFFFF', 'black', 'BIANCO - 9016'],
                'AVORIO': ['#FFFF99', 'black', 'AVORIO - 416'],
                'GIALLO': ['#FFFF00', 'black', 'GIALLO'],
                'ROSSO': ['#FF0000', 'white', 'ROSSO - 3000'],
                'MARRONE': ['#8B4513', 'white', 'MARRONE'],
                'ANTRACITE': ['#363636', 'white', 'ANTRACITE - 7016'],
                'GRIGIO1': ['#D6D6D6', 'black', 'GRIGIO - 7035'],
                'GRIGIO2': ['#B8B8B8', 'black', 'GRIGIO - 7038'],
                'BLU': ['#0073E6', 'white', 'BLU'],
                'VERDE': ['#008000', 'white', 'VERDE'],
                'VERDECHIARO': ['#6BBE44', 'black', 'VERDE CHIARO']
            };

            for (const [valore, [bgColor, textColor, etichetta]] of Object.entries(colori)) {
                const option = document.createElement('option');
                option.value = valore;
                option.textContent = etichetta;
                option.style.backgroundColor = bgColor;
                option.style.color = textColor;
                option.setAttribute('data-bgcolor', bgColor);
                option.setAttribute('data-textcolor', textColor);
                selectColori.appendChild(option);
            }

            // Pulsante elimina
            const deleteButton = document.createElement('button');
            deleteButton.type = 'button';
            deleteButton.className = 'btn btn-danger';
            deleteButton.innerHTML = '<i class="fas fa-trash"></i>';
            deleteButton.onclick = function() {
                div.remove();
            };
            
            // Assembla tutti gli elementi
            div.appendChild(input);
            div.appendChild(selectDiv);
            div.appendChild(selectColori);
            div.appendChild(deleteButton);
            container.appendChild(div);

            // Inizializza i comportamenti
            selectColori.addEventListener('change', function() {
                aggiornaColoriSelect(this);
            });

            select.addEventListener('change', () => gestisciVisibilitaColore(select, selectColori));
            gestisciVisibilitaColore(select, selectColori);
        } else {
            alert('Hai raggiunto il numero massimo di interassi');
        }
    }

    window.onload = function() {
        inizializzaSelect();
        inizializzaCheckboxColore();
    };
</script>
@stop