在页面中将另一个 laravel 刀片视图显示为模式

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>