In my header provide a link for adding new client. When click the add client link display a popup window that contain a textbox and a submit button.When i click the link display popup window fully fade in(shaded) and not display the label
Whats wrong here?
header
<a data-hover="dropdown" data-close-others="true" data-toggle="modal" class="dropdown-toggle" href="#addClientPop" <?php if($home_index== 1) { ?> class="active" <?php } ?>></span>
Add Client<span class="arrow"></span>
</a>
<div id="addClientPop" class="modal hide fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3>Add Client</h3>
</div>
<div class="modal-body">
<div class="scroller" style="height:75px" data-always-visible="1" data-rail-visible1="1">
<div class="row-fluid">
<div class="control-group">
<label class="control-label">Client Name</label>
<div class="controls">
<input id="client_name" name="client_name" class="client_box" type="text" class="form-control" required >
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button onClick="submit_client();" type="button" class="btn blue">Submit</button>
</div>
</div>
This is your solution i have worked well
<a data-hover="dropdown" data-close-others="true" data-toggle="modal" class="dropdown-toggle active" href="#addClientPop" >
Add Client<span class="arrow"></span>
</a>
<div id="addClientPop" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3>Add Client</h3>
</div>
<div class="modal-body">
<div class="scroller" style="height:75px" data-always-visible="1" data-rail-visible1="1">
<div class="row-fluid">
<div class="control-group">
<label class="control-label">Client Name</label>
<div class="controls">
<input id="client_name" name="client_name" class="client_box" type="text" class="form-control" required >
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button onClick="submit_client();" type="button" class="btn blue">Submit</button>
</div>
</div>
</div>
</div>
In your code what i have noticed that you have closed </span> tag in <a> and if($home_index==1) then class attribute is going to be add two times.
It should be like:
<a data-hover="dropdown" data-close-others="true" data-toggle="modal" class="dropdown-toggle <?php if($home_index== 1) { echo 'active';}?>" href="#addClientPop">Add Client <span class="fa fa-arrow-down"></span> </a>
<li>
<a data-hover="dropdown" data-close-others="true" data-toggle="modal" class="dropdown-toggle active" href="#addPop" >
Add Client<span class="arrow"></span>
</a>
<div id="addPop" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3>Add Client</h3>
</div>
<div class="modal-body">
<div class="scroller" style="height:75px" data-always-visible="1" data-rail-visible1="1">
<div class="row-fluid">
<div class="control-group">
<label class="control-label">Client Name</label>
<div class="controls">
<input id="market_price" name="market_price" class="client_box" type="text" class="form-control" required >
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button onClick="submit_price();" type="button" class="btn blue">Submit</button>
</div>
</div>
</div>
</div>
</li>
Related
I want to make my modal apper, but I can not to do it.
This is my code:
<div class="container h-100">
<div class="row justify-content-sm-center h-100">
<div class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9">
<div class="text-center my-5">
<img src="img/logo-branca.png" alt="logo" width="100">
</div>
<div class="card shadow-lg">
<div class="card-body p-5">
<h1 class="fs-4 card-title fw-bold mb-4">CEP</h1>
<form method="POST" action = "autenticar.php">
<div class="mb-3">
<input id="cep" type="number" class="form-control" name="cep" value="" required="required">
</div>
<button type="submit" class="btn btn-primary ms-auto">
Pesquisar
</button>
</div>
</form>
</div>
<div class="card-footer py-3 border-0">
<div class="text-center">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
BUTTON TO OPEN THE MODAL
</button>
</div>
</div>
</div>
<div class="text-center mt-5 text-muted">
Copyright © 2021 — Rodrigo Franco
</div>
</div>
</div>
</div>
And this my modal:
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
If you need to see my project compleatly, just go to this link or if you want to make download the project, just go here
You are not loading Bootstrap's javascript files, simply add:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
To the head of your document and the modal works.
Resources: https://getbootstrap.com/docs/5.0/components/modal/
First Image to show all data in card view
second image for pop up modal
What I want is when I clicked the View button, it will get all the data and display in the modal. The data can be display in the inputbox, textarea and image.
This is the code to row all the data in a card view
<?php
while ($row = mysqli_fetch_assoc($result)){
$wid = $row['web_id'];
?>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3><b><?php echo $row['web_name']; ?></b></h3>
</div>
<div class="panel-body">
<?php
if(empty($row['web_image'])){
echo "<span class='no-image glyphicon glyphicon-picture'></span><br><b>NO IMAGE AVAILABLE</b>";
}else{
echo "<div class='imageContainer'><img src='images/".$row['web_image']. "'width='50%' height='15%'/></div>";
}
?>
</div>
<div class="panel-footer">
<h4><b><?php echo $row['web_id']; ?></b></h4>
<a target="_blank" href="<?php echo $row['web_address']; ?>"><h4><?php echo $row['web_address'];?></h4></a>
<h4><?php echo $row['web_description']; ?></h4>
<hr>
//This is an button for view modal
<?php echo '<button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#viewmodal" class="viewbtn">View</button>'; ?>
<?php echo '<button class="btn1 btn-sm"><span class="glyphicon glyphicon-edit"></span> EDIT</button>';?>
</div>
</div>
</div>
<?php
}
?>
This is the modal code
<!--View Modal pop up-->
<div class="modal fade" id="viewmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="exampleModalLabel"><b>VIEW DATA</b></h3>
</div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label><b>Web ID : </b></label> <span class="validation">*</span>
<input name="w_id" id="w_id" value="" type="text" class="form-control input-box" readonly>
</div>
<div class="form-group">
<label><b>Web Name : </b></label> <span class="validation">*</span>
<input name="w_name" id="w_name" type="text" class="form-control input-box" required>
</div>
<div class="form-group">
<label><b>Web Address : </b></label> <span class="validation">*</span>
<input name="w_address" id="w_address" type="text" class="form-control input-box" required></input>
</div>
<div class="form-group">
<label><b>Web Description : </b></label> <span class="validation">*</span>
<input name="w_description" id="w_description" type="text" class="form-control input-box" required></input>
</div>
<div class="form-group">
<label><b>Web Image : </b></label> <span class="validation">*</span>
<img src='images/".$row["web_image"]. "'width='333px;' height='200px;' name="w_image" id="w_image"/>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="save" class="btn btn-primary">SAVE</button>
<button type="button" name="close" class="btn btn-warning" data-dismiss="modal">CLOSE</button>
</div>
</form>
</div>
</div>
</div>
As i can see you are looping through the panel and you have only one modal in there, what you can do is use data property and JS/Jquery combination to do this.
<?php
while ($row = mysqli_fetch_assoc($result)){
$wid = $row['web_id'];
?>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3><b><?php echo $row['web_name']; ?></b></h3>
</div>
<div class="panel-body">
<?php
if(empty($row['web_image'])){
echo "<span class='no-image glyphicon glyphicon-picture'></span><br><b>NO IMAGE AVAILABLE</b>";
}else{
echo "<div class='imageContainer'><img src='images/".$row['web_image']. "'width='50%' height='15%'/></div>";
}
?>
</div>
<div class="panel-footer">
<h4><b><?php echo $row['web_id']; ?></b></h4>
<a target="_blank" href="<?php echo $row['web_address']; ?>"><h4><?php echo $row['web_address'];?></h4></a>
<h4><?php echo $row['web_description']; ?></h4>
<hr>
//This is an button for view modal
<?php echo '<button type="button" class="btn btn-success btn-sm" data-img="<?=$row['img']?>" class="viewbtn">View</button>'; ?>
<?php echo '<button class="btn1 btn-sm"><span class="glyphicon glyphicon-edit"></span> EDIT</button>';?>
</div>
</div>
</div>
<?php
}
?>
<!--View Modal pop up-->
<div class="modal fade" id="viewmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="exampleModalLabel"><b>VIEW DATA</b></h3>
</div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label><b>Web Image : </b></label> <span class="validation">*</span>
<img width='333px;' height='200px;' name="w_image" id="w_image"/>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="save" class="btn btn-primary">SAVE</button>
<button type="button" name="close" class="btn btn-warning" data-dismiss="modal">CLOSE</button>
</div>
</form>
</div>
</div>
</div>
Now a little bit of jQuery to assign values in the modal fields and open the modal,when view button is clicked
$(function(){
$(".viewbtn").click(function(){
var img = $(this).data("img")
$("#w_image").attr("src",img)
$("#viewmodal").modal()
})
})
So, this is the basic idea of it, you can add other data props and assign the values to the fields accordingly
In the site that I am developing, I want to delete the selected image, but it always deletes the last image and not the chosen image. Can someone solve this problem? Thank you!
All the code in this link
https://pastebin.com/tpQnMwfY
<div class="col-sm-6 col-md-4 col-lg-2">
<br>
<div id="imagem_galeria"><a class="fancybox" href="upload/bairro_galeria/<?php echo $row['imagee']; ?>" data-fancybox-group="gallery"><img src="upload/bairro_galeria/<?php echo $row['imagee']; ?>" class="image-responsive"></a></div>
<br>
<div class="row">
<div class="col-sm-6" align="right"><a href="admin_bairro_galeria_editar?update_id=<?php echo $row['id']; ?>" class="btn btn-warning btn-sm custom-btn" >Editar</a></div>
<div class="col-sm-6" >Eliminar
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Pretende mesmo eliminar?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning custom-btn" data-dismiss="modal">Cancelar</button>
<a href="?delete_id2=<?php echo $row['id']; ?>" class="btn btn-danger custom-btn" >Eliminar</a>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
</div>
I working on laravel project and I have many modals that I will using in my project so I decided to put modals code in another folder .
my view code is
<button type="button" class="btn btn-success" data-toggle="modal" data-
target="#AddUserMoodal"><i class="fa fa-edit" aria-hidden="true"></i>
when I pressing on this button I want to open AddModal which is in modals folder
this is code of /modals/addmodal.blade.php
<div id="addModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="title">Title:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title_add" autofocus>
<small>Min: 2, Max: 32, only text</small>
<p class="errorTitle text-center alert alert-danger hidden"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="content">Content:</label>
<div class="col-sm-10">
<textarea class="form-control" id="content_add" cols="40" rows="5"></textarea>
<small>Min: 2, Max: 128, only text</small>
<p class="errorContent text-center alert alert-danger hidden"></p>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-success add" data-dismiss="modal">
<span id="" class='glyphicon glyphicon-check'></span> Add
</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>
but I don't know how to do that .what is the route will be for it
suppose you are in home page : home.blade.php , use include
<body>
#include('models/addmodal')
</body>
If your modal is dynamic , and you want to pass data to modal :
<body>
#include('models/addmodal',['title'=>$title,'data'=>$data])
</body>
and in your addmodal
<div id="addModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
{{$title}}
</div>
</div>
</div>
</div>
Take a look at the #include directive.
Side note:
Just for reference, back in the old of Laravel you could solve it like this:
// routes.php (which is web.php now)
Route::get('view-component/{name}', function ($name) {
return view($name);
});
// In your view
{{ route('view-component/user-form') }}
You just need to include your blade file with
#include('path.to.your.blade')
You can have your HTML structure in parts and just include them as above.
Check Laravel documentation for blade: https://laravel.com/docs/5.6/blade#including-sub-views
I create a laravel destroy function and i use a modal to delete data. but i cannot delete all data in my database. last one cannot be deleted. i think it cause in view.
this is my modal popup in view
<div class="modal fade" id="delete-form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Account</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="delete-form" action="{{ route('account.destroy', [$account->id]) }}" method="post">
<input type="hidden" name="_method" value="delete">
{{ csrf_field() }}
<p>Are you sure you want to delete this data? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
And my destroy controller
public function destroy(Account $account)
{
$findAccount = Account::find($account->id);
if($findAccount->delete()){
return redirect()->route('account.index')->with('success', 'Account details delete successfully!');
}
return back()->withInput()->with('error', 'Account details could not be deleted.');
}
i cannot delete all data in table. they keep one data and it cannot be deleted.
Try this:
#extends('template.app')
#section('content')
<div class="col-md-9">
<!-- table content -->
<div class="card">
<div class="card-header main-color-bg">
<h3 class="card-title">Account Details</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<input class="form-control rounded-corner" type="text" placeholder="Search Member Here" style="margin-bottom: 20px;">
</div>
</div>
<!-- success message -->
#include('inc.message')
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Account Number</th>
<th scope="col">Type</th>
<th scope="col">Amount</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
#if(is_empty($accounts))
<tr><td>NO DATA</td></tr>
#else
#foreach($accounts as $account)
<tr>
<th scope="row">{{$account->id}}</th>
<td>{{$account->acc_no}}</td>
<td>{{$account->acc_type}}</td>
<td>{{$account->amount}}</td>
<td><a class="btn btn btn-secondary" href="{{route('account.edit', $account->id)}}"><span class="fa fa-pencil"></span> Edit</a> <a class="btn btn btn-danger"
data-toggle="modal" data-target="#delete-form"><span class="fa fa-trash-o"></span> Delete</a></td>
</tr>
#endforeach
#endif
</tbody>
</table>
<!-- pagination -->
<nav id="pagination">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<span class="page-link"><span class="fa fa-arrow-circle-left"></span></span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<span class="page-link">
2
<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#"><span class="fa fa-arrow-circle-right"></span></a>
</li>
</ul>
</nav>
<!-- end pagination -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"><span class="fa fa-plus"></span> Add Account</button>
</div>
</div>
<!-- end table content -->
</div>
<!-- delete modal -->
<!-- Modal -->
<div class="modal fade" id="delete-form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Account</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="delete-form" action="{{ route('account.destroy', [$account->id]) }}" method="delete">
<input type="hidden" name="_method" value="delete">
{{ csrf_field() }}
<p>Are you sure you want to delete this data? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<!-- end delete modal-->
<!-- modal popup -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: #309fe2; color: #fff;">
<h5 class="modal-title" id="exampleModalLabel">Account Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{!! Form::open(['url' => '/account', 'id' => 'eventForm', 'data-toggle' => 'validator', 'role' => 'form']) !!}
{{ csrf_field() }}
<div class="modal-body">
<!-- modal form -->
<div class="form-group">
<label for="acc_no">Account Number</label>
<input type="number" class="form-control" name="acc_no" id="acc_no" maxlength="20" placeholder="Enter your account number" required>
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" maxlength="30" name="name" id="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="id_no">Identity No</label>
<input type="number" class="form-control" maxlength="9" name="id_no" id="id_no" placeholder="Enter your identity no" required>
</div>
<div class="form-group">
<label for="bank_id">Bank</label>
<select class="form-control" name="bank_id">
#if(!empty($banks))
#foreach($banks as $bank)
<option value="{{ $bank->id }}">{{ $bank->name }}</option>
#endforeach
#endif
</select>
</div>
<div class="form-group">
<label for="acc_type">Account Type</label>
<select class="form-control" id="acc_type" name="acc_type">
<option value="Saving">Saving</option>
<option value="Current">Current</option>
<option value="Deposite">Deposite</option>
</select>
</div>
<div class="form-group">
<label for="amount">Amount</label>
<input type="text" pattern="[0-9.]" class="form-control" maxlength="15" name="amount" id="amount" placeholder="Enter your amount" required>
</div>
<!-- end modal form -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><span class="fa fa-times-circle"></span> Close</button>
<button type="submit" class="btn btn-primary pull-right"><span class="fa fa-money"></span> Save changes</button>
</div>
{!! Form::close() !!}
</div>
</div>
</div>
<!-- end modal -->
#endsection
On your delete form change method from POST to DELETE.
I think may be Account::find($account->id); did not get the right Account object. use findOrFail to have another shot:
public function destroy(Account $account)
{
$findAccount = Account::findOrFail($account->id);
...
}
this is my table view. where i put if statement
#foreach($accounts as $account)
<tr>
<th scope="row">{{$account->id}}</th>
<td>{{$account->acc_no}}</td>
<td>{{$account->acc_type}}</td>
<td>{{$account->amount}}</td>
<td><a class="btn btn btn-secondary" href="{{route('account.edit', $account->id)}}"><span class="fa fa-pencil"></span> Edit</a> <a class="btn btn btn-danger"
data-toggle="modal" data-target="#delete-form"><span class="fa fa-trash-o"></span> Delete</a></td>
</tr>
#endforeach
#extends('template.app')
#section('content')
<div class="col-md-9">
<!-- table content -->
<div class="card">
<div class="card-header main-color-bg">
<h3 class="card-title">Account Details</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<input class="form-control rounded-corner" type="text" placeholder="Search Member Here" style="margin-bottom: 20px;">
</div>
</div>
<!-- success message -->
#include('inc.message')
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Account Number</th>
<th scope="col">Type</th>
<th scope="col">Amount</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
#if(!empty($accounts))
#foreach($accounts as $account)
<tr>
<th scope="row">{{$account->id}}</th>
<td>{{$account->acc_no}}</td>
<td>{{$account->acc_type}}</td>
<td>{{$account->amount}}</td>
<td><a class="btn btn btn-secondary" href="{{route('account.edit', $account->id)}}"><span class="fa fa-pencil"></span> Edit</a> <a class="btn btn btn-danger"
data-toggle="modal" data-target="#delete-form"><span class="fa fa-trash-o"></span> Delete</a></td>
</tr>
#endforeach
#endif
</tbody>
</table>
<!-- pagination -->
<nav id="pagination">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<span class="page-link"><span class="fa fa-arrow-circle-left"></span></span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<span class="page-link">
2
<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#"><span class="fa fa-arrow-circle-right"></span></a>
</li>
</ul>
</nav>
<!-- end pagination -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"><span class="fa fa-plus"></span> Add Account</button>
</div>
</div>
<!-- end table content -->
</div>
<!-- delete modal -->
<!-- Modal -->
<div class="modal fade" id="delete-form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Account</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="delete-form" action="{{ route('account.destroy', [$account->id]) }}" method="delete">
<input type="hidden" name="_method" value="delete">
{{ csrf_field() }}
<p>Are you sure you want to delete this data? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<!-- end delete modal-->
<!-- modal popup -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: #309fe2; color: #fff;">
<h5 class="modal-title" id="exampleModalLabel">Account Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{!! Form::open(['url' => '/account', 'id' => 'eventForm', 'data-toggle' => 'validator', 'role' => 'form']) !!}
{{ csrf_field() }}
<div class="modal-body">
<!-- modal form -->
<div class="form-group">
<label for="acc_no">Account Number</label>
<input type="number" class="form-control" name="acc_no" id="acc_no" maxlength="20" placeholder="Enter your account number" required>
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" maxlength="30" name="name" id="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="id_no">Identity No</label>
<input type="number" class="form-control" maxlength="9" name="id_no" id="id_no" placeholder="Enter your identity no" required>
</div>
<div class="form-group">
<label for="bank_id">Bank</label>
<select class="form-control" name="bank_id">
#if(!empty($banks))
#foreach($banks as $bank)
<option value="{{ $bank->id }}">{{ $bank->name }}</option>
#endforeach
#endif
</select>
</div>
<div class="form-group">
<label for="acc_type">Account Type</label>
<select class="form-control" id="acc_type" name="acc_type">
<option value="Saving">Saving</option>
<option value="Current">Current</option>
<option value="Deposite">Deposite</option>
</select>
</div>
<div class="form-group">
<label for="amount">Amount</label>
<input type="text" pattern="[0-9.]" class="form-control" maxlength="15" name="amount" id="amount" placeholder="Enter your amount" required>
</div>
<!-- end modal form -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><span class="fa fa-times-circle"></span> Close</button>
<button type="submit" class="btn btn-primary pull-right"><span class="fa fa-money"></span> Save changes</button>
</div>
{!! Form::close() !!}
</div>
</div>
</div>
<!-- end modal -->
#endsection