<inserisci-prodotto>
    <section class="content">
        <div class="row">
            <div class="col-md-6">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Informazioni generali <strong>{ prodotto ? prodotto.get('codice') : '' }</strong></h3>
                    </div>
                    <form role="form" class="form-horizontal form_product">                      
                        <input type="hidden" name="id">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="tipologia" class="col-sm-2 control-label">Tipologia</label>
                                <div class="col-sm-10">
                                    <select class="form-control no-populate" id="tipologia" name="tipologia">    
                                        <option value="" selected disabled>Scegli....</option>                                
                                        <option value="UtaqYKc60w">Interblocchi</option>
                                        <option value="63teoDEgXM">Loto</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="codice" class="col-sm-2 control-label">Codice base</label>
                                <div class="col-sm-10">
                                    <input class="form-control" type="text" id="codice" placeholder="Codice base" name="codice">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="categoria" class="col-sm-2 control-label">Categoria</label>
                                <div class="col-sm-10">
                                    <select class="form-control no-populate" id="categoria" name="categoria">      
                                        <option value="" selected disabled>Scegli....</option>                              
                                        <option each="{category in categories}" value="{ category.id }">{ category.get("nome_IT") }</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="family" class="col-sm-2 control-label">Sottocategoria</label>
                                <div class="col-sm-10">
                                    <select class="form-control no-populate" id="famiglia" name="famiglia">
                                        <option value="" selected disabled>Scegli....</option>
                                        <option each="{ family in families }" value="{ family.id }">{ family.get("nome_IT") }</option>
                                    </select>
                                </div>
                            </div>
                            <div if="{ document.getElementById('tipologia') && document.getElementById('tipologia').value == 'UtaqYKc60w' }" class="form-group" data-tipologia="UtaqYKc60w">
                                <label for="linea" class="col-sm-2 control-label">Gamma</label>
                                <div class="col-sm-10">
                                    <select class="form-control no-populate" id="linea" name="linea">                                                                       
                                        <option value="">Non applicabile</option>
                                        <option value="IpeDo8LRMt">Heavy duty</option>
                                        <option value="u0eTP9HelJ">Light duty</option>
                                    </select>
                                </div>
                            </div>
                            <div class="nav-tabs-custom">
                                <ul class="nav nav-tabs">
                                    <li each="{ l in languages }" class="{ l == 'IT' ? 'active' : '' }"><a href="#descr_{ l }" data-toggle="tab"><flag lang='{ l.toLowerCase() }'></flag></a></li>
                                </ul>
                                <div class="tab-content">
                                    <div each="{ l in languages }" class="tab-pane { l == 'IT' ? 'active' : '' }" id="descr_{ l }">
                                        <div class="form-group">
                                            <label for="descrizione_{ l }" class="col-sm-2 control-label">Descrizione</label>
                                            <div class="col-sm-10">
                                                <textarea class="form-control" rows="3" id="descrizione_{ l }" placeholder="Descrizione" name="descrizione_{ l }"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="ulteriori_{ l }" class="col-sm-2 control-label">Ulteriori informazioni</label>
                                            <div class="col-sm-10">
                                                <textarea class="form-control" rows="3" id="ulteriori_{ l }" placeholder="Ulteriori informazioni" name="ulteriori_{ l }"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="applicazioni_{ l }" class="col-sm-2 control-label">Applicazione e caratteristiche</label>
                                            <div class="col-sm-10">
                                                <textarea class="form-control" rows="3" id="applicazioni_{ l }" placeholder="Applicazione e caratteristiche (verrà mostrato nel popup nella pagina con la grglia di tutti i prodotti)" name="applicazioni_{ l }"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Colori disponibili</label>
                                <div class="col-sm-10">
                                    <span each="{ c in colors }" class="color { prodotto && prodotto.get('colori') && prodotto.get('colori').indexOf(c.id) >= 0 ? 'selected' : '' }" data-id="{ c.id }">
                                        <i class='fas fa-circle fa-2x' style="color: { c.get('esadecimale') }" title="{ c.get('nome_IT') }"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="proprieta" class="col-sm-2 control-label">Propriet&agrave;</label>
                                <div class="col-sm-10" style="column-count: 2;">
                                    <div each="{ p in proprieta }">
                                        <input class="no-populate" type="checkbox" name="proprieta" value="{ p.id }" checked="{ prodotto && prodotto.get('proprieta') && prodotto.get('proprieta').indexOf(p.id) >= 0 }"> { p.get('nome_IT') }
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="box-footer">
                        <button type="button" class="btn btn-primary btn-flat pull-right" data-id="salva" 
                                data-saving-text="<i class='fa fa-spinner fa-spin'></i> Salvataggio in corso" 
                                data-saved-text="<i class='fa fa-check'></i> Salvato" onclick="{
                                            save
                                        }"><i class='fa fa-save'></i> Salva</button>
                    </div>
                </div>
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Immagini</h3>
                    </div>
                    <form role="form" class="form-horizontal form_product">
                        <div class="box-body">
                            <div class="row form-group">
                                <label for="immagine" class="col-sm-2 control-label">Immagine principale</label>
                                <div class="col-sm-8">
                                    <input class="form-control no-populate" id="immagine" name="immagine" type="file" onchange="{
                                                upload
                                            }">
                                </div>
                                <div class="col-sm-2">
                                    <button type="button" class="btn btn-danger btn-flat pull-right" onclick="{
                                                cancella.bind(this, 'immagine')
                                            }"><i class='fa fa-trash'></i> Cancella</button>
                                </div>
                                <div class="col-sm-6 col-sm-offset-3">
                                    <img if="{ immagine }" src="{ immagine.url() }" class="img-responsive">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="disegnoTecnico" class="col-sm-2 control-label">Disegno tecnico</label>
                                <div class="col-sm-8">
                                    <input class="form-control no-populate" id="disegnoTecnico" name="disegnoTecnico" type="file" onchange="{
                                                upload
                                            }">
                                </div>
                                <div class="col-sm-2">
                                    <button type="button" class="btn btn-danger btn-flat pull-right" onclick="{
                                                cancella.bind(this, 'disegnoTecnico')
                                            }"><i class='fa fa-trash'></i> Cancella</button>
                                </div>
                                <div class="col-sm-6 col-sm-offset-3">
                                    <img if="{ disegnoTecnico }" src="{ disegnoTecnico.url() }" class="img-responsive">
                                </div>
                            </div>                            
                            <div if="{ prodotto }" class="row form-group">
                                <label for="applicazione" class="col-sm-2 control-label">Immagini di applicazioni</label>
                                <div class="col-sm-10">
                                    <input class="form-control no-populate" id="applicazione" name="applicazione" type="file" onchange="{
                                                upload
                                            }">
                                    <small>Si consiglia di caricare immagini della stessa dimensione</small>
                                </div>
                            </div>
                            <div if="{ prodotto }" class="form-group table-container">
                                <table class="table table-bordered table-condensed">
                                    <!--<thead>
                                        <tr>
                                            <th></th>
                                            <th>Ordine</th>
                                            <th></th>
                                        </tr>
                                    </thead>-->
                                    <tbody>
                                        <tr each="{ img in getImmaginiApplicazione() }">
                                            <td class="text-center"><img src="{ img.url }" class="img-applicazione" /></td>
                                            <td><input type="number" class="form-control" data-name="ordine" value="{ img.ordine }" /></td>
                                            <td class="text-right">
                                                <button type="button" class="btn btn-sm btn-flat btn-success" data-id="{ img.id }" onclick="{
                                                            saveimage.bind(this, img.id)
                                                        }"><i class="fa fa-save"></i></button>
                                                <button type="button" class="btn btn-sm btn-flat btn-danger" data-id="{ img.id }" onclick="{
                                                            deleteimage.bind(this, img.id)
                                                        }"><i class="fas fa-trash"></i></button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </form>
                    <div class="box-footer">
                        <button type="button" class="btn btn-primary btn-flat pull-right" data-id="salva" 
                                data-saving-text="<i class='fa fa-spinner fa-spin'></i> Salvataggio in corso" 
                                data-saved-text="<i class='fa fa-check'></i> Salvato" onclick="{
                                            save
                                        }"><i class='fa fa-save'></i> Salva</button>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div if="{ prodotto }" class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Anagrafica degli attributi</h3>
                    </div>
                    <div class="box-body">
                        <div each="{ a in prodotto.get('attributi') }" class="box box-attributo collapsed-box" data-widget="box-widget" data-attributo="{ a.id }">
                            <div class="box-header">
                                <h3 class="box-title">{ a.nome_IT }</h3>
                                <div class="box-tools pull-right">
                                    <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-plus"></i></button>
                                </div>
                            </div>
                            <div class="box-body">
                                <div class="nav-tabs-custom form-attributo">
                                    <ul class="nav nav-tabs">
                                        <li each="{ l in languages }" class="{ l == 'IT' ? 'active' : '' }"><a href="#anagrafica_{ l }_{ a.id }" data-toggle="tab"><flag lang='{ l.toLowerCase() }'></flag></a></li>
                                    </ul>
                                    <div class="tab-content">
                                        <div each="{ l in languages }" class="tab-pane { l == 'IT' ? 'active' : '' }" id="anagrafica_{ l }_{ a.id }">                                            
                                            <form role="form" class="form-horizontal form_anagrafica">
                                                <div class="form-group">
                                                    <label for="nome_{ l }" class="col-sm-2 control-label">Nome</label>
                                                    <div class="col-sm-10">
                                                        <input class="form-control" type="text" placeholder="Nome (ad esempio: Varianti chiavi)" name="nome_{ l }" value="{ a['nome_' + l] }">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="descrizione_{ l }" class="col-sm-2 control-label">Descrizione</label>
                                                    <div class="col-sm-10">
                                                        <textarea class="form-control" rows="3" placeholder="Descrizione" name="descrizione_{ l }" value="{ a['descrizione_' + l] }"></textarea>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="button-container">
                                    <button type="button" class="btn btn-primary btn-flat pull-right" onclick="{
                                                saveanagrafica
                                            }"><i class="far fa-save"></i> Salva</button>
                                    <button type="button" class="btn btn-danger btn-flat" onclick="{
                                                deleteanagrafica
                                            }"><i class="far fa-trash-alt"></i> Elimina</button>
                                </div>
                                <div each="{ v in a.valori }" class="box box-valore collapsed-box" data-widget="box-widget" data-valore="{ v.id }">
                                    <div class="box-header">
                                        <h3 class="box-title">{ v.nome_IT }</h3>
                                        <div class="box-tools pull-right">
                                            <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-plus"></i></button>
                                        </div>
                                    </div>
                                    <div class="box-body">
                                        <div class="nav-tabs-custom form-valore">
                                            <ul class="nav nav-tabs">
                                                <li each="{ l in languages }" class="{ l == 'IT' ? 'active' : '' }"><a href="#valore_{ l }_{ v.id }" data-toggle="tab"><flag lang='{ l.toLowerCase() }'></flag></a></li>
                                            </ul>
                                            <div class="tab-content">
                                                <div each="{ l in languages }" class="tab-pane { l == 'IT' ? 'active' : '' }" id="valore_{ l }_{ v.id }">                                                                                                
                                                    <form role="form" class="form-horizontal form_anagrafica">
                                                        <div class="form-group">
                                                            <label for="nome_{ l }" class="col-sm-2 control-label">Nome</label>
                                                            <div class="col-sm-10">
                                                                <input class="form-control" type="text" placeholder="Nome (ad esempio: KA)" name="nome_{ l }" value="{ v['nome_' + l] }">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="descrizione_{ l }" class="col-sm-2 control-label">Descrizione</label>
                                                            <div class="col-sm-10">
                                                                <textarea class="form-control" rows="3" placeholder="Descrizione (ad esempio: chiavi uguali)" name="descrizione_{ l }" value="{ v['descrizione_' + l] }"></textarea>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="button-container">
                                            <button type="button" class="btn btn-primary btn-flat pull-right" onclick="{
                                                        savevalore
                                                    }"><i class="far fa-save"></i> Salva</button>
                                            <button type="button" class="btn btn-danger btn-flat" onclick="{
                                                        deletevalore
                                                    }"><i class="far fa-trash-alt"></i> Elimina</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-valore" data-widget="box-widget" data-valore="">
                                    <div class="box-header">
                                        <h3 class="box-title">Nuovo valore</h3>
                                        <div class="box-tools pull-right">
                                            <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
                                        </div>
                                    </div>
                                    <div class="box-body">
                                        <div class="nav-tabs-custom form-valore">
                                            <ul class="nav nav-tabs">
                                                <li each="{ l in languages }" class="{ l == 'IT' ? 'active' : '' }"><a href="#valore_{ l }" data-toggle="tab"><flag lang='{ l.toLowerCase() }'></flag></a></li>
                                            </ul>
                                            <div class="tab-content">
                                                <div each="{ l in languages }" class="tab-pane { l == 'IT' ? 'active' : '' }" id="valore_{ l }">                                            
                                                    <form role="form" class="form-horizontal form_anagrafica">
                                                        <div class="form-group">
                                                            <label for="nome_{ l }" class="col-sm-2 control-label">Nome</label>
                                                            <div class="col-sm-10">
                                                                <input class="form-control" type="text" placeholder="Nome (ad esempio: KA)" name="nome_{ l }">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="descrizione_{ l }" class="col-sm-2 control-label">Descrizione</label>
                                                            <div class="col-sm-10">
                                                                <textarea class="form-control" rows="3" placeholder="Descrizione (ad esempio: chiavi uguali)" name="descrizione_{ l }"></textarea>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="button-container">
                                            <button type="button" class="btn btn-primary btn-flat pull-right" onclick="{
                                                        savevalore
                                                    }"><i class="far fa-save"></i> Salva</button>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-flat btn-success pull-right" data-id="addvalore" onclick="{
                                            addvalore
                                        }"><i class="fas fa-plus"></i> Aggiungi valore</button>
                            </div>
                        </div>
                        <div class="box box-attributo" data-widget="box-widget" data-attributo="">
                            <div class="box-header">
                                <h3 class="box-title">Nuovo attributo</h3>
                                <div class="box-tools pull-right">
                                    <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
                                </div>
                            </div>
                            <div class="box-body">
                                <div class="nav-tabs-custom form-attributo">
                                    <ul class="nav nav-tabs">
                                        <li each="{ l in languages }" class="{ l == 'IT' ? 'active' : '' }"><a href="#anagrafica_{ l }" data-toggle="tab"><flag lang='{ l.toLowerCase() }'></flag></a></li>
                                    </ul>
                                    <div class="tab-content">
                                        <div each="{ l in languages }" class="tab-pane { l == 'IT' ? 'active' : '' }" id="anagrafica_{ l }">                                                
                                            <form role="form" class="form-horizontal form_anagrafica">
                                                <div class="form-group">
                                                    <label for="nome_{ l }" class="col-sm-2 control-label">Nome</label>
                                                    <div class="col-sm-10">
                                                        <input class="form-control" type="text" placeholder="Nome (ad esempio: Varianti chiavi)" name="nome_{ l }">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="descrizione_{ l }" class="col-sm-2 control-label">Descrizione</label>
                                                    <div class="col-sm-10">
                                                        <textarea class="form-control" rows="3" placeholder="Descrizione" name="descrizione_{ l }"></textarea>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="">
                                    <button type="button" class="btn btn-primary btn-flat pull-right" onclick="{
                                                saveanagrafica
                                            }"><i class="far fa-save"></i> Salva</button>
                                </div>
                            </div>
                        </div>
                        <button id="addattributo" type="button" class="btn btn-flat btn-success pull-right" onclick="{
                                    addattributo
                                }"><i class="fas fa-plus"></i> Aggiungi attributo</button>
                    </div>
                </div>
                <div if="{ prodotto && prodotto.get('tipologia').id == '63teoDEgXM' }" class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Varianti prodotto</h3>
                    </div>
                    <div class="box-body">
                        <div each="{ v in varianti }" class="box box-variante collapsed-box" data-widget="box-widget" data-variante="{ v.id }">
                            <div class="box-header">
                                <h3 class="box-title">{ v.get('codice') }</h3>
                                <div class="box-tools pull-right">
                                    <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-plus"></i></button>
                                </div>
                            </div>
                            <div class="box-body">                                         
                                <form role="form" class="form-horizontal form_variante">
                                    <div class="form-group">
                                        <label for="codice" class="col-sm-2 control-label">Codice</label>
                                        <div class="col-sm-10">
                                            <input class="form-control" type="text" placeholder="Codice" name="codice" value="{ v.get('codice') }">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="prezzo" class="col-sm-2 control-label">Prezzo</label>
                                        <div class="col-sm-10">
                                            <div class="input-group">
                                                <span class="input-group-addon">&euro;</span>
                                                <input class="form-control" type="number" placeholder="Prezzo al pubblico" name="prezzo" value="{ v.get('prezzo') }">
                                            </div>
                                        </div>
                                    </div>
                                    <div each="{ a in prodotto.get('attributi') }" class="form-group" data-attributoid="{ a.id }">
                                        <label for="{ a.id }" class="col-sm-2 control-label">{ a.nome_IT }</label>
                                        <div class="col-sm-10">
                                            <select class="form-control" name="{ a.id }">
                                                <option value="" selected disabled>Scegli...</option>
                                                <option each="{ valore in a.valori }" value="{ valore.id }" selected="{ getAttributo(v.id, a.id) == valore.id }">{ valore.nome_IT }</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">Giacenze</label>
                                        <div class="col-sm-10">
                                            <div each="{ c in colors }" if="{ prodotto.get('colori') && prodotto.get('colori').indexOf(c.id) >= 0 }" data-id="{ c.id }" class="row form-group">
                                                <div class="col-sm-4">
                                                    <span>
                                                        <i class='fas fa-circle fa-2x' style="color: { c.get('esadecimale') }" title="{ c.get('nome_IT') }"></i>
                                                    </span>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input class="form-control" type="number" placeholder="Giacenza" name="giacenza_{ c.id }" value="{ getGiacenza(v.id, c.id) }">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <div class="">
                                    <button type="button" class="btn btn-primary btn-flat pull-right" onclick="{
                                                savevariante
                                            }"><i class="far fa-save"></i> Salva</button>
                                    <button type="button" class="btn btn-danger btn-flat" onclick="{
                                                deletevariante
                                            }"><i class="far fa-trash-alt"></i> Elimina</button>
                                </div>
                            </div>
                        </div>
                        <div class="box box-variante" data-widget="box-widget" data-variante="">
                            <div class="box-header">
                                <h3 class="box-title">Nuova variante</h3>
                                <div class="box-tools pull-right">
                                    <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
                                </div>
                            </div>
                            <div class="box-body">                                         
                                <form role="form" class="form-horizontal form_variante">
                                    <div class="form-group">
                                        <label for="codice" class="col-sm-2 control-label">Codice</label>
                                        <div class="col-sm-10">
                                            <input class="form-control" type="text" placeholder="Codice" name="codice">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="prezzo" class="col-sm-2 control-label">Prezzo</label>
                                        <div class="col-sm-10">
                                            <div class="input-group">
                                                <span class="input-group-addon">&euro;</span>
                                                <input class="form-control" type="number" placeholder="Prezzo al pubblico" name="prezzo">
                                            </div>
                                        </div>
                                    </div>
                                    <div each="{ a in prodotto.get('attributi') }" class="form-group" data-attributoid="{ a.id }">
                                        <label for="{ a.id }" class="col-sm-2 control-label">{ a.nome_IT }</label>
                                        <div class="col-sm-10">
                                            <select class="form-control" name="{ a.id }">
                                                <option value="" selected disabled>Scegli...</option>
                                                <option each="{ valore in a.valori }" value="{ valore.id }">{ valore.nome_IT }</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">Giacenze</label>
                                        <div class="col-sm-10">
                                            <div each="{ c in colors }" if="{ prodotto.get('colori') && prodotto.get('colori').indexOf(c.id) >= 0 }" data-id="{ c.id }" class="row form-group">
                                                <div class="col-sm-4">
                                                    <span>
                                                        <i class='fas fa-circle fa-2x' style="color: { c.get('esadecimale') }" title="{ c.get('nome_IT') }"></i>
                                                    </span>
                                                </div>
                                                <div class="col-sm-8">
                                                    <input class="form-control" type="number" placeholder="Giacenza" name="giacenza_{ c.id }" value="0">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <div class="">
                                    <button type="button" class="btn btn-primary btn-flat pull-right" onclick="{
                                                savevariante
                                            }"><i class="far fa-save"></i> Salva</button>
                                </div>
                            </div>
                        </div>
                        <button id="addvariante" type="button" class="btn btn-flat btn-success pull-right" onclick="{
                                    addvariante
                                }"><i class="fas fa-plus"></i> Aggiungi variante</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        .color {
            margin-right: 8px;
            padding-bottom: 3px;
        }
        .color.selected {
            border-bottom: 5px solid #333;
        }
        .button-container {
            margin-top: 15px;
            margin-bottom: 15px;
        }
        [data-valore=''],
        [data-attributo=''],
        [data-attributo=''] [data-id='addvalore'],
        [data-variante=''] {
            display: none;
        }
        .box-attributo .box-header,
        .box-variante .box-header {
            background-color: #346bb1;
            color: #fff;
            text-transform: uppercase;
        }
        .box-valore .box-header {
            background-color: #666;
            color: #fff;
            text-transform: uppercase;
        }
        .box.box-attributo,
        .box.box-variante {
            border: 3px solid #346bb1;
            border-top: 0;
        }
        .box.box-valore {
            border: 0;
            background-color: #eee;
        }
        .box.box-valore .form-valore,
        .box.box-valore .form-valore > .tab-content,
        .box.box-valore .form-valore > .nav-tabs > li.active > a, 
        .box.box-valore .form-valore > .nav-tabs > li.active:hover > a {
            background-color: #eee;
        }
        .box.box-valore .form-valore > .nav-tabs {
            border-color: #fff;
        }
        .btn-box-tool {
            color: #fff;
        }
        .table-container {
            padding-left: 15px;
            padding-right: 15px;
        }
        .img-applicazione {
            max-width: 100px;
            max-height: 100px;
        }
    </style>

    <script>
        var tag = this;
        tag.prodotto = null;
        tag.categories = [];
        tag.families = [];
        tag.colors = [];
        tag.immagine = null;
        tag.disegnoTecnico = null;
        tag.varianti = [];
        tag.proprieta = [];

        tag.on('mount', function () {
            RiotBus.getInstance().on('prodotto::got', tag.productFound);
            RiotBus.getInstance().on('prodotto::saved', tag.productSaved);
            RiotBus.getInstance().on('prodotto::uploadedFile', tag.uploadedFile);
            RiotBus.getInstance().on('categoria::response', tag.categoriesFound);
            RiotBus.getInstance().on('famiglia::response', tag.familiesFound);
            RiotBus.getInstance().on('colors::response', tag.colorsFound);
            RiotBus.getInstance().on('attributo::saved', tag.attributoSaved);
            RiotBus.getInstance().on('valore::saved', tag.valoreSaved);
            RiotBus.getInstance().on('attributo::deleted', tag.attributoDeleted);
            RiotBus.getInstance().on('valore::deleted', tag.valoreDeleted);
            RiotBus.getInstance().on('variante::saved', tag.varianteSaved);
            RiotBus.getInstance().on('variante::response', tag.varianteResponse);
            RiotBus.getInstance().on('variante::deleted', tag.varianteDeleted);
            RiotBus.getInstance().on('immagine::saved', tag.immagineSaved);
            RiotBus.getInstance().on('immagine::deleted', tag.immagineDeleted);
            RiotBus.getInstance().on('proprieta::response', tag.proprietaResponse);
            RiotBus.getInstance().on('prodotto::field::deleted', tag.fieldDeleted);
            RiotBus.getInstance().trigger('categoria::request');
            RiotBus.getInstance().trigger('famiglia::request');
            RiotBus.getInstance().trigger('colors::request');
            RiotBus.getInstance().trigger('proprieta::request');
            if (opts.id_object) {
                RiotBus.getInstance().trigger('prodotto::get', opts.id_object);
                RiotBus.getInstance().trigger('variante::request', opts.id_object);
            }

            $(document).ready(function () {
                $("[name='tipologia']").change(function () {
                    tag.update();
                });
            });
        });

        tag.on('unmount', function () {
            RiotBus.getInstance().off('prodotto::got', tag.productFound);
            RiotBus.getInstance().off('prodotto::saved', tag.productSaved);
            RiotBus.getInstance().off('prodotto::uploadedFile', tag.uploadedFile);
            RiotBus.getInstance().off('categoria::response', tag.categoriesFound);
            RiotBus.getInstance().off('famiglia::response', tag.familiesFound);
            RiotBus.getInstance().off('colors::response', tag.colorsFound);
            RiotBus.getInstance().off('attributo::saved', tag.attributoSaved);
            RiotBus.getInstance().off('valore::saved', tag.valoreSaved);
            RiotBus.getInstance().off('attributo::deleted', tag.attributoDeleted);
            RiotBus.getInstance().off('valore::deleted', tag.valoreDeleted);
            RiotBus.getInstance().off('variante::saved', tag.varianteSaved);
            RiotBus.getInstance().off('variante::response', tag.varianteResponse);
            RiotBus.getInstance().off('variante::deleted', tag.varianteDeleted);
            RiotBus.getInstance().off('immagine::saved', tag.immagineSaved);
            RiotBus.getInstance().off('immagine::deleted', tag.immagineDeleted);
            RiotBus.getInstance().off('proprieta::response', tag.proprietaResponse);
            RiotBus.getInstance().off('prodotto::field::deleted', tag.fieldDeleted);
        });

        tag.upload = function (e) {
            var $this = $(e.target);
            var fileUpload = $this[0];
            var id = fileUpload.id;
            if (fileUpload.files.length > 0) {
                var file = fileUpload.files[0];
                var f = {
                    field: id,
                    file: file
                };
                RiotBus.getInstance().trigger('prodotto::uploadFile', f);
            }
        };

        tag.save = function () {
            $("[data-id='salva']").button('saving');
            var data = {};
            $('.form_product [name]').each(function () {
                data[this.name] = this.value;
            });
            data.immagine = tag.immagine;
            data.disegnoTecnico = tag.disegnoTecnico;
            data.colori = [];
            $('.form_product .color.selected').each(function () {
                data.colori.push($(this).data("id"));
            });
            data.proprieta = [];
            $('.form_product [name="proprieta"]:checked').each(function () {
                data.proprieta.push($(this).val());
            });
            RiotBus.getInstance().trigger('prodotto::save', data);
        };

        tag.saveanagrafica = function (e) {
            var $attributo = $(e.target).closest("[data-attributo]");
            var attributo = $attributo.data("attributo");
            var data = {};
            $attributo.find('.form-attributo [name]').each(function () {
                data[this.name] = this.value;
            });
            if (attributo) {
                data.id = attributo;
                $attributo.find('a[href="#attributo_it_' + attributo + '"]').click();
            } else {
                $attributo.find('a[href="#attributo_it"]').click();
            }
            RiotBus.getInstance().trigger('attributo::save', data, opts.id_object);
        };

        tag.savevalore = function (e) {
            var $valore = $(e.target).closest("[data-valore]");
            var valore = $valore.data("valore");
            var data = {};
            $valore.find('.form-valore [name]').each(function () {
                data[this.name] = this.value;
            });
            if (valore) {
                data.id = valore;
                $valore.find('a[href="#valore_it_' + valore + '"]').click();
            } else {
                $valore.find('a[href="#valore_it"]').click();
            }
            var idAttributo = $valore.closest("[data-attributo]").data("attributo");
            RiotBus.getInstance().trigger('valore::save', data, opts.id_object, idAttributo);
        };

        tag.savevariante = function (e) {
            var $variante = $(e.target).closest("[data-variante]");
            var variante = $variante.data("variante");
            var data = {};
            $variante.find('.form_variante [name]').each(function () {
                data[this.name] = this.value;
            });
            if (variante) {
                data.id = variante;
            }
            RiotBus.getInstance().trigger('variante::save', data, opts.id_object);
        };

        tag.deleteanagrafica = function (e) {
            var $attributo = $(e.target).closest("[data-attributo]");
            var attributo = $attributo.data("attributo");
            RiotBus.getInstance().trigger('attributo::delete', attributo);
        };

        tag.deletevalore = function (e) {
            var $valore = $(e.target).closest("[data-valore]");
            var valore = $valore.data("valore");
            RiotBus.getInstance().trigger('valore::delete', valore);
        };

        tag.deletevariante = function (e) {
            var $variante = $(e.target).closest("[data-variante]");
            var variante = $variante.data("variante");
            RiotBus.getInstance().trigger('variante::delete', variante);
        };

        tag.productFound = function (p) {
            tag.prodotto = p;
            $('.form_product [name]').each(function () {
                if (this.name === 'id') {
                    this.value = tag.prodotto.id;
                } else if (!$(this).hasClass("no-populate") && tag.prodotto.get(this.name) !== undefined) {
                    this.value = tag.prodotto.get(this.name);
                }
            });
            $("[name='tipologia']").val(tag.prodotto.get("tipologia").id);
            if (tag.categories.length > 0) {
                $("[name='categoria']").val(tag.prodotto.get("categoria").id);
            }
            if (tag.families.length > 0) {
                $("[name='famiglia']").val(tag.prodotto.get("famiglia").id);
            }
            if (tag.prodotto.get("linea")) {
                $("[name='linea']").val(tag.prodotto.get("linea").id);
            } else {
                $("[name='linea']").val("");
            }
            if (tag.prodotto.get("immagine")) {
                tag.immagine = tag.prodotto.get("immagine");
            }
            if (tag.prodotto.get("disegnoTecnico")) {
                tag.disegnoTecnico = tag.prodotto.get("disegnoTecnico");
            }
            tag.update();
            $(".box").each(function () {
                $(this).boxWidget();
            });
        };

        tag.productSaved = function (product) {
            $("[data-id='salva']").button('reset');
            tag.routeTo("/inserisci-prodotto?id_object=" + product.id);
        };

        tag.varianteResponse = function (results) {
            tag.varianti = results;
            tag.update();
            $(".box").each(function () {
                $(this).boxWidget();
            });
        };

        tag.categoriesFound = function (categories) {
            tag.categories = categories;
            tag.update();
            if (tag.prodotto) {
                $("[name='categoria']").val(tag.prodotto.get("categoria").id);
            }
        };

        tag.familiesFound = function (families) {
            tag.families = families;
            tag.update();
            if (tag.prodotto) {
                $("[name='famiglia']").val(tag.prodotto.get("famiglia").id);
            }
        };

        tag.colorsFound = function (colors) {
            tag.colors = colors;
            tag.update();
            $(".color").click(function () {
                var $this = $(this);
                $this.toggleClass("selected");
            });
        };

        tag.uploadedFile = function (f) {
            switch (f.field) {
                case 'immagine':
                    tag.immagine = f.parseFile;
                    tag.update();
                    break;
                case 'disegnoTecnico':
                    tag.disegnoTecnico = f.parseFile;
                    tag.update();
                    break;
                case 'applicazione':
                    RiotBus.getInstance().trigger('immagine::add', f.parseFile, tag.prodotto.id);
                    break;
            }
        };

        tag.immagineSaved = function (immagine) {
            var immagini = tag.prodotto.get("immaginiApplicazione") ? tag.prodotto.get("immaginiApplicazione") : [];
            var found = false;
            for (var i = 0; i < immagini.length; i++) {
                if (immagini[i].id === immagine.id) {
                    immagini[i].url = immagine.get("file").url();
                    immagini[i].ordine = immagine.get("ordine");
                    found = true;
                    break;
                }
            }
            if (!found) {
                immagini.push({
                    id: immagine.id,
                    url: immagine.get("file").url(),
                    ordine: immagine.get("ordine")
                });
            }
            tag.prodotto.set("immaginiApplicazione", immagini);
            tag.update();
            $("#applicazione").val(null);
        };

        tag.immagineDeleted = function (immagine) {
            var immagini = tag.prodotto.get("immaginiApplicazione") ? tag.prodotto.get("immaginiApplicazione") : [];
            var index = -1;
            for (var i = 0; i < immagini.length; i++) {
                if (immagini[i].id === immagine.id) {
                    index = i;
                    break;
                }
            }
            if (index >= 0) {
                // aggiornamento attributi di prodotto
                immagini.splice(index, 1);
                tag.prodotto.set("immaginiApplicazione", immagini);
                tag.update();
            }
        };

        tag.attributoSaved = function (attributo) {
            var attributoJson = {
                id: attributo.id,
                nome_IT: attributo.get("nome_IT"),
                nome_EN: attributo.get("nome_EN"),
                descrizione_IT: attributo.get("descrizione_IT"),
                descrizione_EN: attributo.get("descrizione_EN")
            };
            var attributi = tag.prodotto.get("attributi") ? tag.prodotto.get("attributi") : [];
            var found = false;
            for (var i = 0; i < attributi.length; i++) {
                var a = attributi[i];
                if (a.id === attributo.id) {
                    attributi[i].nome_IT = attributoJson.nome_IT;
                    attributi[i].nome_EN = attributoJson.nome_EN;
                    attributi[i].descrizione_IT = attributoJson.descrizione_IT;
                    attributi[i].descrizione_EN = attributoJson.descrizione_EN;
                    found = true;
                    break;
                }
            }
            if (!found) {
                attributi.push(attributoJson);
            }
            tag.prodotto.set("attributi", attributi);
            tag.update();
            var $newAttributo = $("[data-attributo='']");
            $newAttributo.find("input, textarea").val(null);
            $newAttributo.hide();
            $("#addattributo").show();
            $(".box").each(function () {
                $(this).boxWidget();
            });
        };

        tag.valoreSaved = function (valore) {
            var valoreJson = {
                id: valore.id,
                nome_IT: valore.get("nome_IT"),
                nome_EN: valore.get("nome_EN"),
                descrizione_IT: valore.get("descrizione_IT"),
                descrizione_EN: valore.get("descrizione_EN")
            };
            var attributi = tag.prodotto.get("attributi");
            var attributo_id = valore.get("attributo").id;
            var found = false;
            for (var i = 0; i < attributi.length; i++) {
                var a = attributi[i];
                if (a.id === attributo_id) {
                    var valori = a.valori ? a.valori : [];
                    for (var j = 0; j < valori.length; j++) {
                        if (valori[j].id === valore.id) {
                            valori[j] = valoreJson;
                            found = true;
                        }
                    }
                    if (!found) {
                        valori.push(valoreJson);
                    }
                    a.valori = valori;
                    break;
                }
            }
            tag.prodotto.set("attributi", attributi);
            tag.update();
            var $newValore = $("[data-valore='']");
            $newValore.find("input, textarea").val(null);
            $newValore.hide();
            $("[data-attributo='" + attributo_id + "'] [data-id='addvalore']").show();
            $(".box").each(function () {
                $(this).boxWidget();
            });
        };

        tag.varianteSaved = function (results) {
            var $newVariante = $("[data-variante='']");
            $newVariante.find("input, textarea").val(null);
            $newVariante.hide();
            $("#addvariante").show();
            RiotBus.getInstance().trigger('variante::request', opts.id_object);
        };

        tag.addattributo = function () {
            $("#addattributo").hide();
            $("[data-attributo='']").fadeIn();
            $(".box").each(function () {
                $(this).boxWidget();
            });
        };

        tag.addvalore = function () {
            $("#addvalore").hide();
            $("[data-valore='']").fadeIn();
            $(".box").each(function () {
                $(this).boxWidget();
            });
        };

        tag.addvariante = function () {
            $("#addvariante").hide();
            $("[data-variante='']").fadeIn();
            $(".box").each(function () {
                $(this).boxWidget();
            });
        };

        tag.attributoDeleted = function (attributo) {
            var attributi = tag.prodotto.get("attributi") ? tag.prodotto.get("attributi") : [];
            var index = -1;
            for (var i = 0; i < attributi.length; i++) {
                var a = attributi[i];
                if (a.id === attributo.id) {
                    index = i;
                    break;
                }
            }
            if (index >= 0) {
                // aggiornamento attributi di prodotto
                attributi.splice(index, 1);
                tag.prodotto.set("attributi", attributi);
                tag.update();
            }
            $(".box").each(function () {
                $(this).boxWidget();
            });
        };

        tag.valoreDeleted = function (valore) {
            var attributi = tag.prodotto.get("attributi");
            var attributo_id = valore.get("attributo").id;
            var index = -1;
            for (var i = 0; i < attributi.length; i++) {
                if (attributi[i].id === attributo_id) {
                    var valori = attributi[i].valori ? attributi[i].valori : [];
                    for (var j = 0; j < valori.length; j++) {
                        if (valori[j].id === valore.id) {
                            index = j;
                            break;
                        }
                    }
                    if (index >= 0) {
                        valori.splice(index, 1);
                        attributi[i].valori = valori;
                        tag.prodotto.set("attributi", attributi);
                        tag.update();
                        break;
                    }
                }
            }
            $(".box").each(function () {
                $(this).boxWidget();
            });
        };

        tag.varianteDeleted = function (variante) {
            var index = -1;
            for (var i = 0; i < tag.varianti.length; i++) {
                if (tag.varianti[i].id === variante.id) {
                    index = i;
                    break;
                }
            }
            if (index >= 0) {
                // aggiornamento attributi di prodotto
                tag.varianti.splice(index, 1);
                tag.update();
                $(".box").each(function () {
                    $(this).boxWidget();
                });
            }
        };

        tag.saveimage = function (imageid, e) {
            var ordine = $(e.target).closest("tr").find("[data-name='ordine']").val();
            RiotBus.getInstance().trigger('immagine::save', imageid, ordine);
        };

        tag.deleteimage = function (imageid) {
            RiotBus.getInstance().trigger('immagine::delete', imageid);
        };

        tag.cancella = function (field) {
            RiotBus.getInstance().trigger('prodotto::field::delete', tag.prodotto.id, field);
        };

        tag.fieldDeleted = function (field) {
            tag[field] = null;
            tag.update();
        };

        tag.getAttributo = function (id_variante, id_attributo) {
            var value = "";
            for (var i = 0; i < tag.varianti.length; i++) {
                if (tag.varianti[i].id === id_variante) {
                    var specifiche = tag.varianti[i].get("specifiche");
                    for (var j = 0; j < specifiche.length; j++) {
                        if (specifiche[j].attributo === id_attributo) {
                            value = specifiche[j].valore;
                            break;
                        }
                    }
                    break;
                }
            }
            return value;
        };

        tag.getGiacenza = function (id_variante, id_colore) {
            var value = "";
            for (var i = 0; i < tag.varianti.length; i++) {
                if (tag.varianti[i].id === id_variante) {
                    var giacenze = tag.varianti[i].get("giacenze");
                    for (var j = 0; j < giacenze.length; j++) {
                        if (giacenze[j].colore === id_colore) {
                            value = giacenze[j].giacenza;
                            break;
                        }
                    }
                    break;
                }
            }
            return value;
        };

        tag.getImmaginiApplicazione = function () {
            var imgs = tag.prodotto.get("immaginiApplicazione");
            if (!imgs) {
                imgs = [];
            } else {
                imgs = imgs.sort(({ordine:a}, {ordine:b}) => b - a);
            }
            return imgs;
        };

        tag.proprietaResponse = function (proprieta) {
            tag.proprieta = proprieta;
            console.log(tag.proprieta);
            tag.update();
        };

    </script>
</inserisci-prodotto>
