@extends('layouts.app')

@section('content')

<link href="https://vjs.zencdn.net/8.5.2/video-js.css" rel="stylesheet"/>

<style>
.player-container{
background:#000;
padding:20px;
}

.video-js{
width:100%;
height:75vh;
}

.movie-info{
color:white;
padding:20px;
background:#111;
}
</style>

<div class="player-container">

<video
id="movie-player"
class="video-js vjs-default-skin"
controls
preload="auto"
poster="{{ asset('storage/'.$movie->poster) }}"
data-setup='{}'
>

<source src="{{ asset('storage/'.$movie->video_default) }}" type="video/mp4" label="Auto">

@if($movie->video_480)
<source src="{{ asset('storage/'.$movie->video_480) }}" type="video/mp4" label="480p">
@endif

@if($movie->video_720)
<source src="{{ asset('storage/'.$movie->video_720) }}" type="video/mp4" label="720p">
@endif

@if($movie->video_1080)
<source src="{{ asset('storage/'.$movie->video_1080) }}" type="video/mp4" label="1080p">
@endif


@if($movie->subtitle1)
<track kind="subtitles" src="{{ $movie->subtitle1 }}" srclang="en" label="English">
@endif

@if($movie->subtitle2)
<track kind="subtitles" src="{{ $movie->subtitle2 }}" srclang="fr" label="French">
@endif

@if($movie->subtitle3)
<track kind="subtitles" src="{{ $movie->subtitle3 }}" srclang="es" label="Spanish">
@endif

</video>

</div>

<div class="movie-info">

<h2>{{ $movie->title }}</h2>

<p>{{ $movie->description }}</p>

<p>
⭐ IMDb: {{ $movie->imdb_rating }}  
🎬 Duration: {{ $movie->duration }}  
📅 Release: {{ $movie->release_date }}
</p>

@if($movie->trailer_url)
<a href="{{ $movie->trailer_url }}" target="_blank" class="btn btn-danger">
Watch Trailer
</a>
@endif

</div>


<script src="https://vjs.zencdn.net/8.5.2/video.min.js"></script>

@endsection