why my foreach loop is not working with all rows - laravel

i have problem with for each loop that must get value from table and get sum and count from other tables depends on selected row in loop
here is my code :
$flights = Basic::all();
foreach ($flights as $flight) {
if($flight->cur_allowed_seats > '0'){
$basics_id = Basic::find($flight->id);
$inf_count = Ticket::where([['sector',$flight->sector],['pass_type','3'],['flight_date',$flight->flight_date]])->get()->count();
$child_count = Ticket::where([['sector',$flight->sector],['pass_type','2'],['flight_date',$flight->flight_date]])->get()->count();
$total_sale = DB::table('tickets')
->where([['sector', $flight->sector],['flight_date',$flight->flight_date]])
->sum('sale');
$free_seats_per1= DB::table('basics')->where('id', $flight->id)->first()->cur_total_seats;
$free_seats_per2= DB::table('basics')->where('id', $flight->id)->first()->total_seats;
$free_seats_per=$free_seats_per1/$free_seats_per2*100;
return view('home', array('flights' => $flights,'basics_id' => $basics_id,'inf_count' => $inf_count,
'child_count' => $child_count,'total_sale' => $total_sale,'free_seats_per' => $free_seats_per,
));
}
and here is blade code :
<div class="content-body">
#foreach($flights as $flight)
<h1 class="content-header-title mb-0">{{ $flight->sector }} <span style="color: red">{{ $flight->flight_date }}</span></h1>
<!-- eCommerce statistic -->
<div class="row">
<div class="col-xl-3 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="info" >{{ $flight->cur_total_seats }}</h3>
<h6 style="font-size:12px;font-weight: bold">المقاعد الشاغرة بحائل</h6>
</div>
<div>
<i class="icon-flag info font-large-2 float-right"></i>
</div>
</div>
<div class="progress progress-sm mt-1 mb-0 box-shadow-2">
{{-- {{ format_number((($basics_has->cur_total_seats/$basics_has->total_seats) * 100), 2) }}%--}}
<div class="progress-bar bg-gradient-x-info" role="progressbar" style="width: {{ $free_seats_per }}%"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="info" >{{ $child_count }}</h3>
<h6 style="font-size:12px;font-weight: bold">عدد الأطفال المحجوز بحائل</h6>
</div>
<div>
<i class="icon-user-following info font-large-2 float-right"></i>
</div>
</div>
<div class="progress progress-sm mt-1 mb-0 box-shadow-2">
<div class="progress-bar bg-gradient-x-info" role="progressbar" style="width: {{ $flight->percent }}%"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="success">{{$inf_count}}</h3>
<h6 style="font-size:12px;font-weight: bold">عدد الرضع المحجوز بحائل</h6>
</div>
<div>
<i class="la la-user success font-large-2 float-right"></i>
</div>
</div>
<div class="progress progress-sm mt-1 mb-0 box-shadow-2">
<div class="progress-bar bg-gradient-x-success" role="progressbar" style="width: 80%"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="danger">{{$total_sale}}</h3>
<h6 style="font-size:12px;font-weight: bold">إجمالي مبيعات حائل</h6>
</div>
<div>
<i class="la la-dollar danger font-large-2 float-right"></i>
</div>
</div>
<div class="progress progress-sm mt-1 mb-0 box-shadow-2">
<div class="progress-bar bg-gradient-x-danger" role="progressbar" style="width: 85%"
aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
my problem is that any value from any table except 'Basic' it return only one value not loop
can any one help me with this issue please ?

Related

bootstrap 5 Uncaught TypeError: this._element is undefined

I have database results (reviews) which reviews can also be reported by the logged user. Before I make these reviews load through AJAX call the bs stepper worked perfectly (it is used for steps while reporting a review). Now when the database results (reviews) are loaded through AJAX call the bs stepper is giving me the following error on page load.
error
Here is how I define bs steppers for each review
#extends('Profile.master')
#section('content')
<div class="container-fluid mt-5">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-9 fw-bold fs-3 mb-4">
<span class="me-2"><i class="fas fa-tv"></i></span>
<span>branch {{ $branch->title }}</span>
</div>
</div>
<div class="row">
#foreach($branch->users as $user)
<div class="col-lg-4 mb-3 px-3">
<div class="card">
<div class="card-body">
<div class="row g-0 py-3">
<div class="col-3">
<img src="{{ asset('storage/'.$user->image) }}" class="img-fluid" width="100" height="100" alt="{{ $user->full_name }}">
</div>
<div class="col-8 pe-3">
<div class="row pb-3">
<div class="col">
<span class="h5">{{ $user->full_name }}</span>
<span class="small">{{ jdate($user->created_at)->ago() }}</span>
</div>
</div>
</div>
<div class="col-1 mt-2 text-end">
<a href="{{ url('http://localhost:8000/chatify/'.$user->id) }}">
<i class="fas fa-arrow-left fa-lg text-dark"></i>
</a>
</div>
</div>
<div class="row g-0 pb-3">
<div class="col border-top pt-3">
<p>company address: {{ $user->company_address }}</p>
<p>state: {{ $user->state->name }}</p>
<p>city: {{ $user->city->name }}</p>
<p>mobile: {{ $user->mobile }}</p>
</div>
</div>
<div class="row g-0 pb-3">
<div class="col border-top pt-3">
get resume
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
<div class="modal fade" id="openResumes{{ $user->id }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="openResumesTitle{{ $user->id }}" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="openResumesTitle{{ $user->id }}">resume <span class="h5">{{ $user->full_name }}</span></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
#foreach($user->resumes as $resume)
<div class="col-lg-3 mb-3">
<img src="{{ asset('storage/'.$resume->image) }}" alt="{{ $user->full_name }}" class="img-fluid">
</div>
#endforeach
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
#endsection
Note: This code does not just execute the first ID. Executes the rest.

Must provide source or customer. laravel 8 stripe payment gateway

Must provide source or customer. laravel 8 stripe payment gateway
StripeController
public function stripe()
{
return view('stripe');
}
public function stripePost(Request $request)
{
Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));
Stripe\Charge::create ([
"amount" => 100*100,
"currency" => "INR",
"source" => $request->stripeToken,
"description" => "This payment is testing purpose of websolutionstuff.com",
]);
Session::flash('success', 'Payment Successful !');
return back();
}
stripe.blade.php
<div class="container">
<div class="row">
<h3 style="text-align: center;margin-top: 40px;margin-bottom: 40px;">Stripe Payment</h3>
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default credit-card-box">
<div class="panel-heading">
<div class="row">
<h3>Payment Details</h3>
<div>
{{-- <img class="img-responsive pull-right" src="http://i76.imgup.net/accepted_c22e0.png"> --}}
</div>
</div>
</div>
<div class="panel-body">
#if (Session::has('success'))
<div class="alert alert-success text-center">
×
<p>{{ Session::get('success') }}</p><br>
</div>
#endif
<br>
<form role="form" action="{{ route('stripe.post') }}" method="post" class="require-validation"
data-cc-on-file="false" data-stripe-publishable-key="{{ env('STRIPE_KEY') }}"
id="payment-form">
#csrf
<div class='form-row row'>
<div class='col-xs-12 col-md-6 form-group required'>
<label class='control-label'>Name on Card</label>
<input class='form-control' size='4' type='text'>
</div>
<div class='col-xs-12 col-md-6 form-group required'>
<label class='control-label'>Card Number</label>
<input autocomplete='off' class='form-control card-number' size='20' type='text'>
</div>
</div>
<div class='form-row row'>
<div class='col-xs-12 col-md-4 form-group cvc required'>
<label class='control-label'>CVC</label>
<input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311'
size='4' type='text'>
</div>
<div class='col-xs-12 col-md-4 form-group expiration required'>
<label class='control-label'>Expiration Month</label>
<input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
</div>
<div class='col-xs-12 col-md-4 form-group expiration required'>
<label class='control-label'>Expiration Year</label>
<input class='form-control card-expiry-year' placeholder='YYYY' size='4'
type='text'>
</div>
</div>
{{-- <div class='form-row row'>
<div class='col-md-12 error form-group hide'>
<div class='alert-danger alert'>Please correct the errors and try
again.
</div>
</div>
</div> --}}
<div class="form-row row">
<div class="col-xs-12">
<button class="btn btn-primary btn-lg btn-block" type="submit">Pay Now</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

Dynamic Carousel In Laravel not displaying proper data

<div class="container mt-4 mb-4">
<div class="row">
<div class="col-lg-12">
<div id="blogCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
#foreach($reviews as $items)
<div class="carousel-item #if($loop->first) active #endif">
<div class="row">
#foreach($reviews as $review)
<div class="col-lg-4 ">
<a>
<div class="home1-img mt-3">
<?php
for($i=1;$i<6;$i++){
$check = '';
if($review->number_of_stars >= $i){
$check = 'checked';
}
echo '<span class="fa fa-star '.$check.'"></span>';
}
?>
<div class="home1-text mt-1" style="margin-bottom:30px;">
<p>{!! Illuminate\Support\Str::limit($review->customer_review,100) !!}</p>
<h5 class="text-color font-weight-bold">{{ $review->customer_name }}</h5>
</div>
</div>
</a>
</div>
#endforeach
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
I am getting all the records in all sides but I want 3 records in 1st slide then 3 records in 2nd slide and so on. I have tried many times but I am not able to fix it.

I am creating a web application using Laravel, vue-router and MySQL database

I am creating a web application using Laravel, vue-router and MySQL database. I created a dashboard component and a bank component. When I run my project, the Dashboard component loads with all the CSS and javascript. But when I change to the Bank component, CSS may be loaded but some javascript cannot run. After refreshing the entire bank component page, the previously non-running javascript then executes.
this is my web.php file
<?php
Route::get('/{any}', function () {
return view('welcome');
})->where('any', '.*');
Auth::routes();
Route::get('/home', 'HomeController#index')->name('home');
This is my index.js file
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Dashboard from "./components/Dashboard";
import Bank from "./components/Bank";
import Demo from "./components/Demo";
import Company from "./components/Company";
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'dashboard',
component: Dashboard,
},
{
path: '/bank',
name: 'bank',
component: Bank,
},
{
path: '/company',
name: 'company',
component: Company
},
],
})
const app = new Vue({
el: '#app',
router,
});
This is my Dashboard Component file
<template>
<div class="container-fluid">
<!-- Page-Title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-sm-6">
<h4 class="page-title">Dashboard</h4>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-right">
<li class="breadcrumb-item">Stexo</li>
<li class="breadcrumb-item active">Dashboard</li>
</ol>
</div>
</div>
<!-- end row -->
</div>
<div class="row">
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-cube-outline bg-primary text-white"></i>
</div>
<div>
<h5 class="font-16">Active Sessions</h5>
</div>
<h3 class="mt-4">43,225</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">75%</span></p>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-briefcase-check bg-success text-white"></i>
</div>
<div>
<h5 class="font-16">Total Revenue</h5>
</div>
<h3 class="mt-4">$73,265</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 88%" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">88%</span></p>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-tag-text-outline bg-warning text-white"></i>
</div>
<div>
<h5 class="font-16">Average Price</h5>
</div>
<h3 class="mt-4">447</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 68%" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">68%</span></p>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-buffer bg-danger text-white"></i>
</div>
<div>
<h5 class="font-16">Add to Card</h5>
</div>
<h3 class="mt-4">86%</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 82%" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">82%</span></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-8">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Area Chart</h4>
<div id="morris-area-example" class="morris-charts morris-chart-height"></div>
</div>
</div>
</div>
<!-- end col -->
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Donut Chart</h4>
<div id="morris-donut-example" class="morris-charts morris-chart-height"></div>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Friends Suggestions</h4>
<div class="friends-suggestions">
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-2.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Ralph Ramirez</h5>
<p class="text-muted">3 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-3.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Patrick Beeler</h5>
<p class="text-muted">17 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-4.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Victor Zamora</h5>
<p class="text-muted">12 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-5.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Bryan Lacy</h5>
<p class="text-muted">18 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-6.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">James Sorrells</h5>
<p class="text-muted mb-1">6 Friend suggest</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Sales Analytics</h4>
<div id="morris-line-example" class="morris-chart" style="height: 360px"></div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Recent Activity</h4>
<ol class="activity-feed mb-0">
<li class="feed-item">
<div class="feed-item-list">
<p class="text-muted mb-1">Now</p>
<p class="font-15 mt-0 mb-0">Andrei Coman posted a new article: <b class="text-primary">Forget UX Rowland</b></p>
</div>
</li>
<li class="feed-item">
<p class="text-muted mb-1">Yesterday</p>
<p class="font-15 mt-0 mb-0">Andrei Coman posted a new article: <b class="text-primary">Designer Alex</b></p>
</li>
<li class="feed-item">
<p class="text-muted mb-1">2:30PM</p>
<p class="font-15 mt-0 mb-0">Zack Wetass, <b class="text-primary"> Developer Moreno</b></p>
</li>
<li class="feed-item pb-1">
<p class="text-muted mb-1">12:48 PM</p>
<p class="font-15 mt-0 mb-2">Zack Wetass, <b class="text-primary">UX Murphy</b></p>
</li>
</ol>
</div>
</div>
</div>
</div>
<!-- START ROW -->
<div class="row">
<div class="col-xl-12">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Active Deals</h4>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Status</th>
<th scope="col">Amount</th>
<th scope="col">Contact</th>
<th scope="col">Location</th>
<th scope="col" colspan="2">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Philip Smead</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>$9,420,000</td>
<td>
<div>
<img src="front/images/users/user-2.jpg" alt="" class="thumb-md rounded-circle mr-2"> Philip Smead
</div>
</td>
<td>Houston, TX 77074</td>
<td>15/1/2018</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>Brent Shipley</td>
<td><span class="badge badge-warning">Pending</span></td>
<td>$3,120,000</td>
<td>
<div>
<img src="front/images/users/user-3.jpg" alt="" class="thumb-md rounded-circle mr-2"> Brent Shipley
</div>
</td>
<td>Oakland, CA 94612</td>
<td>16/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>Robert Sitton</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>$6,360,000</td>
<td>
<div>
<img src="front/images/users/user-4.jpg" alt="" class="thumb-md rounded-circle mr-2"> Robert Sitton
</div>
</td>
<td>Hebron, ME 04238</td>
<td>17/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>Alberto Jackson</td>
<td><span class="badge badge-danger">Cancel</span></td>
<td>$5,200,000</td>
<td>
<div>
<img src="front/images/users/user-5.jpg" alt="" class="thumb-md rounded-circle mr-2"> Alberto Jackson
</div>
</td>
<td>Salinas, CA 93901</td>
<td>18/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>David Sanchez</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>$7,250,000</td>
<td>
<div>
<img src="front/images/users/user-6.jpg" alt="" class="thumb-md rounded-circle mr-2"> David Sanchez
</div>
</td>
<td>Cincinnati, OH 45202</td>
<td>19/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- END ROW -->
</div>
</template>
<script>
export default {}
</script>
This is my Bank component file
<template>
<div class="container-fluid">
<!-- Page-Title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-sm-6">
<h4 class="page-title">Add Bank</h4>
</div>
<!-- <div class="col-sm-6">-->
<!-- <ol class="breadcrumb float-right">-->
<!-- <li class="breadcrumb-item"><router-link :to="{ name: 'dashboard' }">Dashboard</router-link></li>-->
<!-- <li class="breadcrumb-item"><router-link :to="{ name: 'bank' }">Master</router-link></li>-->
<!-- <li class="breadcrumb-item"><router-link :to="{ name: 'bank' }">Bank</router-link></li>-->
<!-- <li class="breadcrumb-item active">Add Bank</li>-->
<!-- </ol>-->
<!-- </div>-->
</div>
<!-- end row -->
</div>
<!-- Starting of Button Section-->
<div class="row">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body">
<div class="button-items">
<button type="button" data-toggle="modal" data-target="#elegantModalForm" class="btn btn-outline-primary waves-effect waves-light">Add Bank</button>
</div>
</div>
</div>
</div>
</div>
<!-- Starting of Modal -->
<!-- Modal -->
<div class="modal fade" id="elegantModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-warning modal-lg" role="document">
<!--Content-->
<div class="modal-content form-elegant">
<!--Header-->
<div class="modal-header text-center">
<h3 class="modal-title w-100 font-weight-bold py-2 white-text" id="myModalLabel"><strong>Add Bank Information</strong></h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="container-fluid">
<form class="form-group">
<div class="row">
<div class="col-md-12 md-form">
<input type="text" class="form-control">
<label>Name of Bank *</label>
</div>
</div>
<div class="row">
<div class="col-md-12 md-form">
<textarea type="text" class="form-control md-textarea"></textarea>
<label>Address / Branch *</label>
</div>
</div>
<div class="row">
<div class="col-md-6 md-form">
<select class="browser-default custom-select">
<option value="">Account Holder Name</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="4">Poland</option>
<option value="5">Japan</option>
</select>
</div>
<div class="col-md-6 md-form">
<input type="text" class="form-control">
<label>Bank Account *</label>
</div>
</div>
<div class="row">
<div class="col-md-6 md-form">
<input type="text" class="form-control">
<label>Bank Routing *</label>
</div>
<div class="col-md-6 md-form">
<input type="date" class="form-control datepicker">
<label>Opening Bal Date * </label>
</div>
</div>
<div class="row">
<div class="col-md-6 md-form">
<input type="text" class="form-control">
<label>Opening Balance *</label>
</div>
<div class="col-md-6 md-form">
<input type="text" class="form-control datepicker">
<label>Current Cheque no * </label>
</div>
</div>
</form>
</div>
</div>
<!--Footer-->
<div class="modal-footer mx-5 pt-3 mb-1">
<button class="btn btn-outline-danger" data-dismiss="modal">Close</button>
<button class="btn blue-gradient">Add</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Modal -->
<!-- Ending of Modal -->
<!--Ending of Button Section-->
</div>
<!-- end container-fluid -->
</template>
<script>
export default {}
</script>

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

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 ?
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.

Resources