laravel 9 (how can i make this code better..more compact) - php

Question

I have 3 lists from 3 different stages of a client. I want to list all the clients, but separated by the stages of those clients.
<div class="container">
<!-- Title and Top Buttons Start -->
<div class="page-title-container">
<div class="row">
<!-- Title Start -->
<div class="col-12 col-md-7">
<!-- #include('_layout.breadcrumb',['breadcrumbs'=>$breadcrumbs]) -->
</div>
<!-- Title End -->
</div>
</div>
<!-- Title and Top Buttons End -->
<!-- Content Start -->
<div>
<div class="row">
<!-- Buttons Start -->
<div class="col-xl-6 mb-5">
<section class="scroll-section" id="buttons">
<!-- Lista Prospecção -->
<div class="d-flex justify-content-between">
<h2 class="small-title">Prospecção</h2>
</div>
<div class="scroll-out">
<div class="scroll-by-count" data-count="5">
#foreach ($clientes->where('etapa', '1') as $cliente)
<div class="card mb-2">
<div class="row g-0 sh-14 sh-md-10">
<div class="col">
<div class="card-body pt-0 pb-0 h-700">
<div class="row g-0 h-100 align-content-center">
<div class="col-12 col-md-7 d-flex flex-column mb-2 mb-md-0">
<div>{{$cliente->nome}} </div>
<div class="text-small text-muted text-truncate">{{$cliente->contato}}</div>
<div class="text-small text-muted text-truncate">{{$cliente->mes}}/{{$cliente->ano}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
<!-- Fim Lista Prospecção -->
<br />
<!-- Lista Necessidade do Cliente -->
<div class="d-flex justify-content-between">
<h2 class="small-title">Necessidade do Cliente</h2>
</div>
<div class="scroll-out">
<div class="scroll-by-count" data-count="5">
#foreach ($clientes->where('etapa', '2') as $cliente)
<div class="card mb-2">
<div class="row g-0 sh-14 sh-md-10">
<div class="col">
<div class="card-body pt-0 pb-0 h-700">
<div class="row g-0 h-100 align-content-center">
<div class="col-12 col-md-7 d-flex flex-column mb-2 mb-md-0">
<div>{{$cliente->nome}} </div>
<div class="text-small text-muted text-truncate">{{$cliente->contato}}</div>
<div class="text-small text-muted text-truncate">{{$cliente->mes}}/{{$cliente->ano}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
<!-- Fim Lista Necessidade do Cliente -->
<br />
<!-- Lista Marcou Consulta -->
<div class="d-flex justify-content-between">
<h2 class="small-title">Marcou Consulta</h2>
</div>
<div class="scroll-out">
<div class="scroll-by-count" data-count="5">
#foreach ($clientes->where('etapa', '3') as $cliente)
<div class="card mb-2">
<div class="row g-0 sh-14 sh-md-10">
<!-- <div class="col-auto h-100">
<img src="/img/product/small/product-2.webp" alt="alternate text" class="card-img card-img-horizontal sw-11" />
</div> -->
<div class="col">
<div class="card-body pt-0 pb-0 h-700">
<div class="row g-0 h-100 align-content-center">
<div class="col-12 col-md-7 d-flex flex-column mb-2 mb-md-0">
<div>{{$cliente->nome}} </div>
<div class="text-small text-muted text-truncate">{{$cliente->contato}}</div>
<div class="text-small text-muted text-truncate">{{$cliente->mes}}/{{$cliente->ano}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
<!-- Fim Lista Marcou Consulta -->
<br />
<!-- Lista Apresentou Proposta -->
<div class="d-flex justify-content-between">
<h2 class="small-title">Apresentou Proposta</h2>
</div>
<div class="scroll-out">
<div class="scroll-by-count" data-count="5">
#foreach ($clientes->where('etapa', '4') as $cliente)
<div class="card mb-2">
<div class="row g-0 sh-14 sh-md-10">
<!-- <div class="col-auto h-100">
<img src="/img/product/small/product-2.webp" alt="alternate text" class="card-img card-img-horizontal sw-11" />
</div> -->
<div class="col">
<div class="card-body pt-0 pb-0 h-700">
<div class="row g-0 h-100 align-content-center">
<div class="col-12 col-md-7 d-flex flex-column mb-2 mb-md-0">
<div>{{$cliente->nome}} </div>
<div class="text-small text-muted text-truncate">{{$cliente->contato}}</div>
<div class="text-small text-muted text-truncate">{{$cliente->mes}}/{{$cliente->ano}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
<!-- Fim Lista Apresentou Proposta -->
<br />
</section>
</div>
<!-- Buttons End -->
</div>
</div>
<!-- Content End -->
</div>
The code is working.
#foreach ($clientes->where('etapa', '1') as $cliente)
#endforeach
This is the main loop.
I have to make a foreach inside this foreach?
Showing each "etapa" (stage) that my client is?

Answer 1

<div class="container">
<!-- Title and Top Buttons Start -->
<div class="page-title-container">
<div class="row">
<!-- Title Start -->
<div class="col-12 col-md-7">
<!-- #include('_layout.breadcrumb',['breadcrumbs'=>$breadcrumbs]) -->
</div>
<!-- Title End -->
</div>
</div>
<!-- Title and Top Buttons End -->
<!-- Content Start -->
<div>
<div class="row">
<!-- Buttons Start -->
<div class="col-xl-6 mb-5">
<section class="scroll-section" id="buttons">
<!-- Listas -->
#php
$etapa = [
'1' => 'Prospecção',
'2' => 'Necessidade do Cliente',
'3' => 'Marcou Consulta',
'4' => 'Apresentou Proposta',
'5' => 'Negócio Fechado',
'6' => 'Negócio Perdido',
'7' => 'Oportunidades Futuras'
];
#endphp
#foreach ($etapa as $keyetapa => $e)
<div class="d-flex justify-content-between">
<h2 class="small-title">{{ $e }}</h2>
</div>
<div class="scroll-out">
<div class="scroll-by-count" data-count="5">
#foreach ($clientes->where('etapa', $keyetapa) as $cliente)
<div class="card mb-2">
<div class="row g-0 sh-14 sh-md-10">
<div class="col">
<div class="card-body pt-0 pb-0 h-700">
<div class="row g-0 h-100 align-content-center">
<div class="col-12 col-md-7 d-flex flex-column mb-2 mb-md-0">
<div>{{$cliente->nome}} </div>
<div class="text-small text-muted text-truncate">{{$cliente->contato}}</div>
<div class="text-small text-muted text-truncate">{{$cliente->mes}}/{{$cliente->ano}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
<br />
#endforeach
</section>
</div>
<!-- Buttons End -->
</div>
</div>
<!-- Content End -->
</div>