some progress

app/Livewire/MoviePage/Tabs/Cast.php

@@ -32,6 +32,5 @@ class Cast extends Component
             ];
         }
         $this->peopleByDepartment = $peopleByDepartment;
-
     }
 }

app/Livewire/MoviePage/Tabs/Crew.php

@@ -2,12 +2,36 @@
 
 namespace App\Livewire\MoviePage\Tabs;
 
+use App\Models\Movie;
+use App\Models\Person;
 use Livewire\Component;
 
 class Crew extends Component
 {
+    public $movie;
+    public $peopleByDepartment;
+
     public function render()
     {
         return view('livewire.movie-page.tabs.crew');
     }
+
+    public function mount()
+    {
+        $this->movie = Movie::with('crewList')->where('id', $this->movie->id)->first();
+
+        $peopleByDepartment = [];
+
+        foreach ($this->movie->crewList as $castMember) {
+
+            if (!isset($peopleByDepartment[$castMember->pivot->department])) {
+                $peopleByDepartment[$castMember->pivot->department] = [];
+            }
+            $peopleByDepartment[$castMember->pivot->department][] = [
+                Person::find($castMember->pivot->person_id),
+                $castMember->pivot->job,
+            ];
+        }
+        $this->peopleByDepartment = $peopleByDepartment;
+    }
 }

app/Models/Movie.php

@@ -56,7 +56,7 @@ class Movie extends Model
 
     public function crewList()
     {
-        return $this->belongsToMany(Person::class, 'movie_crew', 'movie_id', 'person_id');
+        return $this->belongsToMany(Person::class, 'movie_crew', 'movie_id', 'person_id')->withPivot('department', 'job');
     }
 
     public function images()

resources/views/livewire/movie-page/tabs/crew.blade.php

@@ -1,3 +1,31 @@
 <div>
-    {{-- A good traveler has no fixed plans and is not intent upon arriving. --}}
+    <div class="cast-list">
+        @foreach($peopleByDepartment as $department => $personInfo)
+            <div class="department">
+                {{ $department }}
+                <hr>
+                <div class="persons">
+                    <div class="row">
+                        @foreach($personInfo as [$person, $character])
+                            <div class="col-md-3">
+                                <div class="person">
+                                    @if($person->profile_path == null)
+                                        @if($person->gender == 2)
+                                            <img src="/img/no_avatar_male.png" alt="" class="img img-fluid float-start">
+                                        @else
+                                            <img src="/img/no_avatar_female.png" alt="" class="img img-fluid float-start">
+                                        @endif
+                                    @else
+                                        <img src="http://image.tmdb.org/t/p/w185/{{ $person->profile_path }}" alt="" class="img img-fluid float-start">
+                                    @endif
+                                    <a href="">{{ $person->name }}</a> <br>
+                                    {{ $character }}
+                                </div>
+                            </div>
+                        @endforeach
+                    </div>
+                </div>
+            </div>
+        @endforeach
+    </div>
 </div>

resources/views/movie/show.blade.php

@@ -60,7 +60,9 @@
                                         <div class="tab-pane fade" id="cast-tab-pane" role="tabpanel" aria-labelledby="cast-tab" tabindex="0">
                                             @livewire(App\Livewire\MoviePage\Tabs\Cast::class, ['movie' => $movie])
                                         </div>
-                                        <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
+                                        <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
+                                            @livewire(App\Livewire\MoviePage\Tabs\Crew::class, ['movie' => $movie])
+                                        </div>
                                         <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
                                     </div>
                                 </span>