Cara Menampilkan Data Dropdown Berdasarkan Data Parent di Laravel

program.jpg

Selamat pagi, bagaimana ya cara menampilkan data dropdown/select-option berdasarkan data parent di laravel ?

Dengan kode yang saya buat di bawah ini, saya sudah bisa menampilkan data program di dropdown ketika saya memilih mode 1 atau active online. Tapi ketika saya memilih mode 2 atau Full Hybrid, data di dropdown tidak muncul.

Route

Route::post('/programs', function (Request $request) {

    $programs = App\Models\Program::where('mode',$request->mode_id)
    ->with('programs')
    ->get();

    return response()->json([
        'programs' => $programs
    ]);

})->name('program');

Model

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;

class Program extends Model
{
    use HasFactory;
    use SoftDeletes;

    protected $table = 'programs';
    protected $fillable = ['nama', 'department', 'mode', 'enabled'];
    protected $dates = ['updated_at','created_at'];

    public function programs()
    {
        return $this->hasMany('App\Models\Program', 'mode');
    }
}

Blade

<meta name="csrf-token" content="{{ csrf_token() }}">
...
...
...
<div class="form-group row">
    <div class="col-md-6 mb-3">
        <label for="mode">Mode</label>
        <select class="custom-select @error('mode') is-invalid @enderror" id="mode" name="mode">
            <option hidden>Choose Program</option>
            <option value="1">Active Online</option>
            <option value="2">Full Hybrid</option>
        </select>
        @error('mode')
        <div class="invalid-feedback">
            {{$message}}
        </div>
        @enderror
    </div>
    <div class="col-md-6 mb-3">
        <label for="pro">Program</label>
        <select class="custom-select @error('program_id') is-invalid @enderror" id="program" name="program_id">
        </select>
        @error('program_id')
        <div class="invalid-feedback">
            {{$message}}
        </div>
        @enderror
    </div>
</div>

...
...
...
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).ready(function () {
        $('select[name="mode"]').on('change',function(e) {

            var mode_id = e.target.value;

         $.ajax({

               url:"{{ route('program') }}",
               type:"POST",
               data: {
                   mode_id: mode_id
                },

               success:function (data) {

                // console.log(mode_id);


                $('#program').empty();

                $.each(data.programs[0].programs,function(index,program){

                    $('#program').append('<option value="'+program.id+'">'+program.nama+'</option>');
                })

               }

           })
        });

    });
</script>

Bagaimana cara yang benar untuk membuat atau menampilkan data di dropdown berdasarkan parent/mode ? terimakasih