@extends('layouts.app')

@section('content')
    <div class="container-fluid celebrity-page py-4">
        <div class="row">
            <!-- Main Content -->
            <div class="col-lg-9">
                <!-- Celebrity Header -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row">
                            <!-- Profile and Actions -->
                            <div class="col-md-3">
                                <div class="celebrity-poster mb-3">
                                    @if($celebrity->profile_path)
                                        <img src="http://image.tmdb.org/t/p/w342/{{ $celebrity->profile_path }}"
                                             alt="{{ $celebrity->name }}"
                                             class="img-fluid rounded shadow-sm">
                                    @else
                                        <div class="no-profile rounded shadow-sm d-flex align-items-center justify-content-center p-2" style="height: 300px; background-color: #f8f9fa;">
                                            <span class="text-muted">No Image</span>
                                        </div>
                                    @endif
                                </div>

                                <!-- External Links -->
                                <div class="external-links mb-3">
                                    <div class="d-flex gap-2">
                                        <a href="https://www.themoviedb.org/person/{{ $celebrity->tmdb_id }}" class="btn btn-sm btn-outline-secondary" target="_blank">
                                            <img src="{{ asset('/img/tmdb.webp') }}" alt="TMDB" height="20">
                                        </a>
                                        @if($celebrity->imdb_id)
                                            <a href="https://www.imdb.com/name/{{ $celebrity->imdb_id }}" class="btn btn-sm btn-outline-secondary" target="_blank">
                                                <img src="{{ asset('/img/imdb.png') }}" alt="IMDB" height="20">
                                            </a>
                                        @endif
                                    </div>
                                </div>

                                @if($celebrity->homepage)
                                    <a href="{{ $celebrity->homepage }}" target="_blank" class="btn btn-outline-secondary w-100 mb-3">
                                        <span class="iconify me-1" data-icon="mdi-home"></span>
                                        Homepage
                                    </a>
                                @endif
                            </div>

                            <!-- Celebrity Info -->
                            <div class="col-md-9">
                                <h1 class="celebrity-title mb-2">{{ $celebrity->name }}</h1>

                                <div class="personal-info mb-3">
                                    @if($celebrity->birtday)
                                        <p class="mb-1">
                                            <strong class="text-muted">Birthday:</strong> {{ $celebrity->birtday }}
                                            @if($celebrity->palce_of_birth) ({{ $celebrity->palce_of_birth }}) @endif
                                        </p>
                                    @endif
                                    @if($celebrity->deathday)
                                        <p class="mb-1">
                                            <strong class="text-muted">Deathday:</strong> {{ $celebrity->deathday }}
                                        </p>
                                    @endif
                                </div>

                                <div class="biography mb-4">
                                    <h5 class="mb-2">Biography</h5>
                                    <p class="text-muted">{{ $celebrity->biography }}</p>
                                </div>

                                @if($celebrity->also_known_as)
                                    <div class="also-known mb-4">
                                        <h5 class="mb-2">Also Known As</h5>
                                        <p class="text-muted">
                                            @foreach(json_decode($celebrity->also_known_as ?? "{}", true) as $alsoKnown)
                                                {{ $alsoKnown }}@if(!$loop->last), @endif
                                            @endforeach
                                        </p>
                                    </div>
                                @endif

                                <!-- Tabs -->
                                <div class="celebrity-tabs">
                                    <ul class="nav nav-tabs" id="celebrityTabs" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link active" id="movies-tab" data-bs-toggle="tab" data-bs-target="#movies" type="button" role="tab">Movies</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="shows-tab" data-bs-toggle="tab" data-bs-target="#shows" type="button" role="tab">Shows</button>
                                        </li>
                                    </ul>
                                    <div class="tab-content p-3 border border-top-0 rounded-bottom" id="celebrityTabsContent">
                                        <div class="tab-pane fade show active" id="movies" role="tabpanel">
                                            @foreach($moviesByDepartments as $department => $movies)
                                                <h5 class="mt-3 mb-3">{{ $department }}</h5>
                                                <div class="row">
                                                    @foreach($movies as $movie)
                                                        <div class="col-md-2 mb-3">
                                                            <a href="{{ route('movie.show', $movie->slug) }}" class="text-decoration-none">
                                                                @if($movie->poster_path)
                                                                    <div class="movie-poster">
                                                                        <img
                                                                            src="http://image.tmdb.org/t/p/w185/{{ $movie->poster_path }}"
                                                                            alt="{{ $movie->title }}"
                                                                            title="{{ $movie->title }}"
                                                                            class="img-fluid rounded shadow-sm"
                                                                        >
                                                                        <div class="movie-title text-center mt-2">
                                                                            <small>{{ $movie->title }}</small>
                                                                        </div>
                                                                    </div>
                                                                @else
                                                                    <div class="no-poster rounded shadow-sm d-flex align-items-center justify-content-center p-2" style="height: 150px; background-color: #f8f9fa;">
                                                                        <small class="text-center">{{ $movie->title }}</small>
                                                                    </div>
                                                                @endif
                                                            </a>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="tab-pane fade" id="shows" role="tabpanel">
                                            @foreach($showsByDepartment as $department => $shows)
                                                <h5 class="mt-3 mb-3">{{ $department }}</h5>
                                                <div class="row">
                                                    @foreach($shows as $show)
                                                        <div class="col-md-2 mb-3">
                                                            <a href="{{ route('show.show', $show->slug) }}" class="text-decoration-none">
                                                                @if($show->poster_path)
                                                                    <div class="movie-poster">
                                                                        <img
                                                                            src="http://image.tmdb.org/t/p/w185/{{ $show->poster_path }}"
                                                                            alt="{{ $show->name }}"
                                                                            title="{{ $show->name }}"
                                                                            class="img-fluid rounded shadow-sm"
                                                                        >
                                                                        <div class="movie-title text-center mt-2">
                                                                            <small>{{ $show->name }}</small>
                                                                        </div>
                                                                    </div>
                                                                @else
                                                                    <div class="no-poster rounded shadow-sm d-flex align-items-center justify-content-center p-2" style="height: 150px; background-color: #f8f9fa;">
                                                                        <small class="text-center">{{ $show->name }}</small>
                                                                    </div>
                                                                @endif
                                                            </a>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="user-actions">
                            <a href="#" class="d-block mb-3 text-decoration-none">
                                <span class="iconify me-1" data-icon="mdi-eye-check-outline"></span> Mark as seen
                            </a>
                            <a href="#" class="d-block mb-3 text-decoration-none">
                                <span class="iconify me-1" data-icon="mdi-thumb-up-outline"></span> Like
                            </a>
                            <a href="#" class="d-block mb-3 text-decoration-none">
                                <span class="iconify me-1" data-icon="mdi-playlist-check"></span> Add to list
                                <span class="float-end">
                                    <span class="iconify" data-icon="mdi-chevron-down"></span>
                                </span>
                            </a>
                            <hr>
                            @include('layouts.rating')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection