<inserisci-ordine>
    <section class="content">
        <div class="box no-border">
            <div class="box-header bg-red with-icon">
                <div class="pull-left">
                    <span class="fa-stack fa-2x">
                        <i class="fas fa-circle fa-stack-2x background"></i>
                        <i class="fas fa-edit fa-stack-1x"></i>
                    </span>
                </div>
                <h3 class="box-title">{ ordine ? 'Ordine n. ' + ordine.get('numero') : 'Nuovo ordine' }</h3>
                <p>{ ordine ? 'Modifica i dati dell\'ordine ' + ordine.get('numeroInterno') : 'Inserisci il nuovo ordine' }</p>
            </div>
            <form id="form_ordine" role="form" onsubmit="{
                        saveOrdine
                    }">
                <div class="box-body">
                    <div class="row form-group">
                        <div class="col-md-3">
                            <select id="cliente" class="form-control select2">
                                <option></option>
                                <option each="{ c in clienti }" value="{ c.id }" selected="{ ordine && ordine.get('cliente') && ordine.get('cliente').id == c.id }">{ c.get('codice') } { c.get('ragioneSociale') }</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="far fa-calendar-alt"></i>
                                </div>
                                <input type="text" class="form-control" placeholder="Data ordine" title="Data ordine" name="data" value="{ ordine ? ordine.get('data').split('/').join('') : today }">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="number" placeholder="Anno di riferimento" title="Anno di riferimento" name="anno" value="{ ordine ? ordine.get('anno') : '' }" min="2000" max="2050">
                        </div>
                        <div class="col-md-2">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-info" onclick="{
                                                search_numero
                                            }"><i class="fas fa-search"></i></button>
                                </div>
                                <input class="form-control" type="text" placeholder="Numero d'ordine" title="Numero d'ordine" name="numero" required minlength="8" value="{ ordine ? ordine.get('numero') : (numero ? numero : '') }">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <input class="form-control" type="text" placeholder="Riferimento interno" title="Riferimento interno" name="numeroInterno" value="{ ordine ? ordine.get('numeroInterno') : '' }">
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-3">
                            <input class="form-control" type="text" placeholder="Riferimento" title="Riferimento" name="riferimento" value="{ ordine ? ordine.get('riferimento') : '' }">
                        </div>
                        <div class="col-md-2">
                            <select id="pagamento" class="form-control select2">
                                <option></option>
                                <option value="at delivery">at delivery</option>
                                <option value="50% in advance, 50% at shipment">50% in advance, 50% at shipment</option>
                                <option value="bonifico 60gg fm">bonifico 60gg fm</option>
                                <option value="open a/c 30/60 days">open a/c 30/60 days</option>
                                <option value="open a/c 30 days">open a/c 30 days</option>
                                <option value="open a/c 60 days">open a/c 60 days</option>
                                <option value="already paid">already paid</option>
                                <option value="in advance">in advance</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select id="spedizione" class="form-control select2">
                                <option></option>
                                <option value="ExWorks">ExWorks</option>
                                <option value="DAP">DAP</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <input class="form-control" type="text" placeholder="Destinazione" title="Destinazione" name="destinazione" value="{ ordine ? ordine.get('destinazione') : '' }">
                        </div>
                        <div class="col-md-2">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="far fa-calendar-alt"></i>
                                </div>
                                <input type="text" class="form-control" placeholder="Delivery forecast" title="Delivery forecast" name="deliveryForecast" value="{ ordine && ordine.get('deliveryForecast') ? ordine.get('deliveryForecast').split('/').join('') : '' }">
                            </div>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-12">
                            <textarea class="form-control" placeholder="Note" title="Note" name="note">{ ordine ? ordine.get('note') : '' }</textarea>
                        </div>
                    </div>
                    <hr>
                    <h5>Indirizzo di spedizione <button type="button" class="btn btn-xs btn-flat" onclick="{
                                copiaindirizzo
                            }"><i class="far fa-copy"></i> Copia indirizzo di spedizione</button> <button type="button" class="btn btn-xs btn-flat" onclick="{
                                        copiaindirizzo2
                                    }"><i class="far fa-copy"></i> Copia indirizzo della sede legale</button></h5>
                    <div class="row form-group">
                        <div class="col-md-3">
                            <input class="form-control" type="text" placeholder="C/O" title="Presso" name="co" value="{ ordine ? ordine.get('co') : '' }">
                        </div>
                        <div class="col-md-3">
                            <input class="form-control" type="text" placeholder="Indirizzo 1" title="Indirizzo 1" name="indirizzo1" value="{ ordine ? ordine.get('indirizzo1') : '' }">
                        </div>
                        <div class="col-md-3">
                            <input class="form-control" type="text" placeholder="Indirizzo 2" title="Indirizzo 2" name="indirizzo2" value="{ ordine ? ordine.get('indirizzo2') : '' }">
                        </div>
                        <div class="col-md-3">
                            <input class="form-control" type="text" placeholder="Indirizzo 3" title="Indirizzo 3" name="indirizzo3" value="{ ordine ? ordine.get('indirizzo3') : '' }">
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-3">
                            <input class="form-control" type="text" placeholder="CAP" title="CAP" name="cap" value="{ ordine ? ordine.get('cap') : '' }">
                        </div>
                        <div class="col-md-3">
                            <input class="form-control" type="text" placeholder="Città" title="Città" name="citta" value="{ ordine ? ordine.get('citta') : '' }">
                        </div>
                        <div class="col-md-3">
                            <input class="form-control" type="text" placeholder="Provincia" title="Provincia" name="provincia" value="{ ordine ? ordine.get('provincia') : '' }">
                        </div>
                        <div class="col-md-3">
                            <select id="nazione" class="form-control select2">
                                <option></option>
                                <option each="{ n in nazioni }" value="{ n.id }" selected="{ ordine && ordine.get('nazione') && ordine.get('nazione').id == n.id }">{ n.get('nazione') }</option>
                            </select>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Stato dell'ordine</h5>
                            <div class="buttons">
                                <button each="{ s in statiordine }" disabled="{ s.get('posizione') < 10 || (ordine && ordine.get('statoOrdine') && ordine.get('statoOrdine').id == s.id) }" type="button" style="{
                                            (ordine && ordine.get('statoOrdine') && ordine.get('statoOrdine').id == s.id) ? ('background-color:' + s.get('colore') + ';color: #fff') : ''
                                        }" class="btn btn-default btn-sm btn-flat" onclick="{
                                                    archivia_modal.bind(this, s)
                                                }">{ s.get('stato') }</button>                     
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-8">
                                    <h5>Comunicazioni al cliente</h5>
                                    <div class="buttons">
                                        <button if="{ ordine }" disabled="{ ordine.get('statoOrdine').get('posizione') == 10 }" type="button" class="btn btn-default btn-sm btn-flat" onclick="{
                                                    invia_email_modal.bind(this, EMAIL_PROCESSING)
                                                }"><i class="far fa-envelope"></i> Processing</button>
                                        <button if="{ ordine }" disabled="{ ordine.get('statoOrdine').get('posizione') == 10 }" type="button" class="btn btn-default btn-sm btn-flat" onclick="{
                                                    invia_email_modal.bind(this, EMAIL_READY_PICKUP)
                                                }"><i class="far fa-envelope"></i> Ready for pick up</button>
                                        <button if="{ ordine }" disabled="{ ordine.get('statoOrdine').get('posizione') == 10 }" type="button" class="btn btn-default btn-sm btn-flat" onclick="{
                                                    invia_email_modal.bind(this, EMAIL_READY_SHIPMENT)
                                                }"><i class="far fa-envelope"></i> Ready for shipment</button>
                                        <button if="{ ordine }" disabled="{ ordine.get('statoOrdine').get('posizione') == 10 }" type="button" class="btn btn-default btn-sm btn-flat" onclick="{
                                                    invia_email_modal.bind(this, EMAIL_SHIPPED)
                                                }"><i class="far fa-envelope"></i> Shipped</button>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <h5>Email inviate</h5>
                                    <div if="{ emails.length > 0 }" class="emails">
                                        <div each="{ e in emails }" class="email"><a onclick="{
                                                    open_email.bind(this, e.id)
                                                }">{ e.createdAt.toLocaleDateString('it-IT') } { e.get('tipologia').charAt(0).toUpperCase() + e.get('tipologia').slice(1) }</a></div>
                                    </div>
                                    <div if="{ emails.length == 0 }">Nessuna email inviata</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <input type="hidden" name="id" value="{ ordine ? ordine.id : '' }">
                    <button type="submit" class="btn btn-sm btn-default btn-flat pull-right" id="salva" 
                            data-saving-text="<i class='fa fa-spinner fa-spin'></i> Salvataggio in corso" 
                            data-error-text="<i class='fa fa-ban'></i> Errore nel salvataggio" 
                            data-saved-text="<i class='fa fa-check'></i> Salvato"><i class='fas fa-save'></i> Salva</button>                        
                </div>
            </form>
        </div>
        <div if="{ opts.id_object }" class="box no-border">
            <div class="box-header bg-red with-icon">
                <div class="pull-left">
                    <span class="fa-stack fa-2x">
                        <i class="fas fa-circle fa-stack-2x background"></i>
                        <i class="fas fa-list-ol fa-stack-1x"></i>
                    </span>
                </div>
                <h3 class="box-title">Dettaglio ordine</h3>
                <p>Inserisci le righe dell'ordine</p>
            </div>
            <div class="box-body">
                <div class="no-padding">
                    <table id="table_dettaglio" class="table" data-livello="0">
                        <thead>
                            <tr>
                                <th style="width: 5%"></th>
                                <th style="width: 20%">Prodotto</th>
                                <th style="width: 10%" class="text-center">Quantit&agrave;</th>
                                <th style="width: 15%">Giacenza</th>
                                <th style="width: 8%" class="text-center">Allocato</th>
                                <th style="width: 8%" class="text-center">Mancante</th>
                                <th style="width: 15%">Seriali</th>
                                <th style="width: 10%">Stato</th>
                                <th style="width: 9%"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id="new">
                                <td></td>
                                <td>
                                    <select data-id="componente" class="form-control select2">
                                        <option></option>
                                        <option each="{ c in componenti }" value="{ c.id }">{ c.get('codice') } - { c.get('descrizione') }</option>
                                    </select>
                                </td>
                                <td>
                                    <input class="form-control" type="number" name="quantita" placeholder="Qta" />
                                </td>
                                <td data-id="giacenza"></td>
                                <td data-id="impegnato"></td>
                                <td data-id="richiesto"></td>
                                <td data-id="seriali"></td>
                                <td data-id="stato"></td>
                                <td class="text-right">
                                    <div class="btn-group">
                                        <button data-action='save' type="button" disabled="{ ordine && ordine.get('statoOrdine') && ordine.get('statoOrdine').get('posizione') == 10 }" class="btn btn-sm btn-default btn-flat"><i class="far fa-save"></i></button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="box-footer">
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-default btn-flat" onclick="{
                                spedisci_modal
                            }"><i class="fas fa-shipping-fast"></i> Spedisci</button>
                </div>
                <div class="btn-group pull-right">
                    <button type="button" class="btn btn-sm btn-default btn-flat" onclick="{
                                stampaProdotti
                            }"><i class="fas fa-print"></i> Etichette prodotti</button>   
                    <button type="button" class="btn btn-sm btn-default btn-flat" onclick="{
                                stampaGaranzie
                            }"><i class="fas fa-print"></i> Etichette garanzie</button>   
                    <button type="button" class="btn btn-sm btn-default btn-flat" onclick="{
                                stampaAltezze
                            }"><i class="fas fa-print"></i> Etichette altezze</button>
                    <button type="button" class="btn btn-sm btn-default btn-flat" onclick="{
                                stampaIndirizzo
                            }"><i class="fas fa-print"></i> Etichette indirizzo</button>   
                    <button type="button" class="btn btn-sm btn-default btn-flat" onclick="{
                                stampaBarcode
                            }"><i class="fas fa-print"></i> Etichette barcode</button>      
                </div>
            </div>
        </div>
    </section>

    <div if="{ riga && riga.get('componente') }" class="modal fade in" id="modal_spedisci">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-red">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">Spedizione prodotti</h4>
                </div>
                <div class="modal-body">
                    Attenzione, stai per spedire { riga.get('quantita') } pezzi di { riga.get('componente').get('codice') } - { riga.get('componente').get('descrizione') }.<br />
                    L'azione &egrave; irreversibile.<br /><br />
                    Vuoi continuare?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-default btn-flat" onclick="{
                                spedisci
                            }"><i class="fas fa-shipping-fast"></i> Spedisci</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade in" id="modal_spedisci_multiplo">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-red">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">Spedizione prodotti</h4>
                </div>
                <div class="modal-body">
                    Attenzione, stai per spedire i seguenti articoli:<br />
                    <ul>
                        <li each="{ r in righeDaSpedire }">{ r.get('quantita') } pezzi di { r.get('componente').get('codice') } - { r.get('componente').get('descrizione') }</li>
                    </ul>
                    L'azione &egrave; irreversibile.<br /><br />
                    Vuoi continuare?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-default btn-flat" onclick="{
                                spedisci_multiplo
                            }"><i class="fas fa-shipping-fast"></i> Spedisci</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade in" id="modal_archivia">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-red">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">Ordine da archivio</h4>
                </div>
                <div class="modal-body">
                    Attenzione, lo stato selezionato indica che l'ordine &egrave; un recupero da storico.<br />
                    Questo significa che per le righe inserite non verranno conteggiati i componenti all'interno delle giacenze.<br />
                    L'azione &egrave; irreversibile.<br /><br />
                    Vuoi continuare?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-default btn-flat" onclick="{
                                archivia
                            }">Archivia</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div if="{ riga }" class="modal fade in" id="modal_seriali">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-red">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">Modifica dei seriali</h4>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <tr>
                            <th scope="row">Pezzi totale richiesti:</th>
                            <td>{ riga.get('quantita') }</td>
                        </tr>
                        <tr>
                            <th scope="row">Seriali:</th>
                            <td><textarea class="form-control" name="seriali">{ riga.get('seriali') ? riga.get('seriali').join('\n') : '' }</textarea></td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-default btn-flat" onclick="{
                                salvaseriali
                            }"><i class="fas fa-save"></i> Salva</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade in" id="modal_operation">
        <div if="{ richiesta }" class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-red">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">Operazioni disponibili sul componente <span>{ componente.get('codice') }</span></h4>
                </div>
                <div class="modal-body">
                    <div if="{ getComponentiFigli(richiesta, riga.richieste).length > 0 }" class="blocco" data-blocco="assembla">
                        <div class="pad-10">
                            <div>
                                <div class="titolo text-red">Assembla</div>
                                <div class="descrizione">Questa operazione serve ad assemblare il componente e contestualmente impegnarlo. Verranno usati preferibilmente i componenti per l'assemblaggio gi&agrave; impegnati su questa riga ordine.</div>
                                <div class='dati'>
                                    <strong>Gi&agrave; impegnati <span class="text-red">{ richiesta.get('impegnato') }/{ richiesta.get('quantita') }</span></strong><br />
                                    <strong>Gi&agrave; assemblati <span class="text-red">{ richiesta.get('impegnatoAssemblato') }/{ richiesta.get('quantita') }</span></strong><br />
                                    <strong>Quantit&agrave; a magazzino <span each="{ g in componente.get('giacenze') }" if="{ g.bassocontinuo === 1 }" class="text-red">{ g.giacenza }</span></strong>
                                </div>
                            </div>
                            <div>
                                <hr />
                                <div class="disponibilita">Ne servono <span class="text-red">{ richiesta.get('richiesto') }</span></div>
                                <div class="inputriga">
                                    <button data-action="minus" title='-' type='button' class='btn btn-xs btn-default btn-flat'><i class='fas fa-minus'></i></button>
                                    <span class="valore" data-min="0" data-max="{ richiesta.get('richiesto') }">0</span>
                                    <button data-action="plus" title='+' type='button' class='btn btn-xs btn-default btn-flat'><i class='fas fa-plus'></i></button>
                                </div>
                                <div class="button-container">
                                    <button onclick="{
                                                assembla_componente
                                            }" class="btn btn-block bg-red btn-flat">Assembla ed impegna</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="blocco" data-blocco="impegna">
                        <div class="pad-10">
                            <div>
                                <div class="titolo text-red">Impegna</div>
                                <div class="descrizione">Impegnare del materiale significa metterlo da parte per quest'ordine. In questo modo, il materiale impegnato non comparir&agrave; pi&ugrave; tra i componenti necessari per il completamento dell'ordine.</div>
                                <div class='dati'>
                                    <strong>Gi&agrave; impegnati <span class="text-red">{ richiesta.get('impegnato') }/{ richiesta.get('quantita') }</span></strong><br />
                                    <strong>Gi&agrave; assemblati <span class="text-red">{ richiesta.get('impegnatoAssemblato') }/{ richiesta.get('quantita') }</span></strong><br />
                                    <strong>Quantit&agrave; a magazzino <span each="{ g in componente.get('giacenze') }" if="{ g.bassocontinuo === 1 }" class="text-red">{ g.giacenza }</span></strong>
                                </div>
                            </div>
                            <div>
                                <hr />
                                <div class="disponibilita">Ne servono <span class="text-red">{ richiesta.get('richiesto') }</span></div>
                                <div class="inputriga">
                                    <button data-action="minus" title='-' type='button' class='btn btn-xs btn-default btn-flat'><i class='fas fa-minus'></i></button>
                                    <span class="valore" data-min="0" data-max="{ richiesta.get('richiesto') }">0</span>
                                    <button data-action="plus" title='+' type='button' class='btn btn-xs btn-default btn-flat'><i class='fas fa-plus'></i></button>
                                </div>
                                <div class="button-container">
                                    <button onclick="{
                                                impegna_componente
                                            }" class="btn btn-block bg-red btn-flat">Impegna</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="blocco" data-blocco="disimpegna">
                        <div class="pad-10">
                            <div>
                                <div class="titolo text-red">Disimpegna</div>
                                <div class="descrizione">Disimpegnare del materiale significa liberare la giacenza sull'ordine per il componente, riportandola in magazzino.</div>
                                <div class='dati'>
                                    <strong>Gi&agrave; impegnati <span class="text-red">{ richiesta.get('impegnato') }/{ richiesta.get('quantita') }</span></strong><br />
                                    <strong>Gi&agrave; assemblati <span class="text-red">{ richiesta.get('impegnatoAssemblato') }/{ richiesta.get('quantita') }</span></strong><br />
                                    <strong>Quantit&agrave; a magazzino <span each="{ g in componente.get('giacenze') }" if="{ g.bassocontinuo === 1 }" class="text-red">{ g.giacenza }</span></strong>
                                </div>
                            </div>
                            <div>
                                <hr />
                                <div class="disponibilita">Disimpegnabili <span class="text-red">{ richiesta.get('impegnato') }</span></div>
                                <div class="inputriga">
                                    <button data-action="minus" title='-' type='button' class='btn btn-xs btn-default btn-flat'><i class='fas fa-minus'></i></button>
                                    <span class="valore" data-min="1" data-max="{ richiesta.get('impegnato') }">{ richiesta.get('impegnato') }</span>
                                    <button data-action="plus" title='+' type='button' class='btn btn-xs btn-default btn-flat'><i class='fas fa-plus'></i></button>
                                </div>
                                <div class="button-container">
                                    <button onclick="{
                                                disimpegna_componente
                                            }" class="btn btn-block bg-red btn-flat">Disimpegna</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="blocco">
                        <div class="links">
                            <div if="{ !richiesta.get('padre') }" class="bg-red link">
                                <a class="link" data-action="spedisci"><div>Spedisci</div><div><i class="fas fa-shipping-fast"></i></div></a>
                            </div>
                            <div class="bg-red link">
                                <a class="link" href="/visualizza-stock?id_componente={ componente.id }&id_object={ opts.id_object }" target="_blank"><div>Visualizza stock</div><div><i class="fas fa-external-link-alt"></i></div></a>
                            </div>
                            <div if="{ !richiesta.get('padre') }" class="bg-red link">
                                <a class="link" href="/componenti-necessari?id_ordine={ opts.id_object }" target="_blank"><div>Visualizza tutti i componenti necessari</div><div><i class="fas fa-external-link-alt"></i></div></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div if="{ ordine }" class="modal fade in" id="modal_invio_email">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-red">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">Invio email</h4>
                </div>
                <div class="modal-body">
                    <form class="form">
                        <input class="form-control" type="text" name="email" value="{ ordine.get('cliente').get('emailContatto') ? ordine.get('cliente').get('emailContatto') : ordine.get('cliente').get('email') }">
                        <small>Per indirizzi multipli separare con virgola</small>
                        <br /><br />
                        <textarea class="form-control" name="testo" value="{ testo_email }" rows="10"></textarea>
                        <input type="hidden" name="tipologia">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-default btn-flat" onclick="{
                                invia_email
                            }"><i class="far fa-envelope"></i> Invia</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div if="{ email }" class="modal fade in" id="modal_email_inviata">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-red">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">Email inviata</h4>
                </div>
                <div class="modal-body">
                    <input class="form-control" type="text" value="{ email.get('email') }" disabled="disabled">
                    <br />
                    <div id="testo_email_read" class="testo_email"></div>
                    <div class="row">
                        <div class="col-md-4">Ora di invio:</div>
                        <div class="col-md-8"><div class="testo_email">{ email.createdAt.toLocaleDateString('it-IT', DATE_OPTIONS) }</div></div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">Tipologia:</div>
                        <div class="col-md-8"><div class="testo_email">{ email.get('tipologia') }</div></div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">Message ID:</div>
                        <div class="col-md-8"><div class="testo_email">{ email.get('messageId') }</div></div>
                    </div>               
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <style>
        .buttons button {
            margin-right: 2px;
            margin-bottom: 4px;
        }
        .table .colspan {
            padding: 0;
        }
        .table .table.componenti {
            margin-bottom: 0;
        }
        .select2-container {
            width: 100% !important;
        }
        .table[data-livello='0'] > tbody > tr.parent,
        .table[data-livello='1'] > tbody > tr.parent,
        .table[data-livello='2'] > tbody > tr.parent,
        .table[data-livello='3'] > tbody > tr.parent,
        .table[data-livello='4'] > tbody > tr.parent {
            border-top: 5px solid #fff;
            border-bottom: 5px solid #fff;
        }
        .table[data-livello='0'] > tbody > tr.parent.exploded,
        .table[data-livello='1'] > thead > tr,
        .table[data-livello='1'] > tbody > tr.parent.exploded,
        .table[data-livello='2'] > thead > tr,
        .table[data-livello='2'] > tbody > tr.parent.exploded,
        .table[data-livello='3'] > thead > tr,
        .table[data-livello='3'] > tbody > tr.parent.exploded,
        .table[data-livello='4'] > thead > tr {
            border-bottom: none;
        }
        .table .dropdown-menu i {
            width: 25px;
        }
        .table tr.child .table {
            border-bottom: 15px solid #fff;
        }
        [data-id='quantita'],
        [data-id='impegnato'],
        [data-id='richiesto'] {
            text-align: center;
        }
        [data-id='richiesto'] > span {
            /*background-color: #fff;*/
            padding: 6px 0;
            border-radius: 50px;
            display: inline-block;
            height: 30px;
            width: 30px;
            text-align: center;
            color: #fff;
            font-weight: bold;
        }
        .emails .email {
            padding: 5px 0;
        }
        #modal_operation .modal-header span {
            color: #000;
        }
        #modal_operation .modal-body {
            display: flex;
            column-gap: 15px;
            align-items: stretch;
        }
        #modal_operation hr {
            border-color: #666;
        }
        #modal_operation .modal-body .blocco {
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0;
        }
        #modal_operation .modal-body .pad-10 {
            background-color: #ebebeb;
            padding: 10px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        #modal_operation .modal-body .titolo {
            text-align: center;
            text-transform: uppercase;
            padding-top: 20px;
            font-size: 24px;
            font-weight: bold;
        }
        #modal_operation .modal-body .descrizione {
            padding-top: 20px;
            text-align: center;
        }
        #modal_operation .modal-body .dati {
            padding-top: 20px;
            text-align: center;
        }
        #modal_operation .modal-body .disponibilita {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }
        #modal_operation .modal-body .inputriga {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            margin-top: 10px;
            margin-bottom: 20px;
        }
        #modal_operation .modal-body .inputriga .valore {
            background-color: #fff;
            font-weight: bold;
            flex-grow: 2;
            text-align: center;
            padding: 5px 0;
            margin: 0 5px;
        }
        #modal_operation .modal-body .blocco .links {
            height: 100%;
            display: flex;
            flex-direction: column;
            row-gap: 10px;
        }
        #modal_operation .modal-body .blocco .link {
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            text-align: center;
            font-size: 18px;
            line-height: 1.05em;
        }
        #modal_operation .modal-body .blocco .link a {
            color: #fff;
            text-transform: uppercase;
            font-weight: bold;
        }
        #modal_email_inviata .testo_email {
            border: 1px solid #ccc;
            background-color: #eee;
            padding: 5px;
            margin-bottom: 10px;
        }
    </style>

    <script>
        var tag = this;
        // costanti
        tag.EMAIL_PROCESSING = "processing";
        tag.EMAIL_READY_PICKUP = "pickup";
        tag.EMAIL_READY_SHIPMENT = "shipment";
        tag.EMAIL_SHIPPED = "shipped";
        tag.DATE_OPTIONS = {weekday: 'short', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit'};
        tag.testoProcessing = "Dear [cliente.ragioneSociale]\n\nWe delight to inform that your order [ordine.codice] is going to be processed soon.\n\nWe remind you that you can double check any detail on order status into your reserved area at this address https://track.bassocontinuo.biz/ordini/[ordine.id]/[cliente.id]\n\nBest Regards,\nBassocontinuo Audio Systems Srl";
        tag.testoReadyPickup = "Dear [cliente.ragioneSociale]\n\nYour order [ordine.codice] is ready for pick up.\n\nYou will be contacted soon by our logistic manager Ms. Mariana Elena Butnaru to know shipment details like weight and dimensions.\n\nBest Regards,\nBassocontinuo Audio Systems Srl";
        tag.testoReadyShipment = "Dear [cliente.ragioneSociale]\n\nYour order [ordine.codice] is ready for shipment.\n\nYou will be contacted soon by our logistic manager Ms. Mariana Elena Butnaru to double check freight costs and any further detail.\n\nBest Regards,\nBassocontinuo Audio Systems Srl";
        tag.testoShipped = "Dear [cliente.ragioneSociale]\n\nYour order [ordine.codice] has been shipped.\n\nYou can find more details here: _____(corriere)_____\n\nTracking number is: _____(tracking number)_____\n\nFor further information do not hesitate to write or call us at any time.\n\nBest Regards,\nBassocontinuo Audio Systems Srl";
        // variabili
        tag.ordine = null;
        tag.numero = null;
        tag.clienti = [];
        tag.emails = [];
        tag.nazioni = [];
        tag.statiordine = [];
        tag.componenti = [];
        tag.componente = null;
        tag.richiesta = null;
        tag.righe = [];
        tag.righeDaSpedire = [];
        tag.riga = null;
        tag.testo_email = "";
        tag.date = new Date();
        tag.d = tag.date.getDate().toString().padStart(2, '0');
        tag.m = (tag.date.getMonth() + 1).toString().padStart(2, '0');
        tag.y = tag.date.getFullYear();
        tag.today = tag.d + "" + tag.m + "" + tag.y;
        tag.id_riga = null;
        tag.id_componente = null;
        tag.livello = null;
        tag.email = null;

        tag.on('mount', function () {
            RiotBus.getInstance().on('ordine::found', tag.ordineFound);
            RiotBus.getInstance().on('ordine::saved', tag.ordineSaved);
            RiotBus.getInstance().on('cliente::response', tag.clienteResponse);
            RiotBus.getInstance().on('nazione::response', tag.nazioneResponse);
            RiotBus.getInstance().on('statiordine::response', tag.statiordineResponse);
            RiotBus.getInstance().on('ordine::found::nextcodice', tag.ordineNextCodice);
            RiotBus.getInstance().on('componente::response::ordine', tag.componenteResponse);
            RiotBus.getInstance().on('rigaordine::response', tag.rigaResponse);
            RiotBus.getInstance().on('rigaordine::saved', tag.rigaSaved);
            RiotBus.getInstance().on('rigaordine::seriali::saved', tag.serialiSaved);
            RiotBus.getInstance().on('rigaordine::deleted', tag.rigaDeleted);
            RiotBus.getInstance().on('rigaordine::shipped', tag.rigaShipped);
            RiotBus.getInstance().on('componente::impegnato', tag.componenteAllocato);
            RiotBus.getInstance().on('componente::assemblato', tag.componenteAssemblato);
            RiotBus.getInstance().on('etichette::ready', tag.etichetteReady);
            RiotBus.getInstance().on('richiesta::found', tag.richiestaFound);
            RiotBus.getInstance().on('componente::assembla::error', tag.assemblaError);
            RiotBus.getInstance().on('ordine::emailed', tag.emailed);
            RiotBus.getInstance().on('emails::found', tag.emailsFound);
            RiotBus.getInstance().trigger('cliente::request');
            RiotBus.getInstance().trigger('nazione::request');
            RiotBus.getInstance().trigger('statiordine::request');
            if (opts.id_object) {
                RiotBus.getInstance().trigger('ordine::get', opts.id_object);
                RiotBus.getInstance().trigger('emails::find', opts.id_object);
                RiotBus.getInstance().trigger('componente::request', 'ordine');
            }
            $("#spedizione").select2({
                placeholder: "Termini di consegna..."
            });
            $("#pagamento").select2({
                placeholder: "Pagamento..."
            });
            $("[name='data']").inputmask("datetime", {
                inputFormat: "dd/mm/yyyy"
            });
            $("[name='deliveryForecast']").inputmask("datetime", {
                inputFormat: "dd/mm/yyyy"
            });
            $("#table_dettaglio").on("click", "[data-action]", function (e) {
                const $a = $(e.currentTarget);
                const $tr = $a.closest('tr');
                const azione = $a.attr("data-action");
                const id_componente = $tr.attr("data-componente");
                const id_riga = $tr.attr("data-riga");
                const id_richiesta = $tr.attr("data-richiesta");
                switch (azione) {
                    case "plus":
                        initOperazione(id_riga, id_richiesta);
                        tag.updateQuantita(id_riga, 1);
                        break;
                    case "minus":
                        initOperazione(id_riga, id_richiesta);
                        tag.updateQuantita(id_riga, -1);
                        break;
                    case "save":
                        tag.createRiga();
                        break;
                    case "delete":
                        tag.deleteRiga(id_riga);
                        break;
                    case "edit":
                        initOperazione(id_riga, id_richiesta);
                        $("#modal_seriali").modal("show");
                        break;
                    case "operation":
                        initOperazione(id_riga, id_richiesta);
                        $("#modal_operation").find(".valore").text("0");
                        $("#modal_operation").modal("show");
                        break;
                }
            });
            $("#modal_operation").on("click", "[data-action]", function (e) {
                const $a = $(e.currentTarget);
                const $blocco = $a.closest(".blocco");
                const macro = $blocco.attr("data-blocco");
                const azione = $a.attr("data-action");
                const $valore = $blocco.find(".valore");
                const min = $valore.length > 0 ? parseInt($valore.attr("data-min")) : 0;
                const max = $valore.length > 0 ? parseInt($valore.attr("data-max")) : 0;
                let valore = $valore.length > 0 ? parseInt($valore.text()) : 0;
                switch (azione) {
                    case "plus":
                        switch (macro) {
                            case "assembla":
                            case "impegna":
                            case "disimpegna":
                                valore++;
                                if (valore >= min && valore <= max) {
                                    $valore.text(valore);
                                }
                                break;
                        }
                        break;
                    case "minus":
                        switch (macro) {
                            case "assembla":
                            case "impegna":
                            case "disimpegna":
                                valore--;
                                if (valore >= min && valore <= max) {
                                    $valore.text(valore);
                                }
                                break;
                        }
                        break;
                    case "spedisci":
                        const disp = tag.getGiacenze(tag.componente.get("giacenze"), tag.riga.id).disponibilita;
                        if (disp >= tag.riga.get("quantita")) {
                            $(".modal").modal("hide");
                            $("#modal_spedisci").modal("show");
                        } else {
                            alert("Giacenza non sufficiente");
                        }
                        break;
                }
            });

            $('#table_dettaglio').on('click', '.deep', function () {
                const $this = $(this);
                const $tr = $this.closest('tr');
                const id_riga = $tr.attr("data-riga");
                const id_componente = $tr.attr("data-componente");
                const $i = $this.find("i");
                if ($i.hasClass("fa-caret-down")) {
                    tag.id_riga = null;
                    tag.id_componente = null;
                    tag.livello = null;
                    $('#table_dettaglio [data-riga="' + id_riga + '"][data-componente="' + id_componente + '"].child').fadeOut('normal', function () {
                        $(this).remove();
                    });
                    $i.removeClass("fa-caret-down").addClass("fa-caret-right");
                    $tr.removeClass('exploded');
                } else {
                    $("#table_dettaglio").block({message: null});
                    let riga = null;
                    for (let i = 0; i < tag.righe.length; i++) {
                        if (tag.righe[i].id === id_riga) {
                            riga = tag.righe[i];
                            break;
                        }
                    }
                    const livello = parseInt($tr.closest("table").attr('data-livello'));
                    const colspan = $tr.children("td").length;
                    const qs = $tr.attr("data-quantita").split(",");
                    const q = $tr.attr("data-q");
                    const idx = $tr.attr("data-idx");
                    let html = "<tr data-riga='" + id_riga + "' data-componente='" + id_componente + "' class='child'>";
                    html += "<td class='colspan' colspan='" + colspan + "'>";
                    html += "<table class='table table-hover table-bordered componenti' data-livello='" + (livello + 1) + "'><tbody>";
                    for (let k = 0; k < qs.length; k++) {
                        if (qs[k].trim().length > 0) {
                            let richiesta = null;
                            let componente = null;
                            let qs_id_q = qs[k].split("|");
                            for (let i = 0; i < riga.richieste.length; i++) {
                                if (riga.richieste[i].get("componente").id === qs_id_q[0]) {
                                    richiesta = riga.richieste[i];
                                    componente = richiesta.get("componente");
                                    break;
                                }
                            }
                            const qta = Number.isInteger(richiesta.get("quantita")) ? richiesta.get("quantita") : 0;
                            const impegnato = Number.isInteger(richiesta.get("impegnato")) ? richiesta.get("impegnato") : 0;
                            const richiesto = Number.isInteger(richiesta.get("richiesto")) ? richiesta.get("richiesto") : qta;
                            const impegnatoAssemblato = Number.isInteger(richiesta.get("impegnatoAssemblato")) ? richiesta.get("impegnatoAssemblato") : 0;
                            const ids = tag.getComponentiFigli(richiesta, riga.richieste);
                            const g = componente.get('giacenze') ? componente.get('giacenze') : [];
                            const disp = tag.getGiacenze(g, id_riga).disponibilita;
                            const canedit = !(riga.get('statoRigaOrdine').get('definitivo') || tag.ordine.get('statoOrdine').get('posizione') === 10);
                            html += "<tr data-riga='" + riga.id + "' data-componente='" + componente.id + "' data-richiesta='" + richiesta.id + "' data-quantita='" + ids + "' data-q='" + qta + "' data-idx='" + idx + "' class='parent' style='" + tag.getCssColor(tag.bg, idx, livello + 1) + "'>";
                            html += "<td style='width: 5%'" + ((ids.length > 0) ? " class='deep'><i class='fas fa-2x fa-caret-right'></i>" : ">") + "</td>";
                            html += "<td style='width: 20%'>" + componente.get('codice') + " " + componente.get('descrizione') + "</td>";
                            html += "<td style='width: 10%' data-id='quantita'>" + qta + "</td>";
                            html += "<td style='width: 15%' data-id='giacenza'>" + tag.getGiacenze(g, riga.id).html + "</td>";
                            html += "<td style='width: 8%' data-id='impegnato'>" + impegnato + "</td>";
                            html += "<td style='width: 8%' data-id='richiesto'><span class='bg-" + ((disp + impegnatoAssemblato >= qta) ? "green" : "red") + "'>" + richiesto + "</span></td>";
                            let ia = "";
                            if (impegnatoAssemblato > 0 && (disp + impegnatoAssemblato) < qta) {
                                let plurale = impegnatoAssemblato > 1;
                                ia = impegnatoAssemblato + " pezz" + (plurale ? "i" : "o") + " gi&agrave; utilizzat" + (plurale ? "i" : "o") + " per assemblaggio";
                            }
                            html += "<td style='width: 25%' data-id='impegnatoAssemblato'>" + ia + "</td>";
                            html += "<td style='width: 9%' class='text-right'><button title='Operazioni' data-action='operation' type='button' " + (canedit ? '' : 'disabled') + " class='btn btn-sm btn-default btn-flat'><i class='fas fa-cogs'></i></button></td>";
                            html += "</tr>";
                        }
                    }
                    html += "</tbody></table></td></tr>";
                    var $child = $(html);
                    $tr.after($child);
                    $tr.find("i").first().removeClass("fa-caret-right").addClass("fa-caret-down");
                    $tr.addClass('exploded');
                    $("#table_dettaglio").unblock();
                }
            });
        });

        tag.on('unmount', function () {
            RiotBus.getInstance().off('ordine::found', tag.ordineFound);
            RiotBus.getInstance().off('ordine::saved', tag.ordineSaved);
            RiotBus.getInstance().off('cliente::response', tag.clienteResponse);
            RiotBus.getInstance().off('nazione::response', tag.nazioneResponse);
            RiotBus.getInstance().off('statiordine::response', tag.statiordineResponse);
            RiotBus.getInstance().off('ordine::found::nextcodice', tag.ordineNextCodice);
            RiotBus.getInstance().off('componente::response::ordine', tag.componenteResponse);
            RiotBus.getInstance().off('rigaordine::response', tag.rigaResponse);
            RiotBus.getInstance().off('rigaordine::saved', tag.rigaSaved);
            RiotBus.getInstance().off('rigaordine::seriali::saved', tag.serialiSaved);
            RiotBus.getInstance().off('rigaordine::deleted', tag.rigaDeleted);
            RiotBus.getInstance().off('rigaordine::shipped', tag.rigaShipped);
            RiotBus.getInstance().off('componente::impegnato', tag.componenteAllocato);
            RiotBus.getInstance().off('componente::assemblato', tag.componenteAssemblato);
            RiotBus.getInstance().off('etichette::ready', tag.etichetteReady);
            RiotBus.getInstance().off('richiesta::found', tag.richiestaFound);
            RiotBus.getInstance().off('componente::assembla::error', tag.assemblaError);
            RiotBus.getInstance().off('ordine::emailed', tag.emailed);
            RiotBus.getInstance().on('emails::found', tag.emailsFound);
        });

        tag.componenteAllocato = function (riga, id_richiesta) {
            tag.updateRiga(riga);
            $("#table_dettaglio").unblock();
        };

        tag.componenteAssemblato = function (riga, id_richiesta) {
            tag.updateRiga(riga);
            $("#table_dettaglio").unblock();
        };

        tag.rigaShipped = function (righe) {
            for (let i = 0; i < righe.length; i++) {
                tag.updateRiga(righe[i]);
            }
            $("#table_dettaglio").unblock();
        };

        tag.statiordineResponse = function (stati) {
            tag.statiordine = stati;
            tag.update();
        };

        tag.emailsFound = function (emails) {
            tag.emails = emails;
            tag.update();
        };

        tag.clienteResponse = function (results) {
            tag.clienti = results;
            tag.update();
            $("#cliente").select2({
                placeholder: "Seleziona il cliente..."
            }).on('select2:select', function (e) {
                tag.copiaindirizzo();
                tag.selectoptions(tag.ordine, "pagamento");
            });
            tag.selectoptions(tag.ordine, "cliente");
        };

        tag.nazioneResponse = function (results) {
            tag.nazioni = results;
            tag.update();
            $("#nazione").select2({
                placeholder: "Seleziona la nazione..."
            });
            tag.selectoptions(tag.ordine, "nazione");
        };

        tag.ordineFound = function (ordine) {
            tag.ordine = ordine;
            tag.update();
            tag.selectoptions(tag.ordine, "pagamento");
            tag.selectoptions(tag.ordine, "spedizione");
            tag.selectoptions(tag.ordine, "cliente");
            tag.selectoptions(tag.ordine, "nazione");
            RiotBus.getInstance().trigger('rigaordine::request', opts.id_object);
        };

        tag.ordineNextCodice = function (n) {
            tag.numero = n;
            $("#form_ordine [name='numero']").val(n);
            tag.update();
        };

        tag.copiaindirizzo = function () {
            copia("Spedizione");
        };

        tag.copiaindirizzo2 = function () {
            copia("");
        };

        function copia(spedizione) {
            var id = $('#cliente').select2('data')[0].id;
            if (id) {
                for (var i = 0; i < tag.clienti.length; i++) {
                    var c = tag.clienti[i];
                    if (c.id === id) {
                        $("#form_ordine [name='co']").val(c.get("ragioneSociale"));
                        $("#form_ordine [name='indirizzo1']").val(c.get("indirizzo" + spedizione + "1"));
                        $("#form_ordine [name='indirizzo2']").val(c.get("indirizzo" + spedizione + "2"));
                        $("#form_ordine [name='indirizzo3']").val(c.get("indirizzo" + spedizione + "3"));
                        $("#form_ordine [name='cap']").val(c.get("cap" + spedizione));
                        $("#form_ordine [name='citta']").val(c.get("citta" + spedizione));
                        $("#form_ordine [name='provincia']").val(c.get("provincia" + spedizione));
                        var n = c.get("nazione" + spedizione) ? c.get("nazione" + spedizione).id : "";
                        $("#form_ordine #nazione").val(n).trigger("change");
                        break;
                    }
                }
            }
        }

        tag.saveOrdine = function (e) {
            var data = tag.save(e, "form_ordine");
            data.id_cliente = $('#cliente').select2('data')[0].id;
            data.id_nazione = $('#nazione').select2('data')[0].id;
            data.pagamento = $('#pagamento').select2('data')[0].id;
            data.spedizione = $('#spedizione').select2('data')[0].id;
            RiotBus.getInstance().trigger('ordine::save', data);
        };

        tag.ordineSaved = function (result) {
            tag.ordine = result;
            tag.update();
            $("#salva").button('saved');
            tag.routeTo('/inserisci-ordine?id_object=' + result.id);
        };

        tag.search_numero = function () {
            var d = $("[name='data']").val().split("/");
            if (d.length === 3) {
                RiotBus.getInstance().trigger('ordine::get::nextcodice', $("[name='data']").val());
            }
        };

        tag.archivia = function () {
            $(".modal").modal("hide");
            RiotBus.getInstance().trigger('ordine::archivia', opts.id_object);
        };

        tag.impegna_componente = function () {
            const delta = parseInt($("#modal_operation [data-blocco='impegna'] .valore").text());
            if (delta > 0) {
                let impegnabili = 0;
                let g = null;
                for (let i = 0; i < tag.componente.get("giacenze").length; i++) {
                    g = tag.componente.get("giacenze")[i];
                    if (g.bassocontinuo === 1) {
                        impegnabili = g.giacenza;
                        break;
                    }
                }
                if (impegnabili >= delta) {
                    $(".modal").modal("hide");
                    $("#table_dettaglio").block({message: "Verifica giacenza in corso..."});
                    RiotBus.getInstance().trigger('componente::impegna', tag.richiesta.id, tag.riga.id, delta);
                } else {
                    alert("Giacenza non sufficiente");
                }
            }
        };

        tag.disimpegna_componente = function () {
            const delta = parseInt($("#modal_operation [data-blocco='disimpegna'] .valore").text());
            if (delta > 0) {
                $(".modal").modal("hide");
                $("#table_dettaglio").block({message: "Verifica giacenza in corso..."});
                RiotBus.getInstance().trigger('componente::impegna', tag.richiesta.id, tag.riga.id, -delta);
            }
        };

        tag.assembla_componente = function () {
            const delta = parseInt($("#modal_operation [data-blocco='assembla'] .valore").text());
            if (delta > 0) {
                $(".modal").modal("hide");
                $("#table_dettaglio").block({message: "Verifica giacenza in corso..."});
                RiotBus.getInstance().trigger('componente::assemblaimpegna', tag.richiesta.id, tag.riga.id, delta);
            }
        };

        tag.componenteResponse = function (results) {
            tag.componenti = results;
            tag.update();
            $("#new [data-id='componente']").select2({
                placeholder: "Seleziona il componente..."
            });
        };

        tag.rigaResponse = function (righe) {
            tag.righe = righe;
            let html = null;
            for (let i = 0; i < tag.righe.length; i++) {
                const r = tag.righe[i];
                html += tag.getHtmlRiga(r, i);
            }
            $("#table_dettaglio tbody").prepend(html);
            tag.update();
            $("#table_dettaglio").unblock();
        };

        tag.getHtmlRiga = function (riga, idx) {
            let html = null;
            let richiesta = null;
            let componente = null;
            if (riga.get("componente")) {
                for (let j = 0; j < riga.richieste.length; j++) {
                    if (riga.richieste[j].get("componente").id === riga.get('componente').id) {
                        richiesta = riga.richieste[j];
                        componente = riga.richieste[j].get("componente");
                        break;
                    }
                }
                if (richiesta) {
                    const qta = Number.isInteger(richiesta.get("quantita")) ? richiesta.get("quantita") : 0;
                    const impegnato = Number.isInteger(richiesta.get("impegnato")) ? richiesta.get("impegnato") : 0;
                    const richiesto = Number.isInteger(richiesta.get("richiesto")) ? richiesta.get("richiesto") : qta;
                    const impegnatoAssemblato = Number.isInteger(richiesta.get("impegnatoAssemblato")) ? richiesta.get("impegnatoAssemblato") : 0;
                    const ids = tag.getComponentiFigli(richiesta, riga.richieste);
                    const g = componente.get('giacenze') ? componente.get('giacenze') : [];
                    const disp = tag.getGiacenze(g, riga.id).disponibilita;
                    let seriali = riga.get('seriali') ? riga.get('seriali').concat() : [];
                    if (opts.id_riga && opts.seriale && opts.id_riga === riga.id) {
                        for (let i = 0; i < seriali.length; i++) {
                            if (seriali[i] === opts.seriale) {
                                seriali[i] = "<strong>" + seriali[i] + "</strong>";
                            }
                        }
                    }
                    seriali = seriali.join('<br />');
                    const stato = riga.get('statoRigaOrdine') ? riga.get('statoRigaOrdine').get('stato') : "";
                    const canedit = !(riga.get('statoRigaOrdine').get('definitivo') || tag.ordine.get('statoOrdine').get('posizione') === 10);
                    html = "<tr id='" + riga.id + "' class='parent' data-riga='" + riga.id + "' data-componente='" + componente.id + "' data-richiesta='" + richiesta.id + "' data-quantita='" + ids + "' data-q='" + qta + "' data-idx='" + idx + "' style='" + tag.getCssColor(tag.bg, idx, 0) + "'>";
                    html += "<td " + ((ids.length > 0) ? " class='deep'><i class='fas fa-2x fa-caret-right'></i>" : "") + "</td>";
                    html += "<td><strong>" + componente.get('codice') + " " + componente.get('descrizione') + "</strong></td>";
                    html += "<td class='text-center'><button title='-' data-action='minus' type='button' " + (canedit ? '' : 'disabled') + " class='btn btn-xs btn-default btn-flat canedit'><i class='fas fa-minus'></i></button> <strong data-id='quantita'>" + qta + "</strong> <button title='+' data-action='plus' type='button' " + (canedit ? '' : 'disabled') + " class='btn btn-xs btn-default btn-flat canedit'><i class='fas fa-plus'></i></button></td>";
                    html += "<td data-id='giacenza'>" + tag.getGiacenze(g, riga.id).html + "</td>";
                    html += "<td class='text-center' data-id='impegnato'>" + impegnato + "</td>";
                    html += "<td class='text-center' data-id='richiesto'><span class='bg-" + ((disp >= richiesto) ? "green" : "red") + "'>" + richiesto + "</span></td>";
                    html += "<td> <div data-id='seriali'>" + seriali + "</div><button title='Modifica seriali' data-action='edit' type='button' class='btn btn-xs btn-default btn-flat'><i class='far fa-edit'></i></button></td>";
                    html += "<td data-id='stato'><strong>" + stato.toUpperCase() + "</strong></td>";
                    html += "<td class='text-right'><div class='btn-group'>";
                    html += "<button title='Operazioni' data-action='operation' type='button' " + (canedit ? '' : 'disabled') + " class='btn btn-sm btn-default btn-flat canedit'><i class='fas fa-cogs'></i></button>";
                    html += "<button title='Cancella' data-action='delete' type='button' " + (canedit ? '' : 'disabled') + " class='btn btn-sm btn-default btn-flat canedit'><i class='fas fa-trash'></i></button>";
                    html += "</div></td>";
                    html += "</tr>";
                } else {
                    alert("Problema su riga " + riga.id + ". Notificarlo all'assistenza, grazie.");
                }
            }
            return html;
        };

        tag.createRiga = function () {
            $("#table_dettaglio").block({
                message: 'Elaborazione in corso...'
            });
            const $tr = $("#new");
            const id_componente = $tr.find("[data-id='componente']").select2('data')[0].id;
            let quantita = $tr.find("[name='quantita']").val();
            if (id_componente && quantita) {
                quantita = parseInt(quantita);
                RiotBus.getInstance().trigger('rigaordine::save', null, tag.ordine.id, id_componente, quantita);
            } else {
                $("#table_dettaglio").unblock();
                alert("Impossibile salvare, verifica i campi inseriti");
            }
        };

        tag.updateQuantita = function (id, delta) {
            const $tr = $("#" + id);
            let q = tag.riga.get("quantita");
            q += delta;
            if (q > 0) {
                $("#table_dettaglio").block({
                    message: 'Elaborazione in corso...'
                });
                RiotBus.getInstance().trigger('rigaordine::save', id, tag.ordine.id, tag.componente.id, q);
            }
        };

        tag.spedisci = function () {
            $(".modal").modal("hide");
            $("#table_dettaglio").block({message: "Verifica giacenza in corso..."});
            RiotBus.getInstance().trigger('rigaordine::ship', [tag.riga.id]);
        };

        tag.spedisci_multiplo = function () {
            $(".modal").modal("hide");
            $("#table_dettaglio").block({message: "Elaborazione in corso..."});
            const ids = [];
            for (let i = 0; i < tag.righeDaSpedire.length; i++) {
                ids.push(tag.righeDaSpedire[i].id);
            }
            RiotBus.getInstance().trigger('rigaordine::ship', ids);
        };

        tag.rigaSaved = function (riga) {
            var found = false;
            for (var i = 0; i < tag.righe.length; i++) {
                if (tag.righe[i].id === riga.id) {
                    tag.righe[i] = riga;
                    found = true;
                    tag.updateRiga(riga, i);
                    break;
                }
            }
            if (!found) {
                tag.righe.push(riga);
                $("#new [data-id='componente']").val(null).trigger('change');
                $("#new [name='quantita']").val(null);
                $("#new [data-id='giacenza']").html("");
                $(".modal").modal("hide");
                $('#table_dettaglio .child').fadeOut('normal', function () {
                    $(this).remove();
                });
                tag.updateRiga(riga, (tag.righe.length - 1));
            }
            $("#table_dettaglio").unblock();
        };

        tag.serialiSaved = function (riga) {
            $("#" + riga.id + " [data-id='seriali']").html(riga.get("seriali").join("<br />"));
        };

        tag.rigaDeleted = function (riga) {
            $(".modal").modal("hide");
            var found = false;
            var i;
            for (i = 0; i < tag.righe.length; i++) {
                if (tag.righe[i].id === riga.id) {
                    found = true;
                    break;
                }
            }
            if (found) {
                tag.righe.splice(i, 1);
            }
            $("[data-riga='" + riga.id + "']").fadeOut();
            $("#table_dettaglio").unblock();
        };

        tag.deleteRiga = function (id) {
            $("#table_dettaglio").block({message: null});
            RiotBus.getInstance().trigger('rigaordine::delete', id);
        };

        tag.stampaProdotti = function () {
            $.blockUI();
            RiotBus.getInstance().trigger('etichette::prepare', opts.id_object, "prodotti");
        };

        tag.stampaGaranzie = function () {
            $.blockUI();
            RiotBus.getInstance().trigger('etichette::prepare', opts.id_object, "garanzie");
        };

        tag.etichetteReady = function (results, tipo) {
            tag.righe = results;
            tag.update();
            var rows = [];
            for (var i = 0; i < tag.righe.length; i++) {
                var r = tag.righe[i];
                tag.serialiSaved(r);
                if (r.get("seriali")) {
                    for (var j = 0; j < r.get("seriali").length; j++) {
                        var s = r.get("seriali")[j];
                        switch (tipo) {
                            case "prodotti":
                                rows.push([r.get("componente").get("nomeetichetta"), "Serial Nr. " + s]);
                                break;
                            case "garanzie":
                                rows.push([s]);
                                break;
                        }
                    }
                }
            }
            tag.downloadCsv(rows, "etichetta_" + tipo);
        };

        tag.stampaAltezze = function () {
            $.blockUI();
            var rows = [];
            for (var i = 0; i < tag.righe.length; i++) {
                var r = tag.righe[i];
                var altezza = r.get("componente") && r.get("componente").get("altezzaetichetta") ? r.get("componente").get("altezzaetichetta") : null;
                if (altezza) {
                    for (var j = 0; j < r.get("quantita"); j++) {
                        rows.push([altezza]);
                    }
                }
            }
            tag.downloadCsv(rows, "etichetta_altezza");
        };

        tag.stampaIndirizzo = function () {
            $.blockUI();
            var rows = [];
            var indirizzo = tag.ordine.get("indirizzo1");
            if (tag.ordine.get("indirizzo2")) {
                indirizzo += " " + tag.ordine.get("indirizzo2");
            }
            if (tag.ordine.get("indirizzo3")) {
                indirizzo += " " + tag.ordine.get("indirizzo3");
            }
            var citta = tag.ordine.get("citta");
            if (tag.ordine.get("cap")) {
                citta += " " + tag.ordine.get("cap");
            }
            if (tag.ordine.get("provincia")) {
                citta += " " + tag.ordine.get("provincia");
            }
            var etichetta = [
                tag.ordine.get("co") ? tag.ordine.get("co") : tag.ordine.get("cliente").get("ragioneSociale").replace(/,/g, ""),
                indirizzo.replace(/,/g, ""),
                citta.replace(/,/g, ""),
                tag.ordine.get("nazione") ? tag.ordine.get("nazione").get("nazione").replace(/,/g, "") : "?"
            ];
            for (var i = 0; i < tag.righe.length; i++) {
                var r = tag.righe[i];
                for (var j = 0; j < r.get("quantita"); j++) {
                    rows.push(etichetta);
                }
            }
            tag.downloadCsv(rows, "etichetta_indirizzo");
        };

        tag.stampaBarcode = function () {
            $.blockUI();
            var rows = [];
            for (var i = 0; i < tag.righe.length; i++) {
                var r = tag.righe[i];
                var codice = r.get("componente") && r.get("componente").get("codicebarre") ? r.get("componente").get("codicebarre") : null;
                if (codice) {
                    for (var j = 0; j < r.get("quantita"); j++) {
                        rows.push(codice);
                    }
                }
            }
            tag.downloadCsv(rows, "etichetta_barcode");
        };

        function initOperazione(riga_id, richiesta_id) {
            for (var i = 0; i < tag.righe.length; i++) {
                if (tag.righe[i].id === riga_id) {
                    tag.riga = tag.righe[i];
                    break;
                }
            }
            if (richiesta_id) {
                for (var i = 0; i < tag.riga.richieste.length; i++) {
                    if (tag.riga.richieste[i].id === richiesta_id) {
                        tag.richiesta = tag.riga.richieste[i];
                        break;
                    }
                }
            } else {
                tag.richiesta = null;
            }
            tag.componente = tag.richiesta.get("componente");
            tag.update();
        }

        tag.spedisci_modal = function (riga_id, richiesta_id) {
            if (typeof riga_id === "string") {
                initOperazione(riga_id, richiesta_id);
                let disp = tag.getGiacenze(tag.richiesta.get("componente").get("giacenze"), tag.riga.id).disponibilita;
                if (disp >= tag.riga.get("quantita")) {
                    $("#modal_spedisci").modal("show");
                } else {
                    $("#table_dettaglio").unblock();
                    alert("Giacenza non sufficiente");
                }
            } else {
                tag.righeDaSpedire = [];
                for (let j = 0; j < tag.righe.length; j++) {
                    let r = tag.righe[j];
                    if (!r.get('statoRigaOrdine').get('definitivo')) {
                        richiesta_id = $("#" + r.id).attr("data-richiesta");
                        initOperazione(r.id, richiesta_id);
                        let disp = tag.getGiacenze(tag.richiesta.get("componente").get("giacenze"), tag.riga.id).disponibilita;
                        if (disp >= tag.riga.get("quantita")) {
                            tag.righeDaSpedire.push(r);
                        }
                    }
                }
                tag.update();
                $("#table_dettaglio").unblock();
                if (tag.righeDaSpedire.length > 0) {
                    $("#modal_spedisci_multiplo").modal("show");
                } else {
                    alert("Giacenze non sufficienti");
                }
            }
        };

        tag.archivia_modal = function (stato) {
            if (stato.get("posizione") === 10) {
                $("#modal_archivia").modal("show");
            }
        };

        tag.assemblaError = function (componenti) {
            $("#table_dettaglio").unblock();
            var a = "Giacenza non sufficiente per i seguenti componenti:\n";
            for (var i = 0; i < componenti.length; i++) {
                a += "\n - " + componenti[i].get("codice") + " - " + componenti[i].get("descrizione");
            }
            alert(a);
        };

        tag.getDisponibileBassocontinuo = function (r) {
            let disponibilita = 0;
            let giacenze = r.get('componente').get('giacenze') ? r.get('componente').get('giacenze') : [];
            for (let i = 0; i < giacenze.length; i++) {
                const g = giacenze[i];
                if (g.bassocontinuo === 1) {
                    disponibilita = g.giacenza;
                }
            }
            return disponibilita;
        };

        tag.updateRiga = function (riga, idx) {
            const $tr = $("#" + riga.id);
            if ($tr.length === 0) {
                $("#table_dettaglio tbody #new").before(tag.getHtmlRiga(riga, idx));
            }
            updateRigaHtml($tr, riga, true);
            const id_componente = $tr.attr("data-componente");
            const $child = $("tr.child[data-riga='" + riga.id + "'][data-componente='" + id_componente + "']");
            const $rows = $child.find("tr");
            $rows.each(function () {
                const $row = $(this);
                updateRigaHtml($row, riga, false);
            });
        };

        tag.salvaseriali = function () {
            const seriali = $("#modal_seriali [name='seriali']").val();
            let s = [];
            if (seriali.trim().length > 0) {
                s = seriali.split("\n");
            }
            RiotBus.getInstance().trigger('rigaordine::seriali::save', tag.riga.id, s);
        };

        tag.invia_email_modal = function (s) {
            switch (s) {
                case tag.EMAIL_PROCESSING:
                    tag.testo_email = tag.testoProcessing;
                    break;
                case tag.EMAIL_READY_PICKUP:
                    tag.testo_email = tag.testoReadyPickup;
                    break;
                case tag.EMAIL_READY_SHIPMENT:
                    tag.testo_email = tag.testoReadyShipment;
                    break;
                case tag.EMAIL_SHIPPED:
                    tag.testo_email = tag.testoShipped;
                    break;
                default:
                    break;
            }
            tag.testo_email = tag.testo_email.replace("[cliente.ragioneSociale]", tag.ordine.get("cliente").get("ragioneSociale"));
            let riferimento = tag.ordine.get("riferimento") ? tag.ordine.get("riferimento") : tag.ordine.get("numero");
            tag.testo_email = tag.testo_email.replace("[ordine.codice]", riferimento);
            tag.testo_email = tag.testo_email.replace("[ordine.id]", tag.ordine.id);
            tag.testo_email = tag.testo_email.replace("[cliente.id]", tag.ordine.get("cliente").id);
            tag.update();
            $("#modal_invio_email [name='tipologia']").val(s);
            $("#modal_invio_email").modal("show");
        };

        tag.invia_email = function () {
            const email = $("#modal_invio_email [name='email']").val();
            const testo = $("#modal_invio_email [name='testo']").val();
            const tipologia = $("#modal_invio_email [name='tipologia']").val();
            if (email.length > 0) {
                $("#modal_invio_email").modal("hide");
                const params = {
                    to: email,
                    subject: "[Bassocontinuo] Order " + tag.ordine.get("numero") + " updated",
                    message: testo,
                    tipologia: tipologia,
                    id_ordine: tag.ordine.id
                };
                RiotBus.getInstance().trigger('ordine::email', params);
            }
        };

        tag.emailed = function (email) {
            if (email.id) {
                tag.emails.push(email);
                tag.update();
            } else {
                alert("Invio email non riuscito");
                console.error(email);
            }
        };

        tag.open_email = function (id_email) {
            for (let i = 0; i < tag.emails.length; i++) {
                if (tag.emails[i].id === id_email) {
                    tag.email = tag.emails[i];
                    tag.update();
                    $("#testo_email_read").empty().append(tag.email.get("testo"));
                    $("#modal_email_inviata").modal("show");
                    break;
                }
            }
        };

        function updateRigaHtml($tr, riga, isLevel0) {
            const id_richiesta = $tr.attr("data-richiesta");
            const canedit = !(riga.get('statoRigaOrdine').get('definitivo') || tag.ordine.get('statoOrdine').get('posizione') === 10);
            let richiesta = null;
            for (let i = 0; i < riga.richieste.length; i++) {
                richiesta = riga.richieste[i];
                if (id_richiesta === richiesta.id) {
                    const giacenza = richiesta.get("componente").get("giacenze");
                    const qta = Number.isInteger(richiesta.get("quantita")) ? richiesta.get("quantita") : 0;
                    const disp = tag.getGiacenze(richiesta.get("componente").get("giacenze"), riga.id).disponibilita;
                    const impegnato = Number.isInteger(richiesta.get("impegnato")) ? richiesta.get("impegnato") : 0;
                    const richiesto = Number.isInteger(richiesta.get("richiesto")) ? richiesta.get("richiesto") : 0;
                    let stato, impegnatoAssemblato = null;
                    if (isLevel0) {
                        stato = riga.get('statoRigaOrdine') ? riga.get('statoRigaOrdine').get('stato').toUpperCase() : "";
                        impegnatoAssemblato = 0;
                        $tr.find("[data-id='stato']").find("strong").html(stato);
                        if (canedit) {
                            $tr.find("button").removeAttr("disabled");
                        } else {
                            $tr.find("button").attr("disabled", "disabled");
                        }
                    } else {
                        impegnatoAssemblato = Number.isInteger(richiesta.get("impegnatoAssemblato")) ? richiesta.get("impegnatoAssemblato") : 0;
                        $tr.find("[data-id='quantita']").html(richiesta.get("quantita"));
                    }
                    $tr.find("[data-id='quantita']").text(qta);
                    $tr.find("[data-id='giacenza']").html(tag.getGiacenze(giacenza, riga.id).html);
                    $tr.find("[data-id='impegnato']").html(impegnato);
                    const $richiesto = $tr.find("[data-id='richiesto'] span");
                    let ia = "";
                    if (disp >= richiesto) {
                        $richiesto.removeClass("bg-red").addClass("bg-green");
                    } else {
                        $richiesto.removeClass("bg-green").addClass("bg-red");
                        if (impegnatoAssemblato > 0) {
                            ia = impegnatoAssemblato + " pezzi gi&agrave; utilizzati per assemblaggio";
                        }
                    }
                    if (!isLevel0) {
                        $tr.find("[data-id='impegnatoAssemblato']").html(ia);
                    }
                    $richiesto.html(richiesto);
                    if (canedit) {
                        $tr.find(".canedit").removeAttr("disabled");
                    } else {
                        $tr.find(".canedit").attr("disabled", "disabled");
                    }
                    break;
                }
            }
        }

    </script>
</inserisci-ordine>
