Render tournament bracket for next round

Hi there, I would like to ask ideas on approaches on how to render tournament bracket for next round. For now I can render the first round but I am not sure how to render the next round bracket. Current output that I get https://i.imgur.com/X5iL6sw.png . The output that I wanted is something like this https://i.imgur.com/Zi3ytgl.png . For now the only approach I can think of hardcode the next round bracket which basically not an ideal approach.

(brackets controller@show)

if($bracket->type == "Single Elimination")
        {
            $numOfParticipant = $bracket->size;
            $rounds = ceil(log($numOfParticipant)/log(2));
            $bracketSize = pow(2, $rounds);
            $requiredByes = $bracketSize - $numOfParticipant;

            if($numOfParticipant<2)
            {
                return [];
            }

            $matches = array(array(1,2));

            for($round=1; $round<$rounds; $round++)
            {
                $roundMatches = [];
                $sum = pow(2, $round + 1) + 1;

                foreach($matches as $match)
                {
                    $teamA = $this->changeIntoBye($match[0], $numOfParticipant);
                    $teamB = $this->changeIntoBye($sum - $match[0], $numOfParticipant);
                    $roundMatches[] = array($teamA, $teamB);
                    $teamA = $this->changeIntoBye($sum - $match[1], $numOfParticipant);
                    $teamB = $this->changeIntoBye($match[1], $numOfParticipant);
                    $roundMatches[] = array($teamA, $teamB);
                }

                $matches = $roundMatches;
            }

public function changeIntoBye($seed,  $numOfParticipant)
    {
        return $seed <= $numOfParticipant ?  $seed : null;
    }

(brackets.show)

<div class="round r-of-2-se-4">
    @foreach($matches as $match)
        <div class="bracket-game">
                <div class="player top">
                 &nbsp;&nbsp;
                 <div class="score">
                   0
                 </div>
            </div>
            <div class="player bot">
                 &nbsp;&nbsp;
                 <div class="score">
                  0
                 </div>
             </div>
         </div>
     @endforeach
</div>

(dd output for $matches)

array:2 [▼
  0 => array:2 [▼
    0 => 1
    1 => 4
  ]
  1 => array:2 [▼
    0 => 3
    1 => 2
  ]
]

(full example hardcode bracket for numOfParticipant=4)

<div class="round r-of-2-se-4">
                                    <div class="bracket-game">
                                        <div class="player top">
                                            &nbsp;&nbsp;
                                            <div class="score">
                                                0
                                            </div>
                                        </div>
                                        <div class="player bot">
                                            &nbsp;&nbsp;
                                            <div class="score">
                                                0
                                            </div>
                                        </div>
                                    </div>
                                    <div class="bracket-game">
                                        <div class="player top">
                                            &nbsp;&nbsp;
                                            <div class="score">
                                                0
                                            </div>
                                        </div>
                                        <div class="player bot">
                                            &nbsp;&nbsp;
                                            <div class="score">
                                                0
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="connectors r-of-1-se-4">
                                    <div class="top-line"></div>
                                    <div class="clear"></div>
                                    <div class="bottom-line"></div>
                                    <div class="clear"></div>
                                    <div class="vert-line"></div>
                                    <div class="clear"></div>
                                    <div class="next-line"></div>
                                    <div class="clear"></div>
                                </div>

                                <div class="round r-of-1-se-4">
                                    <div class="bracket-game">
                                    <div class="player top">
                                        &nbsp;&nbsp;
                                        <div class="score">
                                            0
                                        </div>
                                    </div>
                                    <div class="player bot">
                                        &nbsp;&nbsp;
                                        <div class="score">
                                            0
                                        </div>
                                    </div>
                                </div>