@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Search Results for "{{ $query }}"</h5>
                </div>
                <div class="card-body">
                    @if(!$query)
                        <div class="alert alert-info">
                            Please enter a search term to find movies, TV shows, or people.
                        </div>
                    @elseif($movies->isEmpty() && $shows->isEmpty() && $people->isEmpty())
                        <div class="alert alert-warning">
                            No results found for "{{ $query }}". Please try a different search term.
                        </div>
                    @else
                        <ul class="nav nav-tabs mb-4" id="searchTabs" role="tablist">
                            @if($type === 'all')
                                <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" aria-controls="movies" aria-selected="true">
                                        Movies ({{ $movies->count() }})
                                    </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" aria-controls="shows" aria-selected="false">
                                        TV Shows ({{ $shows->count() }})
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="people-tab" data-bs-toggle="tab" data-bs-target="#people" type="button" role="tab" aria-controls="people" aria-selected="false">
                                        People ({{ $people->count() }})
                                    </button>
                                </li>
                            @elseif($type === 'movie')
                                <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" aria-controls="movies" aria-selected="true">
                                        Movies ({{ $movies->count() }})
                                    </button>
                                </li>
                            @elseif($type === 'tv')
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="shows-tab" data-bs-toggle="tab" data-bs-target="#shows" type="button" role="tab" aria-controls="shows" aria-selected="true">
                                        TV Shows ({{ $shows->count() }})
                                    </button>
                                </li>
                            @elseif($type === 'person')
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="people-tab" data-bs-toggle="tab" data-bs-target="#people" type="button" role="tab" aria-controls="people" aria-selected="true">
                                        People ({{ $people->count() }})
                                    </button>
                                </li>
                            @endif
                        </ul>

                        <div class="tab-content" id="searchTabsContent">
                            <!-- Movies Tab -->
                            <div class="tab-pane fade {{ ($type === 'all' || $type === 'movie') ? 'show active' : '' }}" id="movies" role="tabpanel" aria-labelledby="movies-tab">
                                @if($movies->isEmpty())
                                    <div class="alert alert-info">No movies found matching "{{ $query }}".</div>
                                @else
                                    <div class="row">
                                        @foreach($movies as $movie)
                                            <div class="col-md-2 mb-4">
                                                <div class="movie-card">
                                                    <a href="{{ route('movie.show', $movie->slug) }}" title="{{ $movie->title }}">
                                                        <img
                                                            src="@if($movie->poster_path) http://image.tmdb.org/t/p/w185/{{ $movie->poster_path }} @else /img/no_poster.png @endif"
                                                            alt="{{ $movie->title }}"
                                                            title="{{ $movie->title }} @if($movie->release_date) ({{ $movie->release_date->format('Y') }}) @endif"
                                                            class="img img-fluid"
                                                        >
                                                    </a>
                                                    <ul class="quick-actions">
                                                        <li>
                                                            <a href=""><span class="iconify" data-icon="mdi-check-outline"></span></a>
                                                        </li>
                                                        <li>
                                                            <a href=""><span class="iconify" data-icon="mdi-image-multiple"></span></a>
                                                        </li>
                                                        <li>
                                                            <a href="">
                                                                {{ $movie->vote_average }} <span class="iconify" data-icon="mdi-star"></span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>

                            <!-- TV Shows Tab -->
                            <div class="tab-pane fade {{ $type === 'tv' ? 'show active' : '' }}" id="shows" role="tabpanel" aria-labelledby="shows-tab">
                                @if($shows->isEmpty())
                                    <div class="alert alert-info">No TV shows found matching "{{ $query }}".</div>
                                @else
                                    <div class="row">
                                        @foreach($shows as $show)
                                            <div class="col-md-2 mb-4">
                                                <div class="movie-card">
                                                    <a href="{{ route('show.show', $show->slug) }}" title="{{ $show->name }}">
                                                        <img
                                                            src="@if($show->poster_path) http://image.tmdb.org/t/p/w185/{{ $show->poster_path }} @else /img/no_poster.png @endif"
                                                            alt="{{ $show->name }}"
                                                            title="{{ $show->name }} @if($show->first_air_date) ({{ $show->first_air_date->format('Y') }}) @endif"
                                                            class="img img-fluid"
                                                        >
                                                    </a>
                                                    <ul class="quick-actions">
                                                        <li>
                                                            <a href=""><span class="iconify" data-icon="mdi-check-outline"></span></a>
                                                        </li>
                                                        <li>
                                                            <a href=""><span class="iconify" data-icon="mdi-image-multiple"></span></a>
                                                        </li>
                                                        <li>
                                                            <a href="">
                                                                {{ $show->vote_average }} <span class="iconify" data-icon="mdi-star"></span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>

                            <!-- People Tab -->
                            <div class="tab-pane fade {{ $type === 'person' ? 'show active' : '' }}" id="people" role="tabpanel" aria-labelledby="people-tab">
                                @if($people->isEmpty())
                                    <div class="alert alert-info">No people found matching "{{ $query }}".</div>
                                @else
                                    <div class="row">
                                        @foreach($people as $person)
                                            <div class="col-md-2 mb-4">
                                                <div class="movie-card">
                                                    <a href="{{ route('celebrity.show', $person->slug) }}" title="{{ $person->name }}">
                                                        <img
                                                            src="@if($person->profile_path) http://image.tmdb.org/t/p/w185/{{ $person->profile_path }} @else /img/user_no_avatar.png @endif"
                                                            alt="{{ $person->name }}"
                                                            title="{{ $person->name }}"
                                                            class="img img-fluid"
                                                        >
                                                    </a>
                                                    <div class="text-center mt-2">
                                                        <small>{{ $person->name }}</small>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection