@extends('layouts.app')

@section('content')

<style>
.video-js{
background:black;
}

.vjs-control-bar{
background:linear-gradient(
transparent,
rgba(0,0,0,.9)
);
}

.vjs-big-play-button{
background:red;
border:none;
border-radius:50%;
}
</style>

<section class="relative h-screen bg-cover bg-center"
style="background-image: url('{{ $movie->backdrop_url }}')">

<div class="absolute inset-0 bg-gradient-to-t from-black via-black/80 to-transparent"></div>

<div class="relative z-10 max-w-4xl px-10 pt-40">

<h1 class="text-5xl font-bold mb-4">
{{ $movie->name }}
</h1>

<div class="flex items-center space-x-4 text-sm text-gray-300 mb-6">

<span>{{ $movie->year }}</span>

<span>{{ $movie->maturity_rating }}</span>

<span>{{ $movie->runtime_minutes }} mins</span>

</div>

<p class="max-w-2xl mb-6 text-gray-300">
{{ $movie->synopsis }}
</p>

<button
onclick="openPlayer()"
class="bg-white text-black px-6 py-3 rounded font-semibold hover:bg-gray-200">

▶ Play Now

</button>

</div>

</section>

<!-- PLAYER -->
<div id="playerModal"
class="fixed inset-0 bg-black hidden z-50">

<button
onclick="closePlayer()"
class="absolute top-6 right-10 text-white text-3xl z-50">

✕

</button>

<div class="w-full h-full flex items-center justify-center">

<div class="w-full max-w-7xl">

<video
id="netflixPlayer"
class="video-js vjs-default-skin vjs-big-play-centered w-full h-[80vh]"
controls
preload="auto">

<source src="{{ asset('videos/'.$movie->video_url) }}" type="video/mp4">

</video>

</div>

</div>

</div>

<script>

let player;

function openPlayer(){

document
.getElementById("playerModal")
.classList.remove("hidden");

if(!player){

player = videojs('netflixPlayer',{

controls:true,

playbackRates:[
0.5,
1,
1.25,
1.5,
2
],

controlBar:{
children:[
'playToggle',
'volumePanel',
'currentTimeDisplay',
'timeDivider',
'durationDisplay',
'progressControl',
'playbackRateMenuButton',
'fullscreenToggle'
]
}

});

}

player.play();

}

function closePlayer(){

player.pause();

document
.getElementById("playerModal")
.classList.add("hidden");

}

</script>

@endsection