Nested Loop in Edit Form Blade Laravel

I have an edit form that used rowspan table and nested loop. I also have a create data form that works fine like this. I used Laravel 8 for this project.

Create form

But when I’m adding the value from database to create the edit form:

Edit form -1 Edit Form -2

I get the sasaran, indikator, and data (questions) from database and then loop it with nested loop. FYI, I have 3 sasaran’s data, 12 indikators’ data, and 47 questions data that need to load with the rowspan. But when I create the edit form, the rowspan is not fit with the sasaran, indikator, or, question amount, but it loops for 47 times. The rowspan only works for the every first data of sasaran, and then doesn’t work for the rest (like the Edit Form -1) and also duplicate the data.

FYI, I didn’t used Ajax for create and edit form.

This is the code:

View:

@foreach($sasarans as $i => $sasaran)
@foreach($sasaran->indikator as $indikator)
@foreach($data_laporans as $data)
<tr>
    @if($loop->first)
    <td style="text-align:center; vertical-align:middle;"
        rowspan="{{$indikator->pertanyaan->count()}}">
        {{$i+1}} </td>
    <td style="vertical-align:middle;"
        rowspan="{{$indikator->pertanyaan->count()}}">
        {{$sasaran->sasaran}} </td>
    <td style="vertical-align:middle;"
        rowspan="{{$indikator->pertanyaan->count()}}">
        {{ $indikator->indikator}} </td>
    @endif
    <td style="vertical-align:middle;">
        <textarea style="height:130px;"
            class="form-control transparent disable"
            readonly>{{ $data->pertanyaan->pertanyaan}}</textarea>
        <input type="hidden" name="id_pertanyaan[]" class="form-control"
            value="{{$data->id_pertanyaan}}">
    </td>
    <td>
        <input type="text" name="jumlah[]"
            class="form-control @error('jumlah') is-invalid @enderror"
            value="{{$data->jumlah}}">

        <!--Error Message-->
        @error('jumlah')
        <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
        @enderror
    </td>
    <td>
        <textarea name="keterangan[]"
            class="form-control @error('keterangan') is-invalid @enderror" value="$data->keterangan"></textarea>

        <!--Error Message-->
        @error('keterangan')
        <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
        @enderror
    </td>
    <td>
        <div class="custom-file"
            style="margin-left:10px; margin-right:10px;">
            <input type="file" name="bukti[]" class="custom-file-input">
            <label class="custom-file-label"></label>
        </div>

        <!--Error Message-->
        @error('bukti')
        <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
        @enderror

    </td>
</tr>
@endforeach
@endforeach
@endforeach

Controller:

public function edit($id)
{
    $sasarans = Sasaran::all();
    $laporan_indikators = LaporanIndikator::where('id',$id)->first();
    $data_laporans = DataLaporan::where('id_laporan',$id)->get();
    return view('indikator-kinerja.edit',compact('laporan_indikators','data_laporans','sasarans'));
}

Sasaran Model:

protected $fillable = ['sasaran'];

public function indikator() {
    return $this->hasMany(DataIndikator::class, 'id_sasaran','id');
}

Indikator’s Model:

protected $fillable = ['id_sasaran', 'indikator'];

public function sasaran() {
    return $this->belongsTo(Sasaran::class, 'id_sasaran','id');
}

public function pertanyaan() {
    return $this->hasMany(Pertanyaan::class, 'id_indikator','id');
}

Pertanyaan’s Model:

protected $fillable = ['id_indikator', 'pertanyaan'];

public function indikator() {
    return $this->belongsTo(DataIndikator::class, 'id_indikator','id');
}

public function data_laporan() {
    return $this->belongsTo(DataLaporan::class, 'id_laporan','id');
}

Data Laporan’s Model:

protected $fillable = ['id_laporan', 'id_pertanyaan','jumlah','keterangan','bukti'];

public function laporan() {
    return $this->belongsTo(LaporanIndikator::class, 'id_laporan','id');
}

public function pertanyaan() {
    return $this->belongsTo(Pertanyaan::class, 'id_pertanyaan','id');
}

Laporan Indikator’s Model:

 public function data_laporan() {
    return $this->hasMany(DataLaporan::class);
}

I’m really sorry for my bad English, but I’m really appreciate your help. Thank you.

Update: I tried to do this in my view to fix the rowspan, but the question is looping for 47 times for every sasaran and indikator (I mean, not fit with amount of its sasaran and indikator), and the amount of indikator is not fit with the sasaran. You can take a look to the Create form view that I attached for the example view that I want. I think I know where’s the problem is, but I don’t really know how to fix it. Please help me because I’m still a beginner. Thank you.

Code for new View:

@foreach($sasarans as $i => $sasaran)
 @php ($first = true) @endphp
   @foreach($sasaran->indikator as $indikator)
     @foreach($data_laporans as $data)
       <tr>
       @if($loop->first)
         <td rowspan="{{$data->pertanyaan->count()}}">{{$i+1}} </td>
         <td rowspan="{{$data->pertanyaan->count()}}">{{$sasaran->sasaran}}</td>
         <td rowspan="{{$data->pertanyaan->count()}}">{{$indikator->indikator}} </td>
 @php ($first = false) @endphp
       @endif
       <td style="vertical-align:middle;"><textarea style="height:130px;"
                                                         class="form-control transparent disable" readonly>{{ $data->pertanyaan->pertanyaan}}</textarea>
<input type="hidden" name="id_pertanyaan[]" class="form-control" value="{{$data->pertanyaan->id}}"></td>
      <td><input type="text" name="jumlah[]" class="form-control @error('jumlah') is-invalid @enderror" value="{{$data->jumlah}}">
          <!--Error Message-->
          @error('jumlah')
           <span class="invalid-feedback" role="alert">
             <strong>{{ $message }}</strong>
            </span>
           @enderror
     </td>
     <td><textarea name="keterangan[]" class="form-control @error('keterangan') is-invalid @enderror">{{$data->keterangan</textarea> 
          <!--Error Message-->
          @error('keterangan')
            <span class="invalid-feedback" role="alert">
              <strong>{{ $message }}</strong>
             </span>
            @enderror
    </td>
    <td>
      <div class="custom-file" style="margin-left:10px; margin-right:10px;">
        <input type="file" name="bukti[]" class="custom-file-input"> 
        <label class="custom-file-label"></label>
       </div>
     <!--Error Message-->
     @error('bukti')
      <span class="invalid-feedback" role="alert">
       <strong>{{ $message }}</strong>
      </span>
     @enderror
   </td>
  </tr>
 @endforeach
@endforeach
@endforeach

New View -1 New View – 2

Answer

After trying for some times, finally I found the solution. I just add the variable $data_laporans like this:

@foreach($sasarans as $i => $sasaran)
   @php ($first = true) @endphp
   @foreach($sasaran->indikator as $indikator)
     @foreach($indikator->pertanyaan as $pertanyaan)
        <tr>
           @if($loop->first)
              <td rowspan="{{$indikator->pertanyaan->count()}}">{{$i+1}} </td>
              <td rowspan="{{$indikator->pertanyaan->count()}}">{{$sasaran->sasaran}}</td>
               <td rowspan="{{$indikator->pertanyaan->count()}}">{{$indikator->indikator}}</td>
             @php ($first = false) @endphp
             @endif
                <td><textarea>{{ $pertanyaan->pertanyaan}}</textarea></td>
                @foreach($pertanyaan->data_laporan as $data)
                <!--Add your data here-->
                @endforeach
  </tr>
  @endforeach
 @endforeach
@endforeach

I also change the relationship between DataLaporan and Pertanyaan:

DataLaporan Model:

public function pertanyaan() {
    return $this->belongsTo(Pertanyaan::class, 'id_pertanyaan','id');
}

Pertanyaan Model:

public function data_laporan() {
    return $this->hasMany(DataLaporan::class, 'id_pertanyaan','id');
}