<inserisci-magazzino>
    <section class="content">
        <div class="row">
            <div class="col-md-4">
                <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-mouse-pointer fa-stack-1x"></i>
                            </span>
                        </div>
                        <h3 class="box-title">Seleziona l'operazione</h3>
                        <p>&nbsp;</p>
                    </div>
                    <form role="form" onsubmit="{
                                seleziona
                            }">
                        <div class="box-body">
                            <div class="form-group"> 
                                <select id="azione" class="form-control select2">
                                    <option></option>
                                    <option value="carico">Carico magazzino</option>
                                    <option value="movimentazione">Movimentazione tra magazzini</option>
                                    <option value="assemblaggio">Lavorazione / Assemblaggio</option>
                                    <option value="disassemblaggio">Disassemblaggio</option>
                                </select>
                            </div>
                        </div>
                        <div class="box-footer">
                            <button type="button" class="btn btn-sm btn-default btn-flat" onclick="{
                                        reset
                                    }"><i class="fas fa-broom"></i> Reset</button>
                            <button type="submit" class="btn btn-sm btn-primary btn-flat pull-right">Seleziona <i class="fas fa-arrow-right"></i></button>                        
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-8">
                <div if="{ azione == 'carico' }" 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-plus fa-stack-1x"></i>
                            </span>
                        </div>
                        <h3 class="box-title">Effettua un carico</h3>
                        <p>Seleziona il componente ed inserisci il delta</p>
                    </div>
                    <form id="form_operazione" class="form-horizontal" onsubmit="{
                                operazione
                            }">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="componente" class="col-sm-2 control-label">Componente:</label>
                                <div class="col-sm-10">
                                    <select id="componente" class="form-control select2">
                                        <option></option>
                                        <option each="{ c in componenti }" value="{ c.id }">{ c.get('codice') } - { c.get('descrizione') }</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="riga" class="col-sm-2 control-label">Ordine:</label>
                                <div class="col-sm-10">
                                    <select id="riga" class="form-control select2">
                                        <option></option>
                                        <option each="{ r in righe }" if="{ componente && r.get('componente').id == componente.id }" value="{ r.id }">{ r.get('ordine').get('numero') }/{ r.get('ordine').get('anno') } { r.get('ordine').get('co') } (mancanti: { r.get('quantitaMancante') } pezzi)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="magazzino" class="col-sm-2 control-label">Magazzino di carico:</label>
                                <div class="col-sm-10">
                                    <select id="magazzino" class="form-control select2 magazzino" required>
                                        <option></option>
                                        <option each="{ f in magazzini }" value="{ f.id }">{ f.get('descrizione') }</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="delta" class="col-sm-2 control-label">DELTA:</label>
                                <div class="col-sm-10">
                                    <input class="form-control" type="number" placeholder="+0" title="Delta" name="delta" required>
                                </div>
                            </div>
                            <textarea class="form-control" rows="3" id="note" placeholder="Note" name="note"></textarea>
                        </div>
                        <div class="box-footer">
                            <a if="{ opts.id_object }" role="button" class="btn btn-sm btn-default btn-flat" href="/inserisci-ordine?id_object={ opts.id_object }"><i class="fas fa-file-import"></i> Torna all'ordine</a>
                            <button disabled="{ !componente }" type="submit" class="btn btn-sm btn-primary btn-flat pull-right"
                                    ><i class='fas fa-save'></i> Registra il carico
                            </button>                        
                        </div>
                    </form>
                </div>
                <div if="{ azione == 'movimentazione' }" 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-exchange-alt fa-stack-1x"></i>
                            </span>
                        </div>
                        <h3 class="box-title">Registra una movimentazione</h3>
                        <p>Seleziona il componente ed i magazzini</p>
                    </div>
                    <form id="form_operazione" class="form-horizontal" onsubmit="{
                                operazione
                            }">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="componente" class="col-sm-2 control-label">Componente:</label>
                                <div class="col-sm-10">
                                    <select id="componente" class="form-control select2">
                                        <option></option>
                                        <option each="{ c in componenti }" value="{ c.id }">{ c.get('codice') } - { c.get('descrizione') }</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="magazzino_da" class="col-sm-2 control-label">Magazzino di partenza:</label>
                                <div class="col-sm-10">
                                    <select id="magazzino_da" class="form-control select2 magazzino" required="">
                                        <option></option>
                                        <option each="{ m in (componente && componente.get('giacenze') ? componente.get('giacenze') : [])  }" if="{ m.giacenza > 0 }" value="{ m.id }">{ m.descrizione } ({ m.giacenza } pezzi)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="magazzino_a" class="col-sm-2 control-label">Magazzino di arrivo</label>
                                <div class="col-sm-10">
                                    <select id="magazzino_a" class="form-control select2 magazzino" required="">
                                        <option></option>
                                        <option each="{ f in magazzini }" value="{ f.id }">{ f.get('descrizione') }</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="delta" class="col-sm-2 control-label">DELTA:</label>
                                <div class="col-sm-10">
                                    <input class="form-control" type="number" placeholder="+0" title="Delta" name="delta" max="{ giacenza_max }" min="1" required>
                                </div>
                            </div>
                            <textarea class="form-control" rows="3" id="note" placeholder="Note" name="note"></textarea>
                        </div>
                        <div class="box-footer">
                            <a if="{ opts.id_object }" role="button" class="btn btn-sm btn-default btn-flat" href="/inserisci-ordine?id_object={ opts.id_object }"><i class="fas fa-file-import"></i> Torna all'ordine</a>
                            <button disabled="{ !componente }" type="submit" class="btn btn-sm btn-primary btn-flat pull-right">
                                <i class='fas fa-save'></i> Registra lo spostamento
                            </button>                        
                        </div>
                    </form>
                </div>
                <div if="{ azione == 'assemblaggio' }" 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-magic fa-stack-1x"></i>
                            </span>
                        </div>
                        <h3 class="box-title">Effettua un assemblaggio</h3>
                        <p>Seleziona il componente da assemblare e il magazzino</p>
                    </div>
                    <form id="form_operazione" class="form-horizontal" onsubmit="{
                                operazione
                            }">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="componente" class="col-sm-2 control-label">Componente desiderato:</label>
                                <div class="col-sm-10">
                                    <select id="componente" class="form-control select2">
                                        <option></option>
                                        <option each="{ c in componenti }" value="{ c.id }">{ c.get('codice') } - { c.get('descrizione') }</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="riga" class="col-sm-2 control-label">Ordine:</label>
                                <div class="col-sm-10">
                                    <select id="riga" class="form-control select2">
                                        <option></option>
                                        <option each="{ r in righe }" if="{ componente && r.get('componente').id == componente.id }" value="{ r.id }">{ r.get('ordine').get('numero') }/{ r.get('ordine').get('anno') } { r.get('ordine').get('co') } (mancanti: { r.get('quantitaMancante') } pezzi)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="magazzino" class="col-sm-2 control-label">Luogo dell'assemblaggio</label>
                                <div class="col-sm-10">
                                    <select id="magazzino" class="form-control select2 magazzino" required>
                                        <option></option>
                                        <option each="{ f in magazzini }" value="{ f.id }">{ f.get('descrizione') }</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="delta" class="col-sm-2 control-label">Numero pezzi:</label>
                                <div class="col-sm-10">
                                    <input class="form-control" type="number" placeholder="0" title="Numero pezzi" name="delta" min="1" required onkeyup="{
                                                setNumeroPezzi
                                            }" onchange="{
                                                        setNumeroPezzi
                                                    }">
                                    <div class="margin">
                                        <table id="tbl_necessita" if="{ componente && componentiPadre.length > 0 }" class="table table-condensed">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>Codice</th>
                                                    <th>Descrizione</th>
                                                    <th>Quantit&agrave; cad.</th>
                                                    <th>Quantit&agrave; necessaria</th>
                                                    <th>Giacenze</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr each="{ c in componentiPadre }" data-componente="{ c.id }" data-figli="{ writefigli(c) }" class="{ hasGiacenza(c) } parent">
                                                    <td if="{ c.get('componenti').length > 0 }" onclick="{
                                                                goDeep.bind(this, c.id)
                                                            }"><i class="fas fa-caret-right"></i></td>
                                                    <td if="{ c.get('componenti').length == 0 }"></td>
                                                    <td>{ c.get('codice') }</td>
                                                    <td>{ c.get('descrizione') }</td>
                                                    <td>{ parseInt(c.quantita) > 0 ? c.quantita : '' }</td>
                                                    <td>{ parseInt(c.quantita) > 0 ? (parseInt(c.quantita) * numero_pezzi) : '' }</td>
                                                    <td>
                                                        <div each="{ g in c.get('giacenze') }" class="{ (magazzino && g.id == magazzino.id) ? 'selected' : '' }" data-id="{ g.id }" data-magazzino="{ magazzino ? magazzino.id : '' }">
                                                            { g.descrizione }: <span class="text-{ g.giacenza >= (parseInt(c.quantita) * numero_pezzi) ? 'success' : 'danger' }">{ g.giacenza }</span>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>      
                                    </div>
                                </div>
                            </div>
                            <textarea class="form-control" rows="3" id="note" placeholder="Note" name="note"></textarea>
                        </div>
                        <div class="box-footer">
                            <a if="{ opts.id_object }" role="button" class="btn btn-sm btn-default btn-flat" href="/inserisci-ordine?id_object={ opts.id_object }"><i class="fas fa-file-import"></i> Torna all'ordine</a>
                            <div class="pull-right">
                                <button onclick="{
                                            selezionebottone.bind(this, 'assemblaggio')
                                        }" disabled="{ !componente }" type="submit" class="btn btn-sm btn-primary btn-flat"><i class='fas fa-save'></i> Effettua la lavorazione / assemblaggio</button>
                                <button onclick="{
                                            selezionebottone.bind(this, 'assemblaggiospostamento')
                                        }" disabled="{ !componente || !magazzino || magazzino.get('bassocontinuo') }" type="submit" class="btn btn-sm btn-primary btn-flat"><i class='fas fa-save'></i> Effettua la lavorazione / assemblaggio e sposta su Bassocontinuo</button>
                            </div>        
                        </div>
                    </form>
                </div>
                <div if="{ azione == 'disassemblaggio' }" 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-magic fa-stack-1x"></i>
                            </span>
                        </div>
                        <h3 class="box-title">Disassembla un componente</h3>
                        <p>Seleziona il componente da smontare</p>
                    </div>
                    <form id="form_operazione" class="form-horizontal" onsubmit="{
                                operazione
                            }">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="componente" class="col-sm-2 control-label">Assemblato:</label>
                                <div class="col-sm-10">
                                    <select id="componente" class="form-control select2">
                                        <option></option>
                                        <option each="{ c in componenti }" value="{ c.id }">{ c.get('codice') } - { c.get('descrizione') }</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="magazzino" class="col-sm-2 control-label">Luogo del disassemblaggio:</label>
                                <div class="col-sm-10">
                                    <select id="magazzino" class="form-control select2" required>
                                        <option></option>
                                        <option each="{ f in magazzinigiacenze }" value="{ f.id }" if="{ f.giacenza > 0 }"><strong>{ f.descrizione }</strong>: { f.giacenza }</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="delta" class="col-sm-2 control-label">Numero pezzi:</label>
                                <div class="col-sm-10">
                                    <input class="form-control" type="number" placeholder="0" title="Numero pezzi" name="delta" min="1" required onkeyup="{
                                                setNumeroPezzi
                                            }" onchange="{
                                                        setNumeroPezzi
                                                    }">
                                </div>
                            </div>
                            <textarea class="form-control" rows="3" id="note" placeholder="Note" name="note"></textarea>
                        </div>
                        <div class="box-footer">
                            <!--<a if="{ opts.id_object }" role="button" class="btn btn-sm btn-default btn-flat" href="/inserisci-ordine?id_object={ opts.id_object }"><i class="fas fa-file-import"></i> Torna all'ordine</a>-->
                            <button disabled="{ !componente }" type="submit" class="btn btn-sm btn-primary btn-flat pull-right"><i class='fas fa-save'></i> Effettua il disassemblaggio</button>
                        </div>
                    </form>
                </div>
                <div if="{ (azione == 'carico' || azione == 'movimentazione' || azione == 'assemblaggio' || azione == 'disassemblaggio') && componente }" 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-th-list fa-stack-1x"></i>
                            </span>
                        </div>
                        <h3 class="box-title">{ componente.get('codice') } - { componente.get('descrizione') }</h3>
                        <p>Elenco delle movimentazioni per il componente selezionato</p>
                    </div>
                    <div class="box-body">
                        <div if="{ componente && componente.get('giacenze') && componente.get('giacenze').length > 0 }" class="totali">
                            <h4 class="text-red">Totali a magazzino</h4>
                            <div each="{ g in componente.get('giacenze') }" class="totale">
                                <strong>{ g.descrizione }</strong>: { g.giacenza } pezzi
                            </div>
                        </div>
                        <div class="no-padding">
                            <table class="table table-condensed">
                                <tbody>
                                    <tr>
                                        <th style="width:20%">Data</th>
                                        <th style="width:10%">Delta</th>
                                        <th style="width:20%">Magazzino</th>
                                        <th style="width:10%">Operazione</th>
                                        <th style="width:30%">Note</th>
                                        <th style="width:10%"></th>
                                    </tr>
                                    <tr each="{ g in giacenze }">
                                        <td>{ moment(g.get('createdAt')).format('DD/MM/YYYY HH:mm:ss') }</td>
                                        <td><strong if="{ g.get('delta') }"><span class="text-{ g.get('delta') >= 0 ? 'success' : 'danger' }">{ g.get('delta') >= 0  ? '+' : '' }{ g.get('delta') }</span></strong></td>
                                        <td>{ g.get('magazzino') ? g.get('magazzino').get('descrizione') : '' }</td>
                                        <td>{ g.get('operazione') ? g.get('operazione').toUpperCase() : '' }</td>
                                        <td>{ g.get('note') }</td>
                                        <td class="text-right">
                                            <div class="btn-group">
                                                <a title="Elimina" class="btn btn-flat btn-sm btn-danger" onclick="{
                                                            eliminaGiacenza.bind(this, g.id)
                                                        }"><i class="fas fa-trash"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>  
        </div>
    </section>

    <style>
        .totali {
            margin-bottom: 30px;
        }
        .totali h4,
        .selected {
            font-weight: bold;
        }
        .totale {
            padding-bottom: 10px;
        }
        [data-action='assemblaggio'], [data-action='assemblaggiospostamento'] {
            margin-left: 3px;
            margin-right: 3px;
        }
    </style>

    <script>
        var tag = this;
        tag.azione = null;
        tag.bottone = null;
        tag.table = null;
        tag.componente = null;
        tag.componenti = [];
        tag.componentiPadre = [];
        tag.magazzino = null;
        tag.magazzini = [];
        tag.magazzinigiacenze = [];
        tag.bassocontinuo = null;
        tag.giacenze = [];
        tag.giacenza_max = 0;
        tag.numero_pezzi = 0;
        tag.righe = [];

        tag.on('mount', function () {
            RiotBus.getInstance().on('componente::response::carico', tag.componenteResponse);
            RiotBus.getInstance().on('componente::response::movimentazione', tag.componenteResponse);
            RiotBus.getInstance().on('componente::response::assemblaggio', tag.componenteResponse);
            RiotBus.getInstance().on('componente::response::disassemblaggio', tag.componenteResponse);
            RiotBus.getInstance().on('componente::found::list', tag.componentiFound);
            RiotBus.getInstance().on('componente::found', tag.componenteFound);
            RiotBus.getInstance().on('magazzino::response', tag.magazzinoResponse);
            RiotBus.getInstance().on('giacenza::response', tag.giacenzaResponse);
            RiotBus.getInstance().on('giacenza::added', tag.giacenzaSaved);
            RiotBus.getInstance().on('giacenza::transformed', tag.giacenzaTransformed);
            RiotBus.getInstance().on('giacenza::deleted', tag.giacenzaDeleted);
            RiotBus.getInstance().on('rigaordinefornitore::found', tag.rigaordineFound);
            RiotBus.getInstance().trigger('magazzino::request', opts.id_riga);
            RiotBus.getInstance().trigger('rigaordinefornitore::search', true);
            var $azione = $("#azione");
            $azione.select2({
                placeholder: "Seleziona l'operazione..."
            });
            if (opts.azione) {
                $azione.val(opts.azione).trigger("change");
                tag.seleziona();
            }

            $('body').on('click', '#tbl_necessita .deeper', function () {
                var id_componente = $(this).data('id');
                tag.goDeep(id_componente);
            });
        });

        tag.on('unmount', function () {
            RiotBus.getInstance().off('componente::response::carico', tag.componenteResponse);
            RiotBus.getInstance().off('componente::response::movimentazione', tag.componenteResponse);
            RiotBus.getInstance().off('componente::response::assemblaggio', tag.componenteResponse);
            RiotBus.getInstance().off('componente::response::disassemblaggio', tag.componenteResponse);
            RiotBus.getInstance().off('componente::found::list', tag.componentiFound);
            RiotBus.getInstance().off('componente::found', tag.componenteFound);
            RiotBus.getInstance().off('magazzino::response', tag.magazzinoResponse);
            RiotBus.getInstance().off('giacenza::response', tag.giacenzaResponse);
            RiotBus.getInstance().off('giacenza::added', tag.giacenzaSaved);
            RiotBus.getInstance().off('giacenza::transformed', tag.giacenzaTransformed);
            RiotBus.getInstance().off('giacenza::deleted', tag.giacenzaDeleted);
            RiotBus.getInstance().off('rigaordinefornitore::found', tag.rigaordineFound);
        });

        tag.seleziona = function (e) {
            if (e) {
                e.preventDefault();
            }
            var azione = $("#azione").val();
            if (azione !== tag.azione) {
                tag.azione = azione;
                tag.componente = null;
                tag.update();
                let $magazzino = $("#magazzino");
                let $delta = $("[name='delta']")
                switch (tag.azione) {
                    case "carico":
                        RiotBus.getInstance().trigger('componente::request', tag.azione);
                        $magazzino.select2({
                            placeholder: "Seleziona il magazzino..."
                        });
                        $("#riga").select2({
                            placeholder: "Seleziona l'ordine...",
                            allowClear: true
                        }).on('select2:select', function (e) {
                            var id = e.target.value;
                            if (id) {
                                for (var i = 0; i < tag.righe.length; i++) {
                                    if (tag.righe[i].id === id) {
                                        let m = tag.righe[i].get("ordine").get("magazzino");
                                        if (m) {
                                            $magazzino.val(m.id);
                                        } else {
                                            $magazzino.val(tag.bassocontinuo.id);
                                        }
                                        $magazzino.trigger("change");
                                        $magazzino.attr("disabled", "disabled");
                                        $delta.attr("min", 0);
                                        $delta.attr("max", tag.righe[i].get("quantitaMancante"));
                                        break;
                                    }
                                }
                            } else {
                                $magazzino.val("");
                                $magazzino.trigger("change");
                                $magazzino.removeAttr("disabled");
                                $delta.removeAttr("min");
                                $delta.removeAttr("max");
                            }
                        }).on('select2:unselect', function (e) {
                            $magazzino.val("");
                            $magazzino.trigger("change");
                            $magazzino.removeAttr("disabled");
                            $delta.removeAttr("min");
                            $delta.removeAttr("max");
                        });
                        break;
                    case "movimentazione":
                        RiotBus.getInstance().trigger('componente::request', tag.azione);
                        $("#magazzino_da").select2({
                            placeholder: "Seleziona il magazzino di partenza..."
                        }).on('select2:select', function (e) {
                            var id = e.target.value;
                            for (var i = 0; i < tag.componente.get("giacenze").length; i++) {
                                if (tag.componente.get("giacenze")[i].id === id) {
                                    tag.giacenza_max = tag.componente.get("giacenze")[i].giacenza;
                                    tag.update();
                                    break;
                                }
                            }
                        });
                        $("#magazzino_a").select2({
                            placeholder: "Seleziona il magazzino di arrivo..."
                        });
                        break;
                    case "assemblaggio":
                        RiotBus.getInstance().trigger('componente::request', tag.azione);
                        $("#riga").select2({
                            placeholder: "Seleziona l'ordine...",
                            allowClear: true
                        }).on('select2:select', function (e) {
                            var id = e.target.value;
                            if (id) {
                                for (var i = 0; i < tag.righe.length; i++) {
                                    if (tag.righe[i].id === id) {
                                        let fornitore = tag.righe[i].get("ordine").get("fornitore");
                                        let m = null;
                                        for (let j = 0; j < tag.magazzini.length; j++) {
                                            m = tag.magazzini[j];
                                            if (fornitore.id === m.get("fornitore").id) {
                                                break;
                                            } else {
                                                m = null;
                                            }
                                        }
                                        if (m) {
                                            $magazzino.val(m.id);
                                            tag.magazzino = m;
                                            tag.update();
                                        }
                                        $magazzino.trigger("change");
                                        $magazzino.attr("disabled", "disabled");
                                        $delta.attr("min", 0);
                                        $delta.attr("max", tag.righe[i].get("quantitaMancante"));
                                        break;
                                    }
                                }
                            } else {
                                $magazzino.val("");
                                $magazzino.trigger("change");
                                $magazzino.removeAttr("disabled");
                                $delta.removeAttr("min");
                                $delta.removeAttr("max");
                            }
                        }).on('select2:unselect', function (e) {
                            $magazzino.val("");
                            $magazzino.trigger("change");
                            $magazzino.removeAttr("disabled");
                            $delta.removeAttr("min");
                            $delta.removeAttr("max");
                        });

                        $magazzino.select2({
                            placeholder: "Seleziona il magazzino..."
                        }).on('select2:select', function (e) {
                            var id = e.target.value;
                            for (var i = 0; i < tag.magazzini.length; i++) {
                                if (tag.magazzini[i].id === id) {
                                    tag.magazzino = tag.magazzini[i];
                                    tag.update();
                                    break;
                                }
                            }
                        });
                        break;
                    case "disassemblaggio":
                        RiotBus.getInstance().trigger('componente::request', tag.azione);
                        break;
                }
            }
        };

        tag.componenteFound = function (c) {
            tag.componenti = [];
            for (let i = 0; i < tag.componenti.length; i++) {
                if (tag.componenti[i].id === c.id) {
                    tag.componenti[i] = c;
                    tag.update();
                    $("#componente").val(c.id).trigger("change");
                }
            }
        };

        tag.rigaordineFound = function (results) {
            tag.righe = results;
            tag.update();
        };

        tag.goDeep = function (id_componente) {
            var $tr = $('#tbl_necessita tr[data-componente="' + id_componente + '"].parent');
            var figli = $tr.data("figli");
            var $i = $tr.find("i");
            if ($i.hasClass("fa-caret-down")) {
                $('#tbl_necessita [data-componente="' + id_componente + '"].child').fadeOut('normal', function () {
                    $(this).remove();
                });
                $i.removeClass("fa-caret-down").addClass("fa-caret-right");
            } else {
                RiotBus.getInstance().trigger('componente::get::list', figli.split(","), id_componente);
            }
        };

        function format(componenti) {
            var html = "" +
                    "<table class='table table-condensed'>" +
                    "<thead>" +
                    "<tr>" +
                    "<th style='width:10%'></th>" +
                    "<th style='width:20%'>Codice</th>" +
                    "<th style='width:30%'>Descrizione</th>" +
                    "<th style='width:40%'>Giacenze</th>" +
                    "</tr>" +
                    "</thead>" +
                    "<tbody>";
            for (var i = 0; i < componenti.length; i++) {
                var c = componenti[i];
                var figli = tag.writefigli(c);
                html += "<tr data-componente='" + c.id + "' data-figli='" + figli + "' class='parent'>";
                if (c.get('componenti') && c.get('componenti').length > 0) {
                    html += "<td class='deeper' data-id='" + c.id + "'><i class='fas fa-caret-right'></i></td>";
                } else {
                    html += "<td></td>";
                }
                html += "<td>" + c.get('codice') + "</td>";
                html += "<td>" + c.get('descrizione') + "</td>";
                html += "<td>";
                if (c.get('giacenze')) {
                    for (var j = 0; j < c.get('giacenze').length; j++) {
                        var g = c.get('giacenze')[j];
                        html += "<div data-id='" + g.id + "'>";
                        html += g.descrizione + ": <span class='text-info'>" + g.giacenza + "</span>";
                        html += "</div>";
                    }
                }
                html += "</td>";
                html += "</tr>";
            }
            html += "</tbody></table>";
            return html;
        }

        tag.reset = function () {
            tag.azione = null;
            tag.componente = null;
            tag.magazzino = null;
            tag.giacenza_max = 0;
            tag.numero_pezzi = 0;
            tag.update();
            $("#azione").val("").trigger("change");
        };

        tag.componenteResponse = function (results) {
            switch (tag.azione) {
                case "carico":
                case "movimentazione":
                case "assemblaggio":
                    tag.componenti = results;
                    tag.update();
                    $("#componente").select2({
                        placeholder: "Seleziona il componente..."
                    }).on('select2:select', function (e) {
                        tag.componente = null;
                        tag.update();
                        var id = e.target.value;
                        for (var i = 0; i < tag.componenti.length; i++) {
                            if (tag.componenti[i].id === id) {
                                tag.componente = tag.componenti[i];
                                if (tag.table) {
                                    tag.table.clear().draw();
                                }
                                switch (tag.azione) {
                                    case "assemblaggio":
                                        var ids = [];
                                        var componenti = tag.componente.get("componenti");
                                        for (var j = 0; j < componenti.length; j++) {
                                            ids.push(componenti[j].figlio);
                                        }
                                        RiotBus.getInstance().trigger('componente::get::list', ids);
                                        break;
                                }
                                RiotBus.getInstance().trigger('giacenza::request', id);
                                break;
                            }
                        }
                        tag.update();
                    });
                    break;
                case "disassemblaggio":
                    for (var i = 0; i < results.length; i++) {
                        var c = results[i];
                        var g = c.get("giacenze");
                        if (g && Array.isArray(g) && g.length > 0) {
                            var toAdd = false;
                            for (var j = 0; j < g.length; j++) {
                                if (g[j].giacenza > 0 && g[j].riga_id === "") {
                                    toAdd = true;
                                    break;
                                }
                            }
                            if (toAdd) {
                                tag.componenti.push(c);
                            }
                        }
                    }
                    tag.update();
                    $("#componente").select2({
                        placeholder: "Seleziona il componente..."
                    }).on('select2:select', function (e) {
                        var id = e.target.value;
                        for (let i = 0; i < tag.componenti.length; i++) {
                            if (tag.componenti[i].id === id) {
                                tag.componente = tag.componenti[i];
                                RiotBus.getInstance().trigger('giacenza::request', tag.componente.id);
                                let giacenze = tag.componente.get("giacenze");
                                tag.magazzinigiacenze = [];
                                for (let j = 0; j < giacenze.length; j++) {
                                    let g = giacenze[j];
                                    if (g.giacenza > 0 && g.riga_id === "") {
                                        tag.magazzinigiacenze.push(g);
                                    }
                                }
                                tag.update();
                                $("#magazzino").select2({
                                    placeholder: "Seleziona il magazzino..."
                                });
                                break;
                            }
                        }
                        tag.update();
                    });
                    break;
            }
            if (opts.id_componente) {
                $("#componente").val(opts.id_componente).trigger("change").trigger("select2:select");
            }
        };

        tag.magazzinoResponse = function (results) {
            tag.magazzini = results;
            for (let i = 0; i < tag.magazzini.length; i++) {
                if (tag.magazzini[i].get("bassocontinuo")) {
                    tag.bassocontinuo = tag.magazzini[i];
                    break;
                }
            }
            tag.update();
        };

        tag.giacenzaResponse = function (results) {
            tag.giacenze = results;
            tag.update();
        };

        tag.operazione = function (e) {
            e.preventDefault();
            var $form = $(e.target);
            $form.block({message: null});
            let delta = $form.find("[name='delta']").val();
            const id_riga = $("#riga").val();
            if (delta) {
                delta = parseInt(delta);
                let note = $form.find("[name='note']").val();
                let id_magazzino = null;
                let hasGiacenzaBoolean = true;
                switch (tag.azione) {
                    case "carico":
                        id_magazzino = $("#magazzino").val();
                        var data = {
                            id_riga: id_riga,
                            id_componente: tag.componente.id,
                            id_magazzino: id_magazzino,
                            delta: delta,
                            note: note,
                            operazione: tag.azione
                        };
                        RiotBus.getInstance().trigger('giacenza::add', data);
                        break;
                    case "movimentazione":
                        let magazzino_da = $("#magazzino_da").val();
                        let magazzino_a = $("#magazzino_a").val();
                        if (magazzino_da && magazzino_a) {
                            let data_da = {
                                id_componente: tag.componente.id,
                                id_magazzino: magazzino_da,
                                delta: -(delta),
                                note: note,
                                operazione: tag.azione
                            };
                            RiotBus.getInstance().trigger('giacenza::add', data_da);
                            var data_a = {
                                id_componente: tag.componente.id,
                                id_magazzino: magazzino_a,
                                delta: delta,
                                note: note,
                                operazione: tag.azione
                            };
                            RiotBus.getInstance().trigger('giacenza::add', data_a);
                        } else {
                            alert("Inserisci i magazzini");
                        }

                        break;
                    case "assemblaggio":
                        hasGiacenzaBoolean = true;
                        id_magazzino = $("#magazzino").val();
                        for (var i = 0; i < tag.componente.get("componenti").length; i++) {
                            var c = tag.componente.get("componenti")[i];
                            if (["componente", "finito"].includes(c.tipo)) {
                                var qta = c.quantita * delta;
                                for (var k = 0; k < tag.componentiPadre.length; k++) {
                                    var cp = tag.componentiPadre[k];
                                    var hasGiacenzaComponente = false;
                                    if (cp.id === c.figlio) {
                                        var giacenze = cp.get("giacenze") ? cp.get("giacenze") : [];
                                        for (var j = 0; j < giacenze.length; j++) {
                                            if (giacenze[j].id === id_magazzino) {
                                                hasGiacenzaComponente = qta <= giacenze[j].giacenza;
                                                break;
                                            }
                                        }
                                        if (!hasGiacenzaComponente) {
                                            hasGiacenzaBoolean = false;
                                            break;
                                        }
                                    }
                                }
                            }
                            if (!hasGiacenzaBoolean) {
                                break;
                            }
                        }
                        if (hasGiacenzaBoolean) {
                            let data = {
                                id_riga: id_riga,
                                id_componente: tag.componente.id,
                                id_magazzino: id_magazzino,
                                delta: delta,
                                note: note,
                                operazione: tag.azione
                            };
                            switch (tag.bottone) {
                                case "assemblaggio":
                                    RiotBus.getInstance().trigger('giacenza::transform', data);
                                    break;
                                case "assemblaggiospostamento":
                                    RiotBus.getInstance().trigger('giacenza::transform::bassocontinuo', data);
                                    break;
                            }
                        } else {
                            alert("Giacenze non sufficienti");
                        }
                        break;
                    case "disassemblaggio":
                        hasGiacenzaBoolean = true;
                        id_magazzino = $("#magazzino").val();
                        var disponibilita = 0;
                        for (var i = 0; i < tag.magazzinigiacenze.length; i++) {
                            if (tag.magazzinigiacenze[i].id === id_magazzino) {
                                disponibilita = tag.magazzinigiacenze[i].giacenza;
                                break;
                            }
                        }
                        if (disponibilita >= tag.numero_pezzi) {
                            var data = {
                                id_componente: tag.componente.id,
                                id_magazzino: id_magazzino,
                                delta: delta,
                                note: note
                            };
                            RiotBus.getInstance().trigger('giacenza::transform::back', data);
                        } else {
                            alert("Giacenze non sufficienti");
                        }
                        break;
                }
            } else {
                alert("Inserisci il delta");
            }
        };

        tag.eliminaGiacenza = function (id) {
            RiotBus.getInstance().trigger('giacenza::delete', id);
        };

        tag.giacenzaSaved = function (g) {
            $('#form_operazione').unblock();
            $("[name='delta']").val("");
            $("[name='note']").val("");
            var $magazzino = $(".magazzino");
            if ($magazzino.length > 0) {
                $magazzino.each(function () {
                    $(this).val("").removeAttr("disabled").trigger("change");
                });
            }
            tag.numero_pezzi = 0;
            tag.update();
            RiotBus.getInstance().trigger('componente::get', tag.componente.id);
            RiotBus.getInstance().trigger('componente::request', tag.azione);
            RiotBus.getInstance().trigger('giacenza::request', tag.componente.id);
            RiotBus.getInstance().trigger('rigaordinefornitore::search', true);
        };

        tag.giacenzaTransformed = function (g) {
            $('#form_operazione').unblock();
            $("[name='delta']").val("");
            $("[name='note']").val("");
            $("#magazzino").val("").removeAttr("disabled").trigger("change");
            tag.numero_pezzi = 0;
            tag.update();
            RiotBus.getInstance().trigger('giacenza::request', tag.componente.id);
            var ids = [];
            var componenti = tag.componente.get("componenti");
            for (var j = 0; j < componenti.length; j++) {
                ids.push(componenti[j].figlio);
            }
            RiotBus.getInstance().trigger('componente::get::list', ids);
            RiotBus.getInstance().trigger('componente::request', tag.azione);
            RiotBus.getInstance().trigger('rigaordinefornitore::search', true);
        };

        tag.giacenzaDeleted = function (g) {
            var id = g.get("componente").id;
            RiotBus.getInstance().trigger('giacenza::request', id);
            /*
             var giacenze = tag.componente.get("giacenze") ? tag.componente.get("giacenze") : [];
             for (var i = 0; i < giacenze.length; i++) {
             if (giacenze[i].id === g.get("fornitore").id) {
             giacenze[i].giacenza -= g.get("delta");
             break;
             }
             }
             tag.componente.set("giacenze", giacenze);
             tag.update();
             */
        };

        tag.componentiFound = function (componenti, id_componente) {
            if (id_componente) {
                var $tr = $('#tbl_necessita tr[data-componente="' + id_componente + '"].parent');
                var colspan = $tr.children("td").length;
                var $child = $("<tr data-componente='" + id_componente + "' class='child'><td class='colspan' colspan='" + colspan + "'>" + format(componenti) + "</td></tr>");
                $tr.after($child);
                $tr.find("i").first().removeClass("fa-caret-right").addClass("fa-caret-down");
                //$tr.addClass('bg-info');
            } else {
                for (var i = 0; i < componenti.length; i++) {
                    for (var j = 0; i < tag.componente.get("componenti").length; j++) {
                        var c = tag.componente.get("componenti")[j];
                        if (componenti[i].id === c.figlio) {
                            componenti[i].quantita = c.quantita;
                            break;
                        }
                    }
                }
                tag.componentiPadre = componenti;
                tag.update();
            }
        };

        tag.setNumeroPezzi = function (e) {
            tag.numero_pezzi = parseInt(e.target.value);
            tag.update();
        };

        tag.hasGiacenza = function (c) {
            var result = "";
            if (!tag.numero_pezzi || tag.numero_pezzi === 0) {
                result = "bg-warning";
            } else if (c.quantita > 0) {
                result = "bg-danger";
                if (c.get("giacenze") && tag.magazzino) {
                    for (var i = 0; i < c.get("giacenze").length; i++) {
                        var g = c.get("giacenze")[i];
                        if (g.id === tag.magazzino.id) {
                            if ((tag.numero_pezzi * c.quantita) <= g.giacenza) {
                                result = "bg-success";
                            }
                            break;
                        }
                    }
                }
            } else {
                result = "bg-success";
            }
            return result;
        };

        tag.writefigli = function (c) {
            var result = "";
            if (c.get("componenti") && Array.isArray(c.get("componenti"))) {
                for (var i = 0; i < c.get("componenti").length; i++) {
                    if (c.get("componenti")[i].tipo !== "lavorazione") {
                        result += c.get("componenti")[i].figlio + ",";
                    }
                }
                if (result.length > 0) {
                    result = result.slice(0, -1);
                }
            }
            return result;
        };

        tag.selezionebottone = function (a) {
            tag.bottone = a;
        };

    </script>
</inserisci-magazzino>
