@extends('layouts.app')


<style>
    .card-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 1.1rem;
        color: #333;
        margin-bottom: 0.75rem;
    }
</style>

<style>
    .sticky-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: linear-gradient(to right, #4caf50, #ffffff);
        padding: 24px 0;
        border-bottom: 2px solid #ccc;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .sticky-header h2 {
        font-size: 1.75rem;
        font-weight: bold;
        color: #000; /* Warna hitam */
        margin-bottom: 4px;
    }

    .sticky-header small {
        font-size: 1rem;
        color: #333; /* Abu tua agar tetap kontras */
    }
    .card:hover {
        transform: scale(1.05);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 3;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }
</style>



@push('styles')
<style>
    .video-thumbnail {
        transition: transform 0.3s ease;
        cursor: pointer;
    }

    .video-thumbnail:hover {
        transform: scale(1.1); /* Zoom in lebih besar saat hover */
        z-index: 2;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }

    .btn-youtube {
        transition: all 0.3s ease;
    }

    .btn-youtube:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
    }
</style>
@endpush


@section('content')
<div class="page-titles sticky-header text-center shadow-sm">
  <h2 class="mb-0">{{ $pageTitle }}</h2>
  <small>{{ $pageNote }}</small>
</div>

<div class="container">
    <div class="row">
        @foreach($rowData as $row)
            <div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body text-center">
                        <h5 class="card-title">{{ $row->label }}</h5>

                        <img src="https://img.youtube.com/vi/{{ $row->video_id }}/hqdefault.jpg"
                             alt="Thumbnail {{ $row->label }}"
                             class="img-fluid rounded mb-3 w-100 video-thumbnail" />

                        <a href="https://www.youtube.com/watch?v={{ $row->video_id }}"
                           class="btn btn-sm btn-danger d-inline-flex align-items-center gap-1 btn-youtube"
                           target="_blank"
                           rel="noopener noreferrer">
                            <i class="fab fa-youtube"></i> TONTON DI YOUTUBE
                        </a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>


@include('footer')
@stop