Bootstrap Modal Not Showing - Laravel - AdminLTE - php

Question

i'm using an AdminLTE package with Laravel to give me the AdminLTE theme for my app.
I cannot get the modal to launch at all. If I copy the contents of my form.blade.php into my index.blade.php it works. Although the way i have coded my controller & views i need them to be independent files.
Index.blade.php <- view serving the datatable
form.blade.php <-- view serving the modal from click edit on index.blade.php
CostCenterController.php <-- Controller responsible for both views.
CostCenterController.php
So in my controller I have a function that returns the results with server side processing into my datatable, this is just the part showing how each item in the table is generated, specifically with the btn-group for the edit function.:
$data = array();
if (!empty($costcenters)){
foreach ($costcenters as $costcenter){
$editURL = "delete/".$costcenter->id;
$temp['name'] = $costcenter->name;
$temp['code'] = $costcenter->code;
$action = '';
$action .= '
<div class="btn-group">
<i class="fa fa-edit"></i>
<i class="fa fa-trash"></i>
</div>
';
$temp['action'] = $action;
array_push($data, $temp);
}//end for each
}// end if empty
$recordsTotal = count($recordsTotal);
echo json_encode(array('recordsTotal' => $recordsTotal, 'data' => $data, 'recordsFiltered' => $recordsTotal));
In my index.blade.php i have nothing of importance or relevance really.
form.blade.php
I created a form.blade.php so when I hit edit, a route calls this view with the data needed from the edit function in the associated controller. This view works as plain html if opened in a new tab.
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog" >
#if ($mode == 'edit')
{!! Form::model($costcenter,array('route'=>array('costcenter.update',$costcenter->id),'id'=>'costcenter-form')) !!}
#else
{!! Form::open(array('url'=>'costcenter/store','method'=>'post','data-toggle'=>'validator','id'=>'costcenter-form')) !!}
#endif
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
#if ($mode == 'edit')
Edit {{$costcenter->name}}'s Cost Center
#else
Create Cost Center
#endif
</h5>
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true"> ×</span></button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
{!! Form::label('name','Cost Center Name:',['class'=>'control-label']) !!}
{!! Form::text('name',null,['class'=>'form-control','placeholder'=>'Enter Cost Center Name','data-error'=>"Please enter the name of the cost center",'required'=>true]) !!}
</div>
<div class="form-group">
{!! Form::label('code','CostCenter Code:',['class'=>'control-label']) !!}
{!! Form::text('code',null,['class'=>'form-control','placeholder'=>'Cost Center code as it appears in SYSPRO.','data-error'=>"Invalid Cost Center Code.",'required'=>true]) !!}
</div>
</form>
</div>
<div class="modal-footer">
{!! Form::submit('Save',['class'=>'btn btn-primary'])!!}
</div>
</div>
</div>
</div>
Any help would be appreciated.