@extends('layouts.app')

@section('content')
    <div class="container-fluid celebrity-page">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header">
                        <h1 class="celebrity-title">{{ $celebrity->name }}</h1>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-2">
                                <img src="http://image.tmdb.org/t/p/w185/{{ $celebrity->profile_path }}" alt="">
                                <a href="https://www.themoviedb.org/person/{{ $celebrity->tmdb_id }}" target="_blank">TMDB</a>
                                @if($celebrity->homepage)
                                    | <a href="{{ $celebrity->homepage }}" target="_blank">TMDB</a>
                                @endif
                                @if($celebrity->imdb_id)
                                    | <a href="https://www.imdb.com/name/{{ $celebrity->imdb_id }}" target="_blank">IMDB</a>
                                @endif
                            </div>
                            <div class="col-md-10">
                                @if($celebrity->birtday)
                                    <strong>Birthday</strong> {{ $celebrity->birtday }} @if($celebrity->palce_of_birth) ({{ $celebrity->palce_of_birth }}) @endif
                                @endif
                                @if($celebrity->deathday)
                                    <strong>Deathday</strong> {{ $celebrity->deathday }}
                                @endif
                                <p>
                                    {{ $celebrity->biography }}
                                </p>
                                @if($celebrity->also_known_as)
                                    <p>
                                        <strong>Also known as:</strong>
                                        @foreach(json_decode($celebrity->also_known_as ?? "{}", true) as $alsoKnown)
                                            {{ $alsoKnown }}
                                            @if(!$loop->last), @endif
                                        @endforeach
                                    </p>
                                @endif
                                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link active" id="movies-tab" data-bs-toggle="tab" data-bs-target="#movies-tab-pane" type="button" role="tab" aria-controls="movies-tab-pane" aria-selected="true">Movies</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="shows-tab" data-bs-toggle="tab" data-bs-target="#shows-tab-pane" type="button" role="tab" aria-controls="shows-tab-pane" aria-selected="false">Shows</button>
                                        </li>
                                    </ul>
                                    <div class="tab-content" id="myTabContent">
                                        <div class="tab-pane fade show active" id="movies-tab-pane" role="tabpanel" aria-labelledby="movies-tab" tabindex="0">
                                            <div class="row">
                                                @foreach($moviesByDepartments as $department => $movies)
                                                    <div class="celebrity-department">
                                                        <h3>{{ $department }}</h3>
                                                    </div>
                                                    @foreach($movies as $movie)
                                                        <div class="col-md-2">
                                                            <div class="celebrity-movie-small">
                                                                <a href="{{ route('movie.show', $movie->slug) }}">
                                                                    <img
                                                                        src="http://image.tmdb.org/t/p/w185/{{ $movie->poster_path }}"
                                                                        alt="{{ $movie->title }}"
                                                                        title="{{ $movie->title }}"
                                                                        class="img img-fluid"
                                                                    >
                                                                </a>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @endforeach
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="shows-tab-pane" role="tabpanel" aria-labelledby="shows-tab" tabindex="0">
                                            <div class="row">
                                                @foreach($showsByDepartment as $department => $shows)
                                                    <div class="celebrity-department">
                                                        <h3>{{ $department }}</h3>
                                                    </div>
                                                    @foreach($shows as $show)
                                                        <div class="col-md-2">
                                                            <div class="celebrity-movie-small">
                                                                <a href="{{ route('show.show', $show->slug) }}">
                                                                    <img
                                                                        src="http://image.tmdb.org/t/p/w185/{{ $show->poster_path }}"
                                                                        alt="{{ $show->name }}"
                                                                        title="{{ $show->name }}"
                                                                        class="img img-fluid"
                                                                    >
                                                                </a>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card">
                    <div class="user-actions">
                        <ul>
                            <li>
                                <a href=""><span class="iconify" data-icon="mdi-eye-check-outline"></span> Mark as seen</a>
                            </li>
                            <li>
                                <a href=""><span class="iconify" data-icon="mdi-thumb-up-outline"></span> Like</a>
                            </li>
                            <li>
                                <a href=""><span class="iconify" data-icon="mdi-playlist-check"></span> add to list</a>
                            </li>
                        </ul>
                        <hr>
                        rate
                        <hr>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection