Laravel parent-child data displaying in Bootstrap table in blade - php

Question

I have a simple Laravel project to show parent records in a table, with collapsible row(s) to show child records. I have a nice Bootstrap table, can join the parent and child tables in my controller and populate the table, but can't group the children under the one parent. I'm not sure if I built the passed dataset incorrectly in my controller, or if I'm missing some "Laravel way" to do this. It's an easy proposition, loop through the parents until one has a child, then loop through it's children, then resume looping parents, etc., but it's driving me insane. I can't find any direct example or reference to solve my issue, but this is a common requirement.
I need to know how to reference the child records to loop through them to populate the collapsed section. My attempts either result in a parent row for each individual child (the code shown) or a bunch of duplicated child items. If I could pass two datasets from my controller, one of parents and a separate of children, then I could in code build this, but I don't know how to do that in Laravel or if there's an easier way.
I did start with Laravel DataTables but to get detail child rows requires implementing handlebar templates in Laravel and I couldn't find a usable reference to do that, so decided to revert to from-scratch-code my own using a Bootstrap table. Than I got stuck.
Here's my controller (DataassetsController.php). The "investment-accounts" table contains parents (as do the other joined tables), and the "investment-line-items" table contains child records for the "investment-accounts".
class DataassetsController extends Controller
{
public function getUnion()
{
$money = DB::table('monetary_assets')
->select(['monetary_asset_name as name', 'monetary_asset_type as type', 'monetary_asset_value as value', DB::raw("NULL as item"), DB::raw("NULL as institution_id"), DB::raw("NULL as item_id")]);
$personal = DB::table('personal_property_assets')
->select(['personal_name as name', 'personal_type as type', 'personal_current_value as value', DB::raw("NULL as item"), DB::raw("NULL as institution_id"), DB::raw("NULL as item_id")]);
$investments = DB::table('investment_accounts')
->join('investment_line_items', 'investment_institution_name_id', '=', 'investment_accounts.id')
->select(['investment_institution_name as name', 'Investment_account_type as type', DB::raw("NULL as value"), 'investment_name as item', 'investment_institution_name_id as institution_id', 'investment_accounts.id as item_id' ]);
$union = DB::table('real_property_assets')
->select(['real_name as name', 'real_type as type', 'real_current_value as value', DB::raw("NULL as item"), DB::raw("NULL as institution_id"), DB::raw("NULL as item_id")])
->union($money)
->union($personal)
->union($investments)
->get();
return view('assets.allassets', ['user_assets' => $union]);
}
Here's my route:
Route::get('/dataassets', 'DataassetsController#getUnion');
Here's my blade (allassets.blade.php) code:
#extends('layouts.master')
<!-- Collapsible accordion rows in bootstrap -->
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading"><h3>All Assets</h3></div>
<div class="panel-body">
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr><th> </th>
<th>Asset Name</th>
<th>Type</th>
<th>Value</th>
</tr>
</thead>
<tbody>
#foreach ($user_assets as $user_asset) <!-- don't forget to add a variable to the loop to index ID's of subrow -->
<tr data-toggle="collapse" data-target="#demo{{$loop->index}}" class="accordion-toggle">
#isset($user_asset->item)
<td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td>
#else
<td></td>
#endisset
<td>{{$user_asset->name}}</td>
<td>{{$user_asset->type}}</td>
<td style="text-align:right">${{ number_format($user_asset->value,2)}}</td>
<?php $var = ($user_asset->name); ?>
</tr>
#isset($user_asset->item)
<tr>
<td colspan="12" class="hiddenRow"><div class="accordian-body collapse" id="demo{{$loop->index}}">
<table class="table table-striped">
<thead>
<th>Item</th>
<th>Value</th>
<th>Institution</th>
<th>Item</th>
<th>Edit</th>
</thead>
<tbody>
<tr>
<td>{{$user_asset->item}}</td>
<td> placeholder</td>
<td> {{$user_asset->institution_id}}</td>
<td> {{$user_asset->item_id}}</td>
<td><a href="#" class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-cog"></i></a></td></tr>
</tbody>
</table>
</div> </td>
</tr>
#endisset
#endforeach
</tbody>
</table>
</div>
</div>
</div>
<!-- end Bootstrap table -->
Here's a picture of what I get, with one of the children rows popped out:
Bootstrap table showing only one child at a time with multiple copies of parent
Here's a pic of the database tables in question:
The parent and child tables (other tables referenced above do not have children, only this one)
I'm using Laravel 5.5 & PHP7 on XAMPP
Any help or suggestions are very welcome.