@extends('layouts.app')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&display=swap" rel="stylesheet">
<style>
body{font-family:'Montserrat',sans-serif;}
</style>
<div class="bg-[#141414] min-h-screen text-white">

<!-- HERO -->
<div class="relative h-[80vh] bg-cover bg-center"
     style="background-image:url('/images/hero.jpg')">

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

<div class="absolute bottom-20 left-16 max-w-xl">
<h1 class="text-5xl font-bold mb-4">Featured Movie</h1>
<p class="text-lg text-gray-300 mb-6">
Watch the latest blockbuster now streaming exclusively on Playmax247.
</p>
<div class="space-x-4">
<button class="bg-white text-black px-6 py-3 rounded font-bold">▶ Play</button>
<button class="bg-gray-600/70 px-6 py-3 rounded">More Info</button>
</div>
</div>

</div>

<!-- MOVIE ROW -->
<div class="px-16 py-10">
<h2 class="text-xl mb-4">Trending Now</h2>

<div class="flex space-x-4 overflow-x-auto scrollbar-hide">
@for($i=1;$i<=12;$i++)
<div class="min-w-[200px] h-[120px] bg-gray-800 rounded hover:scale-110 transition"></div>
@endfor
</div>

@foreach(auth()->user()->adminNotifications as $notification)

<div class="bg-gray-900 p-4 rounded mb-3">
    <h4>{{ $notification->title }}</h4>
    <p>{{ $notification->message }}</p>

    @if(!$notification->pivot->is_read)
        <a href="{{ route('notifications.read',$notification->id) }}"
           class="text-red-500 text-sm">Mark as Read</a>
    @endif
</div>

@endforeach
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="revenueChart"></canvas>

<script>
new Chart(document.getElementById('revenueChart'), {
    type: 'line',
    data: {
        labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        datasets: [{
            label: 'Revenue (GH₵)',
            data: @json($monthlyRevenue),
            borderColor: '#E50914',
            backgroundColor: 'rgba(229,9,20,0.2)',
            tension: 0.4
        }]
    }
});
</script>
</div>

@endsection