$loop->even or $loop->odd doesn't working - laravel

Question

So, i have a timeline section that has a different html structure in first row and the other row that has a left side and right side view. the odd side would be on the left and the right side would be on the right. however when i using $loop->first, there is no error at all. but when i use $loop->even or $loop->odd it shows an error like:
Undefined property: stdClass::$even
or
Undefined property: stdClass::$odd
this is the blade view :
#if($loop->first)
<div class="row align-items-center how-it-works d-flex">
<div class="col-2 text-center bottom d-inline-flex justify-content-center align-items-center">
<div class="circle font-weight-bold">{!! $tl->id !!}</div>
</div>
<div class="col-6">
<h5>{!! $tl->company !!}</h5>
<p>{!! $tl->description !!}</p>
</div>
</div>
<!--path between 1-2-->
<div class="row timeline">
<div class="col-2">
<div class="corner top-right"></div>
</div>
<div class="col-8">
<hr/>
</div>
<div class="col-2">
<div class="corner left-bottom"></div>
</div>
</div>
#elseif($loop->even)
<!--second section-->
<div class="row align-items-center justify-content-end how-it-works d-flex">
<div class="col-6 text-right">
<h5>{!! $tl->company !!}</h5>
<p>{!! $tl->description !!}</p>
</div>
<div class="col-2 text-center full d-inline-flex justify-content-center align-items-center">
<div class="circle font-weight-bold">{!! $tl->id !!}</div>
</div>
</div>
<!--path between 2-3-->
<div class="row timeline">
<div class="col-2">
<div class="corner right-bottom"></div>
</div>
<div class="col-8">
<hr/>
</div>
<div class="col-2">
<div class="corner top-left"></div>
</div>
</div>
#elseif($loop->iteration % 2 != 0)
<div class="row align-items-center how-it-works d-flex">
<div class="col-2 text-center bottoms d-inline-flex justify-content-center align-items-center">
<div class="circle font-weight-bold">{!! $tl->id !!}</div>
</div>
<div class="col-6">
<h5>{!! $tl->company !!}</h5>
<p>{!! $tl->description !!}</p>
</div>
</div>
<!--path between 1-2-->
<div class="row timeline">
<div class="col-2">
<div class="corner top-right"></div>
</div>
<div class="col-8">
<hr/>
</div>
<div class="col-2">
<div class="corner left-bottom"></div>
</div>
</div>
#elseif($loop->last)
<div class="row align-items-center how-it-works d-flex">
<div class="col-2 text-center top d-inline-flex justify-content-center align-items-center">
<div class="circle font-weight-bold">{!! $tl->id !!}</div>
</div>
<div class="col-6">
<h5>{!! $tl->company !!}</h5>
<p>{!! $tl->description !!}</p>
</div>
</div>
#endif
#endforeach
This is the controller :
public function index()
{
$desc = Home::first();
$users = User::first();
$site = Site::first();
$timeline = Timeline::get();
$services = Services::get();
$port = Portfolio::get();
$cat = DB::Table("cat_port")->get();
$news = DB::table('news')->join('category', 'category.name', '=', 'news.category')->selectRaw('news.*, category.*, category.url as curl, news.created_at as created')->orderBy('created', 'DESC')->get()->take(3);
return view('home', ['desc' => $desc, 'timeline' => $timeline, 'users' => $users, 'services' => $services, 'port' => $port, 'cat' => $cat, 'news' => $news, 'site' => $site, 'isHome' => true]);
}
i can use the $loop->iteration, but it seems that if i use that, there would be a problem for the last row because when i use it, the script inside $loop->last won't appear. Can someone explain me how to solve this issue ?

Answer 1

odd and even properties are only available in laravel 5.8:
https://laravel.com/docs/5.7/blade#the-loop-variable
https://laravel.com/docs/5.8/blade#the-loop-variable
Maybe an upgrade is gonna help.