Help with query Please!!

Hello and thanks for reading my post.

I have a foreach which displays a list of categories on a page, then i have a cart on the same page however i need to interweave these so when a product is added to the cart it takes the place of the category name. I hope I'm making sense as sometimes i over/under explain things and don't actually say what i want to do.

Here's my Cart controller (excuse the name build it basically means cart)

<?php

namespace App\Http\Controllers;
use App\Cart;
use App\CartItem;
use Illuminate\Support\Facades\Auth;
use App\Component;
use App\Product;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Controllers\Controller;

class BuildController extends Controller
{

    public function __construct()
    {
        $this->middleware('auth');
    }

    public function addItem ($productId){

        $cart = Cart::where('user_id',Auth::user()->id)->first();

        if(!$cart){
            $cart           =  new Cart();
            $cart->user_id  =  Auth::user()->id;
            $cart->save();
        }

        $cartItem               = new Cartitem();
        $cartItem->product_id   = $productId;
        $cartItem->cart_id      = $cart->id;
        $cartItem->save();

        return redirect('/build');

    }

    public function showBuild(){
        $components = Component::all();
        $cart = Cart::where('user_id',Auth::user()->id)->first();

        if(!$cart){
            $cart           =  new Cart();
            $cart->user_id  =  Auth::user()->id;
            $cart->save();
        }

        $items              = $cart->cartItems;
        $total              =  0;
        foreach($items as $item){
            $total+=$item->product->total;
        }

        return view('builds.index', compact('items', 'total', 'components'));
    }

    public function removeItem($id){

        CartItem::destroy($id);
        return redirect('/build');
    }

}

Here's my view containing the foreach, as you can see currently my components (categories) are displayed at the top of the page, and my carts content is displayed at the bottom, this needs to be interweaved somehow

@extends('layouts.app')

@section('title', '| Edit Post')

@section('content')
  <section class="hero is-primary">
    <div class="hero-body">
      <div class="container">
        <h1 class="title">
          Select your Components
        </h1>
        <h2 class="subtitle">
          Primary subtitle
        </h2>
      </div>
    </div>
  </section>

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>Component</th>
        <th>Selection</th>
        <th>Base</th>
        <th>Promo</th>
        <th>Shipping</th>
        <th>Tax</th>
        <th>Price</th>
        <th>Where</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th>Total:</th>
        <th><strong>£{{$total}}</strong></th>
      </tr>
    </tfoot>
    <tbody>
      @foreach ($components as $component)
      <tr>
        <th>{{ $component->name }}</th>
        <td><a href="/components/{{ $component->lowerCaseName }}" class="button is-info is-small" role="button">Select {{ $component->name }}</a></td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      @endforeach
    </tbody>
  </table>
</div>

<div class="row">
    <div>
        <table class="table table-hover">
            <thead>
            <tr>
                <th>Product</th>
                <th>Category</th>
                <th class="text-center"></th>
                <th class="text-center">Total</th>
                <th> </th>
            </tr>
            </thead>
            <tbody>
            @foreach($items as $item)
                <tr>
                    <td>
                        <div class="media">
                            <a class="thumbnail pull-left" href="#"> <img class="media-object" src="{{$item->product->image}}" style="width: 100px; height: 72px;"> </a>
                            <div class="media-body">
                                <h4 class="media-heading"><a href="#">{{$item->product->name}}</a></h4>
                            </div>
                        </div></td>
                    <td class="col-sm-1 col-md-1" style="text-align: center">{{$item->product->component->name}}</td>
                    <td class="col-sm-1 col-md-1 text-center">fadsdas</td>
                    <td class="col-sm-1 col-md-1 text-center"><strong>${{$item->product->total}}</strong></td>
                    <td class="col-sm-1 col-md-1">
                        <a href="/removeItem/{{$item->id}}"> <button type="button" class="btn btn-danger">
                                <span class="fa fa-remove"></span> Remove
                            </button>
                        </a>
                    </td>
                </tr>
            @endforeach

            <tr>
                <td></td>
                <td>   </td>
                <td>   </td>
                <td><h3>Total</h3></td>
                <td class="text-right"><h3><strong>${{$total}}</strong></h3></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
@stop

Thanks for you're time and i appreciate any help! I'm kinda at the point where i know i need to adjust the query then on the view display a if statement something like if cart contains product->category->display item, if not display category name. However when it comes to writing the code it's far beyond my scope of intelligence.