@extends('website.index')
@section('title', '{{ $movie->name }}')

@section('body')
<!-- Video Player Section -->
<section class="video-player-section">
    <div class="video-container">
        <video id="mainVideoPlayer" class="video-player" controls poster="{{ asset('uploads/thumbnail/' . $movie->thumbnail_image) }}">
            <source src="{{ asset('uploads/movies/' . $movie->movie_url) }}" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
</section>

<!-- Movie Information -->
<main class="main-content py-4">
    <div class="container-fluid px-4">
        <div class="row">
            <!-- Movie Details -->
            <div class="col-lg-8">
                <div class="movie-info">
                    <h1 class="movie-title">{{ $movie->name }}</h1>

                    <div class="movie-meta mb-3">
                        <span class="badge bg-secondary me-2">{{ $movie->year }}</span>
                        <span class="text-muted me-3">{{ $movie->duration }}</span>
                        <span class="badge bg-warning text-dark me-2">{{ $movie->rating }} IMDb</span>
                    </div>

                    <div class="movie-description mb-4">
                        <h5>Synopsis</h5>
                        <p class="text-muted">{{ $movie->description }}</p>
                    </div>

                    <div class="movie-genres mb-3">
                        <h6>Category</h6>
                        <span class="badge bg-secondary">{{ $movie->category->name }}</span>
                    </div>

                    <div class="movie-genres mb-3">
                        <h6>Language</h6>
                        <span class="badge bg-secondary">{{ $movie->language->name }}</span>
                    </div>
                </div>

                <!-- Optional Ad -->
                <div class="google-ad-slot my-4">
                    <span>Advertisement</span>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Up Next -->
                @if($upNext)
                <div class="up-next-section mb-4">
                    <h5 class="section-title">Up Next</h5>
                    <a href="{{ route('watch', [$upNext->code, $upNext->slug]) }}" class="text-decoration-none text-light">
                        <div class="up-next-card d-flex">
                            <img src="{{ asset('uploads/thumbnail/' . $movie->thumbnail_image) }}" alt="{{ $upNext->name }}" class="img-fluid me-3" style="width:120px; border-radius:8px;">
                            <div>
                                <h6>{{ $upNext->name }}</h6>
                                <small class="text-muted">{{ $upNext->year }} • {{ $upNext->duration }}</small>
                            </div>
                        </div>
                    </a>
                </div>
                @endif

                <!-- More Like This -->
                <div class="related-section mb-4">
                    <h5 class="section-title">More Like This</h5>
                    @foreach($moreLikeThis as $related)
                    <a href="{{ route('watch', [$related->code, $related->slug]) }}" class="d-flex align-items-center text-decoration-none mb-3 text-light">
                        <img src="{{ asset('uploads/thumbnail/' . $movie->thumbnail_image) }}" alt="{{ $related->name }}" class="me-3" style="width:80px; height:45px; object-fit:cover; border-radius:6px;">
                        <div>
                            <h6 class="mb-0">{{ $related->name }}</h6>
                            <small class="text-muted">{{ $related->year }} • {{ $related->rating }} IMDb</small>
                        </div>
                    </a>
                    @endforeach
                </div>

                <!-- Popular Movies -->
                <div class="related-section">
                    <h5 class="section-title">Popular Movies</h5>
                    @foreach($popularMovies as $popular)
                    <a href="{{ route('watch', [$popular->code, $popular->slug]) }}" class="d-flex align-items-center text-decoration-none mb-3 text-light">
                        <img src="{{ asset('uploads/thumbnail/' . $movie->thumbnail_image) }}" alt="{{ $popular->name }}" class="me-3" style="width:80px; height:45px; object-fit:cover; border-radius:6px;">
                        <div>
                            <h6 class="mb-0">{{ $popular->name }}</h6>
                            <small class="text-muted">{{ $popular->year }} • {{ $popular->rating }} IMDb</small>
                        </div>
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</main>
@endsection