@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card mb-4">
                <div class="card-body p-0">
                    <img src="https://a.ltrbxd.com/sm/upload/zl/t8/nl/gy/yir-banner-1900-o.png?k=caf651e2bd" alt="" class="img-fluid w-100">
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">New Movies</h5>
                    <a href="{{ route('movie.index') }}" class="btn btn-sm btn-outline-primary">View All &rarr;</a>
                </div>
                <div class="card-body">
                    @livewire(App\Livewire\Homepage\Movies\NewMoviesComponent::class)
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Upcoming Movies</h5>
                    <a href="{{ route('movie.index') }}" class="btn btn-sm btn-outline-primary">View All &rarr;</a>
                </div>
                <div class="card-body">
                    @livewire(App\Livewire\Homepage\Movies\UpcomingMoviesComponent::class)
                </div>
            </div>
        </div>

        <div class="col-md-2 right-sidebar">
            <div class="card">
                <div class="card-header">Trending Now</div>
                <div class="card-body trending-movies">
                    @foreach($trendingMovies as $movie)
                        <div class="movie-item">
                            <a href="{{ route('movie.show', $movie->slug) }}" title="{{ $movie->title }}">
                                <img src="http://image.tmdb.org/t/p/w92/{{ $movie->poster_path }}" alt="{{ $movie->title }}">
                            </a>
                            <div class="movie-info">
                                <a href="{{ route('movie.show', $movie->slug) }}" title="{{ $movie->title }}">
                                    <h6>
                                        {{ $movie->title }}
                                    </h6>
                                </a>
                                <div class="rating">
                                    <span class="iconify" data-icon="mdi-star"></span>
                                    {{ number_format($movie->vote_average, 1) }} / {{ $movie->vote_count }}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="card">
                <div class="card-header">Quick Links</div>
                <div class="card-body quick-links">
                    <ul>
                        <li>
                            <a href="{{ route('movie.index') }}">
                                <span class="iconify" data-icon="mdi-movie"></span>
                                All Movies
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('show.index') }}">
                                <span class="iconify" data-icon="mdi-television"></span>
                                TV Shows
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('celebrity.index') }}">
                                <span class="iconify" data-icon="mdi-account-group"></span>
                                Celebrities
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('forums.index') }}">
                                <span class="iconify" data-icon="mdi-forum"></span>
                                Forums
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="card">
                <div class="card-header">Latest Reviews</div>
                <div class="card-body">
                    @foreach($latestReviews as $review)
                        <div class="review-item mb-3">
                            <div class="d-flex align-items-center mb-2">
                                <img src="{{ $review->author_avatar }}" alt="{{ $review->author_name }}" class="rounded-circle me-2" width="32" height="32">
                                <div>
                                    <h6 class="mb-0">{{ $review->author_name }}</h6>
                                    <small class="text-muted">{{ \Carbon\Carbon::createFromTimeString($review->published_at)->diffForHumans() }}</small>
                                </div>
                            </div>
                            <p class="mb-0 text-truncate">{{ $review->content }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection