Laravel - How to display child goal type name on select dropdown on edit form

Question

In my Laravel-5.8 project, I am trying to child name (text) on select list in edit form.

I have this table:

CREATE TABLE `goal_types` (
  `id` int(11) NOT NULL,
  `name` varchar(200) NOT NULL,
  `parent_id` int(11) DEFAULT NULL,
  `max_score` int(11) DEFAULT 0,
 ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Model

class GoalType extends Model
{
    public $timestamps = false;

    protected $table = 'goal_types';

    protected $primaryKey = 'id';
    protected $fillable = [
                  'name',
                  'parent_id',
                  'max_score',
              ];

    protected $casts = [];

    public function children()
    {
      return $this->hasMany('App\Models\GoalType', 'parent_id');
    }

    public function parent()
    {
        return $this->hasOne(App\Models\GoalType::class, 'id', 'parent_id');
    }
}

Controller

    public function index()
    {     
            $categories = GoalType::with('children')->whereNull('parent_id')->get();
            return view('goal_types.index')->with('categories', $categories);
    }

    public function create()
    {       
        return view('goal_types.create');
    }

    public function store(StoreGoalTypeRequest $request)
    {
            $data = GoalType::create([
                'name'                      => $request->name,
                'parent_id'                 => $request->parent_id,
                'max_score'                 => $request->max_score,
            ]);

        Session::flash('success', 'Goal Type is created successfully');
        return redirect()->route('goal_types.index');      
    }

I have a modal form for the edit

view

      <div class="row">

        <div class="col-md-8">

          <div class="card card-secondary">
            <div class="card-header">
              <h3 class="card-title">Goal Type(s)</h3>
            </div>
            <div class="card-body">
              <ul class="list-group">
                @foreach ($categories as $category)
                  <li class="list-group-item">

                    @if ($category->children)
                      <ul class="list-group mt-2">
                        @foreach ($category->children as $child)
                          <li class="list-group-item">
                            <div class="d-flex justify-content-between">
                                {{ $child->name }} 

                              <div class="button-group d-flex">
                               @can('goal_type_edit')
                                <button type="button" class="btn btn-sm btn-primary mr-1 edit-category" data-toggle="modal" data-target="#editCategoryModal" data-id="{{ $child->id }}" data-name="{{ $child->name }}">Edit</button>
                               @endcan
                              </div>
                            </div>
                          </li>
                        @endforeach
                      </ul>
                    @endif
                  </li>
                @endforeach
              </ul>
            </div>
          </div>
        </div>


        <div class="modal fade" id="editCategoryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Edit Goal Type</h4>

              <form action="" method="POST">
                @csrf
                @method('PUT')

               <div class="modal-body">
                <div class="form-group">
                  <label class="control-label"> Parent Goal Type:</label>
                  <select class="form-control select2bs4" data-placeholder="Choose Parent Goal Type" tabindex="1" name="parent_id" style="width: 100%;">
                    <option value="">Select Goal Type</option>
                    @foreach ($categories as $category)
                      <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                  </select>
                </div>
                  <div class="form-group">
                     <label class="control-label"> Name:<span style="color:red;">*</span></label>
                    <input type="text" name="name" class="form-control" value="" placeholder="Category Name" required>
                  </div>
                <div class="form-group">
                    <label class="control-label"> Max. Weight (%):</label>
                  <input type="number" name="max_score" class="form-control" value="" step="0.01" placeholder="Enter maximum weight here: 15, 50, 75 etc" style="width: 100%;">
                </div>                       
               </div>

                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary">Update</button>
                </div>
              </div>
              </form>
          </div>
        </div>

</div>

When I click on edit from the index a modal form should popup to display the child name where the parent_id equals the id of the parent as it is in the database. But the select dropdown value/text is not displaying anything until when I click on the select dropdown.

How do I modify

                    @foreach ($categories as $category)
                      <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach

in the edit to achieve that (displaying the name of the select child on the dropdown)?

Thanks

Answer 1

In your edit view you must pass your category id in your form action like this action="{{ route('admin.categories.update' , $category->id) }}" and then compare it with parent_id and in your category model you have to pass children.
category model:

public function children()
{
    return $this->hasMany(GoalType::class, 'parent_id' , 'id')->with('children');
}

edit.blade.php view

<div class="col-md-12">
   <label for="parent_id" class="form-control-label">parents category name</label>
   <select class="form-control" data-toggle="select" data-live-search="true" name="parent_id" id="parent_id">
      <option value="0" {{ $category->parent_id === 0 ? 'disabled' : '' }} selected> - Default</option>
         @foreach(\App\Models\Category::latest()->get() as $cate)
            <option value="{{ $cate->id }}" {{ $cate->id === $category->parent_id ? 'selected' : '' }} {{ $cate->id === $category->id ? 'disabled' : '' }} {{ $cate->id === $category->parent_id ? 'disabled' : '' }}>{{ $cate->name }}</option>
         @endforeach
   </select>
</div>