Display another laravel blade view as a modal in a page - php

Question

Good day everyone,
please, I am new to Laravel, I am creating a project management app, I created an index page for projects and I have a button where I can be able to create new projects, it is entirely another blade file, I need to display the blade as a modal, I tried using #include and bootstrap modal, but the index page is the one displaying in the modal popup instead of the create page, I don't know where I am getting it wrong, I need help because there is a lot of places I need to use the modal.
This is my index page
#extends('layouts.app')
#section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-right">
<a class="btn btn-success" data-toggle="modal" href="{{ route('projects.create') }}" data-target="#createModal"> New Project</a>
</div>
</div>
</div>
#if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
#endif
<table class="table table-bordered table-hover">
<thead class="text-primary">
<tr>
<th>No</th>
<th>Name</th>
<th>Description</th>
<th>Date Created</th>
<th>Action</th>
</tr>
</thead>
#foreach ($projects as $project)
<tbody class="table-striped">
<tr>
<td>{{ ++$i }}</td>
<td>{{ $project->name }}</td>
<td>{{ $project->introduction }}</td>
<td>{{ $project->created_at->format('d/m/Y') }}</td>
<td>
<form action="{{ route('projects.destroy',$project->id) }}" method="POST">
<a class="fas fa-eye fa-lg text-warning mr-1" href="{{ route('projects.show',$project->id) }}"></a>
<a class="fas fa-edit fa-lg text-primary mr-1" href=" {{ route('projects.edit',$project->id) }}"></a>
#csrf
#method('DELETE')
<button type="submit" class="fa fa-trash fa-lg text-danger" style="border: none; background-color:white;"></button>
</form>
</td>
</tr>
</tbody>
#endforeach
</table>
{!! $projects->links() !!}
#endsection
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModal" data-attr="{{ route('projects.create') }}">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
#include('projects.create')
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
while this is the create page
#extends('layouts.modal')
#section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>New Project</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('projects.index') }}"> Back</a>
</div>
</div>
</div>
#if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<form action="{{ route('projects.store') }}" method="POST">
#csrf
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
<input type="text" name="name" class="form-control" placeholder="Name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Introduction:</strong>
<textarea class="form-control" style="height:50px" name="introduction" placeholder="Introduction"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>location:</strong>
<textarea class="form-control" style="height:150px" name="location" placeholder="Location"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
#endsection
Thank you in advance

Answer 1

I later figure the answer, the mistake I was doing is including the
#extends('layouts.app')
#section('content')
So the page should just be the form or what you want to display without the #extends('layouts.app')
<form action="{{ route('projects.store') }}" method="POST">
#csrf
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
<input type="text" name="name" class="form-control" placeholder="Name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Introduction:</strong>
<textarea class="form-control" style="height:50px" name="introduction" placeholder="Introduction"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>location:</strong>
<textarea class="form-control" style="height:150px" name="location" placeholder="Location"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>