<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="form-group">
                    <label for="almacenes_ubicacion">Almacenes</label>
                    <select id="almacenes" class="form-control" v-model="almacenProducto" @change="obtenerUbicaciones">
                        <option value="">SELECCIONAR UN ALMACEN</option>
                        <option v-for="row in almacenes_producto" :value="row.id">{{ row.descripcion }}</option>
                    </select>
                </div>
                <ul>
                    <li class="list-group-item">
                        <span class="encabezado fas fa-angle-right" @click="toggleTreeView"> ZONAS </span>
                        <ul class="ocultar-treeview">
                            <li v-for="(zona, index) in ubicaciones">
                                <div class="titulo">
                                    {{ zona.descripcion }} <i class="eliminar fa fa-save text-success" @click="guardarUbicacion(zona)"></i>
                                </div>
                                <ul>
                                    <li>
                                        <span class="encabezado fas fa-angle-right" @click="toggleTreeView"> PASILLOS </span>
                                        <ul class="ocultar-treeview">
                                            <li v-for="(pasillo, index) in zona.pasillos">
                                                <div class="titulo">
                                                    {{ pasillo.descripcion }} <i class="eliminar fa fa-save text-success" @click="guardarUbicacion(pasillo)"></i>
                                                </div>
                                                <ul>
                                                    <li>
                                                        <span class="encabezado fas fa-angle-right" @click="toggleTreeView"> ARMARIOS </span>
                                                        <ul class="ocultar-treeview">
                                                            <li v-for="(armario, index) in pasillo.armarios">
                                                                <div class="titulo">
                                                                    {{ armario.descripcion }} <i class="eliminar fa fa-save text-success" @click="guardarUbicacion(armario)"></i>
                                                                </div>
                                                                <ul>
                                                                    <li>
                                                                        <span class="encabezado fas fa-angle-right" @click="toggleTreeView"> SECCIONES </span>
                                                                        <ul class="ocultar-treeview">
                                                                            <li v-for="(seccion, index) in armario.secciones">
                                                                                <div class="titulo">
                                                                                    {{ seccion.descripcion }} <i class="eliminar fa fa-save text-success" @click="guardarUbicacion(seccion)"></i>
                                                                                </div>
                                                                                <ul>
                                                                                    <li>
                                                                                        <span class="encabezado fas fa-angle-right" @click="toggleTreeView"> CAJONES </span>
                                                                                        <ul class="ocultar-treeview">
                                                                                            <li v-for="(cajon, index) in seccion.cajones">
                                                                                                <div class="titulo">
                                                                                                    {{ cajon.descripcion }} <i class="eliminar fa fa-save text-success" @click="guardarUbicacion(cajon)"></i>
                                                                                                </div>
                                                                                            </li>
                                                                                        </ul>
                                                                                    </li>
                                                                                </ul>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="encabezado fas fa-angle-right" @click="toggleTreeView"> ARMARIOS </span>
                                        <ul class="ocultar-treeview">
                                            <li v-for="(armario, index) in zona.armarios">
                                                <div class="titulo">
                                                    {{ armario.descripcion }} <i class="eliminar fa fa-save text-success" @click="guardarUbicacion(armario)"></i>
                                                </div>
                                                <ul>
                                                    <li>
                                                        <span class="encabezado fas fa-angle-right" @click="toggleTreeView"> SECCIONES </span>
                                                        <ul class="ocultar-treeview">
                                                            <li v-for="(seccion, index) in armario.secciones">
                                                                <div class="titulo">
                                                                    {{ seccion.descripcion }} <i class="eliminar fa fa-save text-success" @click="guardarUbicacion(seccion)"></i>
                                                                </div>
                                                                <ul>
                                                                    <li>
                                                                        <span class="encabezado fas fa-angle-right" @click="toggleTreeView"> CAJONES </span>
                                                                        <ul class="ocultar-treeview">
                                                                            <li v-for="(cajon, index) in seccion.cajones">
                                                                                <div class="titulo">
                                                                                    {{ cajon.descripcion }} <i class="eliminar fa fa-save text-success" @click="guardarUbicacion(cajon)"></i>
                                                                                </div>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="encabezado fas fa-angle-right" @click="toggleTreeView"> SECCIONES </span>
                                        <ul class="ocultar-treeview">
                                            <li v-for="(seccion, index) in zona.secciones">
                                                <div class="titulo">
                                                    {{ seccion.descripcion }} <i class="eliminar fa fa-save text-success" @click="guardarUbicacion(seccion)"></i>
                                                </div>
                                                <ul>
                                                    <li>
                                                        <span class="encabezado fas fa-angle-right" @click="toggleTreeView"> CAJONES </span>
                                                        <ul class="ocultar-treeview">
                                                            <li v-for="(cajon, index) in seccion.cajones">
                                                                <div class="titulo">
                                                                    {{ cajon.descripcion }} <i class="eliminar fa fa-save text-success" @click="guardarUbicacion(cajon)"></i>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="encabezado fas fa-angle-right" @click="toggleTreeView"> CAJONES </span>
                                        <ul class="ocultar-treeview">
                                            <li v-for="(cajon, index) in zona.cajones">
                                                <div class="titulo">
                                                    {{ cajon.descripcion }} <i class="eliminar fa fa-save text-success" @click="guardarUbicacion(cajon)"></i>
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div>
                    <div class="card" v-for="row in ubicacionesProducto">
                        <div class="card-header">
                            <strong>Almacen:</strong> {{ row.almacen.descripcion }}
                        </div>
                        <div class="card-body">
                            <span v-for="row_dos in row.ubicacion">
                                -> <strong>{{ row_dos.tipo }}:</strong> {{ row_dos.descripcion }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>